고급스러운 모션은 단일 효과가 아니라 시스템입니다. ① 사이트 전체가 공유하는 일관된 이징 곡선(--ease), ② 0.2~0.6초의 짧은 타이밍, ③ 스태거로 만드는 리듬, ④ transform·opacity만 써서 지키는 60fps, ⑤ prefers-reduced-motion 존중 — 이 다섯이 합쳐질 때 ‘비싸 보이는’ 인터랙션이 됩니다. 과한 모션은 오히려 싸 보입니다.
요약
- 이징은 브랜드의 말투다 — --ease 토큰 하나로 곡선을 통일해 사이트 전체가 공유한다.
- 타이밍은 짧게 — 작은 변화 0.15~0.25초, 큰 전환 0.3~0.5초. 1초 넘으면 ‘기다림’이 된다.
- 스태거는 동시 등장 대신 0.05~0.08초씩 시차를 줘 ‘리듬’과 ‘읽는 순서’를 만든다.
- 성능은 transform·opacity만으로 지키고, prefers-reduced-motion을 켠 사용자에겐 모션을 줄인다.
모션을 처음 맡았을 때, 저는 ‘효과 하나를 화려하게’가 정답인 줄 알았습니다. 그런데 화면을 합쳐 보니 이상했습니다. 버튼은 통통 튀고, 카드는 스르륵 미끄러지고, 헤드라인은 또 다른 곡선으로 올라왔습니다. 각각은 멀쩡한데 합치니 산만했죠. 그날 알았습니다. 고급감은 효과의 개수가 아니라 효과들이 같은 규칙으로 움직이는가에서 온다는 걸요. 이 페이지의 데모는 전부 같은 규칙으로 돕니다.
이징이 제각각이면 왜 산만해 보일까요?
이징은 ‘속도의 곡선’입니다. linear는 처음부터 끝까지 같은 속도라 기계처럼 보이고, ease-out은 빠르게 출발해 끝에서 감속해 현실의 물체처럼 자연스럽습니다. spring은 목표를 살짝 지나쳤다 돌아오며 ‘손맛’을 줍니다. 핵심은 곡선의 선택보다 일관성입니다. 화면마다 곡선이 다르면, 같은 사이트인데도 다른 사람이 만든 것처럼 느껴집니다. 아래에서 같은 거리를 세 곡선으로 움직여 비교해 보세요.
같은 거리, 다른 느낌
'재생'을 누르면 세 점이 각각 다른 이징으로 움직입니다.
왜 동시에 띄우지 않고 ‘한 박자씩’ 들여보낼까요?
여러 요소를 동시에 띄우면 정보가 한꺼번에 쏟아져 묵직합니다. 0.05~0.08초씩 시차를 두면 시선이 순서대로 흐르며 ‘리듬’이 생기고, 사용자가 무엇부터 읽어야 하는지 자연스럽게 안내됩니다. 이게 스태거(stagger)입니다. 아래 칩들이 한 박자씩 들어오는 걸 보세요.
// 위로 스크롤했다 다시 내려오면 또 재생됩니다.
헤드라인은 왜 ‘올라오며’ 등장하면 더 무게가 실릴까요?
헤드라인이 그냥 페이드로 나타나면 평범합니다. 마스크 뒤에서 한 단어씩 올라오면, 같은 카피라도 무게와 의도가 실립니다. 첫 화면 메시지처럼 ‘한 번에 각인되어야 하는’ 문장에 씁니다. 단, 이것도 같은 이징과 짧은 타이밍을 공유해야 앞의 스태거와 한 박자로 맞아떨어집니다.
당신 브랜드가 AI 답변에 등장합니다
타이밍은 얼마가 ‘딱 좋은’ 길이일까요?
UI 모션은 대체로 0.2~0.6초가 편안합니다. 호버·버튼 반응처럼 작은 변화는 0.15~0.25초로 짧게 끊고, 패널이 열리거나 화면이 전환되는 큰 움직임은 0.3~0.5초로 둡니다. 1초가 넘어가면 사용자는 멋이 아니라 ‘기다림’으로 느낍니다. 위의 세 데모도 전부 0.6초 이내에서 끝납니다 — 길어서 우아한 게 아니라, 짧아서 깔끔한 겁니다.
모션이 많은데도 안 끊기는 비밀은 무엇일까요?
비밀은 ‘무엇을 바꾸지 않느냐’입니다. 저는 width·top·box-shadow를 매 프레임 바꾸지 않습니다. 그건 브라우저가 레이아웃·페인트를 다시 계산하게 만들어 끊깁니다. 대신 transform(이동·확대·회전)과 opacity만 씁니다. 이 둘은 GPU가 처리해 60fps로 부드럽습니다. 이 페이지에 데모가 여러 개인데도 가벼운 이유가 바로 이겁니다.
그렇다면 모션은 ‘많을수록’ 고급스러울까요?
아닙니다. 정반대입니다. 모든 게 통통 튀면 아무것도 강조되지 않고, 화면이 시끄러워집니다. 과한 모션은 오히려 싸 보입니다. 저는 한 화면에서 가장 중요한 한두 곳에만 모션을 집중하고, 나머지는 조용히 둡니다. 그리고 prefers-reduced-motion을 켠 사용자에게는 애니메이션을 끄거나 단순 페이드로 바꿔 멀미를 만들지 않습니다. 절제와 배려가 곧 고급감입니다.
이 모션 시스템, 무엇이 무엇을 책임지나요?
모션은 직군이 아니라 '규칙'으로 나뉩니다. 이징·타이밍·스태거·성능·접근성 — 다섯 규칙이 각자 무엇을 책임지고, 이 페이지 데모에서 어떻게 보이는지 한 표로 정리했습니다.
| 규칙 | 맡은 책임 | 데모에서 보이는 것 |
|---|---|---|
| 이징 | 속도 곡선을 토큰 하나로 통일 | linear·ease-out·spring 비교 |
| 타이밍 | 0.2~0.6초로 짧게 끊기 | 모든 데모가 0.6초 내 종료 |
| 스태거 | 0.05~0.08초 시차로 리듬 부여 | 칩이 한 박자씩 등장 |
| 성능 | transform·opacity만 변경 | 데모 여럿인데 60fps 유지 |
| 접근성 | reduced-motion 분기 | 설정 켜면 모션 축소 |
표가 말해 주듯, 효과 하나가 화려한지가 아니라 다섯 규칙이 한 박자로 맞는지가 고급감을 만듭니다. 한 줄이라도 어긋나면 '같은 사람이 만들지 않은' 인상이 됩니다.
그리고 이 박자는 무거운 모션 라이브러리가 아니라 표준 기술로만 굴러갑니다. 이 페이지 데모를 구동하는 재료를 그대로 적어 둡니다.
spring 곡선까지도 cubic-bezier 한 줄이면 충분합니다. 절제된 표준 기술이 오히려 '비싸 보이는' 모션을 만든다는 게, 제가 매번 확인하는 역설입니다.
이 작품에 들어간 기술
이 페이지의 모든 데모는 외부 라이브러리 없이, 같은 이징·짧은 타이밍·transform/opacity 규칙을 공유하는 실제 코드입니다. 각 기술을 더 깊이 보고 싶다면 담당자별 노트를 보세요.
- 이징 — 같은 거리, 다른 느낌: 곡선을 토큰으로 통일하는 법.
- 모션 — 스크롤 애니메이션 모드: 스태거·텍스트 리빌·패럴럭스의 실전.
- 성능 — 60fps 노트: transform·opacity로 끊김을 없애는 법.
| 항목 | 제각각 모션 | 모션 시스템(합작) |
|---|---|---|
| 고급감 | 효과는 화려한데 산만함 | 한 손에서 나온 듯 일관된 인상 |
| 이징 | 화면마다 다른 곡선 | --ease 토큰 하나를 전체가 공유 |
| 타이밍 | 길거나 제각각 → 기다림 | 0.2~0.6초로 짧게 통일 |
| 성능 | width·shadow 변경 → 끊김 | transform·opacity → 60fps |
| 접근성 | reduced-motion 무시 → 멀미 | prefers-reduced-motion 존중 |
모션을 ‘시스템’으로 보는 팀이, 사이트 전체를 만듭니다
이징 하나, 타이밍 하나를 규칙으로 다루는 사람이라면 버튼도 폼도 속도도 같은 태도로 다룹니다. Findable에서는 이 합작이 기본값입니다. 당신의 사이트, 어떤 박자로 움직이게 해 드릴까요?
왜 효과 하나만 잘 만들어도 모션이 안 고급스러운가요?
이징 곡선은 화면마다 다르게 써도 되나요?
애니메이션 지속시간은 얼마가 적당한가요?
스태거(시차 등장)는 왜 효과적인가요?
모션이 많으면 사이트가 느려지지 않나요?
모션 담당자의 스크롤 애니메이션 노트
스태거·텍스트 리빌·패럴럭스를 직접.
이징 담당자의 노트(라이브)
같은 거리, 다른 느낌의 곡선 비교.
성능 담당자의 60fps 노트
끊기지 않는 모션의 비밀.
이 글의 모든 데모는 이 페이지에서 실제로 동작하는 코드입니다(전부 transform·opacity 기반, 외부 라이브러리 0). prefers-reduced-motion을 켠 환경에서는 모션이 줄어듭니다. 과한 모션을 경계하는 것은 일반 원칙이며, 날조된 사례·수치는 사용하지 않았습니다.