웹 데이터 시각화 개발 사례: 브랜드 웹 서비스 개편 차트

01 / 04

제품 · 프로모션 데이터를 차트로 옮긴 웹 화면

글로벌 생활용품 기업의 공식 웹 서비스 개편에서, 제품과 프로모션에 관한 데이터를 차트로 보여 주는 화면을 구현했습니다. 이 회사는 여러 생활용품 · 화장품 브랜드를 국내에 공급하고, 공식 웹 서비스는 그 브랜드들의 제품 정보를 소비자에게 전하는 창구입니다. 개편된 사이트의 목적이 제품 · 브랜드 정보를 분명하게 전하는 것이었고, 차트 화면은 그 정보를 데이터로 보여 주는 부분을 맡았습니다. 숫자를 하나씩 읽지 않아도 무엇이 크고 무엇이 늘었는지 먼저 보이게 하는 것이 차트의 기준이었습니다.

02 / 04

한 번 만들어 여러 화면에서 다시 쓰는 차트 부품

웹 서비스 곳곳에서 쓸 차트와 시각화 화면을 다시 쓸 수 있는 부품으로 만들었습니다. 같은 부품에 다른 데이터를 넣으면 다른 화면에서도 같은 모양과 동작의 차트가 그려집니다. 개편 중에 차트가 들어갈 화면이 늘어나도 매번 새로 만들 필요가 없습니다.

03 / 04

데이터가 바뀌면 화면이 따라 움직이는 인터랙션

차트는 데이터의 변화가 화면에 바로 드러나야 정보로 읽힙니다. 값이 바뀌면 그 변화를 눈으로 따라갈 수 있게 차트가 다시 그려지도록 인터랙션과 표시 방식을 설계했습니다. 변화를 숫자로 비교하지 않아도 막대와 선의 움직임으로 먼저 알아보게 하는 것이 기준이었습니다.

04 / 04

개편된 사이트의 톤 안에 놓인 시각화 영역

차트 화면은 전면 개편되는 웹 서비스의 다른 화면과 같은 품질과 표현을 갖춰야 했습니다. 개편의 흐름에 맞춰 시각화 영역의 화면 품질과 콘텐츠 표현을 정리하고, 제품 · 브랜드 정보가 명확하게 전달되도록 했습니다. 이 작업은 디지털 에이전시가 수행한 개편 프로젝트에서 시각화 영역을 맡은 부분 참여입니다.

웹 서비스 데이터 시각화

제품 · 프로모션 데이터를 차트로 옮긴 웹 화면

한 번 만들어 여러 화면에서 다시 쓰는 차트 부품

데이터가 바뀌면 화면이 따라 움직이는 인터랙션

개편된 사이트의 톤 안에 놓인 시각화 영역

이 작업의 포인트

인사이트

GA4 client_storage: 'none'은 정말 쿠키를 막을까?

GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기

중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?

Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기