[TIL] 24.10.10(목)

피그마 3주차 강의 내용 정리(1~4강)

파운데이션

파운데이션: UI를 구성하는 가장 작은 알갱이이자 기초 재료(ex. color, radius, spacing, font, icon 등)

사용하는 사람마다 분류와 이름이 조금씩 다를 수 있음

색상(color)

서체(font, typography)

간격, 여백(spacing, gap)

곡률(radius)

그리드(grid)

고도(elevation)

아이콘(icon)

 

컬러 스타일

디자인을 할 때 가장 먼저 정하게 되는 핵심 요소

 

UI 디자인에서의 컬러(컬러가 디지털 환경에서 구현되는 개념과 원리)

RGB: 컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있음
> RGB색상을 사용할 때 '255, 255, 255' 처럼 작성하는 이유가 됨

> 이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽음

> 이 16진수 값이 Hex Code (ex. #FFFFFF)

 

컬러 프로파일(Color Profile)

Hex Code는 빛의 3원색 정보를 16진법으로 변환한 코드

빛의 색상에는 절대적인 기준이 없음 > 디스플레이는 색상을 자기만의 기준으로 해석

디스플레이가 코드를 해석할 때 사용하는 색 기준표 = 컬러 프로파일

* 컬러 프로파일은 전세계적으로 사용할 수 있어야 함 > 공신력 있는 기관이나 기업에서 배포 (ex. Adobe RGB, sRGB Display P3 등)

 > 컬러 프로파일마다 더 잘 보여주는 색상이 조금씩 다름 & 디스플레이 자체 뿐만 아닌 프로그램 자체에도 컬러 프로파일이 조금씩 다름

 > 같은 PDF 파일이어도 크롬, Adobe, 기본 뷰어로 열었을 때 각각 색상이 미묘하게 달라질 수 있음

 > 디지털 화면은 빛으로 되어있기 때문에 화면과 프로그램에 따라 차이가 생길 수 있다

 

컬러 스타일

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

색상을 아무렇게나 사용하는 것이 아닌, 사용할 색상들을 미리 정해두고 그 안에서 사용해야함

사용할 색상을 모을 때, 색상의 단계를 만드는 규칙을 만들어야함

색상을 정했다면, 가장 밝은 단계 ~ 가장 어두운 단계까지 총 10단계로 만듦 (=색상의 확장성: 다양한 용도, 색상에 대응할 수 있도록)

> 10단계로 나누는 이유: 0%~100%까지 10단위로 떨어지기 때문에 쉬워서 자주 사용하지만, 필요나 목적에 따라 자유롭게 설정 가능(정해진 답은 없음)

10단계로 나누었을 때, 가장 밝은 색을 50, 가장 어두운 색을 900으로 정의 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) 

포인트 컬러: 정말 중요하고 핵심적인 부분에만 써야 하는 생상, (=프라이머리 컬러 or 엑센트 컬러)

백그라운드 컬러: 제품의 전체적인 분위기를 만들어 줄 배경색. 일반적으로 흰색(#FFFFFF) (다크모드는 예외)

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

 

1:3:6 법칙

전체적으로 균형을 만들어 주고 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있음 (정답은 아니지만, 가이드라인 정도로 참고)

 

피그마 색상 추천 플러그인 Coolors

내가 선택한 색상과 어울리는 색상을 추천해주는 플러그인(최대 5개, 잠금과 새로고침을 반복하며 원하는 색상 찾을 수 있음)

 

피그마 로컬 스타일 적용 플러그인 Styler

내가 만들어 놓은 개체들을 로컬 스타일로 자동 생성해주는 플러그인

색상 10단계 리네임 방법

10단계 색상을 모두 HSL의 L값을 10단위로 0~100까지 각각 조정 후, 10개 모두 레이어창에서 선택 후 우클릭 > Rename

> 이름/ ('/'는 피그마에서 폴더 형식으로 분류해주는 용도) > Number 아래 화살표 > Start ascending from: 0으로 설정 > 레이어창에서 100으로 된 것만 50으로 수동 변경해주기

 

 

 

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

디자인 시스템에서 사용할 폰트를 모아둔 목록으로, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻함

패밀리(Family) - Noto sans, Pretendard 등

굵기(=무게감, Weight) - Thin(100) ~ Black(900)

크기(Size) - 일반적으로 웹사이트의 기본 폰트 사이즈인 16px 부터 시작하고, 2px씩 줄이거나 늘림(10px 미만으로는 사용하지 않는 걸 권장 / 폰트 크기가 20px 이상 일 때는 4px씩 차이나게 하는것이 일반적 / 일반적으로 20px 미만=본문, 20px 이상=제목)

행간(Line-height) - '라인-하이트' 라고 읽음, 글줄과 글줄 사이의 간격, %와 같은 상대적 단위나 px같은 고정 단위로 표현 가능, 절대적인 값은 없지만 적당한 행간 값은 가독성에 큰 영향을 줌 / 폰트마다 폰트 자체적으로 가진 기본 여백이 존재함 > '프리텐다트' 폰트가 위아래 여백 거의 없이 딱 붙어있기 때문에 사용 추천
* 일반적인 행간 값 추천

제목처럼 굵고 큰 폰트: 120~135% 추천

본문 폰트: 135~170% 추천, 본문의 경우는 150%가 이상적 > 기본 폰트 사이즈가 16px라 가정했을 때, 2로 나눈 값은 8이기 때문에 행간 값은 폰트 사이즈인 16px에 절반 값인 8px를 더한 24px가 된다 (150%는 2배수로 움직일 수 있기 때문에 규칙을 만들기 좋다)

자간(Letter-spacing) - 글자와 글자 사이의 간격, 행간과 같이 %와 같은 상대적 단위나 px같은 고정 단위로 표현 가능

 

추천 아티클

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

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자 | e · motion

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

06화 UI를 위한 색

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

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

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

07화 UI를 위한 타이포그래피

https://mesign.tistory.com/23

디자인 시스템 구축하기 - 폰트 스타일 가이드

https://m3.material.io/styles/typography/overview

Typography – Material Design 3

 

 

생각

오늘 강의에서 배운 컬러, 폰트는 앞으로 UI 디자인을 하면서 정말 기본기를 잘 만들어놔야 하는 부분이라고 생각한다. 도움이 되는 여러 가지 아티클도 많이 찾아보고 실제 운영 중인 앱/웹에서 어떻게 사용되고 있는지 많이 찾아보고 내 것으로 만들기 위해 노력해야겠다.
오늘 특강에서 리액트가 무엇인지, 디자이너가 개발 지식을 알고 있으면 어떤 점이 좋은지에 대해 짧게나마 배웠는데, 전문적인 개발자 까지는 아니어도 개발자와의 매끄러운 협업을 위해서라도 어느 정도의 개발 지식을 배워두면 정말 좋을 것 같다. 다음 주에도 리액트 특강이 있는데 열심히 들어야겠다.