작은 회사 웹사이트에서 흔히 보는 연출이 있습니다. 화면을 내리면 소개 글이 아래에서 살며시 떠오르고, 사진이 서서히 또렷해지고, 페이지 맨 위에는 얼마나 읽었는지 알려주는 진행 막대가 차오릅니다. 보기에는 작은 효과지만, 지금까지 이걸 구현하려면 거의 예외 없이 자바스크립트 애니메이션 라이브러리를 통째로 불러와야 했습니다. 효과 하나를 위해 수백 킬로바이트짜리 코드를 손님 휴대폰에 떠안기던 셈이죠.
그 무게가 코드 몇 줄로 사라지는 시대가 왔습니다. 스크롤 기반 애니메이션(Scroll-driven Animations)이 이제 CSS 표준으로 들어왔기 때문입니다.
스크롤을 '시간'처럼 다루는 발상
기존 CSS 애니메이션은 시간의 흐름에 맞춰 재생됐습니다. 페이지가 열리면 1초 동안 요소가 떠오르는 식이죠. 새로운 방식은 그 기준을 시간이 아니라 스크롤 위치로 바꿉니다. 손님이 화면을 내린 만큼만 애니메이션이 진행되고, 위로 다시 올리면 그대로 되감깁니다. 스크롤 막대를 손으로 쥐고 영상을 앞뒤로 돌리는 것과 같습니다.
읽기 진행 막대 — animation-timeline: scroll()
페이지 전체를 얼마나 내렸는지 보여주는 상단 진행 막대는 단 몇 줄로 끝납니다.
- scroll()은 스크롤이 진행된 비율(0%에서 100%)을 그대로 애니메이션 진행률에 연결합니다.
- 막대가 너비 0에서 100%로 자라는 애니메이션을 만들고, 그 타임라인을 스크롤에 묶기만 하면 됩니다.
- 스크롤을 감시하는 자바스크립트 이벤트도, 별도 계산도 필요 없습니다.
요소가 떠오르는 등장 효과 — animation-timeline: view()
특정 요소가 화면에 들어올 때 나타나는 효과는 view()가 맡습니다. 그 요소가 화면 안에 얼마나 들어왔는지를 기준으로 삼아, 아래쪽에 있을 땐 투명하고 살짝 내려가 있다가 시야에 들어오면서 또렷하게 제자리를 찾도록 만들 수 있습니다. 예전이라면 'Intersection Observer'라는 자바스크립트 기능을 직접 다뤄야 했던 일입니다.
가볍다는 것, 그 이상의 가치
이 방식의 진짜 장점은 단순히 코드가 짧아지는 데 있지 않습니다.
- 속도: 브라우저가 애니메이션을 화면 그리기와 별도로 처리해, 스크롤이 끊기지 않고 매끄럽습니다.
- 가벼움: 외부 라이브러리가 사라지니 페이지가 빨리 뜨고, 그만큼 손님 이탈도 줄어듭니다.
- 안정성: 자바스크립트 한 줄이 깨져 페이지 전체가 멈추는 위험에서 벗어납니다.
당장 써도 될까 — 점진적 적용이 정답
스크롤 기반 애니메이션은 최신 브라우저에서 빠르게 자리 잡고 있지만, 아직 모든 환경에서 동작하지는 않습니다. 그래서 권하는 방식은 '있으면 좋고 없어도 그만'인 장식으로만 쓰는 것입니다. 지원되는 브라우저에서는 부드러운 효과를 보여주고, 그렇지 않은 곳에서는 요소가 그냥 평범하게 보이도록 두면 됩니다. 핵심 정보와 문의 버튼은 효과와 무관하게 항상 보여야 한다는 원칙만 지키면, 위험 없이 오늘부터 더할 수 있는 연출입니다.
화려한 효과가 목적이 아닙니다. 손님의 시선을 자연스럽게 안내하고, 그 과정에서 페이지가 느려지지 않게 하는 것. 그 균형을 코드 몇 줄로 잡는 것이 이 기술의 핵심입니다.
CYAN은 작은 회사 웹사이트를 만들 때 '무겁고 화려한 효과'보다 '가볍고 빠른 경험'을 먼저 생각합니다. 스크롤 기반 애니메이션처럼 표준 기술을 적재적소에 쓰면, 비용을 늘리지 않고도 손님이 머무는 시간을 늘릴 수 있습니다. 우리 사이트에 어떤 연출이 어울릴지 고민된다면, 부담 없이 문의 주세요.