반으로 잘린 구글의 스플릿 버튼

카테고리

디자인

서브카테고리

UI 디자인

대상자

UI/UX 디자이너, Material Design 사용자 및 개발자

핵심 요약

• 스플릿 버튼(Split Button)은 기본 액션 버튼과 드롭다운 메뉴가 결합된 UI 컴포넌트로, 시각적 복잡성을 줄이는 데 사용됩니다.
• 구조는 선행 버튼(Leading Button), 아이콘(Icon), 레이블 텍스트(Label Text), 후행 버튼(Trailing Button)으로 구성됩니다.
• 디자인 가이드라인: 아이콘은 동작을 잘 나타내는 형태를 사용해야 하며, 드롭다운 버튼에는 확장/축소 아이콘이 고정되어야 합니다.

섹션별 세부 요약

1. 스플릿 버튼의 구성 요소

• 선행 버튼: 간결한 텍스트(1~2단어)와 대표 아이콘 사용 권장.
• 후행 버튼: 확장/축소 아이콘(회전 애니메이션 적용) 고정.
• 레이블 텍스트: 긴 텍스트는 지양되며, 드롭다운 버튼의 아이콘은 변경 금지.

2. 사용 시 주의사항

• RTL 언어(예: 아랍어)에서는 구성 요소가 좌우 반전되어 표시됨.
• 메뉴 정렬: 드롭다운 버튼과 정렬되도록 배치하며, 공간이 부족할 경우 가장자리 정렬 가능.
• 메뉴는 4dp 간격을 두고 버튼과 배치해야 함.

3. 애니메이션 및 모션

• 쉐입 몰핑(Shape Morph) 애니메이션 적용: 드롭다운 버튼 아이콘 회전 시 스프링 반발 효과는 사용하지 않음.
• Expressive 모션은 스플릿 버튼에 적용되지 않음.

4. 디자인 시스템 비교

• Adobe Spectrum은 스플릿 버튼 사용 중단 → 버튼 그룹 권장.
• Material 3은 표현력 강화를 위해 스플릿 버튼을 정식 컴포넌트로 포함.

5. 장단점

• 장점: 공간 절약 및 기능 분리로 UI 단순화 가능.
• 단점: 초기 사용자 혼란, 모바일 환경에서의 터치 오류 가능성.

결론

• 스플릿 버튼은 Material 3의 유연한 UI 구성을 위해 추가되었으나, 디자인 일관성과 사용성을 고려한 적절한 정렬 및 애니메이션 적용이 필수적입니다. RTL 언어 지원과 메뉴 정렬 규칙을 준수해야 하며, 버튼 내 역할 분리에 따른 사용자 혼란을 방지하기 위해 간결한 디자인이 중요합니다.