网页服务数据可视化
全球日用消费品企业韩国法人全面改版官方网页服务时,我们负责展示产品与促销数据的图表界面。改版的目的,是重新整顿连接消费者与品牌的线上渠道,并清楚传达产品与品牌信息。图表即使数字正确,变化若不能一眼看出也就传达不了信息,因此我们设计了让数据变化立即呈现在界面上的显示方式与交互。工作范围包括可视化部分的界面,以及在多处复用的图表组件。
把产品与促销数据变成图表的网页界面
在全球日用消费品企业官方网页服务的改版中,我们实现了以图表展示产品与促销相关数据的界面。该公司在韩国供应多个日用品与化妆品品牌,官方网页服务是向消费者传达这些品牌产品信息的窗口。改版后网站的目的是清楚传达产品与品牌信息,图表界面负责用数据呈现其中的部分。图表的标准是:不必逐个读数字,也能先看出哪个大、哪个增长了。

一次构建、多处复用的图表组件
我们把网页服务各处要用的图表和可视化界面做成了可复用的组件。给同一个组件放入不同的数据,在其他界面上也能画出外观与交互相同的图表。改版过程中需要图表的界面再多,也不必每次从头制作。

数据一变、界面随之而动的交互
图表只有让数据变化立即呈现在界面上,才能被当作信息读懂。我们设计了交互与显示方式,让数值变化时图表以肉眼能跟上的方式重新绘制。标准是:不必比较数字,也能先从柱和线的变化中察觉。

融入改版网站整体风格的可视化区域
图表界面必须与全面改版的网页服务中其他界面具有同样的品质与呈现。我们配合改版进程,整理了可视化部分的界面品质与内容呈现,使产品与品牌信息得以清楚传达。这项工作是在数字代理公司执行的改版项目中负责可视化部分的局部参与。

项目亮点
展示产品与促销数据的网页图表界面
可在多个界面复用的图表与可视化组件
让数据变化即时可见的显示方式与交互
洞察
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…



