목차
Dotorian의 다람쥐는 홈 화면에 잠깐 붙인 장식이 아니다. 페이지 아래를 돌아다니고, 데스크톱에서는 커서의 도토리를 따라오며, 모바일에서는 손끝 근처의 도토리를 따라간다. 목적은 사용자가 “움직이는 그림”을 보는 것이 아니라, 사이트가 입력에 반응한다는 감각을 받게 하는 것이었다.
먼저 입력 환경을 나눴다
같은 동작을 데스크톱과 모바일에 억지로 맞추지 않았다. 컴포넌트는 pointer: fine과 hover: hover를 함께 확인한다.
- 정밀 포인터와 hover가 있는 데스크톱: 도토리 커서를 보여주고, 다람쥐가 커서 위치를 추적한다.
- 터치 환경: 커서를 바꾸지 않는다. 손가락이 닿을 때만 도토리를 보여주고, 손을 떼면 다람쥐는 아래에서 자율적으로 배회한다.
이 구분이 없으면 모바일에서 가짜 커서가 남거나, 마우스가 없는 화면에서 데스크톱 규칙이 그대로 실행된다.
스프라이트를 상태로 나눴다
한 장의 GIF를 반복하는 대신 run, grab, alert, lookup, plant, walkCarry, sprout 스프라이트를 상태별로 분리했다. 엔진은 현재 위치와 커서/터치의 거리를 보고 roam, follow, grab 같은 상태를 바꾼다.
특히 도토리가 화면 하단의 잡기 범위에 들어오면 다람쥐가 멈추지 않고 계속 접근하도록 했다. 단순히 “가까우면 반응”하는 것보다, 사용자가 작은 이야기를 끝까지 볼 수 있게 하기 위해서다. 도토리를 집은 뒤에는 운반하고, 심고, 싹이 남는다.
커서는 화면 전체에 남기되, 콘텐츠를 방해하지 않게 했다
데스크톱 도토리 커서는 브라우저 기본 커서를 대체한다. 클릭 중에는 더 작은 프레임으로 바꾸고, 메뉴 페이지에서는 방향이 다른 프레임을 쓴다. 하지만 실제 링크·버튼의 클릭 동작을 가로채면 안 된다. 그래서 인터랙션 레이어는 aria-hidden이며, 이벤트 처리와 정리는 엔진 내부에서 끝낸다.
페이지를 옮길 때도 엔진을 매번 새로 만들지 않는다. 홈과 메뉴의 차이는 setHome()으로 커서와 안내 상태만 바꾼다. 이미 심긴 싹과 진행 중인 상태를 잃지 않기 위해서다.
애니메이션의 기준은 눈길을 붙잡는 것이 아니었다
사이트 전체에서 계속 움직이는 요소는 금방 피로해진다. 다람쥐는 화면 하단에 두고, 본문을 읽는 영역을 침범하지 않게 했다. prefers-reduced-motion 환경에서는 자율 배회와 새싹·안내 애니메이션을 멈추되, 사용자가 직접 시작한 상호작용은 유지한다.
이번 기능에서 남긴 기준은 간단하다.
애니메이션은 페이지에 붙는 장식이 아니라, 사용자의 입력을 더 이해하기 쉽게 만드는 반응이어야 한다.
그래서 다음에 새 인터랙션을 넣더라도 먼저 물어볼 생각이다. 이 움직임이 정보나 조작을 더 명확하게 하는가, 아니면 그냥 시선을 뺏는가.