기억에 남는 웹, 모던 CSS 도구함과 절제의 미학
화려한 인터랙션을 넣는 기술적 장벽은 거의 사라졌다. SplitText로 글자를 쪼개 흩뿌리고, clip-path·mask·스크롤 연동 애니메이션·3D 변환을 자바스크립트 없이 순수 CSS로 구현한다. CSS-Tricks가 2026년 6월 10일 정리한 "모던 CSS 도구함"은 그 가능성을 한자리에 모았다. 그런데 글의 진짜 메시지는 "무엇을 할 수 있나"가 아니라 "왜, 언제 움직여야 하나"라는 절제의 질문이다.
"Everything communicates, and our animations are no exception."CSS-Tricks
무슨 일인가
기사는 여섯 가지 기법을 든다. 글자 분할 애니메이션, clip-path·mask, animation-timeline 기반 스크롤 연동, perspective·preserve-3d 3D 변환, SVG 커스텀 커서, 앵커 포지셔닝이다. 하지만 핵심은 기법 목록이 아니라 그 앞에 둔 원칙이다. 움직임을 넣기 전에 톤·속도·감정을 규정하는 키워드를 먼저 정하고, 그 의도에 맞는 기법만 고르라는 것. 저자는 또 글자 분할이 스크린리더 지원이 들쭉날쭉하다는 점을 짚으며, 접근성 테스트를 거치지 않을 거라면 DOM을 쪼개는 대신 letter-spacing 같은 대안을 쓰라고 권한다.
여러 시각
같은 "의도 있는 모션" 문제를 두 자료가 다른 층위에서 본다.
- web.dev(prefers-reduced-motion) — 절제의 의무 관점. 애니메이션은 일부 사용자에게 어지럼·메스꺼움 같은 전정기관 반응을 일으킬 수 있어 "적은 움직임"이 의학적 필요가 된다. 동시에
transform·opacity위주로 컴포지터 스레드에서 처리해 성능까지 챙기라고 짚는다. - Josh W. Comeau(Squash and Stretch) — 장인의 관점. 1981년 디즈니 애니메이터들이 정리한 원칙에서 출발해, 움직임이 "좋게 느껴지게" 만드는 디테일과
prefers-reduced-motion존중을 함께 가르친다. 같은 효과라도 타이밍과 가속 곡선이 인상을 가른다는 것이다.
왜 중요한가
기법이 흔해질수록 차별점은 "무엇을 안 움직일까"로 옮겨간다. 모두가 스크롤 패럴랙스를 붙일 수 있게 되면 그 효과는 더 이상 인상적이지 않고, 오히려 산만함·성능 저하·접근성 문제로 남는다. 절제된 모션은 메시지를 보조하고, 과한 모션은 메시지를 가린다. 도구의 평준화가 곧 취향과 판단의 경쟁으로 바뀐다는 뜻이다.
실무 적용
- 움직임을 코딩하기 전에 톤·속도·감정 키워드를 먼저 적고, 각 애니메이션이 그 의도에 부합하는지 검토하는 체크 단계를 둔다.
- 모든 모션에
prefers-reduced-motion분기를 기본값으로 넣고, 핵심 정보 전달은 애니메이션이 꺼져도 완결되게 설계한다. - 성능을 위해 layout·paint를 유발하는 속성 대신
transform·opacity로 애니메이션하고, 글자 분할은 스크린리더 테스트를 통과한 경우에만 쓴다.
Kenny의 관점
프론트엔드 관점에서 이 글의 핵심은 "기술 과시에서 의도 설계로"의 이동이다. 이제 누구나 화려한 효과를 붙일 수 있으니, 차별점은 효과의 개수가 아니라 "이 움직임이 무엇을 말하는가"다. 나는 새 인터랙션을 넣을 때 "이걸 끄면 사용자가 무엇을 잃는가"를 먼저 묻는다. 잃는 게 없다면 그 모션은 장식일 뿐이고, 장식은 빼는 쪽이 대개 옳다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗