구글이 버튼을 그룹핑하는 방법
버튼 그룹의 특징과 사용방법
일반 버튼과 버튼 그룹버튼을 그룹핑한다고요?
버튼 그룹(Button Group)은 여러 개의 버튼을 시각적으로 묶어 사용자가 관련된 액션들을 빠르게 인지하고 조작할 수 있도록 돕는 컴포넌트입니다. M3 Expressive에서는 버튼 그룹을 통해 버튼 간 상호작용, 레이아웃 적응, 계층적 표현력 등을 강화하여 인터페이스의 유연성을 높였습니다.
버튼을 그룹으로 만드는 이유
기존의 버튼들은 나란히 놓이기만 할 뿐, 버튼 간의 연계된 인터랙션이나 시각적 통일성이 부족했습니다.
Material 3에서는 보다 풍부한 표현력과 적응형 레이아웃을 고려해 버튼 그룹을 독립 컴포넌트로 정의하였고, 특히 세그먼트 버튼(Segmented Button)의 역할을 대체할 수 있도록 연결된 버튼 그룹(Connected Button Group)이라는 새로운 형태를 제안했습니다.
본 글에서는 새롭게 추가된 버튼 그룹의 특징과 사용방법에 대해서 알아보겠습니다. Expressive에서 추가된 스플릿 버튼(Split Button)에 대해 더 자세히 알고 싶으신 분은 아래 글을 참고해 주세요!
버튼 그룹의 구성
1️⃣ 컨테이너 (Container)
버튼 그룹은 아이콘, 텍스트 버튼 등 다양한 요소로 구성될 수 있지만, 이들을 감싸고 레이아웃 및 인터랙션을 제어하는 상위 구조로서의 ‘컨테이너’가 핵심 개념입니다. 따라서 버튼 그룹은 버튼의 집합이라기보다 버튼을 담는 그릇 역할의 컨테이너로 이해하는 것이 더 정확해 보입니다.
버튼 그룹의 유형
버튼 그룹은 표준 버튼 그룹과 연결된 버튼 그룹으로 나뉩니다.
표준 버튼 그룹
표준 버튼 그룹(Standard button group)은 독립적인 액션 버튼들을 나란히 배치할 때 사용됩니다.
각 버튼은 둥근 형태를 유지하며, 버튼 간에는 일정한 여백이 존재합니다. 이 그룹에서는 선택된 버튼이 너비나 형태 면에서 변화할 수 있으며, 그 변화가 인접한 버튼에까지 영향을 미치는 경우가 많습니다. 버튼 그룹 전체가 하나의 유기적인 단위처럼 동작하도록 설계된 것이 특징입니다.
일반적으로 저장, 취소, 삭제 등의 주요 액션을 묶어 보여줄 때 적합하며, 버튼의 크기와 스타일은 콘텍스트에 따라 유연하게 조정됩니다.
연결된 버튼 그룹
연결된 버튼 그룹(Connected button group은 주로 하나 이상의 옵션을 선택할 수 있도록 구성된 컴포넌트입니다. 기존의 세그먼트 버튼은 연결된 버튼 그룹으로 대체됩니다.
버튼들이 물리적으로 연결된 형태를 띠며, 테두리를 공유하거나 일관된 높이와 너비로 정렬됩니다. 사용자는 여러 개 중 하나 또는 여러 개를 선택할 수 있으며, 선택된 버튼만 시각적으로 강조됩니다. 이때 다른 버튼에는 영향을 주지 않아, 명확한 선택 상태를 전달하는 데 효과적입니다.
주로 필터, 보기 전환, 정렬 옵션과 같이 세그먼트 버튼의 역할을 대체하여 사용됩니다.
버튼 그룹의 사용방법
버튼 그룹은 제품에 더 많은 표현력을 부여합니다.표준 버튼 그룹은 인접한 버튼 간의 상호작용을 추가하여 서로 반응하도록 만듭니다. 표준 그룹 내의 버튼이 선택되면 다음과 같은 변화가 발생합니다.
선택된 버튼의 형태와 너비가 변경됩니다.
선택된 토글 버튼은 색상도 함께 바뀝니다.
인접한 버튼들은 움직이며 일시적으로 너비가 변합니다.
형태 변화는 중요한 상호작용을 위한 경우에만 사용합니다.버튼의 종류, 너비, 색상을 다양하게 조합하여 중요한 요소를 강조하고, 관련 버튼들을 시각적으로 묶을 수 있습니다. 기본적으로 표준 버튼 그룹에 포함된 모든 버튼은 동일한 크기(XS부터 XL까지)와 형태(둥근 모양 또는 네모난 모양)를 가져야 합니다.
중요한 순간(hero moments)에만 그룹 내에서 다양한 크기를 사용해야 합니다.
크기 혼합은 자주 사용하지 않도록 합니다.
버튼이 선택되었거나 의미나 대비를 줄 필요가 있을 때에만 다른 형태를 사용해야 합니다.
연결된 버튼 그룹은 유사한 동작 간 토글하는 용도로 사용할 수 있습니다.연결된 버튼 그룹은 사용자가 옵션을 선택하거나, 보기 방식을 전환하거나, 페이지 내 요소를 정렬할 수 있도록 도와줍니다. 이들은 표준 버튼 그룹과 유사한 방식으로 동작하지만, 인접한 버튼에 영향을 주지 않는다는 점이 다릅니다. 연결된 버튼 그룹은 더 이상 사용되지 않는 세그먼트 버튼을 대체해야 합니다.
버튼의 내용이 서로 관련되어 있고, 선택이 가능한 경우에는 연결된 버튼 그룹을 사용합니다. 쇼핑 앱에서 상품의 용량을 선택할 수 있도록 연결된 버튼 그룹이 사용된 경우 서로 밀접하게 관련된 동작은 연결된 버튼 그룹에서 효과적으로 작동합니다.
단일 또는 다중 선택 패턴에는 연결된 버튼 그룹을 사용합니다.연결된 버튼 그룹은 토글 버튼을 사용하는 단일 선택 또는 다중 선택 패턴에 사용해야 합니다. 버튼 중 어느 것도 토글 될 수 없는 경우에는 연결된 버튼 그룹을 사용하지 않아야 합니다.
연결된 버튼 그룹은 배치된 페이지나 영역의 너비를 가득 채우도록 구성하며, 이로 인해 내부 버튼들의 너비도 함께 늘어납니다. 넓은 화면에서는 그룹이 지나치게 넓어지지 않도록 최대 너비를 설정하는 것이 좋습니다.
버튼은 창 크기에 따라 너비, 크기, 패딩을 수동으로 조정할 수 있습니다.버튼 그룹은 레이아웃 내에서 한 줄로 함께 이동해야 하며, 두 번째 줄로 줄 바꿈 되면 안 됩니다. 여러 개의 버튼 그룹을 세로로 쌓아 배치해 항목들을 가까이 유지할 수는 있지만, 버튼 그룹 간에는 세로 방향 상호작용은 없습니다.
아이콘 버튼의 경우 수동으로 너비를 조정할 때, wide 이상으로 과도하게 늘리는 것은 피해야 합니다.
창 크기에 따라 버튼 그룹의 크기, 형태, 패딩을 수동으로 조정할 수도 있습니다.작은 창에서는 버튼 그룹 내 모든 버튼이 들어갈 수 있도록 더 작고 좁은 버튼을 사용하는 것이 좋습니다. 반면, 큰 화면에서는 더 크고 넓은 버튼을 사용하여 여유 공간을 효과적으로 채울 수 있습니다.
유동적인(Flexible) 버튼 또는 버튼 그룹은 창 크기에 따라 너비가 자동으로 조정됩니다.
레이아웃과 기기 전반에 걸쳐 일관된 계층 구조를 유지해야 합니다.큰 창으로 확장될 때에도 버튼 각각의 시각적 계층 구조가 유지되도록 색상이나 크기와 같은 속성을 활용해야 합니다. 예를 들어, 주요 액션(primary action)은 모든 창 크기에서 가장 크고, 가장 넓으며, 가장 시각적으로 눈에 띄는 버튼으로 유지되어야 합니다.
면 크기에 따라 버튼이 메뉴에 숨겨지거나 다시 표시되어야 합니다.작은 창에서는 버튼 그룹의 끝에 있는 버튼들을 메뉴로 접히도록 설정할 수 있으며, 창 크기가 커지면 다시 표시되도록 할 수 있습니다. 메뉴는 버튼 그룹의 끝쪽에 배치하는 것이 좋습니다. 버튼 그룹 외부에 있는 버튼은 버튼 그룹의 동작에 영향을 받지 않습니다.
표준 그룹에서는 버튼을 누르면 인접한 버튼도 함께 너비가 변화합니다.버튼이 눌리면 해당 버튼의 너비와 형태가 변경됩니다. 표준 버튼 그룹에서는 버튼을 누르면 인접한 버튼의 너비에도 영향을 줍니다. 반면, 연결된 버튼 그룹에서는 눌린 버튼만 형태가 변경되며, 다른 버튼에는 영향을 주지 않습니다.
선택된 버튼은 시각적 구분을 위해 형태가 바뀌어야 합니다.선택된 버튼은 둥근 형태에서 사각형으로, 또는 사각형에서 둥근 형태로 형태가 변경되어야 합니다.
연결된 버튼 그룹과 세그먼티드 버튼의 차이는 뭔가요?
둘의 기능 자체는 같지만, 표현적인 인터랙션을 위해 버튼 그룹에 포함되었다고 할 수 있습니다.
기존의 세그먼티드 버튼과 연결된 버튼 그룹세그먼티드 버튼 역시 단일 또는 다중 선택이 가능하지만, 구성 방식이 비교적 고정적이고 시각적 표현이 제한적입니다.
연결된 버튼 그룹은 버튼의 크기, 색상, 형태를 더 유연하게 조정할 수 있으며, 선택 상태에 따라 형태가 변화하는 등 시각적 인터랙션도 강화되었습니다. 버튼들이 연결된 듯한 형태로 배치되며, 선택된 버튼만 시각적으로 강조되어 명확한 피드백을 제공합니다.
Expressive는 이러한 유연성과 표현력을 기반으로 세그먼티드 버튼의 사용을 점차 줄이고, 연결된 버튼 그룹을 그 대안으로 제시하고 있습니다.
마치며
버튼 그룹은 관련된 액션을 시각적으로 묶어 사용자에게 명확한 맥락을 전달하는 유용한 컴포넌트입니다. 버튼 간 관계를 직관적으로 보여주고, 화면 크기나 상황에 따라 유연하게 동작하도록 설계되어 다양한 인터페이스에서 일관된 경험을 제공합니다. 표준 버튼 그룹은 상호작용과 계층 표현에, 연결된 버튼 그룹은 명확한 선택 구조에 유리합니다. 다만, 형태나 크기 설정, 반응형 대응에는 섬세한 설계가 필요합니다.
Material 3는 기존 세그먼트 버튼을 대체하며, 표현력 있는 UI 구성을 위해 버튼 그룹을 독립 컴포넌트로 제안합니다. 이는 단순한 버튼 배열을 넘어 상호작용, 레이아웃, 계층 구조를 통합적으로 고려한 설계로, 제품 전반의 일관성과 사용성을 함께 높이려는 방향성을 보여줍니다.
버튼 그룹에 대한 더 자세한 글은 아래에서 확인하실 수 있습니다!
