숫자로 신뢰를 주는 섹션은, 혼자 못 만듭니다.

예전에 한 클라이언트가 “경쟁사 사이트엔 숫자가 막 올라가는 멋진 섹션이 있던데, 우리도 넣어주세요”라고 했습니다. 만들어 드리는 건 어렵지 않았습니다. 어려운 건 그다음 질문이었죠. “그 숫자, 뭘 넣을까요?” 한참 침묵이 흘렀습니다. 멋진 모션은 30분이면 만들지만, 거기 올릴 ‘진짜 숫자’를 찾는 데는 며칠이 걸립니다. 그리고 그게 이 섹션의 전부입니다.

그래서, 합작이 어떻게 보이는지 직접 보세요

아래 위젯은 화면에 들어오면 숫자가 오르고 막대가 차오릅니다. 모션·데이터·등장 효과가 한 곳에서 만나는 모습입니다. 숫자는 데모용 예시 데이터입니다.

이 섹션, 정말 한 사람이 다 만드나요?

아니요. 숫자가 0에서 또르르 오르는 카운트업은 모션 담당의 손에서 나옵니다. 막대가 바닥에서 차오르는 미니 차트는 데이터·측정 담당이 ‘무엇을, 어떻게 잴지’를 정한 다음에야 그려집니다. 화면에 부드럽게 등장하는 효과도 모션 쪽이죠. 그리고 가장 중요한 한 사람 — 그 숫자가 진짜인지 따지는 데이터 정직 담당이 빠지면, 위 셋은 ‘예쁜 거짓말’이 됩니다.

카운트업 애니메이션이 숫자를 더 커 보이게 하나요?

숫자 자체는 한 치도 안 바뀝니다. 카운트업이 하는 일은 시선을 그 숫자 위에 1초쯤 더 머물게 하는 것뿐입니다. 그 1초가 ‘읽고 → 기억’으로 이어집니다. 위 위젯의 data-to="50"은 끝에 정확히 50에서 멈춥니다. 우리가 손대는 건 ‘어떻게 보여줄까’지, ‘얼마로 보일까’가 아닙니다. 표시되는 최종값은 무조건 실제 수치여야 합니다.

그럼 어떤 숫자를 올려야 하나요?

의사결정과 사업 성과에 직접 닿는 숫자만 올립니다. 예를 들어 ‘완료한 프로젝트 수’, ‘문의 → 상담 전환율’, ‘평균 응답 시간’처럼 검증 가능하고 의미 있는 값이죠. 반대로 ‘누적 페이지뷰 100만’ 같은 건 커 보여도 사업과 연결이 약하면 올리지 않습니다. 화면에 올라가는 모든 숫자는 “이게 왜 중요한가?”에 한 문장으로 답할 수 있어야 합니다.

허영지표(vanity metric), 왜 경계하나요?

허영지표는 보기엔 좋고 결정엔 쓸모없는 숫자입니다. 방문수·팔로워·총 클릭 같은 것이 대표적이죠. 문제는 이런 숫자가 클수록 ‘일을 잘하고 있다’는 착각을 준다는 점입니다. 저희는 성과 섹션에서 이런 숫자를 빼거나, 꼭 써야 한다면 ‘전환’ 같은 결과 지표와 나란히 둬서 맥락을 줍니다. 큰 숫자보다 정직한 숫자가 더 오래 신뢰를 삽니다.

예시 데이터와 실제 수치는 어떻게 구분하나요?

흐리면 안 됩니다. 그래서 위 위젯에는 “예시 데이터”라고 또렷이 적어 뒀습니다. 실제 납품 사이트에서는 폼 제출 로그·애널리틱스처럼 측정 도구에서 나온 값만 쓰고, 필요하면 출처와 기준 기간을 함께 남깁니다. 데모와 실측을 같은 자리에서 섞어 보여주는 순간, 방문자는 모든 숫자를 의심하기 시작합니다.

이 모션, 성능과 접근성은 괜찮나요?

괜찮습니다. 카운트업은 requestAnimationFrame으로 부드럽게, 막대는 transform·height 전환으로 처리하고, 화면에 들어올 때 딱 한 번만 돕니다. 외부 차트 라이브러리는 0개라 가볍습니다. 그리고 prefers-reduced-motion을 켠 사용자에게는 애니메이션 없이 최종값을 바로 보여줘 멀미를 만들지 않습니다. 멋과 배려는 같이 갑니다.

이 작품에 들어간 기술

이 한 섹션 안에 세 담당의 기술이 겹쳐 있습니다. 각자가 어떻게 일하는지는 따로 적어 뒀습니다.

• 카운트업·등장 모션 — 화면에 들어올 때 숫자가 오르고 요소가 나타나는 모션의 원리. → 모션 담당자의 스크롤 애니메이션 모드
• 차트·측정 — 무엇을, 어떻게 재서 막대로 그릴지. → 측정 담당자의 데이터 노트
• 데이터 정직 — 올리는 숫자가 진짜인지 지키는 기준. → 신뢰(E-E-A-T)를 만드는 법

이 성과 섹션을 담당별로 분해하면 무엇이 겹쳐 있는지 보입니다.

그래서 이 한 섹션에 실제로 들어간 기술은 다음과 같습니다.

숫자를 이렇게 다루는 팀이, 사이트 전체를 만듭니다

성과 섹션 하나에 ‘진짜 숫자만 올린다’는 원칙을 지키는 사람이라면, 카피도 속도도 같은 태도로 다룹니다. 당신의 사이트에는 어떤 숫자를 자랑하면 좋을까요? 함께 진짜 숫자부터 찾아 드립니다.