Sonic UIv0.6.2

Motion

움직임은 사용자가 일으킨 변화(열기, 닫기, hover)에만 넣어요. 시간 3가지와 곡선 1가지만 써요.

시간

짧은 변화는 fast, 화면 일부가 열리고 닫히면 normal, 반복은 loop예요.

  • duration/fast120ms
    hover, 색 전환, Switch 손잡이
  • duration/normal200ms
    Dialog·Toast 열기/닫기, Tabs 표시 막대, Accordion 높이, Progress 채움
  • duration/loop1000ms
    반복 애니메이션: Skeleton 깜빡임, 로딩 스피너 회전

곡선

빠르게 시작해 부드럽게 멈춰요. 모든 전환에 같은 곡선을 써요.

  • easing/standardcubic-bezier(0.2, 0, 0, 1)
    모든 전환 (코드: ease-standard)

규칙

  • 사용자 행동에 대한 응답만페이지에 들어오자마자 움직이는 장식 애니메이션은 넣지 않아요. 누르고, 열고, 가리킬 때만 움직여요.
  • prefers-reduced-motion 지키기움직임 줄이기를 켠 사용자에게는 전환을 없애고, 반복 애니메이션(Skeleton, 스피너)은 멈춰요.
  • Figma에는 그리지 않아요시간과 곡선은 코드에서만 적용해요. Figma에는 열린 상태와 닫힌 상태만 그려요.