[제로베이스 UI/UX 파트타임 스쿨] 14주차 - (수) 컴포넌트 디자인 - ETC(2) & ETC(3)

제로베이스 94일차 학습노트이다.

오늘은 컴포넌트 디자인의 ETC 두번째, 세번째 수업이었다. 앞서 앱바, 탭부터 시작해서 리스트에 이르기까지 다양한 컴포넌트들을 Sketch에서 작업해보았는데, 화면을 구성하는 가장 기본 단위라고 볼 수 있는 컴포넌트들을 잘 배울 수 있어서 좋았다.

---

오늘의 강의 내용

1. ETC(2)
스낵바는 사용자가 수행한 작업에 대해 간단히 피드백을 제공하는 역할을 하는 컴포넌트다. 오늘 수업에서는 스낵바의 위치, 색상, 텍스트 정렬 방식 등을 중심으로 실습을 진행했다. 하단 중앙이나 좌측에 배치되는 기본 형태를 그려보고, '재시도' 버튼처럼 간단한 액션이 포함된 형태도 만들어보았다.
스낵바는 잠시 나타났다가 사라지는 특성상 사용자에게 필요한 정보를 짧고 명확하게 전달해야 하기 때문에, 정보의 우선순위와 시인성을 고려하며 텍스트와 배경 색의 대비나 간격을 조정하는 데 집중했다.

 

2. ETC(3)

필터 칩(선택 칩)을 구성하는 화면에서 색상으로 활성화와 비활성화를 나누는 것을 진행하였고, 인풋 칩이라고 해서 칩 안에 내용을 함축하는 아이콘과 닫기 버튼이 있는 칩도 그렸다. 칩에 대해 그리며 하나의 칩 안에서도 각 간격이 동일하고 버튼의 색상이나 아이콘의 가이드 크기, 혹은 칩 자체의 크기와 곡률들이 동일해야 통일된 느낌을 받을 수 있다는 것을 알 수 있었다.

---

아무래도 툴들을 한번에 배우다보니 한 툴에 익숙해지기보다 따라하기 바쁘고 좀 쳐내는 과정이 많은 것 같다. 이 챌린지가 끝나고 나면 피그마부터 시작해서 복습해서 하나의 툴을 잘 다룰 수 있도록 꾸준하게 하는 과정이 필요한 것 같다. 앞으로 UIUX 디자이너가 되기 위해 툴에 대해서는 매우 익숙한 사람이 되어야겠다는 생각을 많이 하게 만드는 이번 강의들인 것 같다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.