자바스크립트 없이도 웹은 움직입니다

1. 스크롤에 반응하는 화면은 원래 자바스크립트의 몫이었습니다

얼마 전 GSAP과 Framer 이야기를 하면서 움직임이 정적인 화면을 깨운다는 이야기를 했었죠. 스크롤에 맞춰 요소가 나타나고 진행 막대가 차오르는 효과는 오랫동안 자바스크립트의 영역이었습니다. 스크롤 위치를 계속 지켜보면서 계산하고, 그때그때 스타일을 바꿔 주는 코드가 필요했습니다. 잘 만들면 멋지지만, 조금만 무거워져도 휴대폰에서 스크롤이 버벅이고 라이브러리 용량도 만만치 않습니다. 그런데 최근 몇 년 사이 브라우저가 이 일을 직접 맡기 시작했습니다. 이제 CSS만으로도 스크롤에 반응하는 애니메이션과 부드러운 화면 전환을 만들 수 있게 됐습니다.

2. animation-timeline 한 줄이 하는 일

스크롤 기반 애니메이션(Scroll-driven Animations)의 중심에는 animation-timeline이라는 속성이 있습니다. 보통 CSS 애니메이션은 시간을 기준으로 움직이는데, 이 속성에 scroll()을 넣으면 시간 대신 스크롤 위치를 기준으로, view()를 넣으면 요소가 화면에 들어오고 나가는 정도를 기준으로 움직입니다. 읽은 만큼 차오르는 진행 막대나 화면에 들어오면서 서서히 떠오르는 이미지 같은 효과를 자바스크립트 없이 몇 줄로 만들 수 있죠. 크롬은 2023년 115 버전부터 지원했고, 사파리도 26 버전에서 합류했습니다. 브라우저가 직접 처리하다 보니 페이지가 다른 일로 바쁠 때도 비교적 부드럽게 움직인다는 점이 큰 장점입니다.

3. 페이지가 바뀌어도 끊기지 않는 화면, 뷰 트랜지션

뷰 트랜지션(View Transitions)은 화면이 바뀌는 순간을 다룹니다. 목록에서 썸네일을 누르면 그 이미지가 자연스럽게 커지면서 상세 페이지의 대표 이미지가 되는, 앱에서나 보던 전환을 웹에서도 만들 수 있게 해 주죠. 브라우저가 바뀌기 전과 후의 화면을 각각 찍어 두고 그 사이를 알아서 이어 주는 방식이라, 개발자는 어떤 요소끼리 같은 것인지 이름만 붙여 주면 됩니다. 한 페이지 안에서의 전환은 지난해 10월 파이어폭스까지 지원하면서 주요 브라우저에서 모두 쓸 수 있게 됐고, 주소가 바뀌는 페이지 간 전환도 크롬과 사파리에서 지원합니다. 예전엔 이런 전환 하나를 위해 꽤 복잡한 상태 관리가 필요했던 걸 생각하면 격세지감입니다.

4. 세컨드펭귄의 시선: 도구가 가벼워져도 절제는 필요합니다

그렇다고 GSAP 같은 라이브러리가 필요 없어졌다는 뜻은 아닙니다. 여러 요소가 정교한 순서로 맞물리는 시퀀스나 브라우저마다 똑같이 보여야 하는 연출은 여전히 자바스크립트가 더 믿음직합니다. 우리는 CSS로 충분한 효과는 CSS로 만들고, 지원하지 않는 브라우저에서는 애니메이션 없이도 내용이 온전히 보이도록 설계합니다. 움직임을 줄이도록 설정한 사용자에게는 당연히 효과를 꺼 두고요. 도구가 가벼워져 움직임을 넣기는 쉬워졌지만, 하나를 넣을 때마다 이게 없으면 무엇이 불편한지 따져 봅니다.