[UI/UX] 2. UI 파헤치기 -Button1
구글의 Material Design과 예시로 공부하는 UI
*About this article
-Design system to study with Google's Material Guide_#2
-The color of the non-original text is gray.
*이 글에 관한 설명
- 구글의 머터리얼 가이드로 알아보는 UI Component에 관한 글입니다.
- 구글 가이드라인 원문이 아닌 덧붙이는 글은 회색으로 표기하였습니다.
이번 글부터는 UI, UX중 UI Component들에 대해 하나씩 파헤치고 공부하려고 한다.
UI Component들의 이름조차 헷갈렸던 초창기에 여러 브런치 작가 분들의 글 덕분에 도움을 받았는데,
나 또한 스스로 이곳에 개념도 정리하고 디자이너들과도 지식을 공유하여 늘 발전하는 디자이너가 되고싶다.
우선 사용자 인터페이스를 설계하고자 하는 디자이너가 공부차 보면 좋은 자료는
Google Material Design guide와 Apple의 Human Interface Guidelines이 있다.
이 두 가이드 라인은 전세계 모든 사용자 인터페이스 디자이너들에게 영감과 좋은 지침이 되어주었다.
둘 중 우리나라에서 가장 많이 사용하는 Android OS를 감안하여 구글의 머터리얼 디자인 가이드를 해석하고, 일상에서 사용하는 App 서비스를 예로 들어 더 쉬운 설명을 덧붙이는 쪽으로 진행하고자 한다.
*구글 가이드라인 원문이 아닌 덧붙이는 글은 회색으로 표기하였다.
1. Button이란 무엇일까?
버튼(Button)은 한 번의 탭으로 사용자가 행동할 수 있게 합니다.
- 버튼을 '탭' 또는 '터치'하여 사용자가 어떠한 액션을 취할 수 있게 합니다.
[참고] Google Material Design guide중 Buttons part- 머터리얼 디자인 가이드에서 기본적인 버튼 디자인은 위와 같이 5가지로 나열되어 있습니다. 기본적으로 버튼들은 그 중요도와 위계에 따라 윤곽선(Stroke), 면(Filled), 텍스트(Text) 등과 같은 요소들로 디자인을 달리 하고 있습니다.
1.1 Usage_버튼의 사용
버튼들은 사용자가 취할 수 있는 액션이 무엇인지 전달하고, 일반적으로 UI 전체에 배치되며, 다음과 같은 위치에 배치됩니다.
Dialogs
Modal windows
Forms
Cards
Toolbars
[예시1] Dialogs 등 모달/팝업 윈도우에서 쓰이는 경우
[자료] 본인 휴대폰 캡처마켓컬리에 접속하니, 광고 팝업창이 떴다. 팝업창에서는 2가지 액션을 취할 수 있는 Button이 있다. Action1: 오늘 하루 안 보기, Action2: 창 닫기
신한SOL에 접속했더니 광고 팝업이 떴다. Action1: 다시보지 않기, Action2: 오픈뱅킹 하러가기.
직방에 접속하니 곧바로 업데이트 하라는 팝업창이 떴다. Action1: 나중에, Action2: 지금 업데이트.
네이버>네이버페이로 이동했더니 광고 Toast popup이 떴다. Action1: 지금 확인하기, Action2: 7일간 보지않기.
[예시2] Form, Card, Toolbar에서 쓰이는 경우
[자료] 본인 휴대폰 캡처에이블리와 지그재그에서 물건을 구매할 때 입력 Form 화면이 필수적으로 나오는데, 이 입력 폼 화면 안에도 여러 가지 버튼들이 배치돼 있다.
신한 알파의 '홈'에서 여러가지 주식 관련 정보들을 제공하는데, 카드 형식의 뉴스 콘텐츠가 나열돼 있고 각 카드에는 '더 많은 뉴스'라는 Text 형식의 버튼이 배치되어 있다.
Figma Mirror 앱으로 피그마를 사용할 땐 하단부에 Toolbar가 제공되며 Icon형식의 버튼(Butcon)이 나열되어 있다.
이처럼 버튼들은 UI 전체에 배치되어 우리가 특정한 액션을 취하여 서비스를 이용할 수 있도록 해주는 중요한 역할을 하고 있다.
1.2. Principles_버튼 원칙
Identifiable
버튼들은 사용자가 액션을 취할 수 있다는 것을 암시해야 합니다.
Findable
버튼은 다른 버튼을 포함한 다른 요소들 사이에서 쉽게 찾을 수 있어야 합니다.
Clear
버튼의 동작과 상태는 명확해야 합니다.
1.3. Types_ 버튼 타입
[참고] Google Material Design guide중 Buttons part1. Text button (low emphasis)
텍스트 버튼은 일반적으로 중요도가 덜한 곳에 사용됩니다.
2. Outlined Button (medium emphasis)
아웃라인 버튼은 윤곽선 때문에 텍스트 버튼보다 더 강조되는 곳에 사용됩니다.
3. Contained button (high emphasis)
컨테이너 버튼은 색상 채우기와 그림자를 사용함으로써 더욱 강조되는 곳에 쓰입니다.
[예시3] 강조에 따라 다른 Button 디자인
[자료] 본인 휴대폰 캡처브랜디 팝업창:
상품 홍보를 위한 화면으로 사용자를 이동시키기 위해 '바로보기'의 버튼이 Filled button으로 사용되었고 '오늘 하루 보지않기'에는 상대적으로 힘을 빼준 것으로 보인다.
오늘의 집:
스크랩 아이콘 클릭 시 스크랩 팝업이 나타난다. 사용자들이 스크랩한 콘텐츠를 폴더링하는 작업을 많이 하는 것을 알고, 엄지 손가락에 더 가깝게 우측에 배치한 것으로 보인다.
당근마켓:
마이페이지에 진입하자마자 토스트 팝업이 떴고, 이메일을 등록해달라는 요청이 있었다. 사용자의 연락처나 개인정보를 받아가는 것은 매우 의미 있는 일로 '이메일 등록하기'를 Filled button, '다음에 할게요'는 Text button으로만 디자인되어 그 의도를 알 수 있었다.
너무 길면 집중 흐트러지니까 여기서 끊어 가기!
다음 글에선 버튼 디자인 시 유의할 점과 사용자와 상호작용하는 방법에 대해 알아보겠습니다.
[참고자료]
1) What's the difference between a Modal, Popup, Popover and Lightbox?
2) Google Material Design
https://m2.material.io/components/buttons#usage
