(DAY14) 컴포넌트 알아보기

 

안녕하세요 :)

오늘은 어제와 이어서 피그마로 클론 디자인 공부를 진행했습니다.

컴포넌트가 무엇인지 알아보고, 피그마로 따라 그려보는 실습도 진행했습니다.

 

---

 

✏️오늘의 학습

컴포넌트에 대해 알아보기

실습 1) 컴포넌트 3~5개 리서치하고, 피그마로 컴포넌트 그려보기

실습 2) 유튜브 뮤직 앱 화면 클론 디자인 → 오토 레이아웃, 하이라키 공부하기

 

 

 

 

📖오늘의 핵심

미래의 감정을 느끼는 연습을 해야한다.  감정이 먼저 → 그다음 행동 → 그러면 결과가 따라온다.

성격은 내가 만든 가치관의 프레임이다. 프레임을 바꿔라. 

(조 디스펜자 박사 영상 中)

 

 

 

 

📝수업 내용 메모장

 

UI 구성요소란?
사용자가 디지털 제품과 상호작용하는 모든 화면의 요소
우리가 직접 눈으로 보고 클릭하는 것들이 UI임. 

그리고 이런 것들을 컴포넌트라고 함

컴포넌트 (구성요소) 종류
App bars : top
현재 어느 페이지에 있는지 알려줌
뒤로가기, 돋보기 아이콘 등이 들어가기도 함
(OS별 제공하는 기능이 조금씩 다르고 각기 다른 이름으로 호칭)

Bottom navigation
앱의 기본 메뉴이동 어느곳에나 액세스할 수 있어야 하는 최상위 대상 (최소 3개 ~ 최대 5개의 메뉴)

Search bar
검색바

Tab bar 
탭은 관련이 있고 동일한 계층 구조의 컨텐츠 그룹 간에 탐색을 구성하고 허용
탭은 아이콘과 텍스트 포함가능, 텍스트 레이블은 짧게
고정 탭, 각 탭의 너비는 탭 수를 화면 너비로 나눔

Check box
다중선택이 가능함

Radio button
체크박스랑 혼동하지 않기
다중선택 안됨

Toggle Button or switch
on/off 형태의 버튼

Tooltip
마우스 갖다대면 제공해주는 메뉴에 대한 설명 말풍선

Card
정보를 한 덩어리로 묶어주는 컴포넌트

Banners
공지, 이벤트 영역

Sliders
막대를 따라 범위에서 값(또는 범위)을 보고 조절하는 컴포넌트.
볼륨 및 밝기 설정 조절, 이미지 필터 적용에 이상적으로 씀

Snack bars
사용자에게 앱이 수행했거나 수행 할 프로세스를 알려준다.
일시적으로 화면 하단에 나타남
ex) Retry, 확인 등 버튼이 있음

사용자 경험을 방해해서는 안되며 사라지는 데 사용자 입력이 필요하지 않음
+ 토스트메시지랑 살짝다름.  But 현업에선 스낵바 용어랑 혼용해서 쓰기도 함
토스트메시지는 버튼이 없음

+ 사이트 추천
component.gallery
google merterial design
human interface guideline (Apple)


추가 과제

책, 사용자를 사로잡는 UXUI 실전가이드 ~43p 책 읽기


✨ 컴포넌트 레퍼런스 찾아보는게 중요한 이유
→ 다양하게 활용되는 것을 봐야 문제해결과정에서 디자이너로서 아이디어 제시에 용이함

 

 

 

 

실습 1) 컴포넌트 3~5개 리서치하고, 피그마로 컴포넌트 그려보기

 

 

 

 

 

 

 

💡 다른 분들은 대부분 토글버튼을 많이 찾아오신게 너무 귀여웠다. 예상했던 상황이라 최대한 다른 것들을 서치해보려고 노력했다. 아이콘은 직접 그리지 않고 자료를 활용하는 쪽으로 진행했는데, 비슷한 아이콘을 찾으면 벡터가 아니라 이미지 파일인 경우가 많아서 색상 조정이 좀 불편했다. 어제 오토레이아웃을 배웠을 때는 하이라키가 뭔지 몰랐는데, 하루 지났다고 꽤 적응이 된 느낌이었다.

 

하이라키 Hierarchy

시각적 위계를 의미함

즉, 화면에서 어떤 요소가 먼저 눈에 띄고, 그다음에 무엇을 보게 되는지를 정리하는 개념.

 

피그마 오토레이아웃 기능을 활용할 때 어떤 정보끼리 덩어리로 묶이는지를 잘 봐야 한다. 이걸 멘토님께서 "하이라키가 중요하다" 라고 표현하시는 것 같다.

 

 

 

 

 

 

 

실습 2) 유튜브 뮤직 앱 화면 클론 디자인

 

 

 

 

 

 

💡 아이콘 찾는 시간이 꽤 걸리니까 그냥 비슷한 느낌을 내는 아무 아이콘으로 진행했다. 하이라키 파악하는 게 지금 단계에선 더 중요하다고 생각했다.

오토레이아웃, 패딩값, 간격 4배수 or 8배수 등 몰랐던 설정들을 배우고 적용해보는 연습을 해보니까 확실이 맨 처음에 클론디자인 했던 것보다 훨씬 정돈되어 보이고, 별 거 안했는데도 디자인이 잘 되어있는 것처럼 느껴졌다.

 

 

 

---

 

💡느낀점

 

디자인 원리 중에서 균형, 비례, 강조, 리듬을 왜 디자인기초로 다뤘는지 체감했다. 피그마는 써보면 포토샵, 일러스트레이터보다 훨씬 직관적인 툴이기 때문에 적응만 하면 속도가 붙을 것이고, 전체적인 UI들의 정돈을 도와주기 때문에 기본 이상의 퀄리티는 보장될 것이라는 생각이 들었다. 여기서 한층 더 퀄리티를 높이기 위해서는 역시 생각하는 힘을 기르는 것이 중요하겠다.💪🏻

그런데 아직은 컴포넌트 용어에 대해 익숙치가 않아서..이론을 공부하는 데 시간을 좀 들여야 하기 때문에 마음이 조급해지기도 한다... 이 또한 매일 꾸준히 하다 보면 금방 익숙해질거라고 믿는다. 🍀