피그마 활용법(1)_3주차 정리

[수업 목표]

• UI 설계의 기본 원리와 기초 디자인 지식을 이해합니다
• 디자인 시스템의 설계 원리와 원칙을 이해합니다
• 기본적인 디자인 시스템 요소를 만들 수 있습니다.

---

피그마 디자인시스템(UI키트 정도의 크기)
폰트, 컬러 만들어보기
(1)UI 디자인 원리 기초
(2).디자인 시스템의 개념과 원리 : 앱/웹을 일관되게 설계 할 수 있게 해주는 것/ 아토믹 디자인
(3)파운데이션과 스타일 : 컬러와 폰트 스타일

1. 디스플레이와 픽셀, 배수
디지털화면Display (폰,컴,모니터,전광판,키오스크) - 픽셀이라는 정말 작은 칸으로 이루어짐.
-해상도 : 화면의 선명한 정도. 픽셀의 개수(가로줄의 픽셀*세로줄의 픽셀)
-해상도와 픽셀의 관계 : 픽셀의 수가 같을 때 화면이 커지면 픽셀이 커짐/ 가로와 세로가 2배라면 실제 픽셀수는 4배
-1배수 디자인 : 100% 원본 사이즈
-1배수 디자인을 정하는 방법 :
일반적인 1배수 디자인 사이즈(사람들이 가장많이 쓰는 사이즈+내가 만들 앱을 쓸 사람들)
권장하는 1배수 사이즈 : 디바이스별 픽셀 배율 및 해상도를 확인(아이폰 375*812, 안드로이드 360*800)
-디자인 사이즈와 실제 사이즈 원리 :
(1) 1배수 사이즈를 디자인하고 개발
(2) 렌더링 : 기기는 코드를 읽고 디자인으로 바꾼 다음, 자기 배율 만큼 확대 또는 축소(아이폰15프로 375*812의 디자인을 3배 확대해서 1125*2436으로 만든다)
(3) 업스케일,다운스케일 : 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄운다.(아이폰15프로 실제 해상도 1125*2436보다 큰 1179*2556 만큼 조금 더 키워서 화면에 출력)

2. 분기점과 그리드
- 분기점(Breakpoint) : 디스플레이의 해상도에 따라 각 다른 화면을 보여주기 위한 기준점(경우의 수가 나누어지는 구나, 케이스가 나뉘는구나)
- 분기점이 중요한 이유 : 사용자가 어떤 디바이스로 우리 서비스로 사용하는지 고려해서 디자인을 나누어 줄 수 있어야 함
- 일반적 분기점 :
데스크탑 화면(가로가 1024px 이상)
태블릿 화면(가로가 768px 이상, 1024px 미만)
모바일 화면(가로가 768px 미만)-최소사이즈를 정해 놓으면 좋음

- 태블릿 해상도 대응 : 온라인 강의나 교육은 태블릿으로 많이 하기 때문에 이런 경우에는 태블릿 해상도도 신경 써야 함.
- 일반적 해상도 외에 다른 분기점 : 사람들이 사용하는 기기의 해상도 통계를 참고
   (https://gs.statcounter.com/screen-resolution-stats)
- 그리드(Grid) : 격자, 화면의 디자인을 배치하는 가이드라인, 가상의 선을 놓고 디자인 배열
- 그리드를 사용하는 이유 : 규칙적으로 디자인을 만들기 위해서, 누가 편집하던 균형감 있게 배치
- 그리드를 만드는 방법 : 일반적-12칼럼 그리드(12 Column Grid), (디자인을 반응형으로 확장하기 위해 태블릿에선 8개, 데스크톱 12개)
- 그리드의 구조 :
960 12 Column Grid - 유닛 너비 60, 거터 너비 20
1200 12 Column Grid - 유닛 너비 76, 거터 너비 24
1440 12 Column Grid*(가장 최근) - 유닛 너비 96, 거터 너비 24

 3. 8포인트-그리드 디자인  (그리드는 가이드라고 생각)
- UI 배치할 때 가이드라인 : 그리드는 레이아웃을 배치하는 규칙, UI디자인할 때도 규칙
- 8포인트 그리드 : 간격이나 수치, 크기 등을 8의 배수(8, 16, 24, )
- 8포인트 사용 이유 : UI디자이너에게 필수 역량 팀 효율성에 매우 큰 영향

-8인 이유 : 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어져 소수점이 없다.
요즘에는 4포인트 디자인을 많이 씀, 기계의 발전으로 8배수하면 너무 큰 변화가 있기 때문.

4. 반응형과 적응형
- 화면의 크기에 따라 디자인이 변하는 원리
- 반응형 디자인 : 해상도의 변화에 따라 실시간으로 반응(Responsive)디자인 하나만 있으면 됨(3개의 디자인을 머리속에 넣고 디자인)
- 적응형 디자인 : 반응을 하지 않거나 적응해 버림, 여러 디자인을 해야 함
=두가지 방법을 적절하게 섞어서 내가 의도한 디자인을 만들면 됨.
실습
Plugin에서 Responsive를 다운
Desktop: Layout grid - Column/ 12 Count/ Center Type/ 60 Width/ 20 Gutter
Tablet: Layout grid - Column/ 8 Count/ Stretch Type/ 20 Margin/ 20 Gutter
Mobile: Layout grid - Column/ 4 Count/ Stretch Type/ 20 Margin/ 20 Gutter

5. 디자인 시스템
- 디자인 시스템 : 앱/웹(제품) 디자이너들은 빠르게 반복하고 문제점을 찾아내는 것, 개발자/디자이너 모두 일관적, 효율적.
- 장점 : 시간과 비용이 줄어듬,누가 만들어도 동일
- 단점 : 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸림, UI가 과하게 많아질 수 있음, 혁신이 줄어음
- 여러 단계로 쪼개서 이번 시즌에는 어떤 단계까지 만들지.
- UI키트가 디자인 시스템인가? : UI키트(단어만 있는 셈), 디자인 시스템(규칙 문서)
- 디자인 시스템의 구성 요소 :
파운데이션(기초 요소-컬러/폰트/레이아웃/곡률/간격)
컴포넌트(조합하고 합성해서 버튼/체크박스/탭/바텀시트)
-컴포넌트 만드는 규칙
  • 아토믹 디자인 시스템(Atomic Design System)
  • 머테리얼 디자인(Material Design) - UI
  • 라인 디자인 시스템(Line Design System) - Voice design 포함
  • 밀리의서재 디자인 시스템(Millie Design Library 등등.
  • 디자인 시스템 DB (Design System Database) - 전 세계 디자인 시스템을 한번에 모아서 볼 수있는 곳!

4. 파운데이션
- 디자인 시스템 구성 요소의 기본 재료(색상/서체/아이콘/레이아웃/간격등등)
-컬러스타일 : RGB/ Hex Code - Hexadecimal Code(16진법으로 작성된 코드) #FFFFFF
-컬러 프로파일(Color Profile) : 화면에 따라서 보여주는 색감이 다 다름.

- 컬러 스타일 : 디자인 시스템들에 사용할 색상을 모아둔 팔레트(일관적이고 규칙적)
① 기본 3가지 컬러를 선택:
포인트 컬러(엑센트 컬러): 제품에서 가장 중요하고 핵심적인 부분 색상(프라이머리 컬러/엑센트 컬러)
메인 컬러: 전체적인 분위기의 배경색(백그라운드 컬러)
세컨더리 컬러: 배경색에서 도드라지는 부분을 만들어서 포인트 컬러의 뒷받침하는 색상(서브 컬러)
② 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 쪼갠다(유연성)
③ 글자에 사용할 흰/검의 0%~100% 생성
④ 1:3:6 법칙 : 전체적으로 균형(포인트 1: 세컨더리 3: 메인 컬러 6)
⑤ 컬러 스타일 만들기 (실무 방법과의 차이) 실무에서 컬러 스타일 정하는 과정은 매우 복잡
⑥ 색상 정하기 : Plugin-Coolers(어울리는 색상 조합을 만들어주는 플러그인)
⑦ 3가지 색상 고른 후, 첫 박스 색상 (HSL-색조,체도,밝기로 색상을 구분하는 방식)
마지막칸 명도를 10박스 모두 조정(5,15,25,35,45,55,65,75,85,95)

Plugin
① Responsive - 반응형 디스플레이 적용
② Coolors - 자동 색상
③ Styler - 자동으로 스타일 등록해 주는 플러그인
④ Auto Documentation - 자동으로 도큐먼트로 만들어주는 플러그인

Plugin

- 폰트 스타일 :
- 개념 : 디자인 시스템에서 사용할 폰트를 모아둠(방식,프리셋,스킬-일정한 규칙에 따른 정렬)
- 구성 :
① 패밀리(Family)
② 굵기 : (=무게감, Weight)
  • 디자이너는 Thin, Light, Regular 등 이름으로/ 개발자는 100, 200, 300

-폰트 스타일 만들기 : (실무 방법과 차이-매우 복잡함.)
1️⃣ 본문 스타일 만들기
① 먼저 사용할 폰트 패밀리를 하나 정하기
  UI에 추천하는 폰트 패밀리- 노토 산스(Noto Sans), 프리텐다드(Pretendard), 스포카 한 산스(Spoqa Han Sans), 민 산스(Min Sans), 수트(SUIT)
② 텍스트 레이어를 생성하고, 이름을 Body/16px 로 변경
③ 텍스트 레이어의 굵기를 Regular로 적용
④ 텍스트 레이어의 폰트 사이즈를 16px, 행간을 150%로 적용
⑤ 텍스트 레이어를 2개 더 복사해서, 하나는 폰트 사이즈를 14px, 하나는 18px로 적용
⑥ 사이즈가 14px인 텍스트 레이어의 이름을 Body/14px, 사이즈가 18px인 텍스트 레이어는 Body/18px로 변경
2️⃣ 제목 스타일 만들기
① 텍스트 레이어를 생성하고, 이름을 Title/16px로 변경
② 텍스트 레이어의 굵기를 Bold로 적용
③ 텍스트 레이어의 폰트 사이즈를 16px, 행간을 135%로 적용
④ 텍스트 레이어를 2개 더 복사해서, 하나는 폰트 사이즈를 14px, 하나는 18px로 적용
⑤ 사이즈가 14인 텍스트 레이어의 이름을 Title/14px, 사이즈가 18인 텍스트 레이어는 Title/18px로 변경
3️⃣ 폰트 스타일 추가하기
① 만들어둔 텍스트 레이어를 모두 선택한 뒤, Styler 플러그인에서 Generate Styles를 선택
② 빈 캔버스를 누르고, 오른쪽 패널에 스타일이 추가된 걸 확인
4️⃣ 폰트 스타일 정리하기
① 캔버스에 있는 텍스트 레이어를 모두 지워
② Auto Documentation 플러그인을 실행
③ Fonts 탭을 선택
④ Preview content 우측의 Text를 눌러 Font name으로 변경
⑤ Document all fonts 를 선택