.png&w=1200&q=75)
대시보드의 목록 기준부터 바꿨다
토스의 김동희 프론트엔드 개발자는 광고주 대시보드의 필터·정렬·검색·페이지 처리를 서버에서 브라우저로 옮긴 사례를 소개했다. 캠페인·광고세트·소재를 관리하는 화면에서 반복 조작마다 서버를 기다렸고, 성과 집계에 행이 없는 캠페인이 정렬 결과에서 사라지는 문제도 있었다. 회사는 목록의 존재와 성과 값의 공급을 구분해 구조를 바꿨다.
결정의 전제는 광고 계정별 데이터 규모였다. 당시 가장 큰 계정의 캠페인·광고세트·소재를 합쳐 약 2만 건이었고 설계 목표를 10만 건으로 잡았다고 설명했다. 모든 서비스 데이터를 브라우저로 옮긴 것이 아니라 이 계정 목록의 상한을 바탕으로 판단한 사례다. 원문은 데이터가 제한 없이 늘어나는 서비스에 같은 결정을 적용하지 말라고 강조한다.
행은 먼저 만들고 값은 나중에 붙인다
팀은 이름·상태·부모 ID를 담는 메타데이터, 성과 지표와 부가 컬럼의 API를 분리했다. 메타데이터가 먼저 도착하면 표를 그리고 나머지 값은 ID로 합친다. 목록을 메타데이터가 결정하므로 성과가 없는 캠페인도 남는다. 회사는 메타데이터 캐시 수명을 5분, 성과 캐시는 5초로 각각 설정했다고 밝혔다.
값이 도착하지 않은 컬럼의 정렬은 잠그고, 응답이 병합될 때 데이터 버전을 올려 결과 캐시를 갱신한다. 전체 순서를 알게 되면서 특정 ID가 있는 페이지로 이동하고, 이미 가진 값으로 새 정렬을 추가하며 URL에 담긴 부모·자식 선택도 검사할 수 있었다. 부분적인 API 실패는 관련 컬럼의 안내로 처리해 표 전체의 실패와 분리했다.
전체 데이터는 워커가 소유한다
무거운 연산은 웹 워커에 맡기고 화면에는 현재 페이지 100건만 전달한다. 공통 인증·오류·재시도 처리가 있는 기존 HTTP 클라이언트를 유지하기 위해 요청은 메인 스레드에서 보내되, 응답 본문을 ArrayBuffer로 받아 워커에 전송하고 파싱은 워커가 수행한다. 회사는 같은 전체 데이터를 양쪽에 보관하지 않는 방식으로 복제와 메모리 비용을 줄였다고 설명했다.
MDN은 ArrayBuffer를 전송하면 자원이 다른 문맥으로 이동해 원래 버퍼에서 사용할 수 없게 된다고 설명한다. 토스의 선택은 이 소유권 이전을 활용한 것이다. 워커가 종료되면 그 안의 전체 데이터도 사라지므로 서버에서 다시 받아 복구한다. 대기 중인 요청이 있으면 오류를 알리고 사용자가 재시도하며, 없으면 캐시를 무효화해 재로딩하는 두 경로를 뒀다.
연산 시간과 화면 정지를 구분한다
워커의 장점은 같은 연산을 다른 스레드로 옮겨 화면을 다루는 시간을 확보하는 데 있다. 데이터를 많이 갖는 문제와 DOM을 많이 그리는 문제도 다르다. 이 화면은 100행 단위 페이지를 유지했으므로 전체 목록이 크다는 이유만으로 가상 스크롤을 도입할 필요가 없었다. 구조를 선택할 때 실제로 막히는 계층을 구분한 점이 참고할 만하다.
서로 다른 API를 합치는 방식은 첫 화면을 빠르게 보여 주지만, 아직 없는 값을 정상 상태로 다루는 규칙이 필요하다. 빈 값과 0, 실패와 로딩이 구분되지 않으면 정렬 결과나 성과 판단이 잘못될 수 있다. 컬럼별 조작 가능 시점과 갱신 버전을 정한 설계는 점진적 로딩을 화면의 일관성과 연결한다.
첫 진입과 복구 비용은 계속 남는다
원문은 첫 진입이 여전히 느리며 큰 계정일수록 비용도 크다고 인정한다. 첫 페이지만 받으면 빠르게 시작할 수 있지만, 전체 순서 계산과 계층 검증의 이점을 다시 잃는다. 따라서 이 선택을 평가할 때는 조작 속도뿐 아니라 모든 기능이 사용 가능해지는 시점과 메모리 사용, 워커 복구 때의 재다운로드도 함께 살펴야 한다.
또 느린 화면 때문에 광고주가 탐색을 포기한다는 설명은 필자가 세운 가정이며 측정된 행동 개선 결과가 아니다. 다른 팀은 사용자 탐색이 실제로 늘어나는지 별도로 관찰할 수 있다. 계정 데이터 상한과 열별 정보 요구가 바뀌면 판단도 다시 해야 한다. 이 사례의 가치는 브라우저 연산의 보편적 우월성보다 어떤 조건에서 목록을 소유하기로 했는지와 감수한 비용을 남긴 데 있다.
출처
토스테크의 원출처와 본문에 표시한 참고자료를 바탕으로 한국어로 재구성했습니다. ‘ARCH.B 분석’은 자료를 읽고 덧붙인 편집 해석입니다.
전체 데이터를 브라우저에 두는 광고 대시보드 만들기 (새 창)
