Motion

움직임은 상태 변화를 설명할 때만. 150ms 색 전환, 220ms 시트 등장, 1.4초 경보 점 깜빡임. 그 밖의 애니메이션은 없고, 시스템의 동작 줄이기 설정을 항상 따릅니다.

150 · 220 ms · 1.4 s

단계

이름	시간	이징	쓰임
instant	0	—	값 갱신(온도 숫자). 숫자는 애니메이션하지 않는다 — 읽는 순간 정확해야 한다
quick	150ms	ease	버튼·입력 배경/테두리, 스위치 손잡이, 토스트 페이드(250)
enter	220ms	ease-out	시니어 시트 올라오기(24px), 드로어 밀려오기(24px), 팝오버
attention	1.4s 반복	ease-in-out	경보 상태 점 `.fna-dot--pulse` (불투명도 1 → .4). 경보 해제 시 즉시 정지
loading	1.2s 반복	linear	쌓인 막대 로더 (막대 3개 순차 .2s 지연)

예

경보 점 · 로더 · 스위치

경보 (pulse)

불러오는 중

큰글씨

코드

<div class="fna-row" style="gap:32px">
    <span><i class="fna-dot fna-dot--alarm fna-dot--pulse"></i>경보 (pulse)</span>
    <div class="loader" role="status" aria-live="polite"><svg width="48" height="48" viewBox="0 0 48 48" aria-hidden="true"><rect class="l1" x="20" y="4" width="24" height="10" rx="3"/><rect class="l2" x="12" y="19" width="26" height="10" rx="3"/><rect class="l3" x="4" y="34" width="12" height="10" rx="3"/></svg><span>불러오는 중</span></div>
    <span class="fna-switch is-on" style="margin:0"><i></i>큰글씨</span>
  </div>

규칙

동작 줄이기(prefers-reduced-motion: reduce)이면 반복 애니메이션은 정지, 등장 애니메이션은 생략. 로더는 막대를 70% 불투명도로 고정.
레이아웃 이동 금지: 로딩 중 이전 렌더를 40% 불투명도로 유지(.fna-chart.is-loading). 스켈레톤 깜빡임 금지.
토스트는 2.4초 후 자동 사라짐. 오류 토스트는 사용자가 닫을 때까지 유지(자동 닫힘 없음).
시니어 시트는 자동 닫힘·흔들림 없음. 경보 진동은 OS 알림에서만.
차트 계열 등장 애니메이션 없음. 데이터는 즉시 그린다.

코드

.fna-btn{transition:background .15s,border-color .15s,box-shadow .15s}
@keyframes fna-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.fna-dot--pulse{animation:fna-pulse 1.4s infinite}
@media (prefers-reduced-motion:reduce){.fna-dot--pulse{animation:none}}
@media (prefers-reduced-motion:no-preference){.fna-modal--large .fna-modal__card{animation:fna-sheet-up .22s ease-out}}

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css transition · @keyframes fna-pulse / fna-sheet-upFoundations · FNA 디자인 시스템 v1.0