성과를 한눈에. 단, 거짓말하지 않게.

예전에 한 사장님이 “방문자 수 큰 거 하나만 화면 가운데 큼지막하게 박아 주세요”라고 했습니다. 박아 드렸죠. 한 달 뒤 다시 만났더니 “숫자는 늘었는데 뭘 해야 할지 모르겠다”고 하셨습니다. 그게 허영지표입니다. 기분은 좋은데 결정을 못 바꾸는 숫자. 그래서 저희는 대시보드를 ‘예쁜 숫자판’이 아니라 ‘다음 행동을 고르는 도구’로 봅니다. 아래가 그 합작의 결과입니다.

그래서, 직접 만져보세요

설명보다 빠릅니다. 스크롤로 차트를 차오르게 하고, ‘개선 적용’ 버튼으로 퍼널이 어떻게 회복되는지 보세요. 모든 수치는 예시 데이터입니다.

왜 차트와 퍼널을 ‘같이’ 두나요?

차트는 ‘얼마나 오고 있나’를 보여줍니다. 위 막대처럼 주간 추세가 차오르면 “요즘 트래픽이 좋다”는 건 알 수 있죠. 하지만 거기서 끝나면 다음 행동이 안 나옵니다. 퍼널은 ‘그 트래픽이 어디서 새는지’를 보여줍니다. 위 퍼널을 보면 방문 100에서 문의 시작 20으로 뚝 떨어집니다. 둘을 같이 두는 순간 “방문은 느는데 문의 시작에서 빠진다 → 문의 폼/CTA를 손봐야겠다”는 결론이 나옵니다. 떨어뜨려 두면 절대 안 나오는 결론입니다.

‘개선 적용’ 버튼은 무엇을 보여주나요?

위 퍼널의 ‘개선 적용’을 눌러보세요. 탐색 55→72, 문의 시작 20→40, 완료 8→22로 막대가 회복됩니다(예시 데이터). 이건 “이만큼 오릅니다”라는 약속이 아니라, 개선 전/후를 같은 화면에서 비교하는 방식을 보여주는 시연입니다. 실제로는 폼 단축·CTA 카피·로딩 속도 같은 가설을 하나씩 적용하고, 이 막대가 정말 움직였는지 데이터로 확인합니다.

숫자가 차오르는 모션은 꼭 필요한가요?

아니요. ‘주간 문의 0→18’ 카운트업은 시선을 그 숫자로 끄는 장치일 뿐, 숫자 자체를 바꾸지 않습니다. 저희가 지키는 규칙은 두 가지입니다. 첫째, 한 번만 차오르고 멈춘다. 끝없이 반복하는 숫자는 정보가 아니라 소음입니다. 둘째, prefers-reduced-motion을 켠 사용자에게는 애니메이션 없이 최종 값을 바로 보여줍니다. 멋과 배려는 같이 갑니다.

가장 경계하는 것 — 허영지표

대시보드에서 제일 위험한 건 ‘크고 예쁘지만 결정을 못 바꾸는 숫자’입니다. 총 방문 수, 총 페이지뷰, 팔로워 수 같은 절대값이 대표적입니다. 그래서 저희는 막대 차트(추세) 옆에 반드시 전환 지표를 둡니다. 위 퍼널의 ‘문의 시작률(20%)’, ‘완료율(8%)’ 같은 비율 지표가 그것입니다. 방문이 두 배가 돼도 완료율이 반토막이면 결과는 그대로니까요. 비율을 같이 보면 그 함정에 안 빠집니다.

이 대시보드는 실제 데이터와 어떻게 이어지나요?

이 페이지 수치는 전부 시연용 예시 데이터입니다. 실제 운영에서는 같은 컴포넌트에 GA4·서버 로그·문의 폼 제출 같은 소스의 값을 흘려 넣습니다. 중요한 건 순서입니다. 측정 설계가 먼저 되어 있어야(어떤 이벤트를 ‘문의 시작’으로 칠지 등) 대시보드가 거짓말을 하지 않습니다. 측정이 엉성하면 아무리 예쁜 차트도 틀린 결정을 부릅니다.

측정 → 해석 → 개선, 이 루프가 핵심입니다

대시보드는 루프의 한 칸일 뿐입니다. 측정(데이터를 모은다) → 해석(차트·퍼널로 어디가 문제인지 읽는다) → 개선(가설을 적용한다) → 다시 측정. 위 섹션은 이 루프를 한 화면에 압축한 것입니다. 차트로 추세를 보고, 퍼널로 새는 곳을 찾고, ‘개선 적용’으로 전/후를 비교하고, 해석 카피가 “그래서 뭘 하라”를 말합니다. 숫자만 띄우는 대시보드와 다른 점이 바로 이 마지막 칸입니다.

해석 카피가 빠지면, 대시보드는 절반만 일합니다

차트·퍼널은 사실을 보여줄 뿐 ‘판단’은 안 합니다. 그래서 저희는 모든 지표 옆에 한 문장의 해석을 답니다. “방문 대비 문의 시작 20% — 폼 앞에서 가장 많이 이탈” 같은 식으로요. 이 한 문장이 비전문가도 바로 다음 행동을 고르게 합니다. 데이터를 ‘읽어 주는 사람’이 합작에 들어가야 대시보드가 진짜 일을 합니다.

합작 분해 — 누가 무엇을 했나

저는 대시보드 한 섹션을 만들 때 ‘측정→해석→개선’ 루프의 어느 칸을 누가 맡는지부터 적습니다.

‘해석’ 칸이 빠지면 차트가 아무리 예뻐도 대시보드는 절반만 일한다는 걸, 저는 표로 못 박습니다.

그리고 저는 이 대시보드 한 모듈에 들어간 기술을 칩으로 펼쳐 둡니다 — 수치는 전부 예시 데이터입니다.

측정→해석→개선 루프를 한 화면에 압축하려고 고른 도구들입니다.

이 작품에 들어간 기술

이 섹션은 네 가지 손길의 합작입니다. 각 파트가 어떻게 만드는지는 따로 글로 적었습니다.

• 분석 · 전환 퍼널 — 어디서 새는지를 단계별 막대로 그리고, 개선 전/후를 같은 화면에서 비교합니다. 자세히: 전환 퍼널 만드는 법.
• 측정 · 데이터 연결 — 어떤 이벤트를 어떤 지표로 칠지 설계하고 소스를 붙입니다. 자세히: 측정·애널리틱스 설계.
• 모션 — 차오르는 막대와 카운트업은 transform·opacity 기반으로 가볍게, 한 번만 재생하고 prefers-reduced-motion을 존중합니다. 이 페이지에서 실제로 동작하는 코드입니다.

항목	숫자 나열 대시보드	해석된 대시보드
의사결정	“숫자는 늘었는데 뭘 하지?”	“문의 시작에서 새니 폼을 손본다”
신뢰	허영지표·근거 불명	측정 설계 위의 전환 지표
실행	다음 행동이 안 나옴	전/후 비교로 가설을 검증

대시보드를 이렇게 보는 팀이라면, 그 위 섹션도 그 아래 폼도 같은 태도로 만듭니다. 당신의 사이트, 어떤 숫자를 어떻게 보여 드릴까요?