구글이 버튼을 그룹핑하는 방법
카테고리
디자인
서브카테고리
UI 디자인
대상자
UI/UX 디자이너, Material 3 프레임워크 사용자, 웹/앱 개발자
핵심 요약
- 버튼 그룹(Button Group)은 관련 액션을 시각적으로 묶어 사용자 인지 편의성과 상호작용 유연성을 높이는 UI 컴포넌트입니다.
- 표준 버튼 그룹은 인접 버튼 간 상호작용을 강조하고, 연결된 버튼 그룹은 명확한 선택 구조와 시각적 통일성을 제공합니다.
- Material 3 Expressive은 세그먼트 버튼을 연결된 버튼 그룹으로 대체하여 유연한 표현력과 적응형 레이아웃을 지원합니다.
섹션별 세부 요약
1. 버튼 그룹의 정의와 목적
- 컨테이너(Container) 개념을 기반으로 버튼을 묶어 레이아웃 제어와 인터랙션 강화를 목표로 합니다.
- 기존 버튼의 시각적 통일성 부족을 해결하고, 계층적 표현력을 통합적으로 설계합니다.
2. 표준 버튼 그룹(Standard Button Group)
- 독립적인 액션 버튼을 나란히 배치하며, 선택 시 너비/형태 변화를 통해 상호작용 피드백을 제공합니다.
- 저장, 취소, 삭제 등 주요 액션 묶음에 적합하며, 콘텍스트에 따른 크기/스타일 유연성이 특징입니다.
- 중요한 순간(hero moments)에만 크기 혼합을 허용하고, 일반적으로 일관된 크기와 형태 유지 권장.
3. 연결된 버튼 그룹(Connected Button Group)
- 옵션 선택, 보기 전환, 정렬 등에 사용되며, 세그먼트 버튼의 대체 역할을 수행합니다.
- 물리적 연결 형태로 테두리 공유 및 일관된 높이/너비 정렬, 선택된 버튼만 강조하는 특징.
- 단일/다중 선택 패턴에 적합하며, 토글 불가능 시 사용 금지.
4. 반응형 디자인 고려사항
- 창 크기에 따라 버튼 너비, 크기, 패딩 수동 조정이 가능하며, 유동적 버튼은 자동 조정.
- 작은 화면에서는 작고 좁은 버튼 사용, 큰 화면에서는 넓은 버튼으로 여유 공간 채우기.
- 메뉴 접히기 기능으로 작은 화면에서 버튼 그룹 끝에 메뉴 배치 가능.
5. 시각적 인터랙션 설계
- 선택 시 버튼 형태 변화(둥근→사각형)를 통해 명확한 피드백 제공.
- 표준 그룹은 인접 버튼 영향 주는 너비 변화, 연결된 그룹은 선택된 버튼만 변화.
- 시각적 계층 구조 유지를 위해 색상, 크기 속성 활용 (예: 주요 액션은 모든 화면에서 눈에 띄는 크기 유지).
결론
- 연결된 버튼 그룹은 명확한 선택 구조에, 표준 그룹은 상호작용 강조에 유리하며, Material 3 Expressive에서 세그먼트 버튼 대체로 사용 권장.
- 반응형 디자인 시 크기/형태 유연성과 시각적 계층 일관성을 반드시 고려하고, 크기 혼합은 필요시만 적용해야 함.