프로모션용 데이터 차트
체중 관리 시리얼 브랜드의 웹 프로모션에서, 참여자가 입력한 기록을 차트로 보여 주는 화면을 개발했습니다. 캠페인은 소비자가 식단과 체중 변화를 스스로 추적하고 확인하는 인터랙티브 콘텐츠를 웹에서 제공했습니다. 참여형 캠페인에서 차트는 참여자가 자기 변화를 확인하는 곳이라, 체중 변화 · 목표 · 진행 상태가 한눈에 읽히는 데 집중했습니다. 작업은 데이터에 따라 반응하는 차트 화면 구현입니다.
참여자가 넣은 값이 곧바로 그려지는 개인 기록 그래프
같은 브랜드가 여러 나라에서 연 체중 관리 캠페인 웹은 개인별 식단 계획 · 장보기 목록 · 운동 팁과 함께, 참여자가 자기 성과를 확인하는 기록 화면을 두었습니다. 체중 관리 캠페인 웹에서는 참여자가 자기 식단과 체중 변화를 직접 입력하고 확인했습니다. 참여자가 입력한 정보와 캠페인 데이터를 차트로 보여 주는 화면을 구현했습니다. 숫자 목록 대신 그래프로 보여 주어, 기록이 쌓이는 모습이 먼저 눈에 들어오게 했습니다.

체중 변화 · 목표 · 진행 상태를 한 번에 읽는 구성
캠페인 차트 화면은 체중 변화, 목표, 진행 상태 세 가지를 함께 보여 줍니다. 참여자는 체중이 어떻게 바뀌었는지, 목표가 어디인지, 지금 어디까지 왔는지를 한 화면에서 확인합니다. 체중 관리를 돕는 브랜드의 캠페인이라, 차트가 다루는 값도 참여자 자신의 몸무게와 목표였습니다.

고정 그림 대신 데이터에 반응하는 차트
캠페인 차트는 정적인 이미지가 아니라 데이터에 따라 반응하는 인터랙티브 화면으로 만들었습니다. 참여자의 기록이 바뀌면 같은 화면에서 차트도 그에 맞게 다시 그려집니다. 미리 그려 둔 그림으로는 참여자마다 다른 기록을 보여 줄 수 없습니다.

캠페인 톤을 지키며 숫자를 읽히게 한 균형
캠페인 차트는 마케팅용 웹 콘텐츠 안에 놓이는 화면이라 브랜드 캠페인의 톤을 따라야 했습니다. 차트와 주변 콘텐츠가 자연스럽게 이어지도록 화면을 구성하고, 정보 전달과 시각적 표현 사이의 균형을 맞췄습니다. 이 작업은 디지털 에이전시가 진행한 캠페인의 일부였고, 이때 쌓은 차트 작업은 같은 브랜드의 모바일 앱 개발로 이어졌습니다.

이 작업의 포인트
참여자가 입력한 기록을 그리는 웹 차트
체중 변화 · 목표 · 진행 상태를 한 화면에
고정 이미지 대신 데이터에 반응하는 인터랙티브 화면
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



