전체 데이터를 브라우저에 두는 광고 대시보드 만들기
Summary
필터 누를 때마다 수초 대기? 토스가 광고 데이터를 브라우저에 전부 올린 비결
체감 속도 0ms 달성과 유지보수 편의성까지 모두 잡은 프론트엔드 데이터 설계 혁신
토스 광고팀은 대시보드에서 잦은 탐색을 시도하는 광고주들에게 최적의 탐색 환경을 주기 위해 과감한 설계를 도입했습니다. 모든 데이터를 메모리에서 바로 처리하되 데이터 상한선을 철저히 분석하고, API 분할 및 점진적 렌더링을 활용해 로딩 지연 없는 완벽한 브라우저 중심 아키텍처를 구현했습니다. 이 놀라운 아키텍처 전환 과정과 그로 인해 얻은 구조적 이점을 생생하게 공유합니다.
- 01데이터 개수가 최대 10만 건을 초과하지 않는다는 전제 조건을 숫자로 확인하여 설계적 신뢰도 확보
- 02메타데이터와 성과 지표 API를 쪼개어 각각 독립적인 캐시 주기(5분, 5초)를 부여하는 고밀도 캐싱 실현
- 03표 골격이 잡히면 즉시 스켈레톤 UI를 그리며 필요한 데이터만 동적으로 채워 넣는 점진적 렌더링 제공
- 04목록의 소유권을 서버가 아닌 클라이언트 메타데이터로 일원화하여 0 성과 누락 문제를 우아하게 극복
- 05새로운 성과나 컬럼이 추가될 때 기존 정렬·필터 연산 없이 ID 기준으로 유연하게 통합 가능한 플러그인 스타일 구조 완성
RECOMMENDATION
제한된 양의 데이터를 기반으로 사용자의 복잡하고 잦은 상호작용과 탐색 연산이 발생하는 대시보드 유형의 서비스를 개선하려는 프론트엔드 실무 개발자에게 적극 추천합니다.
The Problem
광고 대시보드에서 검색, 필터링, 정렬 등의 탐색 조작 시 매번 서버를 호출하여 대기 시간이 수 초 이상 누적되는 성능 문제가 있었습니다. 또한 클라이언트가 전체 데이터를 갖지 못해 성과가 0인 데이터 누락, 페이지 위치 파악 불가, 정렬 사양 추가에 따른 서버 공수 등의 아키텍처적 한계가 존재했습니다.
The Solution
서버가 수행하던 정렬, 필터, 검색, 페이지네이션을 모두 브라우저 메모리로 이관하고 데이터가 상한선(최대 10만 건) 내에 있음을 확인한 뒤 전원 브라우저 로드 방식으로 전환했습니다. 초기 화면 진입 속도를 보장하기 위해 데이터를 메타데이터, 성과 지표, 부가 컬럼 API로 쪼개어 캐시 정책을 다르게 가져가고 화면을 점진적으로 렌더링했습니다.
The Result
필터링 및 정렬 작업 시간이 수백 밀리초에서 체감 대기 시간이 거의 없는 수준으로 크게 단축되었습니다. 또한 새로운 성과 데이터의 유무와 상관없이 정상적인 리스트 렌더링이 가능해졌으며, 구조 변경 없이 API를 병합하여 새로운 데이터 컬럼을 추가할 수 있는 높은 확장성을 확보했습니다.
Trade-off
데이터가 분할되어 지속적으로 로딩됨에 따라 아직 도착하지 않은 데이터 기준의 조작을 막기 위해 UI 인터랙션(예: 정렬 기능 잠금)을 동적으로 제어해야 하는 까다로운 클라이언트 상태 관리가 요구됩니다. 데이터가 들어올 때마다 화면을 지속적으로 다시 계산하여 업데이트해야 하는 비용이 발생합니다.
