자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
박건영 토스 · 토스 기술 블로그
AI 핵심 요약
토스증권 PC의 종목 상세 화면에는 패널 이동·크기 조절, 추가·삭제, 저장과 태블릿 지원 등 복잡한 요구사항이 있었지만 이를 모두 만족하면서 디자인을 자유롭게 바꿀 수 있는 라이브러리를 찾지 못했습니다. 라이브러리 코드를 크게 커스텀하는 비용을 고려해 직접 구현하기로 하고, 패널을 좌표로 관리하는 대신 분할 방향과 비율을 담은 이진 트리로 레이아웃을 표현했습니다. 트리의 분할 비율을 바꾸거나 노드를 재구성해 패널을 조작하고, 재귀 순회로 좌표를 계산해 화면에 그렸으며, React에서는 배치와 조작을 담당하는 Headless 방식의 Movable Grid와 패널 콘텐츠를 분리했습니다. 레이아웃 트리와 패널 정보를 JSON으로 저장·복원해 요구사항을 구현했고, 자료구조를 중심에 두면 복잡한 인터랙션도 일관된 규칙으로 다룰 수 있음을 보여줍니다.
- 패널의 픽셀 좌표를 직접 관리하면 한 패널을 옮기거나 크기를 바꿀 때 주변 패널의 좌표까지 함께 조정해야 합니다.
- 분할 방향과 비율을 가진 스플릿 노드, 패널 노드로 레이아웃을 이진 트리로 표현하면 조작 규칙을 구조화할 수 있습니다.
- 트리를 재귀 순회하며 각 분할 영역의 위치와 크기를 계산하면 화면에 그릴 패널별 좌표를 얻을 수 있습니다.
- 레이아웃 구조와 패널 종류 정보를 분리해 저장하면 JSON으로 상태를 복원하기 쉽습니다.
- Headless 컴포넌트처럼 그리드의 배치·조작과 패널 내부 기능을 분리하면 패널 콘텐츠를 외부에서 유연하게 주입할 수 있습니다.
소개
왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.
비슷한 학습 자료
컨퍼런스 채널데브톡 2025
[Frontend] UI를 꼭 사람이 짜야 할까요?
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 고현선
