모바일 UI 디자인 기본 요소 - 버튼

🏷 Vivian's curating

UX/UI 가이드라인에 이어 이번엔 UI 요소 중에 하나인 버튼에 대해 자세히 다룬 아티클을 가져왔습니다.

모바일 디자인을 하면서 어떻게하면 이용자가 좀 더 편하게 진행 버튼을 탭하고, 직관적으로 버튼을 알 수 있도록 만들지 고민이 된다면 해당 아티클을 읽어 보시길 추천드립니다.

✍️ 요약

1. 버튼은 어포던스*가 있어야 한다.

   → 버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징이 있으며 사용 상황이 크게 바뀌는 경우에 버튼을 사용한다.

   → 현재 버튼의 디자인은 컬러와 레이블, 정교한 상호작용 디자인으로 형태가 변경되었다.

   • 어포던스(Affordance) : 어떤 행동을 유도한다는 뜻. 행동유도성

     
     

2. 버튼은 실제 세계의 아날로그 기기의 조작 버튼을 메타포*로 적용됐다.

   → 메타포가 적용되면 학습 없이도 UI 요소의 기능과 개념을 이해하여 직관적으로 사용할 수 있다.

   • 메타포(metaphor) : 은유.

     
     

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

   → 버튼을 보고 실행 가능함을 한눈에 알아볼 수 있어야 한다.

   → 버튼은 비슷한 것끼리 묶어서 구성하며, 위치는 사용자가 하려는 작업의 진행 순서를 고려하여 지정한다.

   → 한 화면에 지나치게 많은 버튼을 노출하지 않으며, 콘텐츠를 보는데 방해가 되지 않는 방향으로 그래픽 요소의 사용을 최소화 해야 한다.

   
   

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

   → 전환이란, [구매],[다운로드].[구독] 등 매출과 관련성이 높은 행위함을 의미한다.

   → 전환율 = 방문자수/전환수 (%)

   → 전환을 유도하는 페이지(랜딩 페이지)에서 사용되는 버튼을 CTA(Call To Action)이라고 한다.

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

   → 버튼의 시각적인 계층구조는 오류 가능성을 줄이고 사용자가 원하는 행동을 유도하기 위해 필요하다.

   → 기본 버튼은 화면에서 가장 중요한 액션에만 사용하고 그 외의 액션은 보조 버튼이나 부가 버튼을 사용한다.

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

   → 버튼은 콘텐츠나 다른 컨트롤과 구분되어야 한다. 

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

   → 텍스트 버튼을 사용한다.

8. 버튼에 사용한 색을 콘텐츠에 적용하면 혼란스럽다.

   → 버튼에 사용한 색은 상호작용이 가능함을 알린다.

9. 버튼의 색은 접근성을 고려하여 디자인한다.

   → 가독성을 위해 배경과 대비를 이루어야 한다.

   → 접근성 기준으로 색 대비는 최소 3.0이고 최대 4.5 이상이어야 한다.

✅ 버튼의 구조

1. 버튼 레이블 : 버튼을 누를 때, 실행되는 명령. 이용자가 레이블만 보고도 무엇이 실행될 지 알아야 한다.

2. 컨테이너 : 버튼 레이블을 감싸는 직사각형의 시각적인 요소. 특별한 경우가 아니라면 한가지 색만 사용한다.

3. 아이콘 : 그 자체로 레이블이 될 수 있다. 버튼의 중요도가 높은 경우 아이콘과 레이블을 함께 사용한다.

4. 아웃라인 : 버튼 컨테이너에 색을 채우지 않고 아웃라인에만 색을 사용한다. 고스트 버튼, 아웃라인 버튼.

   → 고스트 버튼 : 라인 색이 액션에 사용하는 색을 사용하고 중요도가 더 떨어질 경우, 회색을 사용한다.

5. 라운드 : 컨테이너의 모서리 부분에 라운드를 준 것. 기능적으론 의미가 없지만 시각적인 측면에서 중요하다.

6. 그림자 : 버튼의 어포던스를 높일 수 있는 그래픽 요소. 주로 CTA 버튼에 사용. (iOS는 사용하지 않음)

✅ 버튼의 유형 또는 스타일

1. 솔리드 버튼 

   → 가장 일반적이며 시각적으로 눈에 띄는 형태의 버튼. 직사각형의 컨테이너에 액션을 의미하는 색상 fill.

   → 브랜드 색을 사용하여 브랜드 버튼이라고도, 컨테인디드 버튼이라고도 한다.

2. 고스트 버튼

   → 하얀 배경에 버튼 레이블과 아웃라인으로 된 버튼.

   → 레이블과 아웃라인의 색은 액션 색으로 채우며 컨테이너 버튼보다 중요도가 떨어진다.

3. 아웃라인 버튼

   → 텍스트 레이블을 아웃라인으로 감싼 구조.

   → 레이블은 검은색, 아웃라인은 회색으로 나타내며 고스트 버튼보다 중요도가 떨어진다.

4. 밝은 솔리드 버튼

   → 솔리드 버튼과 같이 레이블을 컨테이너가 감싸지만 밝은 회색 배경에 액션 색 텍스트.

   → 아웃라인 버튼과 같은 시각적 계층을 갖는다.

5. 텍스트 버튼

   → 컨테이너나 아웃라인 없이 텍스트 레이블만 있는 버튼.

   → 액션 컬러를 사용하여 하이퍼 링크와 같아 보인다. 텍스트 버튼은 중요도가 떨어지거나 내비게이션에 사용.

   → 총 3종류 : 액션 컬러에 볼드 텍스트. 액션 컬러에 레귤러 텍스트, 진회색에 볼드 텍스트

6. 아이콘 버튼

   → 툴바와 내비게이션바(앱바)에서 사용.

   → 검색의 돋보기 아이콘, 데이터를 삭제하는 휴지통 아이콘과 같이 아이콘만 보고도 의미를 이해할 액션에 사용한다.

7. 파괴적인 버튼

   → 영구적으로 데이터를 지우는 작업에 사용. 오류를 나타내는 붉은색을 주로 사용.

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

1. 기본 버튼 Primary Button

   → 가장 중요한 액션에 사용. 솔리드 버튼 사용. CTA 버튼이 여기에 속해야 한다.

   → 화면 당 하나만 있는 것이 좋으며 모든 화면에 필수적인 버튼은 아니다. (모달 대화 상자 제외)

2. 보조 버튼 Secondary Button (Default)

   → 가장 많이 사용하는 버튼. 

   → 보조 버튼은 2개가 될 수 도 있으며 기본 버튼보다 눈에 띄거나 주목도를 해치지 않아야 한다.

   → 고스트 버튼, 아웃라인 버튼 또는 밝은 솔리드 버튼 사용.

3. 부가 버튼 Tertiary Button

   → 한 화면에 많은 버튼을 배치해야 할 경우 사용.

   → 주로 텍스트 버튼 사용.

4. Quaternary Button

   → 텍스트 버튼에서 볼드체가 아닌 레귤러체를 사용. 보통 진한 회색.

   → 이용자가 탭하지 않으면 좋을 부정적인 액션에 사용.

✅ 버튼의 상태 Status

1. 디폴트 Default : 활성화 상태에서 이용자가 터치하기 전 상태.

2. 호버 Hover : 이용자가 버튼 위에 마우스나 손가락을 올렸을 때 상태변화를 통해 상호작용이 가능함을 알림.

3. 포커스 Focus : 이용자가 버튼을 탭하기 전 준비 단계.

4. 프레스드 Pressed : 이용자가 액션 실행을 위해 버튼을 탭하여 눌렀을 때의 상태. 디폴트 상태보다 어두운 색을 사용.

5. 비활성화 Disabled : 이용자가 작업을 완료하기 전에 버튼을 탭할 수 없는 상태. 

6. 프로그레스 Progress (Optional) : 버튼을 눌렀을 때 버튼 내에 진행률 표시를 넣어 진행 상태 알림.

7. 완료 Result (Optional) : 버튼을 눌러서 실행된 액션이 완료됐을 경우 사용. 이 상태는 다시 실행되지 않음. 

#UI #디자인 #UI요소 #버튼 #Button