Apple 모션
HIG는 모션을 원칙으로 다루고 거기서 멈춥니다. Motion 페이지에는 애니메이션을 할지 말지에 대한 92줄 — 의도적으로, 선택적으로, 제스처를 따르며 — 이 있고, 단 하나의 스프링 파라미터도 없습니다. 움직임이 실제로 어떻게 구성되는지에 대한 모든 것은 그 밖에 존재하며, 이것이 이 스킬이 존재하는 이유입니다.
| 파일 | 내용 | |---|---| | references/motion-animation.md | 스프링 어휘, 지속 시간, 전환 유형, 인터럽트 가능성. | | references/microinteractions-feedback.md | 누름 상태, 로딩, 성공 및 오류 피드백, 햅틱 페어링. | | references/gestures-interaction.md | 스와이프, 드래그, 핀치, 엣지 제스처 및 모션이 이를 어떻게 추적해야 하는지. |
각 항목의 출처
솔직히 말할 가치가 있습니다. 세 가지 출처는 매우 다른 위상을 가지고 있으며, 이를 혼합하는 것이 모션 조언이 민간 전승이 되는 방식이기 때문입니다:
- 원칙 →
hig-guide. "의도적으로 모션을 추가하세요." "모션을 선택 사항으로 만드세요." "사람들의 제스처와 기대를 따르는 현실적인 피드백 모션을 위해 노력하세요." 이는 Apple 자신의 말이며, Motion에 있습니다. 여기의 의역이 아닌 그것들을 인용하세요. - 스프링 이름과 동작 → SwiftUI의 API.
.smooth,.snappy,.bouncy는 실제 기본값을 가진 실제 API입니다.motion-animation.md의 바운스 비율은 게시된 상수가 아닌 이들의 특성화입니다 — 튜닝을 시작하는 지점으로 취급하고, Apple의 사양으로 인용하지 마세요. - 그 외 모든 것 → 관찰. 이 참고 자료는 MIT 라이선스
apple-design-skills 컬렉션(
LICENSE.txt참고)에서 각색되었으며, 작성자가 출시 앱에서 동작을 추론한 곳에는[observed]표시가 있습니다. 유용하지만 권위적이지는 않습니다.
여기 있는 어떤 것도 ui-kit-for-apple-platforms의 값처럼 측정되지 않았습니다. 그
차이가 핵심입니다: 모션은 이 저장소에서 가장 적은 근본적인 진실을 가진 부분입니다.
스프링 선택하기
느낌의 대부분을 결정하는 하나의 선택:
| 스프링 | 바운스 | 사용처 | |---|---|---| | .smooth | 없음 | 시트, 모달, 배경 전환 — 주의를 끌지 않고 안정되어야 하는 모든 것 | | .snappy | 약간 | 버튼 누름, 토글, 선택 — 직접 조작의 기본값 | | .bouncy | 눈에 띔 | 아이콘 누름, 도착 알림, 보람차게 느껴져야 하는 순간 |
바운스가 전체 신호입니다. 튀는 시트는 장난감처럼 읽히고; 튀지 않는 버튼 누름은 죽은 것처럼 읽힙니다. 이 하나의 선택을 올바르게 하는 것이 지속 시간을 조정하는 것보다 더 많은 효과를 냅니다.
Apple 모션을 일반 모션과 구분짓는 것
- 인터럽트 가능. 제스처가 애니메이션 뒤에 대기열을 만들지 않고 중간에 애니메이션을 역전시키거나 방향을 바꿀 수 있어야 합니다. 응답하기 전에 끝나는 모든 것은 아무리 빨라도 지연되는 느낌을 줍니다.
- 손가락을 추적한 다음, 인계받습니다. 드래그 중에는 표면이 제스처를 1:1로 따릅니다. 스프링은 릴리즈 시에만 개입하여 제스처가 가지고 있던 속도를 이어받습니다. 이것이 HIG의 *"사람들의 제스처와 기대를 따르는 현실적인 피드백 모션"*을 구체화한 것입니다.
- 지속 시간은 결과이지, 입력이 아닙니다. 스프링은 물리 법칙으로 지정되고 안정될 때 안정됩니다. 고정된 300ms를 사용하는 것은 일반적으로 잘못된 도구를 사용하는 것을 의미합니다.
- 위치와 불투명도, 크기와 색상이 아닙니다. 움직이고 희미해지는 것은 물리적으로 읽히지만, 크기 조정과 색상 변경은 효과로 읽힙니다.
Reduce Motion은 선택 사항이 아닙니다
hig-guide는 명확히 밝힙니다 — "모션을 선택 사항으로 만드세요." 웹에서는
prefers-reduced-motion이며, 이는 움직임을 단순히 줄이는 것이 아니라
대체하는 것을 의미합니다: 슬라이드 대신 크로스페이드, 애니메이트 대신 컷.
ui-kit-for-apple-platforms의 ios-components.css는 이미 자체 전환을
이런 식으로 보호합니다. 일치시키세요.
경계
- 값 — 색상, 타입, 컨트롤 지오메트리, 재질 — 은 ui-kit-for-apple-platforms에 속하며, Apple의 UI 키트에서 측정되었습니다. 여기서 다시 언급하지 마세요; 모션 파일의 16진수 코드는 아무도 보지 않는 곳에서 쓸모없게 될 것입니다.
- 어떤 것이 애니메이션되어야 하는지, 어떤 프레젠테이션을 사용할지, 레이아웃이 어떻게 적응하는지에 대한 규칙 — hig-guide, 실제 인용문과 함께.
- 이 스킬은 움직임 자체가 어떻게 구성되는지를 다룹니다.