[제로베이스 UIUX 스쿨 15기] 4주 1일차

용어 정리가 필요할 때

 용어 정리를 할 때가 온 것 같다. 제로베이스 수업과 커뮤니티에 있으면서 느낀건, 뭔가 구조에 대한 단어를 모르면 업무를 할 때 지장이 생긴다는 것이다. 특히 DP 같은 단위는 여전히 어렵다... 대체 어떻게 만들어야 한다는 것인가? 그냥 똑같은 사이즈로는 안되는걸까? 하고 고민하게 되고, 네비게이션 바는 대체 어디인가? 의문을 가지게 만든다. 버튼도 각각 버튼당 의미가 있고 수많은 용어가 UI/UX 입문자에게 들이닥친다. 조금은... 적어가면서 정리할 필요가 있는거 같다. 기획자가 되든 디자이너가 되든 개발자가 되든, 남과 공통된 언어로 소통하게 될텐데, 아무것도 모른다면 초보도 되지 못하는 것 아니겠는가?

내용이 좀 길어질 수도 있다. 그러므로 오늘은 Button대해서 알아보자.

구글 머테리얼에 정리되어있는 버튼 종류

 대표적으로 버튼은 5가지 존재한다.

1. 그림자로 띄워서 볼륨감 살린 버튼

2. 색을 채운 버튼

3. 톤을 살린 버튼

4. 윤곽선 강조 버튼

5. 그냥 텍스트만 넣은 버튼

 작업의 중요도에 따라 버튼 유형을 선택하며, 동작이 더 중요할수록 버튼이 더 강조되어야 한다.

시각적으로 가장 눈에 띄는 버튼은 FAB(floating action buttons)으로 사람들이 기본 작업을 수행하는 데 도움이 된다. 확장된 FAB를 사용하여 스크롤이 되어도 표면 콘텐츠 위의 기본 작업에 대한 지속적인 어필을 할 수 있다. 텍스트 레이블과 아이콘을 모두 위한 공간이 있기 때문에 확장된 FAB는 아이콘만으로는 너무 모호할 수 있는 경우 더 효과적일 수 있다.

 아이콘버튼의 경우는 두가지 경우가 있다.

 도구 모음이나 이미지 목록과 같이 간단한 버튼이 필요한 경우 아이콘 버튼을 사용한다. 아이콘 버튼에는 표준형과 포함형 두 가지 유형이 있다. 아이콘 버튼은 다양한 시스템 아이콘의 형태를 취할 수 있지만 아이콘의 의미가 모호하지 않은지 확인해야만 한다. 가리키면 아이콘 자체의 이름이 아니라 버튼의 동작을 설명하는 툴팁을 포함되어야 한다. 선택한 상태와 선택되지 않은 상태 모두 표현이 되어야만 한다.

 마지막으로는 세그먼트 버튼이 존재한다.

 이 역시 두가지로 존재하는데 한가지는 단일 선택 모드, 두번째는 다중 선택 모드가 있다. 단일 선택 세그먼트 버튼은 단일 옵션 선택, 보기 간 전환 또는 요소 정렬에 사용되며, 단일 선택 세그먼트 버튼은 단일 옵션 선택, 보기 간 전환 또는 요소 정렬에 사용된다.

머테리얼 가이드를 보면서 놀랐던것은 색상, 아이콘, 레이아웃, 이름, 모양, 타이포그래피까지 모두 기준을 잡아주고 있다는 점이었으며 그에 따라서 만들면 어느정도 완성도를 보장한다는 점이다. 이에 만약 기준을 잡지 못한다면 대기업의 디자인 가이드를 한번 검색하는 것이 확실히 이득일 것 같다.