전체 데이터를 브라우저에 두는 광고 대시보드 만들기

토스 광고 대시보드는 광고주가 캠페인, 광고세트, 소재를 탐색하며 다양한 필터와 정렬을 반복적으로 적용하는 도구입니다. 기존 구조는 모든 조작이 서버 호출을 기다려야 했기 때문에, 탐색 과정에서 누적된 대기 시간이 사용자의 시도를 방해하는 원인이 되었습니다.

이러한 속도 문제 외에도 서버 기반 구조는 성과가 0인 항목 누락, 특정 ID 위치 파악 불가, 서버 미지원 정렬 제한, URL 상태 검증 실패 등 구조적 한계를 드러냈습니다. 이를 해결하기 위해 팀은 진입 시 전체 데이터를 브라우저로 가져오고, 이후 필터링·정렬·검색·페이지네이션을 클라이언트에서 처리하는 아키텍처로 전환했습니다.

이 결정의 핵심 전제는 데이터 상한의 존재였습니다. 현재 최대 2만 건의 데이터를 기반으로 설계 목표인 10만 건까지의 여유를 확보할 수 있음을 확인한 뒤, 메모리와 연산 시간의 한계를 계산할 수 있었습니다.

API는 응답 성격에 따라 Metadata(구조 정보), Performance(성과 지표), 부가 컬럼으로 분리했습니다. 이를 통해 Metadata가 도착하는 즉시 표를 점진적으로 렌더링하고, 성과가 0인 항목도 Metadata 기반의 행으로 유지되도록 했습니다. 또한 컬럼 추가 시 구조 변경 없이 ID 병합만으로 처리 가능해져, 특정 API 실패 시에도 나머지 화면의 안정성을 유지할 수 있게 되었습니다.