피그마 강의 (9) 디자인 시스템 및 UI 컴포넌트 제작 실습

개인적으로 2주차의 컨스트레인트와 오토레이아웃이 더 어렵다... 컴포넌트는 한 번 만들어본적이 있어서 그런지 개념적으로 엄청 어렵지는 않았다.

 

디자인 시스템

1) 아토믹 디자인 시스템:  원자를 모아서 분자를 만드는 것처럼, 파운데이션을 조합하여 컴포넌트를 만드는 방식을 의미한다.

 

참고하면 좋을 디자인 시스템 

1. Material Design

2. Line Design System

3. Millie Design Library 2.0

4. Lightning Design System 

5. DB Design System Database 

 

강의를 완강하고 어느 정도 피그마가 손에 익는다 싶으면 이런 디자인 시스템을 보고 분석하는 시간을 가져야겠다.

영어 문서 읽는 훈련도 좀 더 길러야겠다...

 

UI 디자인 

UI를 크게 분류하면 6가지 정도로 분류할 수 있다.

UI는 형태가 아닌 기능을 바탕으로 구분해야 한다. 그렇지 않으면 틀에 박힌 사고에 갇혀 새로운 UI 디자인을 떠올리기 어려울 수 있다.

 

1. 액션(Action) : 사용자가 중요한 행동을 수행할 때 사용한다.

- 버튼이 여기 속한다.

 

2. 인풋(Input): 사용자의 입력을 받을 때 사용한다.

- 텍스트를 입력할 수 있는 텍스트 필드

- 미리 정해둔 옵션 중 하나를 선택할 수 있는 셀렉트박스 등이 여기에 포함된다. 

맨 위는 텍스트필드, 그 아래는 셀렉트박스.

 

3. 인포메이션: 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용한다. 

- 토스트 메시지나 스낵바, 라벨 등이 여기에 속한다.

 

4. 컨테이너: 컴포넌트 여러 개가 결합되어 하나의 덩어리를 이루는 컴포넌트이다.

- 카드, 바텀시트, 리스트처럼 복잡한 구조인 경우가 많다. 

이건 카드

5. 네비게이션: 사용자가 페이지를 이동할 때 사용한다.

- 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드 바 등이 여기에 속한다. 

 

6. 컨트롤: 사용자가 설정이나 값을 수정할 때 사용한다.

- 라디오, 체크박스, 스위치 등이 여기에 속한다. 

 

의사 상태(Pseudo State)

의사란 가짜의, 가상의(pseudo)라는 뜻이다. 의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용한다.

예를 들면, 버튼에 커서를 올렸을 때 색깔이 바뀌는 경우를 들 수 있다.

- 실제로 버튼이 바뀐게 아닌 가상의 상태를 나타내는 것. 

 

버튼의 구조

LTR문화권인지 RTL문화권인지에 따라 3번과 4번의 위치 및 전반적인 UI 디자인이 변경될 수 있다.

*LTR: 왼쪽에서 오른쪽에서 읽는 문화

*RTL:   - 

 

정리하다보니 그냥 피그마를 계속 만지작거리는게 복습에 도움이 되겠다. 정리 생략.