Experiment
커서를 따라 흐르는 배경 실험
움직임이 방해가 되지 않는 선을 찾아본 WebGL 실험. 감속·밀도·대비를 조절해 가며 기준을 정리했습니다.
대표 이미지는 아직 준비 중입니다.
src/img/projects/flow-field/hero-1200.jpg 를 넣으면 이 자리에 표시됩니다.
배경과 목표
배경이 계속 움직이는 사이트는 처음엔 눈길을 끌지만 글을 읽을 때 방해가 됩니다. 어느 정도까지가 괜찮은지 직접 숫자를 바꿔 가며 확인해 보고 싶었습니다.
- 움직임이 본문 읽기를 방해하기 시작하는 지점 찾기
- 움직임 최소화 설정을 켠 사용자에게는 정지 상태를 제공하기
- 저사양 기기에서 프레임이 떨어질 때 자동으로 밀도를 줄이기
담당한 일과 작업 과정
-
변수 분리
선 개수·속도·감속·대비를 화면에서 바로 조절할 수 있게 만들고, 본문을 올려 둔 상태로 비교했습니다.
-
정지 상태를 기본값처럼
prefers-reduced-motion 을 켠 환경에서는 애니메이션 없이 한 프레임만 그립니다. 디자인이 깨지지 않게 정지 상태도 따로 다듬었습니다.
-
성능에 따라 줄이기
프레임 시간을 측정해 느려지면 선 밀도를 단계적으로 낮춥니다. 멈추는 대신 조용해지는 쪽을 골랐습니다.
결과물
확인한 것과 배운 점
- 대비를 낮추는 것만으로 같은 움직임이 훨씬 덜 거슬린다는 것을 확인했습니다.
- 실험이지만 정지 상태를 먼저 만들어 두는 습관이 생겼습니다.
SAMPLE · 공개 링크나 성과 수치는 넣지 않았습니다
Contact
작업 이야기를 나눠요
만들고 싶은 것이 있다면 메일로 알려주세요. 아직 정리되지 않은 아이디어여도 괜찮습니다.
Email
hello@akeweb.com
대한민국 · 원격 협업 가능 · 사이드 프로젝트 · 외주 문의 열려 있음 (SAMPLE)
SAMPLE · 연락처와 링크는 교체용 샘플입니다