구글이 무료로 풀어놓은 UX/UI 필독 문서

UX in Practice

UX/UI 디자이너를 꿈꾸는 분들이 "뭘 공부하면 좋을까요?"라고 물어볼 때가 있습니다. 저는 비핸스보다 먼저 봐야 할 것이 있다고 답합니다.

 

1.

Google의 무료 컴포넌트 교과서

대학 시절, 도서관에서 책 읽듯 하나씩 정독했던 리소스가 있었습니다. Google의 Material Design 컴포넌트 가이드라인이었습니다.

출처: Google, "Components", Material Design 3

이 가이드는 버튼, 체크박스, 토글, 라디오 버튼 등 약 30개의 UI 컴포넌트 각각에 대해 용도, 조건, 제약을 상세하게 설명합니다. 단순히 "이렇게 생겼다"가 아니라 "이럴 때 쓰고, 이럴 때는 쓰면 안 된다"를 알려주는 거죠.

 

Atomic Design이 말하듯 UI는 최소 단위의 조합으로 이루어지는데, 정작 그 최소 단위를 어떻게 선택해야 하는지는 학교에서 알려주지 않았습니다. 더블 다이아몬드, 사용자 리서치, 퍼소나 같은 정석적인 이론은 배웠지만, "여기에 버튼이 맞을까, 토글을 넣는 게 맞을까?" 같은 판단에 대해서는요.

출처: Miloš Jokić, "Grouping Components in Atomic Design Systems", UX Collective

UX Engineer로 일하면서 기획부터 프론트엔드 구현까지 직접 하다 보니, 실무에서 가장 자주 마주하는 건 이런 컴포넌트 단위의 의사결정이었습니다. 그리고 이 가이드를 읽어두면, 그 판단에 근거가 생깁니다.

2.

Quiz Time

간단한 퀴즈를 준비해봤습니다!

Quiz 1

속성이 비슷한 두 컴포넌트를 골라보세요

Checkbox

 

Pickles

 

Tomato

 

Cheese

Radio Button

 

Relevance

 

Lowest price

 

Highest rating

Switch

 

Wi-Fi

카드를 클릭하여 2개를 선택하세요

 

겉으로 보면 Checkbox와 Radio Button이 비슷해 보입니다. 네모와 동그라미, 목록에서 선택하는 UI이니까요. 하지만 가이드라인을 읽어보면 답이 달라집니다.

"Radio buttons let people select one option from a set of options."

라디오 버튼은 여러 옵션 중 하나만 선택하게 합니다.

"Checkboxes let users select one or more items from a list, or turn an item on or off."

체크박스는 목록에서 하나 이상의 항목을 선택하거나, 항목을 켜고 끌 수 있게 합니다.

"Switches toggle the selection of an item on or off."

스위치는 항목의 선택 상태를 켜고 끌 수 있게 합니다.

 

정답은 Checkbox와 Switch입니다. 둘 다 on/off 전환이 가능한 컴포넌트이고, Radio Button은 여러 옵션 중 하나를 고르는 완전히 다른 역할이죠. 실제로 Material Design 가이드라인에서도 Checkbox의 비교 대상은 Radio Button이 아니라 Switch입니다.

 

겉으로 보이는 것과 다릅니다. 컴포넌트를 공부하면 생김새가 아니라 역할로 구분할 수 있게 되고, 그 차이가 설계의 디테일을 만듭니다.

 

Quiz 2

이 FAB 사용, 왜 안 될까요?

출처: Google, "FAB Guidelines", Material Design 3

"Use FABs for primary, positive actions"

"Don't use FABs for minor, overflow, unclear, or destructive actions"

FAB는 Create, Favorite, Share 같은 화면의 핵심 행동에만 권장되는 컴포넌트입니다. 사소하거나 파괴적인(destructive) 액션에는 쓰지 말라고 명시하고 있죠.

3.

실무 적용 사례: Button to Switch

기존 기능에 옵션을 추가하는 작업을 하게 되면서 UI를 살펴보았는데, on/off 전환이 토글 버튼으로 처리되어 있었습니다.

BEFORE

토글 버튼의 컬러 변화로 상태를 표시

Auto Highlight

OFF 상태

→

 

Auto Highlight

클릭 시 스피너

→

Auto Highlight

ON 상태

Start/Stop처럼 명확한 라벨 변화 없이
버튼 컬러만으로 on/off 상태를 표시하고 있었다

 

토글 버튼도 on/off 전환이 가능한 컴포넌트이긴 하지만, 이 경우에는 라벨이나 아이콘의 명확한 변화 없이 버튼 컬러만 바뀌는 구조여서 유저가 현재 상태를 직관적으로 인지하기 어려웠습니다. 단순한 설정값의 on/off라면 스위치가 더 적합하다고 판단했고, 새로 추가되는 컬러셋 옵션은 여러 개 중 하나만 고르는 상황이므로 라디오 버튼으로 설계했습니다.

AFTER

드롭다운 버튼 + 팝오버로 역할 분리

Auto Highlight

Auto Highlight

 

 

Color Set

 

 

 

 

Set A

 

 

 

 

Set B

 

 

 

 

Set C

on/off는 스위치로, 옵션 선택은 라디오 버튼으로
버튼 클릭 시 팝오버로 설정 UI가 노출되는 구조

 

참고로 저도 토글 버튼과 스위치의 차이가 헷갈렸는데, 아래 가이드라인을 읽어보니 명확하게 이해할 수 있었습니다.

[참고1] Buttons Guidelines (Toggle Button 포함)

m3.material.io

[참고2] Switch Guidelines

m3.material.io

마치며

Material Design 컴포넌트 가이드를 한번 정독해보세요. 컴포넌트 하나를 고를 때도 근거가 생기고, 그 근거가 여러분의 디자인을 단단하게 만들어줄 겁니다.