[TIL] AI 디자이너 베이스 캠프 D-7

피그마 3-1~3-5

 

[학습목표]

• UI디자인의 환경 이해, 적합한 디자인의 원칙수립.
• 피그마 스타일 생성 및 관리
• 컴포넌트의 개념 이해, 기능 및 형태 분류

피그마를 통해 만들고자 하는 것 ? UI (User Interface)

 

컴포넌트

- UI는 컴포넌트( botton, check box, radio, tap 등), 즉 화면에서 볼 수 있는 모든 요소를 뜻함.

 

파운데이션(사용자들에 따라 다르게 명칭 할 수 있음, 개념만 파악)

- UI를 구성하는 가장 기초재료라고 보면 된다. 

 

구성요소

• 색상(Color)
• 서체(Font, Typography)
• 간격,여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation) -1주차에서 배운 높이 개념
• 아이콘(Icon)

컴포넌트와 파운데이션의 관계

- 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션 부터 생성해야한다.

- 모든 컴포넌트는 파운데이션 요소를 조합하여 만들 수 있다.  

---

컬러스타일

컬러는 같은 컬러코드로 작업해도, 모니터 및 미디어 환경에 따라 다르게 보일 수 있다. 

 

RGB & Hex Code

 

[RGB] 

- 표기방법 : 각 색상을 0부터 255까지의 숫자로 나타내며, 빛의 3원색으로 구성.

- 빛의3원색 : R(Red),G(Green),B(Blue) -> 기본적으로 디스플레이는 빛의 3원색으로 구현되는 가산혼합

- 특징: 숫자가 커질수록(255에 가까워질수록) 빛이 강해져서 밝은색이 되고, 셋 다 255가 되면 흰색이 됩니다.

 

*색의 3원색 : C(Cyan), M(Magenta), Y(Yellow) -> 감산혼합 -> 다 섞으면 검정색이 된다.

 

[Hex Code : Hexadecima Code]

- RGB의 0~255숫자를 컴퓨터는 16진수 (Hexadecimal)로 변환해서 읽음

- 변환후 0~FF로 표기된다. 

- 그래서 #FFFFFF (R255,G255,B255) 는 흰색이 되는 것 

 

Color Profile

- 컬러 프로파일은 공신력있는 기관에서 배포한다. 

- 컬러를 지원하는 범위는 기관마다 조금씩 다르다. (ex. Adobe, DCI, 등 )

- 디스플레이 자체 뿐만아니라 프로그램 자체에서도 컬로 프로파일이 조금씩 다르다. (ex. PDF 파일을 크롬,Adobe, 기본뷰어 등 각각 열었을때 미묘하게 달라질 수 있음)

 

컬러스타일의 개념

- 컬러스타일은 디자인에서 사용할 색상을모아두는 팔레트

- 사용할 색상을 미리 정해두고 그 안에서 사용한다. (ex. 브랜드라면 브랜드 로고 컬러 등)

- 컬러스타일은 기본적으로 2~3가지 색상으로 만든다.(UI디자인에서는 창의력이나 독창성 보다도 규칙이 아주 중요하기 때문에)

• 포인트컬러 : 핵심적인 부분에 써야하는 컬러, 프라이머리컬러, 엑센트 컬러 라고도함
• 백그라운드컬러 : 전체적인 분위기를 만들어줄 배경색, 일반적으로 (흰색 #FFFFFF)
• 세컨더리 컬러 : 배경에서 도드라지는 부분을만들어서 포인트컬러를 뒷받침하는 색상, 서브컬러라고도 함.

- 색상을 정한뒤 가장 밝은 단계~가장어두운단계 까지 총 10단계로 나눈다. (색상의 확장성을 위해)

* but. 꼭 10단계가 정답은 아니고 소통을 위한 규칙이라고 보면된다. 

  컬러를 명도 10%씩 조정해서 사용하든 20%씩 조정해서 사용하든 디자이너, 개발자 사이의 소통이 중요한것. 

 

1:3:6 법칙 (화면비율)

포인트 컬러 (엑센트컬러)

세컨더리컬러

백그라운드컬러

 

컬러스타일 만들기 (실습)

마우스 우클릭 - plugins- coolors 에서 원하는 컬러조합을 Generation 해서 생성한다. 

원하는 컬러 3가지(임의)를 고르고 10개씩 복사.

컬러에서 HSL로 선택하고 L(명도)값을 10씩 차이나게 수정한다.

 

figma 커뮤니티에서 스타일러 추가 후

각 사각형 이름을 Primary/50~900 ,  Secondary/50~900 , Tertiary/50~900 으로 바꾼뒤 전체선택

Plugins-Styler-Generate Styler  

---

컬러참고 링크

 

https://www.figma.com/community/plugin/1068919813159975006

https://emotion.co.kr/magazine/42/

이모션글로벌 | MAKE GREATNESS emotion global

https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

---

폰트스타일(=폰트스케일)

디자인에 사용할 폰트를 모아둔 목록으로, 일정한 규칙에 따라 정렬된 하나의 세트로 보면된다.

 

폰트스타일 구성

• 패밀리(Family) : 폰트의 종류, 폰트 이름이라고 생각해도 됨
• 굵기(=무게감,Weight) :

디자이너	Thin	Extralight	Light	Normal	Medium	Semibold	Bold	Extrabold	Black
개발자	100	200	300	400	500	600	700	800	900

• 크기(Size) : 폰트크기 

- 기본 : 16px, 2px기준으로 줄이거나 늘린다.

- 폰트크기가 20px 이상일때는 4px씩 차이나게 하는게 일반적

- 폰트크기 20px 미만인 폰트는 본문, 20px이상부터는 제목에 사용한다. 

* 법칙x, 많이 사용하는 방식

• 행간(Line-height :라인 하이트) 

- 원래 기본개념 : 글줄과 글줄 사이의 간격

- 디지털 환경에서의 행간 : 글자+글자사이간격을 합한 값

- 실무 추천행간 : 제목처럼 굵고 큰폰트는 120~135%, 본문은 135~170%, 가장추천은 150%(행간의 계산이 쉽다), 

- 가독성에 좋은 행간은 연습이 진짜 많이 필요하다. 

- 서체마다 행간은 다르게 써야 한다. (폰트자체의 여백이나 디자인에 따라 느낌이 많이 다르기 때문에)

• 자간(Letter-spacing)

- 글자와 글자 사이의 간격

- UI에서는 자간은 웬만하면 고정한다.

 

폰트스타일 만들기

제작방법은 각 폰트 사이즈, 굵기 등 수정-page에서 제목 변경(ex. Title, Body 등, 목적에따라 다른이름을 붙여도 됨.)-전체선택하여 플러그인-스타일-제너레이티드 스타일.

컬러 스타일만드는 방법과 동일하다고 보면된다.   

 

* 작업에 도움될만한 추가적인 다양한 플러그인도 찾아보자.

---

 

마스터 컴포넌트와 인스턴스

 

[컴포넌트]

파운데이션을 조합해서 만든 디자인 단위의 개념

• UI > 컴포넌트 > 파운데이션

[마스터 컴포넌트(Master Component)]

- 컴포넌트 디자인 원본 이라고 보면된다.

- 디자인을 반복적으로 빠르게하기위해 디자인을 복사해서 사용할 수 있도록 해준다.( ex. 똑같은디자인의 버튼)

- 원본 디자인을 복사해서 사용한, 복사된 디자인들을 한번에 수정하거나 편집할 수 있다.

 

[인스턴스(Instance)]

- 마스터 컴포넌트의 복제본

- 컴포넌트속성을 그대로 이어받음.

 

마스터 컴포넌트와 인스턴스의 관계

- 마스터 컴포넌트에서 수정하면 인스턴스에서도 바뀐다.

- 인스턴스를 먼저 후정하고 컴포넌트를 바꾸면 인스턴스에 변경 적용 되지 x, 

- 컴포넌트를 삭제해도 인스턴스는 남아있다.

- 인스턴스와 컴포넌트를 Detach(분리)하여 분리된 개체로 사용할 수도 있다.  

 

---

[느낀점]

UI디자인 내의 컬러스타일과 폰트스타일의 개념이나 규칙에 대해 알게되어서 좋았다.

실습을 하면서 피그마 시스템에 대해 알아가서 재밌으면서도 실무에 적용하려고 생각하면 더 많은 연습이 필요할 것 같다.