브랜드 모션 가이드라인은(는) 무엇을 하나요?
브랜드 모션 시스템을 작성합니다. Slack, IBM Carbon, Klarna, Material Design과 같은 성숙한 디자인 시스템이 그렇듯 브랜드 또는 제품이 어떻게 움직이는지 정의하는 문서입니다. 출력은 원칙, 이징/타이밍 토큰, 모션 라이브러리, 로고 규칙, 피드백 상태, 접근성, Do/Don't 예제를 포함한 채워서 바로 사용할 수 있는 템플릿입니다.
사용 시기
브랜드나 제품에 문서화된 모션 언어가 필요할 때, 팀 전체에서 애니메이션이 일관되지 않다고 느껴질 때, 디자이너와 엔지니어를 위한 명명된 이징/지속 시간 토큰을 정의할 때, 또는 reduced-motion/접근성 표준을 추가할 때 사용합니다. 출력은 코드가 아닌 구조화된 문서입니다.
의사 결정 트리 — 시스템 범위를 정한 다음 토큰 선택
두 가지 판단이 필요합니다: 이 브랜드에 실제로 필요한 시스템 규모와 특정 모션에 어떤 토큰을 사용할지. 랜딩 페이지 하나에 7부분 시스템을 구축하지 마세요. 여러 팀이 사용하는 디자인 시스템에 한 페이지짜리 문서를 사용하지 마세요.
얼마나 많은 표면/팀이 사용할 것인가?
├─ 사이트 1개 / 캠페인 1개 → 가벼운 버전: 원칙 + 토큰 + 간단한
│ 라이브러리. 관련 없는 경우 로고/상태 섹션은 생략.
├─ 제품(앱/웹) → 전체 7부분 문서; 토큰은 필수.
└─ 제품 + 마케팅 + 방송에 걸친 브랜드 → 전체 문서 PLUS
모션 성격 사전 설정(모션 아트 디렉션 참조)으로 모든 매체 일치.
주어진 모션에 대한 토큰 선택:
지속 시간: 요소가 크고/이동 거리가 길수록 → 더 긴 토큰
(즉시<빠름<기본<느림<더 느림)
이징: 진입 → 감속 · 퇴장 → 가속(그리고 더 짧게)
뷰 내 이동 → 표준 · 브랜드 순간 → 강조
연속 루프 → 선형 · 장난기 있는 악센트 → 스프링(드물게)
경험 법칙: 모션이 사용하는 토큰의 이름을 말할 수 없다면, 그것은 일회성입니다. 그리고 일회성이 시스템을 일관성 없게 만듭니다.
모션 시스템의 구성 요소
완전한 모션 가이드라인 문서는 일곱 부분으로 구성됩니다. 순서대로 작성하세요:
- 모션 원칙 — 모든 애니메이션을 지배하는 3-5개의 명명된 신념.
- 타이밍 및 이징 토큰 — 명명된 지속 시간과 곡선으로, 모션을 일관성 있게 하고 엔지니어가 구현할 수 있게 합니다.
- 모션 라이브러리 — 진입, 퇴장 및 전환 패턴을 토큰에 매핑.
- 로고 애니메이션 규칙 — 마크가 어떻게 움직일 수 있고 움직일 수 없는지.
- 피드백 및 상태 모션 — 로딩, 성공, 오류, 호버, 포커스.
- 접근성 — reduced-motion, 광과민성, 포커스 가시성.
- Do / Don't — 규칙을 모호하지 않게 만드는 구체적인 예제.
토큰이 핵심입니다
다른 모든 것은 토큰을 참조합니다. 지속 시간과 곡선을 한 번, 명명된 토큰으로 정의하세요. 라이브러리와 컴포넌트가 이를 재사용합니다. 이것이 모션 시스템을 장식이 아닌 구현 가능하게 만드는 요소입니다.
샘플 지속 시간 토큰 (작성/조정)
| 토큰 | 값 | 용도 |
|---|---|---|
duration-instant | 100ms | 마이크로 피드백(토글, 탭) |
duration-fast | 150ms | 호버, 작은 상태 변경 |
duration-base | 250ms | 표준 UI 전환(기본값) |
duration-slow | 400ms | 더 큰 표면, 모달, 페이지 섹션 |
duration-slower | 600ms | 히어로/브랜드 순간, 전체 화면 |
경험 법칙: 요소/거리가 클수록 지속 시간이 길어집니다. 대부분의 UI 모션은 150-400ms 영역에 있습니다. ~100ms 미만은 즉시로 읽히고, ~500ms 이상은 일상적인 UI에 느리게 느껴집니다.
샘플 이징 토큰 (곡선)
| 토큰 | cubic-bezier | 느낌/용도 |
|---|---|---|
ease-standard | (0.4, 0.0, 0.2, 1) | 기본값; 뷰 내에서 움직이는 요소 |
ease-decelerate (ease-out) | (0.0, 0.0, 0.2, 1) | 진입 — 빠르게 들어와서 안정 |
ease-accelerate (ease-in) | (0.4, 0.0, 1, 1) | 퇴장 — 천천히 시작, 빠르게 사라짐 |
ease-emphasized | (0.2, 0.0, 0, 1) | 표현적/브랜드 순간 |
ease-spring | spring(강성, 감쇠) | 장난기 있는 오버슈트(드물게 사용) |
원칙: 진입은 감속(객체가 도착하여 안정), 퇴장은 가속(객체가 의도를 가지고 떠남), 중요한 것에는 선형 이징을 사용하지 않습니다. 선형은 기계적으로 느껴지며 연속 루프(스피너, 진행)에만 사용합니다.
모션 라이브러리 (패턴을 토큰에 매핑)
| 패턴 | 토큰 | 동작 |
|---|---|---|
| 페이드 인 | duration-base + ease-decelerate | 불투명도 0→1 |
| 확대 + 페이드 인 | duration-base + ease-decelerate | 0.96→1 배율, 불투명도 0→1 |
| 위로 슬라이드 인 | duration-slow + ease-decelerate | Y +8/16px → 0, 페이드 인 |
| 페이드 아웃 | duration-fast + ease-accelerate | 불투명도 1→0 (퇴장이 진입보다 빠름) |
| 모달 열기 | duration-slow + ease-emphasized | 확대 + 페이드, 배경 페이드 인 |
| 페이지/섹션 전환 | duration-base + ease-standard | 크로스 페이드 또는 공유 요소 이동 |
| 목록 스태거 | 항목당 duration-fast, 30-50ms 간격 | 항목이 한 번에 움직이지 않고 계단식으로 |
기본 규칙: 퇴장은 진입보다 짧습니다. 스태거는 작은 간격(30-50ms)을 사용하여 그룹이 끌리지 않으면서도 생동감 있게 느껴지도록 합니다.
템플릿 (작성)
[브랜드] 모션 가이드라인 버전: ___ 소유자: ___
1. 원칙
우리는 다음을 위해 움직입니다: [원칙 1 — 예: "주의를 유도하되, 절대 빼앗지 않는다"]
[원칙 2 — 예: "기본적으로 빠르게, 의도적으로 표현"]
[원칙 3 — 예: "모든 움직임에는 이유가 있다"]
[원칙 4] [원칙 5]
2. 타이밍 토큰
instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms
3. 이징 토큰
standard ____ · decelerate ____ · accelerate ____ · emphasized ____
4. 모션 라이브러리
진입: [패턴 + 토큰 목록]
퇴장: [패턴 + 토큰 목록]
전환: [패턴 + 토큰 목록]
5. 로고 애니메이션
허용: [공개 스타일, 지속 시간 토큰, 애니메이션 가능 시점]
금지: [늘리기, 왜곡, 자유 회전, 색상 변경, ___ms 초과]
6. 피드백 및 상태 모션
로딩: [스피너/스켈레톤 규칙 + 각각 사용 시점]
성공: [확인 모션]
오류: [흔들기/색상 규칙 — 색상만 단독 사용 금지]
호버/포커스: [토큰 + 포커스 표시 요구 사항]
7. 접근성
Reduced motion: [수행할 작업 — 아래 섹션 참조]
광과민성: 초당 최대 3회 플래시; 전체 화면 스트로빙 금지.
포커스: 포커스 표시기가 절대 애니메이션으로 사라지거나 없어지지 않음.
8. Do / Don't
✅ [do] ❌ [don't]
로고 애니메이션 규칙 (작성)
허용 및 금지되는 사항을 명시적으로 기술하세요. 일반적인 기준:
- 허용:
duration-slow-slower+ease-emphasized를 사용한 공개/제작; 부드러운 안정; 모든 곳에서 일관되게 유지되는 하나의 시그니처 제작. - 금지: 마크를 비율에 맞지 않게 늘리기/찌그러뜨리기, 자유 회전, 팔레트 외부로 색상 변경, 모든 등장에 애니메이션 적용(핵심 순간에만 사용), 합의된 최대 지속 시간 초과.
피드백 및 상태 모션
- 로딩: 콘텐츠 레이아웃에는 스켈레톤; 짧고 불확정적인 대기에는 스피너만 사용; ~1초 이상 대기에는 진행률 표시.
- 성공/오류: 모션을 레이블이나 아이콘과 쌍으로 사용 — 색상이나 모션만으로 상태를 전달하지 마세요(접근성).
- 호버/포커스:
duration-fast+ease-standard; 포커스 상태는 명확하게 보여야 하며 애니메이션으로 시야에서 사라져서는 안 됩니다.
접근성 (필수 섹션)
- Reduced motion: 사용자의 "reduce motion" 설정을 존중합니다. 이동/시차/큰 변환을 단순한 불투명도 크로스 페이드 또는 즉각적인 상태 변경으로 대체합니다. 필수적인 의미는 유지하고 장식적인 모션은 제거합니다. (개념적으로
prefers-reduced-motion에 매핑됩니다.) - 광과민성: 초당 3회 이상 깜빡이지 않음; 전체 화면 고대비 스트로빙 금지.
- 모션/색상만으로 의미 전달 금지: 항상 텍스트 또는 아이콘과 함께 사용.
- 포커스 가시성: 애니메이션이 포커스 표시기를 숨기거나 제거하지 못하도록 합니다.
작업 예제
좋음 — 토큰 기반 라이브러리 항목:
모달 열기:
duration-slow(400ms) +ease-emphasized; 배율 0.96→1, 배경 페이드 인. 닫기:duration-base(250ms) +ease-accelerate.
모든 값은 명명된 토큰이고, 닫기는 열기보다 짧으며, 이징이 의도와 일치합니다(브랜드 순간에는 강조, 퇴장에는 가속). 엔지니어가 직접 구현할 수 있으며 다른 모든 모달과 일치할 것입니다.
안티패턴 — "분위기" 가이드라인:
"애니메이션은 부드럽고, 현대적이며, 즐거워야 합니다. 멋진 이징을 사용하고, 너무 빠르지 않으면서도 날렵하게 유지하세요."
실패 이유: 명명된 토큰도, 값도, 진입/퇴장 규칙도, 구현 가능한 내용도 없습니다. "부드럽다"와 "날렵하다"는 상충되며 모든 엔지니어가 다르게 해석하므로 제품이 일관성 없게 됩니다(정확히 문서가 해결하려던 문제). 해결책: 형용사를 토큰 테이블로 대체하고, 각 패턴을 토큰에 매핑하며, 구체적인 밀리초 값과 함께 Do/Don't 쌍을 제공합니다.
일반적인 실수
| 증상 | 발생 이유 | 해결책 |
|---|---|---|
| 화면 간 모션 불일치 | 수동 조정된 일회성 값, 토큰 없음 | 토큰을 한 번 정의; 모든 패턴이 이를 참조 |
| 문서는 멋져 보이지만 구현 불가 | 원칙이 형용사로만 작성되고 값이 없음 | 모든 원칙을 숫자 토큰 규칙과 쌍으로 연결 |
| 모든 것이 바운스됨 | 스프링/오버슈트가 모든 곳에 사용됨 | 스프링/강조는 브랜드 순간에만 사용 |
| 퇴장이 느리게 느껴짐 | 퇴장 지속 시간 ≥ 진입 | 퇴장을 한 단계 더 짧게 만들고 가속 적용 |
| 애니메이션이 접근성을 깨뜨림 | reduced-motion / 색상 전용 상태 없음 | 필수 접근성 섹션 추가; 모션을 텍스트/아이콘과 함께 사용 |
| 로고가 모든 곳에서 다르게 애니메이션됨 | 로고 규칙 없음 | 하나의 시그니처 공개 + 명시적인 "금지" 목록 명시 |
| 토큰 값이 계속 이름 변경됨 | 이름이 리터럴(duration-250) | 목적으로 이름 지정(duration-base)하여 값 변경 가능 |
제공 사항 명세 — 좋은 모션 가이드라인 문서의 구성 요소
출력은 구조화된 문서(템플릿은 references/full-template.md)이며 코드가 아닙니다. 완전한 문서는 일곱 부분을 모두 포함하며, 다음을 갖추어야 합니다:
- 각각 한 줄 규칙이 있는 3-5개의 명명된 원칙(형용사 아님).
- 값/곡선이 있는 지속 시간 및 이징 토큰 — 구현 가능한 핵심.
- 모든 패턴을 토큰에 매핑하는 모션 라이브러리.
- 명시적인 로고 허용/금지 규칙.
- 피드백/상태 모션(로딩, 성공, 오류, 호버, 포커스).
- 필수 접근성 섹션(reduced-motion, 광과민성, 포커스, 색상 단독 의미 전달 금지).
- 모호함을 제거하는 구체적인 Do/Don't 쌍.
마치기 전 체크리스트
- 각각 명명되고 한 줄 규칙이 있는 3-5개의 원칙.
- 값으로 정의된 지속 시간 토큰; cubic-bezier 곡선으로 정의된 이징 토큰.
- 모든 라이브러리 패턴이 사용하는 토큰 이름을 명시.
- 진입은 감속, 퇴장은 가속 및 더 짧음; 선형은 루프에만 사용.
- 로고 규칙이 허용 및 금지를 모두 명시.
- 피드백 상태가 모션을 텍스트/아이콘과 쌍으로 사용(색상만 단독 사용 금지).
- 접근성 섹션 포함: reduced-motion, 광과민성, 포커스, 대비.
- Do/Don't 쌍이 구체적(값 포함)이고 분위기 기반이 아님.
- 토큰 이름이 의미론적(목적 기반)이고 리터럴 값이 아님.
관련 프레임워크
이 문서는 브랜드 모션의 레코드 시스템입니다. 두 개의 관련 스킬이 상위 이론과 프로젝트별 느낌을 제공합니다. 해당 내용을 참조하고 적용하되, 테이블을 복제하지 마세요:
animation-principles— 원칙 섹션은 세 가지 기둥(의도 → 어조 → 장인정신)을 인코딩해야 합니다. 기본/보조/주변 모션 레이어는 히어로 이동과 주변 드리프트가 다른 토큰을 받는 이유를 설명합니다. 1/3 규칙은 스태거 제한을 정당화합니다(모든 것을 한 번에 움직이지 마세요). 이를 인용하고 정식 테이블은 거기에 유지하세요.motion-art-direction— 제품 + 마케팅 + 방송에 걸친 브랜드의 경우, 명명된 모션 성격 사전 설정을 선택하여 문서 상단에 명시한 다음, 토큰 값을 일치하도록 도출합니다(더 날렵한 사전 설정 → 더 짧은 지속 시간; 프리미엄 사전 설정 → 더 길고 부드럽게). 모션 언어 사양은 거기에 있습니다.
빠른 참조
| 결정 | 기본값 |
|---|---|
| 기본 UI 지속 시간 | duration-base 250ms |
| 진입 이징 | decelerate (ease-out) |
| 퇴장 이징 | accelerate (ease-in), 진입보다 짧음 |
| 선형 이징 | 루프에만 사용(스피너/진행) |
| 스태거 간격 | 항목당 30-50ms |
| 로고 애니메이션 | 예약됨, 일관됨, 왜곡 금지 |
| 상태 피드백 | 모션 + 레이블/아이콘, 색상만 단독 사용 금지 |
| Reduced motion | 변환을 페이드/즉시로 대체 |
참조 파일
references/full-template.md— 모든 섹션이 확장되고 예제 사본이 포함된 완전한 채우기용 모션 가이드라인 문서.references/token-reference.md— 값, cubic-bezier 곡선 및 사용 참고 사항이 포함된 전체 지속 시간 및 이징 토큰 테이블.references/dos-and-donts.md— 구체적인 Do/Don't 쌍 및 작업된 원칙 예제 라이브러리(Slack/IBM/Material 스타일).