[내일배움캠프] 사전캠프 Day 7 - 피그마 기초강의 3주차

---

 

3주차 강의의 수업 목표

• UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다
• 피그마에서 스타일을 생성하고 관리할 수 있다
• 컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다

---

 

파운데이션이란

- UI를 구성하는 가장 작은 알갱이이자 기초재료

- 필수 구성 요소 = 색상, 폰트

 

✔️ 파운데이션의 구성

• 색상(Color)
• 서체(Font, Typography)
• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation) = 높이
• 아이콘(Icon)

💡 컬러 스타일

- 디자인에서 사용할 색상을 모아두는 팔레트

① 포인트 컬러 (프라이머리 컬러 또는 엑센트 컬러)
- 중요하고 핵심적인 부분에만 사용하는 색상

② 백그라운드 컬러
- 전체적인 분위기를 만들어 줄 배경색 (일반적으로 흰색을 사용)

③ 세컨더리 컬러 (서브 컬러)
- 배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상

 

💡 1:3:6 법칙

• 가장 중요한 색상, 즉 포인트 컬러의 비율을 화면의 10% 정도만 씀
• 전체적인 배경인 흰색이 60% 정도 차지
• 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%을 씀

💡 폰트 스타일

- 컬러 스타일과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록

- 폰트 스타일의 구성
1) 패밀리(Family) - 폰트의 종류
2) 굵기 (=무게감, Weight)
3) 크기(Size)
4) 행간(Line-height)
5) 자간(Letter-spacing)

💡 컴포넌트
- 파운데이션을 조합해 만든 디자인 단위의 개념

 

💡 마스터 컴포넌트
- 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

- 원본

 

💡 인스턴스

- 마스터 컴포넌트의 복제본 (마스터 컴포넌트의 속성을 그대로 이어받음)
- ◇ 아이콘이 붙어 있으면 무언가의 복제본이라는 뜻

- 마스터 컴포넌트를 수정하면 인스턴스에도 반영됨

- 인스턴스를 먼저 수정하면 마스터 컴포넌트를 수정해도 반영되지 않음

- 마스터 컴포넌트를 지우더라도 인스턴스는 남음

- 연결을 해제(Detach; 분리하다)하면 인스턴스트는 컴포넌트와 분리되고 일반프레임으로 변경됨

 

 

💡 디자인 시스템

- 반복적인 UI를 효율적으로 관리하기 위해 미리 만들어 놓는 시스템

- 팀 전체가 같은 정도로 이해할 수 있게 만듦

장점	단점
- 디자인을 반복해서 사용할 수 있어 시간과 비용이 줄어듦 - 누가 만들어도 동일한 품질의 제품을 설계할 수 있음	- 다양한 형태의 UI를 모아 하나로 통일하는 과정이 오래걸림 - 정작 사용하는 UI는 많지 않은데 그에 비해 UI가 과하게 많아질 수 있음 - 디자인 시스템을 최대한 활용하려고 하다보니 새로운 아이디어나 다양한 형태의 UI를 만드는 거에 소극적으로 변하게 됨

 

 

✔️ UI의 분류

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

- 인풋(Input) : 사용자의 입력을 받을 때 사용

- 인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용

- 컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트

- 내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용

- 컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용

 

💡 의사상태의 개념

- 의사 상태에서 의사란 가짜의, 가상의(pseudo: ‘수도’라고 읽어요)라는 뜻

- 의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용

 

💡 버튼 컴포넌트

- 누름으로써 중요한 동작을 수행하는 요소

- 버튼의 종류
1) 박스 버튼, 일반 버튼

2) 아웃라인 버튼, 고스트 버튼, 엠티 버튼

3) 스플릿 버튼

4) 텍스트 버튼

 

💡 텍스트필드

- 사용자가 무언가를 입력할 수 있게 하는 컴포넌트

 

💡 컨트롤 컴포넌트

- 사용자가 선택지를 특정할 수 있도록 하는 요소

 

💡 체크박스 컴포넌트

- 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트

 

💡 라디오 컴포넌트

- 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트

---

 

[숙제]