Material Design 3의 스플릿 버튼: 표현력과 유연성을 높이는 새로운 컴포넌트 탐구

핵심 디자인 컨셉

Google Material Design 3의 Expressive 업데이트는 기존 M3 버튼에 '스플릿 버튼'을 추가하여, 기본 액션과 추가 옵션을 하나의 컴포넌트에 통합함으로써 시각적 복잡성을 줄이고 UI의 표현력을 강화하는 데 중점을 둡니다.

디자인 방법론 및 원칙

• 구조: 스플릿 버튼은 선행 버튼(주요 액션)과 후행 버튼(드롭다운 메뉴)으로 구성되며, 각각 아이콘과 텍스트 레이블을 포함할 수 있습니다.
• 사용 목적: 추가 옵션을 숨겨 시각적 복잡성을 줄이고, 주요 동작 옆에 여러 액션 메뉴를 효율적으로 추가할 때 사용합니다.
• 크기: 엑스트라 스몰부터 엑스트라 라지까지 다섯 가지 크기를 권장하며, 작은 화면에서 큰 버튼은 사용자의 주목을 유도하는 데 효과적입니다.
• 배치: 다른 버튼이나 버튼 그룹과 조화롭게 작동하며, 다른 버튼과의 크기 차이도 허용됩니다. 핵심 조작 요소는 크게, 보조 컨트롤은 작게 설계할 수 있습니다.
• 커스터마이징: 일반 메뉴 외에 카드와 같은 다른 컴포넌트를 열도록 커스터마이징할 수 있으나, 비정형적인 메뉴 형태보다는 표준적인 메뉴 방식을 권장합니다.
• 텍스트 및 아이콘: 선행 버튼은 간결한 텍스트(한두 단어)와 동작을 잘 나타내는 아이콘을 사용하고, 후행 버튼에는 항상 확장/축소 아이콘을 사용하며 변경하지 않는 것이 중요합니다.
• 언어 지원: 오른쪽에서 왼쪽(RTL) 언어 환경에서는 구성 요소가 반전되어 표시됩니다.
• 애니메이션: 메뉴 선택 시 아이콘이 180도 회전하는 쉐입 몰핑 애니메이션이 적용됩니다.
• 메뉴 정렬: 메뉴는 드롭다운 버튼의 가장자리에 맞춰 정렬하는 것을 이상적으로 권장하며, 공간 제약 시에는 버튼의 어느 한쪽 가장자리에 정렬할 수 있습니다. 메뉴와 버튼 간 간격은 4dp를 유지합니다.
• 모션: Expressive 모션 대신 일반 모션이 사용되어 스프링 같은 반발 없이 안정적인 움직임을 제공합니다.

디자인 임팩트

스플릿 버튼은 공간 절약과 기능 분리를 통해 UI를 단순화하고, 복합적 인터랙션 및 멀티 플랫폼 환경을 수용하는 Material Design 3의 방향성을 보여줍니다. 사용자에게 더 유연하고 표현적인 UI 경험을 제공할 수 있습니다.

업계 반응 및 트렌드

Adobe Spectrum과 같이 일부 디자인 시스템에서는 스플릿 버튼 대신 버튼 그룹을 권장하는 추세도 있으나, Material Design 3는 컴포넌트의 표현력을 높이고 다양한 사용 맥락을 수용하기 위해 스플릿 버튼을 정식 컴포넌트로 포함시켰습니다. 이는 복합적 인터랙션을 수용하려는 M3의 전략적 움직임을 시사합니다.

톤앤매너

이 글은 Material Design 3의 새로운 스플릿 버튼 컴포넌트를 상세하게 분석하며, 디자이너에게 실질적인 적용 가이드라인과 함께 M3의 디자인 철학 변화를 전달하는 전문가적이고 교육적인 톤을 유지합니다.