본문으로 건너뛰기

PULSE — 프로덕트 애널리틱스 대시보드

프로덕트 애널리틱스 대시보드

프로덕트 분석 대시보드. 다섯 개의 관리 화면을 한 화면으로 모으고, 모든 카드를 하나의 기간 필터가 움직이며, 숫자는 모두 등폭이라 레이아웃이 흔들리지 않는다.

2026-03
  • 풀스택 개발
  • 데이터 시각화
  • 프로덕트 인터페이스 디자인
Next.jsTypeScriptTailwind CSSRechartsVercel
PULSE — 프로덕트 애널리틱스 대시보드 미리보기
  1. 01

    다섯 개의 관리 화면을 하나의 화면에 통합

  2. 02

    7일·30일·90일, 단 하나의 기간 필터가 모든 카드를 제어

  3. 03

    숫자는 전부 등폭: 어떤 값도 레이아웃을 밀어내지 않음

브리프

구독 사업을 위한 프로덕트 분석 대시보드. 이런 도구의 문제는 결코 데이터가 아니다. 데이터가 너무 많다는 것이다. 반복 매출, 활성 계정, 전환율, 이탈, 채널별 획득, 요금제 분포 — 전부 중요하고, 그래서 아무것도 중요하지 않게 된다.

의뢰는 화면에 관한 것이었다. 보통 다섯 개의 탭에 걸쳐 읽는 것을, 한 화면에서 읽히게 만드는 일.

제약

  • 높은 밀도를 받아들인다. 대시보드를 여는 사람이 원하는 것은 전부를 보는 일이지, 클릭하는 일이 아니다.
  • 어떤 색도 혼자서 정보를 담아서는 안 된다. 색각 이상이 있는 사람이 읽어도 그래프는 읽혀야 한다.
  • 숫자는 늘 바뀐다. 값이 세 자리에서 네 자리가 될 때 레이아웃이 움직여서는 안 된다.

결정

내비게이션은 여섯 단이 아니라 두 단.

모든 것이 두 개의 입구 아래 놓인다. 관리 — 전체 개요, 오디언스, 매출, 퍼널, 리텐션 — 그리고 작업 공간 — 연동, 설정. 구분은 주제가 아니라 시간이다. 매일 들여다보는 것과, 한 번 정해 두면 되는 것. 이 구분 하나만으로 오가는 횟수의 절반이 사라진다.

기간 필터를 모든 것 위에.

7일, 30일, 90일. 페이지 맨 위의 선택기 하나가 모든 화면을 움직인다. 카드마다 필터를 두었다면 성립하지 않는 비교가 생겼을 것이다 — 30일 매출 옆에 7일 이탈률이 놓이는 식으로.

어디서나 등폭 숫자.

모든 값은 고정폭으로 짜여 있다. 금액 열은 소수점에서 정렬되고, 갱신되는 카운터가 레이아웃을 튀게 만들지 않는다. 스타일 세 줄짜리 디테일이지만, 도구가 얼마나 단단하게 느껴지는지를 바꾼다.

결과

한 화면에 담기는 전체 개요. 기간 비교가 붙은 순 반복 매출, 활성 계정, 전환, 이탈, 채널별 획득, 요금제 분포. 계정 표는 정렬할 수 있고, 데이터는 내보낼 수 있으며, 활동은 실시간으로 보인다.

다시 만든다면

알림이 없다. 열어야 한다는 걸 기억해야만 하는 대시보드는, 기억나는 날에만 쓸모가 있다. 다음 작업은 이탈률에 대한 설정 가능한 임계값과 이메일 알림이 될 것이다. 데이터는 이미 있다. 없는 것은 쓰임이다.

Aureon