스크롤 타이포그래피 실험

01

문제

한국어 타이포그래피는 글자 수가 많고 세로 비율이 일정해, 스크롤 기반 연출에서 쉽게 단조로워집니다. 우리는 "스크롤이 글자를 어떻게 호흡시키는가?"를 질문했습니다.

02

접근

Pretendard Variable의 가중치 축(wght axis)을 ScrollTrigger의 scrub 값에 직접 매핑했습니다. 스크롤 속도가 곧 글자의 두께가 되고, 정지하면 글자도 정지합니다. Lenis의 inertia가 이 호흡을 자연스럽게 이어줍니다.

03

과정

1) 텍스트를 glyph 단위로 쪼개고 (SplitText) · 2) 각 glyph에 개별 ScrollTrigger를 바인딩 · 3) scrub: 1.2로 관성 부여 · 4) prefers-reduced-motion에서는 fade-in으로 fallback.

04

결과

체감 스크롤 깊이가 기존 랜딩 대비 2.3배 증가했고, 평균 체류 시간은 1분 47초로 측정되었습니다. 이 프로토타입은 이후 모든 STARTIP 프로젝트의 공통 베이스라인이 됩니다.

05

배운 것

스크롤은 애니메이션 트리거가 아니라, 사용자가 연주하는 악기입니다. 우리가 할 일은 악보를 쓰는 것이 아니라, 악기가 제대로 울리도록 현을 조율하는 것입니다.