모션

한 문장과 원칙

움직임은 “무엇이 어디서 왔고 어디로 갔는가”를 설명할 때만 쓴다. 설명할 것이 없으면 움직이지 않는다.

1. 인과만 움직인다. 탭·키·스크롤이나 데이터 도착이 원인일 때만. 배경 흐름·호흡·반복·자동재생은 없다(Loader 회전만 예외).
2. 멈춰도 안다. 모든 모션은 끝 상태만으로 의미가 성립한다. 그래서 동작 줄이기는 다른 디자인이 아니라 같은 끝 상태를 바로 보여주는 것이다.
3. 출발점은 실제 관계에서. 시트는 아래에서, 팝오버는 트리거 쪽에서, push 상세는 오른쪽에서(RTL은 왼쪽).
4. 짧게, 한 번에 하나. 한 화면에서 동시에 움직이는 그룹은 하나, 그룹 안 스태거는 최대 3개.
5. 물처럼 조용하게. 최대 12px(시트·push 제외)를 감속 이징 하나로. 오버슈트·바운스·스프링 없음. scale도 쓰지 않는다.
6. 브랜드는 한 번. 첫 “아하” 카드 도착만이 브랜드 모먼트다.

토큰

원천은 src/design/tokens/motion.css 하나다. 컴포넌트는 ms 값을 직접 쓰지 않는다(lint R8). 아래 표는 이 페이지의 CSS에서 읽으며, 토글을 켜면 data-motion="reduce" 영역 안에서 다시 읽는다.

불투명도는 항상 max()로 쓴다. reduce에서 base가 0이 되어도 120ms 페이드가 남게 하기 위해서다. 이동 거리는 calc(Npx * var(--cb-move-scale))로 쓴다.

.x {
  --_fade-in: max(var(--cb-dur-base), var(--cb-dur-fade));            /* 200 → reduce 120 */
  --_fade-out: max(calc(var(--cb-dur-base) * var(--cb-exit-factor)),
                   calc(var(--cb-dur-fade) * var(--cb-exit-factor)));  /* 140 → reduce 84 */
  transition: opacity var(--_fade-in) var(--cb-ease),
              transform var(--cb-dur-base) var(--cb-ease);             /* reduce 0 */
  transform: translateY(calc(8px * var(--cb-move-scale)));
}복사

거리와 불투명도

• 이렇게 하지 않기불투명도를 중간값(0.5 등)에서 시작하지 않는다. 반투명한 중간 상태는 대비 계산을 벗어난다.
• 이렇게 하지 않기색 전환은 컨트롤 크기 이하 요소에만. 화면 크기 면의 색 보간(테마 전환 포함)은 하지 않는다.

패턴 데모

각 데모에는 “동작 줄이기 미리보기”가 있다. 켜면 그 영역에 data-motion="reduce"가 붙어 토큰이 바뀌고, 같은 끝 상태가 바로 보인다.

모션 함수

위젯은 흰 종이 위의 잉크로 움직인다. 정확하고 가볍다. src/design/motion/gen.ts의 아홉 함수(enter · reflow · roll · day · expand · collapse · lift · ripple · underline)는 --cb-ease-ink와 --cb-stagger-ink(24ms)를 쓴다. 위젯 배선은 useWidgetMotion(ref, "general"): 처음 보일 때 한 번 enter, 가리킴·초점에 lift, 44px “다시 보기” 버튼은 replay()를 부른다. 훅은 데이터 속성(data-gen-roll · data-gen-row · data-gen-source · data-gen-title · data-reveal)이다.

연결 장면은 ConnectScene의 cards-to-record(맨 위 카드가 기록, B→A 2안)와 ink-line(잉크 한 줄)이다. 이동 280ms 토큰을 넘는 유일한 문서화된 예외(계정당 한 번, 건너뛰기·Esc).

브랜드 모먼트

첫 가져오기에서 AhaCard가 처음 화면에 들어오는 순간, 계정당 한 번. 카드: opacity 0→1 + translateY 12→0, 280ms. 카드가 자리 잡은 뒤(280ms)에만 Dusk 빛 하나가 피어올라 1.6초 머문 뒤 196ms로 사라진다. 그 2.4초 동안 다른 것은 움직이지 않는다.

동작 줄이기

prefers-reduced-motion은 컴포넌트마다 분기하지 않고 토큰 단계에서 처리한다: fast·base·move·spin·stagger → 0, move-scale → 0, fade만 120ms. e2e는 reduce일 때 계산된 transform이 none이고 모든 duration이 120ms 이하인지 확인한다.

성능과 금지

• transform과 opacity만 애니메이션한다. height·width·top·margin·filter·backdrop-filter·box-shadow·clip-path·stroke-dashoffset은 하지 않는다.
• 되돌릴 수 있는 상태는 transition, 일회성 등장만 @keyframes. 중간에 취소해도 점프가 없다.
• will-change는 전환 직전에 붙이고 끝나면 뗀다. JS 애니메이션 라이브러리 없음(FLIP 계산만 JS).
• 숨은 탭에서 도착한 등장 모션은 건너뛴다. 아하 카드만 보일 때까지 미룬다.

• 이렇게 하지 않기스프링·오버슈트·바운스, scale 등장, 패럴랙스, 스크롤 연동, 끌어서 닫기, 숫자 세어 올리기, 쉬머, 테마 전환 색 보간, 탭 전환 슬라이드, 초점 링 애니메이션, 차트 그리기·성장, 로고 애니메이션, 두 번째 브랜드 모먼트.