모바일디자인버튼

모바일 UI에서 버튼의 구조, 유형, 시각적 계층구조, 상태, 크기, 위치 등 버튼 디자인의 핵심 원칙을 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

모바일 디자인 - 버튼

버튼(Button)은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤(imperative control)입니다. 버튼의 가장 큰 특징은 사용자가 터치했을 때 즉각적으로 명령을 실행시키는 점입니다.

버튼의 특징

버튼은 어포던스(Affordance)가 있어야 한다

버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징(어포던스)이 있습니다. 사용자가 텍스트 필드 같은 입력 컨트롤로 정보를 입력하고 선택 컨트롤로 항목을 선택한 후 버튼을 누르면 입력 데이터가 전송되거나 실행 파일이 구동됩니다.

현재는 버튼의 시각적인 효과보다는 컬러와 레이블과 정교한 상호작용 디자인으로 버튼의 형태가 변경되었습니다.

버튼은 실제 세계의 메타포(Metaphor)가 적용되었다

메타포가 적용되면 학습 없이도 UI 요소의 기능과 개념을 이해하여 직관적으로 사용할 수 있습니다. 오디오, 세탁기, 텔레비전 리모컨의 물리적인 버튼을 가상의 모바일 화면에 동일하게 조작되도록 구현됩니다.

버튼은 콘텐츠와 구분되어야 한다

버튼과 콘텐츠가 같이 있을 때 버튼을 보고 실행 가능함을 한눈에 알아볼 수 있어야 합니다. 버튼에 사용한 색과 스타일을 콘텐츠에 사용하면 사용자는 혼란스러워 합니다.

Tip: UI 컨트롤은 사용자가 콘텐츠를 이해하고 상호작용 할 수 있게 해주는 수단일 뿐입니다. 콘텐츠가 우선(Content First)이 되어야 합니다.

버튼은 전환율과 직접적으로 연관성이 있다

전환을 유도하는 페이지(landing page)에서 사용되는 버튼을 **CTA 버튼(Call to Action button)**이라고 합니다. 사용자가 특정 행동을 취하게 하려면 설득력 있는 CTA 버튼을 디자인하는 것이 중요합니다.

버튼의 구조

텍스트로 된 버튼 레이블과 레이블을 감싸는 직사각형 컨테이너가 버튼의 최소한의 요소입니다.

1. 버튼 레이블(Button Label)

버튼 레이블은 버튼을 누를 때 실행되는 명령에 대해 나타냅니다. 사용자가 레이블만 보고도 무엇이 실행될지 알아야 합니다.

2. 컨테이너(Container)

버튼 레이블을 감싸는 직사각형의 시각적인 요소입니다. 색이 채워진 직사각형은 물리적인 기기의 버튼 형태를 연상시킵니다.

3. 아이콘(Icon)

아이콘은 그 자체로 레이블이 될 수 있습니다. 아이콘 단독으로 사용하면 아이콘 버튼이 됩니다.

4. 아웃라인(Outline)

버튼의 컨테이너에 색을 채우지 않고 아웃라인에만 색을 사용합니다. 고스트 버튼(ghost button)과 아웃라인 버튼(outline button)이 있습니다.

5. 라운드(Round)

버튼 컨테이너의 모서리 부분에 라운드를 주는 것입니다. 브랜드의 콘셉트에 따라 라운드의 크기를 조절해서 적용할 수 있습니다.

6. 그림자(Shadow)

그림자는 버튼의 어포던스를 높일 수 있는 그래픽 요소입니다. 주로 컨테이너 버튼이나 CTA 버튼에 사용합니다.

버튼의 유형

솔리드 버튼(Solid Button) : 가장 일반적인 형태. 직사각형 컨테이너에 액션을 의미하는 색이 채워져 있고 레이블은 흰색
고스트 버튼(Ghost Button) : 흰색 배경에 레이블과 아웃라인으로 된 버튼. 컨테이너 버튼보다 중요도가 떨어지는 액션에 사용
아웃라인 버튼(Outline Button) : 텍스트 레이블을 아웃라인으로 감싼 구조. 고스트 버튼보다 중요도가 떨어진 버튼에 사용
밝은 솔리드 버튼(Light Solid Button) : 밝은 회색 배경에 액션 색 텍스트
텍스트 버튼(Text Button) : 컨테이너나 아웃라인 없이 텍스트 레이블만 있는 버튼
아이콘 버튼(Icon Button) : 레이블 없이 아이콘만 사용된 버튼. 툴바와 내비게이션 바에서 사용

파괴적인 버튼(Destructive Button)

영구적으로 데이터를 지우는 작업에 사용합니다. 오류를 나타내는 붉은색을 사용하여 실수인지 한번 더 생각할 수 있게 합니다.

Warning: 레이블은 <확인>같이 중립적인 표현보다는 사용자가 수행하려는 작업인 <삭제> 또는 <삭제하기>를 사용합니다.

버튼의 시각적 계층구조(Hierarchy)

버튼은 크게 3가지 정도의 시각적 계층을 가질 수 있습니다.

기본 버튼(Primary Button)

가장 중요한 액션에 사용됩니다. 솔리드 버튼을 사용합니다. 브랜드 색상을 사용하여 가장 눈에 띄게 디자인해야 합니다.

Info: 기본 버튼은 화면당 하나만 있는 게 좋습니다.

보조 버튼(Secondary Button)

버튼 중 가장 많이 사용하는 버튼입니다. Default 버튼이라고도 합니다. 고스트 버튼이나 아웃라인 버튼 또는 밝은 솔리드 버튼을 사용합니다.

부가 버튼(Tertiary Button)

한 화면에 많은 버튼을 배치해야 할 경우 사용합니다. 텍스트 버튼을 사용합니다.

버튼 디자인 원칙

기본 버튼은 한 화면에 하나만 있어야 한다

기본 버튼이 여러 개 있으면 콘텐츠의 집중도가 떨어지고 읽기를 방해할 수 있습니다.

선택 컨트롤과 버튼의 시각적 계층 구조는 명확해야 한다

버튼이 같이 있다면 버튼이 시각적으로 더 강조되어야 합니다. 기능이 다른 컨트롤과 버튼의 시각적인 중요도는 달라야 합니다.

경고창(Alert)에서 기본 버튼은 사용하지 않는다

경고창에서는 기본 버튼(Primary Button)보다 텍스트 버튼을 사용합니다.

버튼의 상태(State)

버튼은 다양한 상태를 가집니다:

기본 상태(Default/Normal) : 활성화되어 있고 사용자가 탭할 수 있는 상태
포커스 상태(Focus) : 접근성을 위한 상태
호버 상태(Hover) : 마우스가 올라간 상태 (데스크톱)
활성 상태(Active/Pressed) : 사용자가 버튼을 누르고 있는 상태
로딩 상태(Loading/Progress) : 작업이 진행 중인 상태
비활성 상태(Disabled) : 사용할 수 없는 상태

비활성 상태(Disabled)

비활성 버튼은 사용자가 현재 탭할 수 없음을 시각적으로 보여줍니다. 투명도를 낮추거나 회색으로 처리합니다.

버튼의 크기

애플 : 44픽셀 기본, 30픽셀과 50픽셀 3가지 크기
안드로이드 : 36px 기준, 36px, 48px, 56px(플로팅 버튼) 3가지 크기
마이크로소프트 : 30px, 40px, 50px 권장

엄지 존(Thumb Zone)과 버튼의 위치

스마트폰의 전체 상호작용 중 75%를 엄지손가락이 도맡고 있습니다. 화면 상단은 엄지손가락이 닿기 어렵고 하단은 편하게 닿을 수 있습니다.

Info: 화면의 가장 중요한 버튼은 엄지손가락으로 편하게 터치할 수 있는 화면의 하단 중앙이 가장 좋습니다.

중요한 버튼(기본 버튼, 긍정적인 버튼)은 화면 하단, 오른쪽에 배치
파괴적인/부정적인 액션 버튼은 엄지손가락이 닿기 어려운 화면 상단에 배치

버튼 레이블

버튼의 레이블은 명확하고 예측 가능해야 합니다.

동작(action)과 관련이 없는 "OK", "예", "아니오" 같은 일반적인 언어를 사용하면 안 됩니다.
<명사> + <동사> 형식을 사용하세요. (예: "사진 삭제", "장바구니 담기")
버튼에 사용한 색을 콘텐츠에 적용하면 사용자는 혼란스러워합니다.

Warning: 버튼의 색은 접근성을 고려하여 디자인합니다. 색 대비는 최소 3.0, 최대 4.5 이상이어야 합니다.