색에 수면을 더하는 실험

스크롤할 때 물처럼 기울고, 멈추면 잔잔해지는 바를 만들어 봤습니다. 움직임을 장식으로 쓸 때와 수위 자체가 데이터를 나타낼 때를 비교합니다.

업무 기능과 별개로 진행한 개인 표현 실험입니다. 가상 데이터로 재구현했으며 제품 적용이나 사용성·성능 개선을 주장하는 사례는 아닙니다.

이 영역을 보면서 페이지를 스크롤하거나 ‘한 번 흔들기’를 눌러보세요. 숫자와 텍스트는 움직이지 않습니다.

01 · 수면은 장식

같은 크기의 칸에 얕은 수면을 더했습니다. 채움 높이는 수량이 아닙니다. 숫자로 값을 읽고, 물결은 별도의 표현으로 봅니다.

8그룹 A

그룹 A8개

17그룹 B

그룹 B17개

59그룹 C

그룹 C59개

16그룹 D

그룹 D16개

칸의 폭은 같고 수위가 전체 대비 비율을 나타냅니다. 작은 값도 그대로 낮게 표시하며, 글자는 수면 밖에 배치합니다.

그룹 A8%

그룹 B17%

그룹 C59%

그룹 D16%

한 줄을 각 상태의 비율대로 나눴습니다. 폭을 억지로 늘리지 않고 작은 구간의 이름과 수량은 아래 범례에서 읽도록 했습니다.

스크롤 변화량을 입력으로 받아 복원력과 감쇠를 적용하고 SVG 수면 경로를 갱신합니다. 하나의 애니메이션 루프를 공유하며, 움직임이 가라앉거나 화면 밖으로 나가면 갱신을 멈춥니다.

텍스트는 고정하고 수면의 변위만 제한합니다. 정지 버튼과 시스템의 움직임 최소화 설정을 따릅니다. 장식의 채움 높이와 데이터의 비율이 같은 의미로 읽히지 않도록 예제를 나눴습니다.

운영 화면에서 이 효과가 상태 파악에 도움이 되는지, 자원이 많아져도 같은 성능을 유지하는지는 검증하지 않았습니다. 구현 가능성과 제품에 필요한지는 별개의 판단으로 남겼습니다.