반으로 잘린 구글의 스플릿 버튼
스플릿 버튼의 특징과 사용방법
일반 버튼과 스플릿 버튼구글이 버튼을 반으로 잘랐다고요?
구글이 Expressive 업데이트를 통해 기존 M3 버튼(Button) 카테고리에 스플릿 버튼(Split Button)을 추가하였습니다. 분할 버튼이라고도 불리는 스플릿 버튼은 기본 액션 버튼과 드롭다운 메뉴가 함께 구성된 버튼입니다.
본 글에서는 새롭게 추가된 스플릿 버튼의 특징과 사용방법을 알아보며, 기존에도 종종 사용되던 스플릿 버튼과의 다른 점은 무엇일지 알아보겠습니다.
버튼(Button) 컴포넌트에 대해 더 자세히 알고 싶으신 분은 아래 글을 참고해 주세요!
스플릿 버튼의 구성
스플릿 버튼은 다음과 같이 구성됩니다.
1️⃣ 선행 버튼 (Leading button)
2️⃣ 아이콘 (Icon)
3️⃣ 레이블 텍스트 (Label text)
4️⃣ 후행 버튼 (Trailing button)
스플릿 버튼은 추가 옵션을 숨겨 시각적인 복잡성을 줄이는 목적으로 사용됩니다. 선행 버튼과 후행 버튼으로 구성되며, 각각의 버튼 안에는 아이콘과 텍스트가 포함됩니다.
스플릿 버튼의 사용방법
스플릿 버튼의 구체적인 사용방법을 알아보겠습니다.
스플릿 버튼은 주요 동작 옆에 여러 액션 메뉴를 추가할 때 사용됩니다. 이 버튼은 추가 옵션을 숨겨 시각적 복잡성을 줄여주며, 단독으로 또는 일반 버튼이나 아이콘 버튼과 함께 사용해도 잘 작동합니다.
스플릿 버튼은 일반 버튼 및 아이콘 버튼과 동일하게 엑스트라 스몰부터 엑스트라 라지까지 총 다섯 가지 크기를 권장합니다. 작은 화면에서 큰 스플릿 버튼을 사용하면, 사용자 주목이 필요한 주요 순간에 강조 효과를 줄 수 있습니다.
스플릿 버튼은 다른 버튼이나 버튼 그룹과 함께 사용할 수 있습니다. 위 이미지처럼 강조된 스플릿 버튼 옆에 두 개의 일반 아이콘 버튼이 함께 배치될 수 있습니다. 스플릿 버튼은 일반 버튼과도 조화롭게 작동합니다.
스플릿 버튼은 페이지의 다른 버튼들과 크기가 달라도 괜찮으며, 특히 더 많은 공간을 차지하기 때문에 그런 경우가 많습니다. 예를 들어, 미디어 플레이어에서는 재생 속도를 빠르게 바꾸기 위한 스플릿 버튼이 사용되거나, 추가 옵션을 여는 메뉴로 활용될 수 있습니다. 가장 중요한 조작 요소는 크게, 스플릿 버튼 안의 보조 컨트롤은 더 작게 설정할 수 있습니다.
스플릿 버튼은 일반적으로 메뉴를 열지만, 상황에 따라 카드(card)와 같은 다른 컴포넌트를 열도록 커스터마이징 할 수도 있습니다. 예를 들어, 스플릿 버튼이 강조된 색상 스킴의 메뉴를 열 수 있습니다.
✅ 스플릿 버튼에서는 일반적인 메뉴를 여는 방식을 사용합니다.
❌ 반면, 선택된 항목을 강조하기 위해 비정형적인 형태의 메뉴를 열도록 변경하는 것은 지양합니다.
앞쪽(메인) 버튼은 간결하게 한두 단어 정도로 구성하고, 동작을 가장 잘 나타내는 아이콘을 함께 사용하는 것이 좋습니다. 뒤쪽(드롭다운) 버튼에는 항상 확장/축소 아이콘을 사용해야 하며, 이 아이콘은 선택 시 회전하므로 변경하지 않는 것이 중요합니다.
예를 들어, 스플릿 버튼에 긴 레이블과 새로고침 아이콘을 사용한 사례는 권장되지 않습니다. 너무 긴 텍스트 레이블을 사용하거나, 드롭다운 아이콘을 다른 아이콘으로 변경하는 것은 지양합니다.
오른쪽에서 왼쪽(RTL)으로 쓰는 언어에서는, 스플릿 버튼의 구성 요소들이 반전되어 표시됩니다.
스플릿 버튼의 동작 방식
스플릿 버튼의 동작 방식을 간단히 알아보겠습니다.
스플릿 버튼은 메뉴 버튼을 선택하면 아이콘이 안쪽으로 180도 회전하며 열리고 닫히며, 이때 쉐입 몰핑(Shape morph) 애니메이션도 함께 적용됩니다.
스플릿 버튼에서 메뉴를 사용할 경우, 가능한 한 드롭다운(뒤쪽) 버튼에 맞춰 메뉴를 정렬해야 합니다. 스플릿 버튼에서 메뉴가 열리면, 메뉴의 앞쪽 가장자리(leading edge)가 드롭다운 버튼의 앞쪽 가장자리와 정렬되도록 배치하는 것이 이상적입니다.
공간이 충분하지 않은 경우에는, 메뉴를 버튼의 한쪽(앞쪽 또는 뒤쪽)에 정렬해도 됩니다. 스플릿 버튼의 메뉴가 열릴 때 메뉴의 뒤쪽 가장자리가 드롭다운 버튼의 뒤쪽 가장자리와 정렬된 경우처럼, 공간 제약이 있을 경우 앞쪽 또는 뒤쪽 버튼 중 한쪽에 메뉴를 정렬할 수 있습니다.
창 크기, 스크롤 위치 등 다양한 요인에 따라, 메뉴는 버튼 주위의 다른 위치에 표시될 수 있습니다. 이 경우에도 가능한 한 버튼의 어느 한쪽 가장자리(edge)에 정렬하는 것이 좋습니다. 또한, 메뉴는 스플릿 버튼과 4dp 간격을 두고 배치되어야 합니다.
1️⃣ 위쪽 정렬: 드롭다운(뒤쪽) 버튼에 맞춤
2️⃣ 아래쪽 정렬: 드롭다운(뒤쪽) 버튼에 맞춤
3️⃣ 위쪽 오른쪽 정렬
4️⃣ 위쪽 왼쪽 정렬
5️⃣ 아래쪽 오른쪽 정렬
6️⃣ 아래쪽 왼쪽 정렬
기존의 스플릿 버튼과 다른 점은?
스플릿 버튼에는 새로 추가된 Expressive에 모션이 아닌, 기존의 일반 모션이 사용됩니다. Expressive 모션은 기존 모션과는 다르게 스프링처럼 반발을 주는 움직임을 넣어 더 역동적이고 생생한 느낌을 주지만, 스플릿 버튼의 드롭다운과 같이 작은 부분에는 사용성을 위해 사용하지 않은 것으로 보입니다.
일반적인 스플릿 버튼과는 달라 보이지 않는 Expressive의 버튼그렇기 때문에 일반적으로 쓰이는 다른 스플릿 버튼들과는 크게 다를 점이 없어 보이는데요. 그렇다면 구글은 왜 이번 업데이트에 스플릿 버튼을 추가했을까요?
구글이 스플릿 버튼을 추가한 이유
Adobe에서는 더 이상 사용하지 않는 스플릿 버튼Adobe의 디자인 시스템인 Spectrum에는 이제 더 이상 스플릿 버튼을 사용하지 않습니다. 스플릿 버튼 대신 버튼 그룹을 권장하고 있죠.
반면 Material 3의 Expressive 업데이트는 컴포넌트의 표현력을 높이고, 다양한 사용 맥락에 맞춰 더 유연한 UI 구성을 가능하게 하는 데 중점을 둡니다. 이 흐름 속에서, 기존에는 단순성과 예측 가능성을 이유로 배제되었던 스플릿 버튼(Split Button)도 정식 컴포넌트로 포함되었습니다.
스플릿 버튼을 컴포넌트에 포함했을 뿐이지만, 이는 복합적 인터랙션과 멀티 플랫폼 환경을 수용하기 위한 M3의 방향성을 잘 보여주며, 이런 점에서 그 자체로도 의의가 있다고 할 수 있습니다.
마치며
스플릿 버튼은 공간을 절약하면서도 기능을 분리해 UI를 단순화할 수 있다는 점에서 장점이 있지만, 한편으로는 버튼 내 역할이 나뉘기 때문에 초기 사용자에게 혼란을 줄 수 있고, 모바일 환경에서는 터치 오류 가능성이 생길 수 있다는 점에서 주의가 필요합니다.
스플릿 버튼의 드롭다운 버튼이 원형으로 몰핑 되는 애니메이션을 보면, Expressive가 추구하는 역동적이고 표현적인 디자인 시스템이 무엇인지 느껴지는 것 같기도 합니다.
이러한 컴포넌트 각각의 사소한 변화들이 모여 M3 Expressive가 표현력 기반의 다양한 사용맥락을 수용하는 디자인 시스템으로 진화하는 것이 보일 거라 생각합니다. 과연 새 스플릿 버튼은 Material 생태계에서 오래 살아남을 수 있을까요?
본 브런치 북을 구독하시면 매주 구글 Expressive의 달라진 방향성을 받아보실 수 있습니다. 스플릿 버튼에 대한 더 자세한 글은 아래에서 확인하실 수 있습니다!
