색의 3요소
색상 (Hue) / 명도 (Value) / 채도 (Sturation)
색상 (Color, Hue) : 빨강, 파랑, 노랑 등 색의 고유한 이름
▶ 색 상환(Color Wheel)에서 각 색상의 위치를 나타낸다.
명도 (Value, Brightness): 색의 밝고 어두운 정도
▶ 명도가 높으면 밝은 색(흰색에 가까움), 낮으면 어두운 색(검은색에 가까움)
채도 (Saturation): 색의 선명함을 결정하는 요소
색상은 우리가 느끼는 감정에 큰 영향을 준다.
ex. 빨강: 강렬/ 활기 파랑: 신뢰/ 차분 초록: 자연/ 건강 노랑: 밝음/ 긍정 검정: 고금/ 강함
RGB (Red, Green, Blue)
→ RGB는 디지털 화면에서 사용하는 색상 모델로, 빛의 3원색인 빨강, 초록, 파랑을 조합하여 다양한 색을 만든다.
→ 컴퓨터 모니터, 스마트폰, TV와 같은 디지털 디스플레이에서 사용된다.
→ RGB는 색상이 더해질수록 밝아지는 가산혼합(Additive Color) 방식이다.
ex) 빨강 + 초록 = 노랑, 빨강 + 파랑 = 보라
CMYK (Cyan, Magenta, Yellow, Key/Black)
→ CMYK는 인쇄에서 사용하는 색상 모델로, 시안, 마젠타, 노랑, 검정을 조합하여 색을 만든다.
→ 포스터, 책, 명함 등 인쇄물이 주로 사용하는 방식이다.
→ CMYK는 색상이 겹쳐질수록 어두워지는 감산혼합(Subtractive Color) 방식이다.
ex) 시안 + 마젠타 = 파랑, 시안 + 노랑 = 초록
차이점
| 특징 | RGB | CMYK |
| 사용 환경 | 디지털 화면 | 인쇄물 |
| 혼합 방식 | 가산혼합 (빛 추가) | 감산혼합 (빛 흡수) |
| 색 범위 | 더 넓고 밝은 색 표현 | 더 좁고 어두운 색 표현 |
색상환과 기본 색상 관계
1. 색 상환 (Color Wheel)
→ 색상환은 색의 관계를 시각적으로 보여주는 원형 다이어그램으로, 색상 조합을 이해하고 만드는 데 유용하다.
→ 기본 색상 : 빨강(Red), 노랑(Yellow), 파랑(Blue)
→ 혼합 색상 : 기본 색상을 섞어 만든 보조 색상
ex) 초록, 주황, 보라
2. 컬러 팔레트 (Color palette)
색상 모델과 포맷을 사용하여 색상을 정의하며, 색상간의 수학적/지각적 관계를 기반으로 작동
- 기본 색상 선택
Hex 코드 (ex. #FF5733)
RGB (빨강, 초록, 파랑)값
HSL/HSV (색조, 채도, 밝기/명도)
- 사용되는 색상 모델 팔레트 생성기는 다양한 색상 조합 모델을 사용
유사색: 색상환에서 인접한 색깔
보색: 색상환에서 정반대 색깔
삼각색: 색상환에서 동일한 간격으로 떨어진 세 가지 색
사각형(이중 보색): 두 쌍의 보색 조합
단색조: 하나의 색상에서 채도나 명도만 변화시킨 조함
3. 색상 관계
① 보색 (Complementary Colors)
→ 색상환에서 서로 반대편에 위치한 색상으로, 강렬한 대비를 제공
→ 빨강 ↔ 초록, 파랑 ↔ 주황, 노랑 ↔ 보라
→ 활용 : 강조가 필요한 디자인 요소 (버튼, 배너 등)
② 유사색 (Analogous Colors)
→ 색상환에서 서로 인접한 색상들로, 부드럽고 조화로운 느낌을 준다
→ 활용 : 부드럽고 일관성 있는 디자인 테마
ex) 노랑, 노랑-주황, 주황
③ 삼각색 조합 (Triadic Colors)
→ 색상환에서 정삼각형을 이루는 세 가지 색상 조합
→ 균형 잡힌 조화와 대비를 동시에 제공
ex) 빨강, 노랑, 파랑
타이포그래피 Typography
타이포그래피는 글자를 배치하고 디자인하는 기술과 예술을 의미한다.
(폰트, 글자 크기, 간격, 정렬, 색상 등을 조절하여 가독성과 시각적 완성도를 높인다.)
1. 폰트 종류
| 세리프(Serif) / 명조체 | 산세리프(Sans-serif) / 고딕체 |
| 글자 끝에 장식이 있는 폰트 (전통적, 신뢰감) ex. Times New Roman / Georgia |
장식이 없는 깔끔한 폰트 (현대적, 직관적) ex. Arial, Helvetica |
2. 글자 크기와 계층구조
제목, 본문, 캡션 등 글자 크기를 조절하여 중요한 정보에 시선 유도
***가독성
(제목 24pt, 36pt, 48pt > 본문 12pt, 14pt, 16pt > 캡션 10pt, 11pt)
자간(Letter Spacing): 글자 사이의 간격을 조정
▶ 가독성 향상, 글자간의 응집력 또는 개방감 표현
행간(Line Height): 문장 사이의 간격을 조정
▶ 가독성 향상, 글자간의 응집력 또는 개방감 표현
색상 / 대비 (Colors / Contrast)
▶ 텍스트와 배경 간의 시각적 구분을 명확히 하여 가독성을 높이고, 중요한 정보를 강조
(사용자가 더 쉽게 정보를 이해하고 빠르게 읽을 수 있다.)
시각의 3요소
타이포그래피 / 색 / 레이아웃
타이포그래피
| 기능적 타이포그래피 | 실험적 타이포 그래피 |
| 미적 기능 < 가독성, 판독성 | 미적 기능 > 가독성, 판독성 |
[기능적 타이포그래피 고려사항]
▶ 글꼴 선택
▶ 자간과 자폭의 조절 및 띄어쓰기 확인
▶ 행간 조절
▶ 여백 형성
레이아웃
타이포그래피, 사진 및 일러스트, 여백 등 각 구성요소를 주어진 공간 안에 효율적으로 배치하는 것
(조화롭고 균형있게 논리적으로 배열될 때, 내용이 쉽고 정확하게 전달)
| 그리드 Grid | 정렬 Align |
 |
 |
실습 1. 컬러 팔레트 (무드보드) 만들기
https://color.adobe.com/ko/ 활용
실습 2. 컬리 화면 타이포 제작
실습 3. Chat GPT로 글 작성 후 타이포 화면 만들어보기
'PRODUCT DESIGNER > Daily 🫧' 카테고리의 다른 글
| [Day 8] AI 시대의 디자인 (2) (2) | 2025.09.28 |
|---|---|
| [Day 7] AI 시대의 디자인 (1) (0) | 2025.09.28 |
| [Day 5-6] 일러스트 (0) | 2025.09.28 |
| [Day 3-4] 포토샵 (0) | 2025.09.28 |
| [Day 1] 프로덕트 디자이너 (0) | 2025.08.17 |