[모바일 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