[9월 4주차] Material Designs 3 - Material A-Z (UI 요소 용어)
UI 컴포넌트의 큰 그림을 그리고 가는 파트!
사이드 프로젝트 회의 중 프론트엔드 개발자 팀원과 이야기를 하는데, 서로 어떤 컴포넌트를 가리키는지 알면서도 그 컴포넌트의 이름을 둘 다 기억하지 못해 애먹었던 경험이 있다. ('kebab'이었다는 후문..)
그래서 통용되는 컴포넌트 이름을 한번 정리하면 좋겠다 싶었는데 마침 Material Design 3에 주요 UI 컴포넌트를 사전 식으로 정리해본다.
01. Banner
중요한 메시지 및 그에 관련된 액셩을 표시
02. Button
사용자로 하여금 어떤 액션을 시작할 수 있도록 도움
03. Button App Bar
모바일 화면 하단에 주요 내비게이션 아이콘 또는 액션을 표시
04. Bottom Sheet
화면 하단에 걸리는 콘텐츠로, 보충적인 내용을 담고 있음
05. Card
(UI 디자인 배우기 시작한 초창기에 처음으로 배웠던 용어.. UI 카드)
어떤 대상에 관한 정보를 모아서 담은 콘텐츠
06. Checkbox
사용자로부터 1개 이상의 아이템을 선택받음. 체크박스를 통해 선택을 활성/비활성할 수 있음
07. Chip
(내게 가장 익숙한 형태는 몇 서비스에서 종종 볼 수 있는 '태그 박스')
사용자로 하여금 정보에 접근하거나, 선택 액션을 수행하거나, 콘텐츠를 필터링하는 등 액션을 수행할 수 있도록 도움. 하나의 영역 안에 여러 개의 칩이 있을 수 있다. (예. 선택 가능한 영화 관람 시간대)
(컬러 관련 일부 내용은 생략)
08. Customization
유저 개개인의 취향을 반영한 UI 요소. 컴포넌트의 색상처럼 개별적인 요소에 적용될 수도 있고, 테마 등 전체 요소에 적용될 수도 있다
09. Dark theme
(다크 모드) 어두운 배경 위에서 모든 UI 요소의 빛 정도가 낮은 모드를 의미함
10. Data Table
열과 행으로 이루어진, 데이터로 채워진 표
11. Date Picker
유저로부터 날짜 선택을 입력받는 컴포넌트
12. Design attribute
컬러, 폰트 등 디자인 요소에 적용될 수 있는 디자인 토큰이나 코딩된 값을 의미함
13. Design guidelines
가이드라인은 주로 예시를 들어서 디자인과 관련된 정책이나 사용처를 자세하게 설명한 문서임. 디자이너와 개발자로 하여금 문제 해결 및 의사결정에 도움을 받을 수 있도록 설계된 문서
14. Design System Package (DSP)
Adobe에서 개발한 것으로, 디자인 시스템 관련 정보를 공유할 수 있는 도구
(디자인 토큰 관련 내용은 앞서 다른 문서에서 자세하게 살펴보았기 때문에 생략)
15. Dialog
유저 플로우에서 중요한 프롬프트(사용자의 명령을 받아들일 준비가 되었음을 표시)를 보여주는 컴포넌트. 사용자의 행동 수행을 돕거나 정보를 전달하는 역할을 한다
16. Divider
리스트나 레이아웃 내에서 서로 관련성 있는 콘텐츠를 묶는 얇은 선
17. Element
디자인 토큰이나 특정 값이 적용되는 요소의 부분을 특정하는 용어
18. Extended FAB
(primary button이라고 보면 된다. FAB = Floating Action Button)
사용자로 하여금 중요한 액션을 취할 수 있도록 돕는 요인. 텍스트 레이블을 충분히 담기 위해 타겟 구역도 넓게 잡는 편이다
19. Floating action button (FAB)
화면에 가장 중요한 정보를 표시하는 컴포넌트. 중요 정보와 연관되어 사용자가 수행할 수 있는 / 수행해야 하는 액션을 유도한다
20. HCT
Hue(색상), Chroma(채도), Tone(톤. 명도와 채도를 종합하는 개념) 을 의미한다
21. Image list
조직적으로 구성된 그리드 내에 표시된 이미지의 묶음
22. List
텍스트 또는 이미지가 연속적으로 나열되어 있는 묶음
23. Menu
임시적인 지면(버튼을 클릭해야 내용 펼쳐지기가 된다든지) 위에 사용자가 선택 가능한 옵션을 보여주는 컴포넌트
24. Mode
사용자의 기기 사용 경험을 더 좋게 만들어주는 세팅. 예) 집중 모드, 비행기 모드, 절전 모드
25. Navigation bar
앱 내에서 주요 기능으로의 이동을 언제 어디서나 간편하게 할 수 있도록 돕는 컴포넌트
26. Navigation drawer
(햄버거 등의 아이콘을 누르면 화면 좌측에서 서랍 열듯이 펼쳐짐)
앱 내에서의 주요 기능으로의 이동을 인체 공학적 (서랍을 여는 듯한 현실 세계의 행동을 비슷하게 구현했다는 뜻인 듯) 으로 구현한 컴포넌트
27. Navigation rail
태블릿, 데스크탑 화면에서 자주 보이는 내비게이션 컴포넌트. (세로로 내비게이션 아이콘이 쭉 나열되어 있는 형태)
28. Progess Indicator
처리 과정의 대기 시간이나 길이 등을 보여주는 컴포넌트 (정확하게 n초 남았다는 식으로 표시하는 게 아니라 대강 시각화)
29. Radio button
사용자로부터 1개의 아이템 선택값을 입력받음
30. Side sheet
화면의 좌측 또는 우측에 걸려있는 콘텐츠로, 보충적인 내용을 담고 있음
31. Slider
(에어비앤비 숙소 검색할 때 가격 필터 설정하는 바로 그 컴포넌트)
사용자로부터 범위에 대한 선택값을 입력받음
32. Snackbar
화면 하단에서 잠시 등장했다가 사라지는 컴포넌트로, 주로 앱 내의 기능 처리 상황에 대한 간단한 메시지를 전달함
33. Switch
단일 아이템의 상태를 껐다 켰다 할 수 있는 토글 컴포넌트
(토글 : 하나의 설정값으로부터 다른 설정값으로 전환하는 것)
34. Tab
다른 화면, 데이터셋, 상호작용 등 간에 콘텐츠를 정렬하기 위해 쓰이는 컴포넌트 (말로 풀어쓰니 오히려 어려운 느낌인데, chrome 창 전환할 때 클릭하는 바로 그 요소를 의미한다)
35. Text Field
사용자가 글자를 입력하고 수정할 수 있는 컴포넌트
36. Theme
컬러, 높이, 타입 등 앱의 UI 요소에 전역적으로 적용될 수 있는 스타일의 세트를 의미
37. Time picker
사용자로 하여금 특정 시간대의 선택값을 입력받는 컴포넌트
38. Tooltip
사용자가 호버 / 포커스 / 탭하면 해당 요소에 대한 정보 텍스트를 표시하는 컴포넌트
39. Top app bar
화면 상단에 정보 및 액션을 표시하는 컴포넌트
40. Widget
안드로이드 기기에서 홈 화면에 작게 제어판처럼 자리잡고 있는 컴포넌트