모션
모션 (Motion)
색상이나 타이포그래피처럼 모션도 디자인 안의 복잡한 요소들을 연결하는 강력한 기반을 만들어 줘요. 모션을 UI 디자인에 신중하게 통합하면 더 명확하고 매력적이며 표현력 있는 제품을 만들 수 있어요. 효과적인 모션 디자인은 의도적이어야 하고, 사용자가 더 효율적으로 경험을 탐색하도록 안내하는 데 쓰여야 해요.
출처: 문서
본문
이 자료는 우리의 모션 디자인 원칙과 PatternFly의 다양한 모션 유형을 설명해요.
애니메이션 구현 및 맞춤 설정에 대한 자세한 지침은 모션 개발 가이드라인(motion development guidelines)을 참고하세요.
원칙 (Principles)
이 원칙들은 PatternFly에서 모션의 사용을 안내하며 우리의 브랜드 음성과 톤에 맞춰져 있어요.
- 의도적 (Intentional): 모션은 방해가 되지 않으면서 사용자를 안내해야 해요. 목적이 있고 단순해야 하며, 사용자가 작업을 완료하고 가장 중요한 것에만 집중하도록 도와야 해요.
- 일관적 (Consistent): 모션은 익숙하고 예측 가능한 경험을 만들어야 해요. 상호작용을 통합하고 다양한 제품에 걸친 사용자 여정을 연결할 수 있도록 일관되게 적용되어야 해요.
- 매력적 (Engaging): 모션은 사용자를 사로잡고 인터페이스에 개성을 더해야 해요. 사용자의 성취를 기념하고 일상적인 상호작용을 더 표현적이고 흥미롭게 만들어 주어야 해요.
- 포용적 (Inclusive): 모션은 사용자의 선호를 존중함으로써 사용자에게 힘을 실어줘야 해요. 항상 선택적이고 수용적이어야 하며, 모두에게 편안하고 접근 가능한 경험을 보장해야 해요.
컴포넌트 마이크로 애니메이션 (Component micro animations)
PatternFly 컴포넌트는 마이크로 애니메이션 형태의 모션을 지원해요. 마이크로 애니메이션은 작고 눈에 거슬리지 않으며 종종 과장되지 않아요. 이 애니메이션들은 UI 안에서 특정 목적을 수행하며, 미묘하고 보완적이도록 설계됐어요. 접근 가능한 경험을 보장하기 위해 모든 애니메이션은 축소 모션(reduced motion)에 대한 사용자의 시스템 수준 설정에 적응하고 존중해요.
많은 컴포넌트가 기본적으로 애니메이션을 제공하지만, 수동 구성이 필요한 옵트인(opt-in) 애니메이션도 있어요. 우리가 기본으로 지원하는 것 밖에서 모션을 구현하고 싶다면 모션 토큰을 사용해 특정 시나리오에 맞는 커스텀 애니메이션을 만들 수 있어요. 모션 원칙과 일치하도록 주의하세요.
애니메이션의 구성 (Anatomy of an animation)
애니메이션은 4가지 요소로 구성돼요:
- 트리거 (Triggers)
- 지속 시간 (Duration)
- 이징 (Easing)
- 속성 (Properties)
트리거 (Triggers)
트리거는 애니메이션이 발생하게 하는 이벤트예요.
- 사용자 시작 (User-initiated): hover나 클릭 같은 사용자 동작에 의해 트리거되는 애니메이션이에요.
- 시스템 시작 (System-initiated): 알림(notification)과 경고(alert)처럼 시스템 이벤트나 일정 시간이 지난 후에 트리거되는 애니메이션이에요.
지속 시간 (Duration)
애니메이션의 지속 시간은 완료되는 데 걸리는 시간을 말해요. 최적의 타이밍은 요소 자체의 크기와 뷰포트에 따라 달라질 수 있어요.
- 짧음 (Short): 페이드나 색상 변경처럼 더 단순한 효과와 미묘한 모션을 위한 빠른 애니메이션이에요.
- 김 (Long): 페이지 전환이나 화면 안으로 밀려 들어오는 객체처럼 더 복잡한 효과와 대규모 모션을 위한 더 긴 애니메이션이에요.
이징 (Easing)
애니메이션의 이징은 애니메이션 요소가 시간에 따라 어떻게 전환되는지를 말해요. 이징을 신중하게 사용하면 애니메이션이 거슬리고 단절되기보다 매끄럽고 자연스럽게 느껴지도록 도와줘요. 예를 들어 요소는 빠르게 가속하지만 천천히 감속하거나, 그 반대일 수 있어요.
속성 (Properties)
애니메이션의 속성은 전환 중에 변화하는 요소의 특정 시각적 특성이에요. 애니메이션은 효과를 만들기 위해 여러 속성을 결합할 수 있어요:
- 페이드 인/아웃 (Fade in/out): 요소의 불투명도
- 스케일 (Scale): 요소의 크기
- 회전 (Rotate): 요소의 방향
- 색상 전환 (Color transitions): 요소 색상의 변화
- 슬라이드 인/아웃 (Slide in/out): 화면 가장자리를 기준으로 한 요소 위치의 변화
- 확장/축소 (Expand/collapse): 요소의 전환된 가시성 변화
애니메이션 유형 (Types of animations)
애니메이션은 보통 다음 범주 중 하나에 속해요:
- 컨테이너 배치 (Container placement)
- 확장 (Expansion)
- 피드백 (Feedback)
- 진행 (Progression)
컨테이너 배치 (Container placement)
컨테이너 컴포넌트가 나타나고 사라지는 방식을 관리함으로써, 컨테이너 배치 애니메이션은 사용자의 방향 감각을 더 잘 잡아줘요. 트리거되면 컨테이너는 목적을 가지고 제자리로 이동하며, 사용자의 동작과 결과 사이에 명확한 공간적 관계를 만들어 줘요.
이는 다음 컴포넌트에서 관찰할 수 있어요:
- 드로어 (Drawer): 화면 가장자리에서 슬라이드 인
- 메뉴 (Menus): 메뉴 토글 옆으로 페이드 인
확장 (Expansion)
사용자의 초점을 안내함으로써, 확장 애니메이션은 새로 드러난 정보를 더 쉽게 처리하게 해줘요. 사용자가 섹션을 열면 부드러운 페이드와 슬라이드 전환이 콘텐츠로 눈길을 끌어요. 닫을 때는 그 반대가 일어나, 매력적이고 예측 가능한 상호작용을 만들어 줘요.
이는 다음 컴포넌트에서 관찰할 수 있어요:
- 아코디언 (Accordion)
- 듀얼 리스트 셀렉터 (트리 포함) (Dual list selector with tree)
- 확장 가능한 섹션 (Expandable section)
- 폼 (필드 그룹) (Form, field groups)
- 네비게이션 (확장 가능) (Navigation, expandable)
- 검색 입력 (확장 가능) (Search input, expandable)
- 트리 뷰 (Tree view)
- 테이블 (베타) (Table, in beta): 확장 가능한 테이블과 복합 확장 가능 테이블
피드백 (Feedback)
사용자 입력과 시스템 변화에 응답함으로써, 피드백 애니메이션은 시스템이 사용자의 동작에 응답하고 있다는 확신을 제공해요. 이 명확성은 혼란을 줄이고, 동작의 결과를 확인시켜 주며, 다음에 무슨 일이 일어날지 알려줄 수 있어요.
이는 다음 컴포넌트에서 관찰할 수 있어요:
hover와 클릭 (Hover and clicks)
이 컴포넌트들은 hover, 클릭, focus로 트리거되는 애니메이션을 가져요.
- 버튼 (Buttons): 클릭 시 채움 물결(fill ripple)
- 아이콘 버튼 (Icon buttons):
- 즐겨찾기 (Favorite): 클릭 시 펄스와 채움
- 햄버거 메뉴 (Hamburger menu): 클릭 시 변형
- 설정 (Settings): hover 시 회전
- 메뉴 토글 (Menu toggles): 클릭 시 테두리 페이드 인
- 탭 (Tabs): 클릭 시 테두리 슬라이드
검증 (Validation)
이 컴포넌트들은 검증된 입력에 오류가 있을 때 트리거되는 애니메이션을 가져요.
- 폼 (검증된 입력) (Forms, validated inputs)
- 메뉴 토글 (상태 토글) (Menu toggle, status toggle)
- 진행률 (오류 포함) (Progress, with error)
- 진행률 스테퍼 (오류 포함) (Progress stepper, with error)
시스템 변화 (System changes)
이 컴포넌트들은 시스템 수준 이벤트로 트리거되는 애니메이션을 가져요.
- 알림 (그룹 내) (Alerts, within groups): 슬라이드 및 페이드 인/아웃
- 알림 배지 (Notification badge): 아이콘 회전
진행 (Progression)
진행 중인 프로세스를 보여줌으로써, 진행 애니메이션은 대기 시간 동안 사용자의 기대를 관리하고 시스템이 요청을 처리하고 있다는 것을 전달해요. 이 피드백은 사용자가 프로세스가 완료될 때까지 기다릴 확신을 주는 명확성을 제공해요.
- 진행률 스테퍼 (진행 중) (Progress stepper, in process): 애니메이션 스피너
- 스켈레톤 (Skeleton): 그라데이션 펄스
모션 패턴 (Motion patterns)
모션 패턴은 공통된 애니메이션 요구를 해결하기 위해 함께 작동하는 토큰과 속성의 조합이에요. 이 패턴들은 서로 다른 컴포넌트가 관여하더라도 어떤 유형의 애니메이션 동작이 비슷한 사용 사례에서 일관되도록 보장하는 데 도움을 줘요.
버튼 물결 (Button ripple)
피드백 애니메이션 안에서 사용되는 "버튼 물결(button ripple)" 패턴은 버튼 중앙에서 바깥으로 물결치듯 적절한 클릭 색상을 적용해요. 인라인 링크를 제외한 모든 버튼 변형이 포함돼요. 이 패턴은 버튼이 성공적으로 눌렸다는 명확하고 실질적인 피드백을 제공해 사용자의 동작을 확인시켜 줘요.
오류 흔들기 (Error jiggle)
피드백 애니메이션 안에서 사용되는 "오류 흔들기(error jiggle)" 패턴은 danger 스타일이 적용될 때 애니메이션 컴포넌트(그리고 보통 관련 도움말 텍스트)를 좌우로 "흔들(jiggle)"어요. 이 패턴은 수정이 필요한 UI의 중요한 오류가 사용자 주의를 신속히 끌도록 보장하는 데 도움을 줘요.
축소 모션 조건에서는 오류 도움말 텍스트가 흔들리는 대신 단순히 페이드 인해 나타나요.
확장 페이드와 슬라이드 (Expansion fade and slide)
확장 애니메이션 안에서 사용되는 "페이드와 슬라이드(fade and slide)" 패턴은 컴포넌트에서 숨겨진 콘텐츠 섹션이 확장될 때 페이드-인 및 슬라이드-인 전환을 적용해요. 확장된 섹션이 접힐 때는 비슷하지만 반대인 애니메이션이 적용돼요. 이 패턴은 사용자의 동작과 새로 드러난 콘텐츠 사이에 명확하고 매끄러운 연결을 만들어 사용자에게 방향을 잡아줘요.
축소 모션 조건에서는 확장 시 숨겨진 전체 섹션이 슬라이드 인 대신 단순히 페이드 인해 나타나요.