[ 컴포넌트 만들기 (1) ] _ 2주차 (화요일)

[ 카테고리별 컴포넌트 직접 만들어보기 ]

Components (구성요소) : 사용자 인터페이스를 만들기 위한 대화형 구성 요소로, 목적에 따라 구성됨

 

Actions (행위) : 사용자가 목표를 달성하기 위해 도움

Common Buttons (공동 버튼) : UI에서 대부분의 작업을 프롬포트함

 

Extended FAB (확장된 팹) : 확장된 플로팅 작업 버튼으로, 유저가 기본 작업을 수행함

 

Floating action buttons (플로팅 작업 버튼) : FAB, 유저가 기본 작업을 수행함

 

Icon buttons (아이콘 버튼) : 탭 한 번으로 사소한 작업을 수행함

 

Segmented button (분활된 버튼) : 유저가 옵션을 선택하고, 보기를 전환하고, 요소를 정렬함

 

 

 

Communication (의사소통) : 사용자에게 유용한 정보를 제공

Badges (배지) : 탐색 항목 및 아이콘에 대한 알림, 개수, 상태 정보를 표시함

 

Progress indicators (진행률 표시기) : 프로세스 상태를 실시간으로 보여줌

 

Snackbar (스낵바) : 화면 하단에 앱 프로세스에 대한 짧은 업데이트를 표시함

 

Tooltips (툴팁) : 간략한 레이블이나 메시지 표시

 

Containment (방지) : 버튼, 메뉴, 칩과 같은 기타 구성 요소를 포함하여 정보와 작업이 포함됨

Bottom sheets (하단 시트) : 화면 하단에 고정된 보조 콘텐츠가 표시됨

 

Cards (카드) : 단일 주제에 대한 콘텐츠와 작업이 표시됨

 

Carousel (회전목마) : 화면 안팎으로 스크롤할 수 있는 항목 모음을 표시함

 

Dialogs (대화상자) : 사용자 흐름에서 중요한 프롬프트 제공

 

Divider (분할기) : 목록이나 기타 콘텐츠를 그룹화하는 얇은 선

 

Lists (기울기) : 텍스트와 이미지의 연속적인 수직 인덱스 목록

 

Side sheets (사이드 시트) : 화면 측면에 고정된 보조 컨텐츠가 표시됨

 

Navigation (항해) : 사용자의 UI를 통한 이동을 도움

Bottom app bar (하단 앱바) : 화면 하단에 탐색 및 주요 작업이 표시됨

 

Navigation bar (네비게이션 바) : 탐색표시줄을 통해 더 작은 장치에서 UI 보기 간에 전환

 

Navigation drawer (탐색 창) : 더 큰 장치에서 UI 보기 간에 전환

 

Navigation rail (네비게이션 레일) : 중간 크기 장치에서 UI 보기 간에 전환

 

Search (찾다) : 검색을 통해 키워드나 문구를 입력하여 관련 정보를 얻음

 

Tabs (탭) : 다양한 화면과 보기에 걸쳐 콘텐츠를 구성함

 

Top app bar (상단 앱바) : 화면 상단에 탐색, 작업, 텍스트가 표시됨

 

Selection (선택) : 사용자가 선택 사항을 지정

Check box (체크박스) : 확인란을 사용하면 사용자가 목록에서 하나 이상의 항목을 선택하거나 항목을 켜거나 끔

 

Chips (작은 조각) : 사용자가 정보를 입력하고, 선택하고, 콘텐츠를 필터링하고, 작업을 실행함

 

Date pickers (날짜 선택기) : 날짜 또는 날짜 범위를 선택함

 

Menus (메뉴) : 임시 화면에 선택 항목 목록을 표시함

 

Radio button (라디오 버튼) : 옵션 세트에서 하나의 옵션을 선택함

 

Sliders (슬라이더) : 다양한 값에서 선택

 

Switch (스위치) : 항목을 켜거나 끔

 

Time pickers (시간 선택기) : 특정 시간을 선택하고 설정함

 

Text inputs (텍스트 입력) : 사용자가 텍스트를 입력하고 편집

Text fields (텍스트 필드) : 사용자가 UI에 텍스트를 입력함

 

[ 인사이트 ]

 이렇게 총 32가지의 컴포넌트를 만들어보았다. 목 뿌사지는 줄 알았다. 한 번씩 그려보니 모든 컴포넌트에 대한 이해가 완벽해졌다. 역시 삽질 만큼 무모하면서도 확실한 것은 없다.

 내일은 자주 이용하는 어플 한가지를 정해 그것을 완벽하게 따라 그려볼 예정이다. '배달의 민족'이나 '지그재그' 등 여러 후보를 놓고 생각하는 중인데 사실 코카콜라로 결정할거기 때문에 고민은 되지 않는다. 앞으로는 Material Icon 검색 방법이나 모양 사이의 간격을 설정하는 등 오늘 임의로 대충 그려넣은 것들에 대한 미숙한 점들을 중점적으로 공부해야겠다.

 아직은 UI 밖에 해본게 없어서 그런지 UI가 재밌다. 그런데 UI 디자이너는 월급이 적으니까 UX 실력도 겸비한 최상의 디자이너가 될거다. 그래도 이만하면 잘했다. 내 몸값은 내가 올린다. 사실 지금 하루종일 피그마만 만지니 피로가 이만저만이 아니다. 오늘의 인사이트는 왜 이렇게 감정적인걸까. 내일을 위해 배터리를 가득 채워놓아야겠다.