키네틱 타이포그래피: 텍스트가 웹의 주인공이 된 과정

가변 폰트, 스크롤 연동 애니메이션, 뷰포트 기반 크기 조절 덕분에 예전엔 사진이 필요했던 페이지를 텍스트가 지탱합니다. 더 가볍고, 빠르고, 접근성 높고 — 그리고 망치기 쉽습니다.

Written and reviewed by Artem Palamarchuk, Founder of BLEX STUDIO.

타이포그래피는 더 이상 조연이 아니다

20년 동안 히어로 섹션은 사진 위에 얹은 글자였습니다. 감정의 일은 사진이 하고 텍스트가 설명했습니다. 이 관계가 뒤집혔습니다. 잘 만든 사이트의 상당수에서 이제 타이포그래피가 곧 비주얼입니다. 뷰포트에 맞춰 커지고, 스크롤에 반응하고, 굵기와 폭이 실시간으로 바뀝니다. 사진은 주인공이 아니라 뒷받침하는 증거가 되었습니다.

이건 단순한 미감의 반동이 아닙니다. 유행하는 선택이 동시에 기술적으로도 우월한, 드문 종류의 트렌드입니다. 이미지가 메가바이트일 때 텍스트는 킬로바이트이고, 스크린 리더와 기계가 읽을 수 있으며, 픽셀이 깨지지 않고, 별도 에셋 파이프라인 없이 어떤 화면에도 적응합니다.

무엇이 타이포그래피를 "키네틱"하게 만드는가

가변 폰트. 굵기·폭·광학 크기의 연속 범위를 담은 한 개의 파일. 여섯 개 파일이 한 번의 요청이 되고, 축을 부드럽게 애니메이션할 수 있습니다.

뷰포트 기반 크기. `clamp()`와 `vw` 단위로, 브레이크포인트를 쌓지 않고도 제목이 어떤 너비에서든 화면을 채웁니다.

스크롤 연동 애니메이션. 최신 CSS 스크롤 연동 애니메이션은 매 프레임 재계산하는 자바스크립트 리스너 없이 변형을 스크롤 위치에 묶습니다.

구조로서의 타이포그래피 대비. 큰 디스플레이 서체와 고정폭 메타데이터의 조합만으로 장식 없이 위계가 생깁니다.