버튼 종류 싹 다 파헤치기
버튼의 종류와 사용방법
버튼의 종류
버튼(Button)은 사용자가 탭 하여 특정한 작업이나 액션을 실행할 수 있도록 하는 컴포넌트입니다. 다음과 같은 다양한 버튼 유형을 사용하여 사용자의 주의를 끌 수 있습니다. 본 글에서는 종류별 버튼의 사용방법에 대해 알아보도록 하겠습니다.
일반 버튼
❶ 기본 버튼 (Elevated button)
❷ 강조 버튼 (Filled button)
❸ 톤 강조 버튼 (Filled tonal button)
❹ 외곽선 버튼 (Outlined button)
❺ 텍스트 버튼 (Text button)
세그먼트 버튼
❻ 세그먼트 버튼 (Segmented button)
아이콘 버튼
❼ 아이콘 버튼 (Icon button)
FAB
❽ 플로팅 액션 버튼, FAB (Floating action button, FAB)
❾ 확장형 FAB (Extended FAB)
일반 버튼
1번부터 5번까지 해당하는 일반 버튼의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 아이콘 (Icon, 선택사항)
❸ 텍스트 (Label text)
버튼은 사용자가 취할 수 있는 작업을 전달합니다. 일반적으로 다이얼로그(Dialogs), 폼(Forms), 카드(Cards), 도구 모음(Toolbars)과 같은 위치에 배치됩니다.
버튼은 제품에서 동작을 나타내는 한 가지 옵션일 뿐이며, 과도하게 사용되어서는 안 됩니다. 화면에 버튼이 너무 많으면 시각적 계층 구조가 깨집니다.
추가 작업이 필요하다면 네비게이션 드로어(Navigation drawer), 칩(Chips), 텍스트 링크(Text links), 아이콘 버튼(Icon buttons) 등에 배치하는 것을 고려할 수 있습니다.
텍스트는 버튼의 가장 중요한 요소입니다. 사용자가 버튼을 탭 하면 발생하는 동작을 설명합니다.
버튼 레이블 텍스트에는 문장 대문자를 사용하고 첫 번째 단어와 고유 명사를 대문자로 표시합니다. 텍스트 줄 바꿈은 지양해야 합니다. 최대한 읽기 쉽게 하려면 레이블 텍스트는 한 줄에 있어야 합니다.
아이콘은 버튼의 동작을 시각적으로 전달하고 주의를 끌도록 도와줍니다. 왼쪽에서 오른쪽(LTR)으로 쓰는 언어의 텍스트가 있는 버튼의 레이블 왼쪽에 아이콘을 배치합니다. 오른쪽에서 왼쪽(RTL)으로 쓰는 언어의 텍스트가 있는 버튼의 레이블 오른쪽에 아이콘을 배치합니다.
기본 버튼 (Elevated button)
기본 버튼은 일반적으로 페이지에서 더 눈에 띄게 보입니다. 버튼의 높이가 높을수록 더 눈에 띄게 됩니다.
강조 버튼 (Filled button)
강조 버튼은 FAB 다음으로 시각적으로 큰 효과를 발휘하며 저장, 지금 가입, 확인과 같이 큰 플로우를 완료하는 중요한 마지막 작업에 사용해야 합니다.
톤 강조 버튼 (Filled tonal button)
톤 강조 버튼은 강조 버튼과 외곽선 버튼 사이의 중간 지점입니다. 우선순위가 낮은 버튼이 외곽선보다 더 강조되어야 하는 상황에서 유용합니다. 톤 강조 버튼은 보조 색상을 사용합니다.
외곽선 버튼 (Outlined button)
외곽선 버튼은 중간 강조 버튼입니다. 중요한 작업이 포함되어 있지만 앱에서의 주요 작업은 아닙니다. 외곽선 버튼은 강조 버튼과 함께 사용되며 2차적인 작업을 나타냅니다.
텍스트 버튼 (Text button)
텍스트 버튼은 우선순위가 가장 낮은 작업에 사용되며, 특히 여러 옵션을 제시하는 경우에 사용됩니다. 텍스트 버튼은 다양한 배경에 배치할 수 있습니다. 버튼과 상호작용 하기 전까지는 컨테이너가 보이지 않습니다.
세그먼트 버튼
세그먼트 버튼은 사용자가 옵션을 선택하고, 보기를 전환하고, 요소를 정렬하는 데 도움이 됩니다. 세그먼트 버튼의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 세그먼트 (Segment)
❷ 아이콘 (Icon, 선택사항)
❸ 컨테이너 (Container)
❹ 텍스트 (Label text, 선택사항)
❺ 구분선 (Divider)
세그먼트 버튼은 2~5개의 선택사항을 선택하는데 가장 적합합니다. 단일 세그먼트 버튼에 5개 이상의 세그먼트를 사용하면 안 됩니다. 5개 이상인 경우, 칩과 같은 다른 컴포넌트를 고려해야 합니다.
아이콘은 그 자체로 레이블로 사용될 수도 있고, 텍스트와 함께 사용될 수도 있습니다. 레이블 텍스트 없이 아이콘만 사용하는 경우, 해당 아이콘이 나타내는 옵션을 명확하게 전달해야 합니다.
레이블 텍스트는 짧고 간결해야 합니다. 텍스트가 세그먼트에 비해 너무 길다면 아이콘만 사용하는 것을 고려할 수 있습니다.
레이블 유형은 일관되게 사용해야 합니다. 아이콘은 레이블 텍스트 대신 사용할 수 있지만, 그 의미를 명확하게 전달해야 합니다. 아이콘 전용 레이블과 텍스트 레이블을 섞으면 안 됩니다. 하나의 유형을 선택하여 통일해야 합니다.
단일 선택
단일 선택 세그먼트 버튼은 여러 옵션 중 하나를 선택하거나, 뷰를 전환하거나, 최대 5개의 요소를 정렬할 때 사용됩니다. 예를 들어, 단일 선택 세그먼트 버튼은 음료 크기 선택처럼 특정 크기 옵션 중 하나를 선택하는 데 사용할 수 있습니다.
다중 선택
다중 선택 세그먼트 버튼은 2~5개의 옵션 중에서 선택하거나 정렬할 때 사용됩니다. 단일 선택과 달리 반드시 하나를 선택할 필요가 없으며, 사용자는 모든 옵션을 선택하거나 아무것도 선택하지 않을 수도 있습니다. 예를 들어, 다중 선택 세그먼트 버튼은 레스토랑을 검색할 때 가격 범위로 필터링하는 데 사용할 수 있습니다.
세그먼트 버튼은 프레임 가장자리로부터 적절한 여백이 있어야 합니다. 더 큰 화면이나 창의 전체 너비에 걸쳐 있는 것은 지양합니다. 이렇게 하면 세그먼트 레이블의 양쪽 패딩이 너무 많이 남아 버튼의 사용성이 떨어질 수 있습니다.
아이콘 버튼
아이콘 버튼은 일반 및 컨테이너 아이콘으로 분류됩니다. 아이콘 버튼의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 아이콘 (Icon)
❷ 컨테이너 (Container, 컨테이너 버튼 한정)
아이콘은 버튼의 동작을 시각적으로 전달합니다. 그 의미는 명확하고 모호하지 않아야 합니다.
컨테이너는 컨테이너 아이콘 버튼에만 존재합니다. 배경이나 다른 요소와 시각적으로 더 분리되어야 하는 곳에 대비와 계층 구조를 강화해 줍니다.
아이콘 버튼은 일반적으로 상단 앱 바 및 카드와 같은 다른 컴포넌트에 사용됩니다. 이러한 버튼은 일반적인 작업에 사용해야 하며, 한 번에 몇 개의 아이콘 버튼만 표시해야 합니다.
밀집된 레이아웃에서는 많은 아이콘 버튼을 나란히 배치하여 인기 있는 작업의 도구 모음을 만들 수 있습니다.
플로팅 액션 버튼 (Floating Action Button, FAB)
화면에서 가장 중요한 액션에 FAB을 사용합니다. FAB의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 아이콘 (Icon)
FAB은 화면상의 모든 콘텐츠 앞에 표시되며, 둥근 형태와 중앙의 아이콘으로 쉽게 알아볼 수 있습니다. FAB은 화면의 주요 액션을 제공할 때만 사용해야 합니다. FAB는 왼쪽, 중앙, 오른쪽으로 정렬할 수 있으며, 내비게이션 바 위에 배치하거나 바 안에 포함시킬 수도 있습니다.
FAB의 아이콘은 명확하고 이해하기 쉬워야 합니다. 추가, 메시지 또는 편집과 같이 명확하고 간단한 아이콘을 사용합니다. 명확성을 위해 툴팁을 사용할 수 있는지 확인합니다. 제스처, 꽃과 같이 덜 일반적인 동작을 상징하기 위해 혼란스럽거나 끝이 열려 있는 아이콘은 지양합니다.
소형 FAB
소형 FAB은 보조적이고 지원적인 작업에 사용되거나 컴팩트한 창 크기에서 기본 FAB 대신 사용됩니다. 하나 이상의 작은 FAB를 기본 FAB 또는 확장형 FAB과 함께 사용할 수 있습니다. 그러나 한 화면에 여러 개의 확장형 FAB을 사용하면 시각적 계층구조를 방해하므로 사용하면 안 됩니다.
대형 FAB
큰 FAB는 명확하고 두드러진 주요 액션이 필요한 레이아웃에서 유용하며, 버튼의 크기가 클수록 사용자가 더 쉽게 인식하고 조작할 수 있습니다. 예를 들어, 중간 크기의 창에서 사용할 때 적합합니다. 더 큰 크기로 인해 화면에 중요한 정보가 가려지는 경우 대형 FAB을 지양합니다.
확장형 FAB
확장형 FAB은 일반 FAB이 명확하지 않을 때 사용합니다. 확장형 FAB의 구성과 사용방법에 대해 알아보도록 하겠습니다.
❶ 컨테이너 (Container)
❷ 아이콘 (Icon)
❸ 텍스트 (Label text)
액션에 대한 지속적인 액세스가 필요한 길고 스크롤되는 뷰가 있는 화면에서는 확장형 FAB을 사용합니다. 스크롤할 수 없는 뷰에서는 확장형 FAB을 지양합니다.
스크롤이 없는 화면에서는 확장형 FAB을 사용하면 안 됩니다. 대신 일반 버튼을 사용할 수 있습니다.
확장형 FAB 컨테이너의 너비는 고정되거나 유동적일 수 있습니다. 유동적인 폭의 컨테이너는 화면 너비나 레이아웃 그리드와 같은 화면 크기와의 관계에 따라 정의됩니다.
표준 FAB과 달리 확장형 FAB에는 아이콘이 필요하지 않습니다. 확장형 FAB에는 텍스트 레이블이 없는 아이콘이 있을 수 없습니다.
앱 바에 FAB을 겹치면 안 됩니다. 이는 엘리베이션과 표면 레이어의 일관성을 방해합니다. 확장형 FAB을 앱 바와 같은 요소에서 떨어진 나머지 UI 위에 배치해야 합니다.
어디에 어떤 버튼을 써야 하나요?
다음과 같이 강조 수준에 따라 세 단계로 분류하여 버튼을 사용할 수 있습니다.
높은 강조
화면에서 가장 기본적이고 가장 중요하며 일반적인 작업에 대하여 사용합니다.
확장형 FAB : 확장형 FAB는 더 넓은 형식과 텍스트 라벨을 포함하여 일반 FAB보다 시각적으로 더 두드러집니다. 주로 일반 FAB이 너무 작아 보일 수 있는 큰 화면에서 사용됩니다.
FAB : FAB은 화면의 주요 액션을 위한 기본 컴포넌트로 사용됩니다. 소형 FAB, 기본 FAB, 대형 FAB의 세 가지 크기로 제공됩니다.
강조 버튼 : 강조 버튼은 대비되는 표면 색상 덕분에 FAB 다음으로 가장 눈에 띄는 버튼입니다. 주로 흐름에서 최종적인 행동이나 진행을 막고 있는 요소를 해제하는 데 사용됩니다.
중간 강조
다른 화면 요소를 방해하지 않는 중요한 작업의 경우 사용합니다.
톤 강조 버튼 : 일반 강조 버튼보다 덜 두드러지도록 설계되었으며, 더 밝은 배경색과 더 어두운 라벨 색상을 가집니다. 여전히 흐름 내에서 최종 작업이나 차단 해제 작업에 사용되지만 강조는 덜 합니다.
기본 버튼 : 기본적으로 강조 버튼과 유사하지만, 더 밝은 배경색과 그림자를 포함하고 있습니다. 그림자 확산을 방지하기 위해, 버튼이 패턴이 있는 배경에서 시각적으로 분리될 필요가 있을 때만 사용해야 합니다.
윤곽선 버튼 : 기본 작업이 아니지만 사용자의 주의를 필요로 하는 작업에 사용됩니다. 예를 들어, 모두 보기(See all)나 장바구니에 추가(Add to cart) 같은 버튼에 적합합니다. 또한, 사용자가 결정을 변경하거나 흐름에서 벗어날 수 있도록 돕는 역할도 합니다.
낮은 강조
가장 눈에 띄지 않는 선택 또는 보충 작업의 경우 사용합니다.
텍스트 버튼 : 시각적 강조가 적기 때문에 부가적인 선택지와 같은 낮은 우선순위의 작업에 사용됩니다.
세그먼트 버튼 : 단일 아이콘 버튼보다 시각적 강조가 더 크며, 여러 개의 관련된 선택지를 나열할 때 사용됩니다.
아이콘 버튼 : 가장 작고 미묘한 형태의 버튼으로, 북마크 또는 즐겨찾기와 같은 보조적인 작업에 사용됩니다.
마치며
버튼은 사용자가 명확히 동작을 수행하도록 도와주는 가장 직관적인 컴포넌트 중 하나입니다. 탭 만으로 쉽게 액션을 실행할 수 있으며, 상태(State)에 따라 사용자에게 피드백을 제공할 수 있습니다. 또한 다양한 크기, 색상, 형태로 스타일링할 수 있어 디자인에 맞게 커스터마이징이 가능합니다.
하지만 동일한 계층에서 너무 많은 버튼을 배치하면 시각적으로 부담을 줄 수 있으며, 버튼의 우선순위가 명확하지 않으면 사용성이 떨어질 수 있습니다. 따라서 버튼을 사용할 때는 동작의 중요도에 따라 적절한 스타일을 선택하고, 한 화면에서 너무 많은 버튼을 배치하지 않도록 주의해야 합니다.
본 글에서는 상태나 사례보다는 버튼의 종류에 집중하여 알아보았으며, 버튼의 한글 명칭은 해석에 따라 다르게 정의될 수 있습니다. 더욱 자세한 내용은 아래 가이드에서 확인하실 수 있습니다.
