DAY+2 [ 색의 3요소, Typography, 색상 팔레트 ]

안녕하세요, 주-주스 입니다! 🍹

캠프 2일차!!
오늘은 색의 3요소, Typography, 색상 팔레트 등 배운 내용 정리 및 실습 내용을 포스팅 하겠습니다!

---

[ 색의 3요소 ]
- 색상(Hue)

- 명도(Value)
- 채도(Saturation)

 

1, 색상(Color, Hue)

 

- 빨강, 파랑, 노랑 등 색의 고유한 이름을 의미

- 색상환(Color Wheel)에서 각 색상의 위치를 나타냅니다!

2, 명도 (Value, Brightness)

- 색의 밝고 어두운 정도

- 명도가 높으면 밝은 색(흰색에 가까움), 낮으면 어두운 색(검은색에 가까움)

3, 채도 (Saturation)

- 색의 선명함을 결정하는 요소

 

 

 

[ 색이 주는 감성 ]

- 색상은 단순히 시각적인 요소를 넘어서, 우리의 감정과 분위기에 깊은 영향을 줍니다.

- 각 색은 고유의 심리적 의미와 감성을 담고 있어, 공간·브랜딩·패션·예술 등 다양한 분야에서 중요한 역할을 합니다.

• 빨강: 강렬하고 활기찬 느낌, 열정과 에너지를 상징
• 파랑: 신뢰할 수 있고 차분한 느낌, 안정과 평화를 상징
• 초록: 자연스럽고 건강한 느낌, 균형과 치유를 상징
• 노랑: 밝고 긍정적인 느낌, 희망과 창의성을 상징
• 검정: 고급스럽고 강한 느낌, 권위와 세련됨을 상징
• 흰색: 순수하고 깨끗한 느낌, 새로움과 평온을 상징
• 보라: 신비롭고 우아한 느낌, 창의성과 영감을 상징
• 주황: 따뜻하고 활기찬 느낌, 친근함과 에너지를 상징
• 분홍: 부드럽고 따뜻한 느낌, 사랑과 온기를 상징
• 회색: 중립적이고 차분한 느낌, 균형과 실용성을 상징
• 갈색: 안정적이고 편안한 느낌, 따뜻함과 신뢰를 상징

---

Typography

- 타이포그래피는 글자를 배치하고 디자인하는 기술과 예술을 의미합니다.

즉, 폰트(서체), 글자 크기, 간격, 정렬, 색상 등을 조절하여 가독성과 시각적인 완성도를 높입니다.

 

폰트 종류

- 세리프(Serif)/ 명조체

글자 끝에 장식이 있는 폰트 (전통적, 신뢰감 있는 느낌)

ex. Times New Roman, Georgia

 

- 산세리프(Sans-serif) / 고딕체

장식이 없는 깔끔한 폰트 (현대적, 직관적인 느낌)

ex. Arial, Helvetica

---

글자 크기와 계층구조 정리 

디자인에서 글자 크기는 단순히 “크고 작다”의 차이를 넘어서, 정보의 중요도를 구분하고 시선을 유도하는 중요한 요소
제목은 크게 강조하고, 본문은 읽기 편하게, 캡션은 보조적인 정보로 작게 설정

1. 제목(Headline) — 가장 큰 글자 크기

• 목표: 독자의 시선을 끌고, 내용을 한눈에 파악할 수 있도록 강조
• 예시 크기: 24pt, 36pt, 48pt 이상 (디자인 성격과 공간에 따라 달라짐)
• 사용 위치: 페이지 상단, 섹션 제목, 중요한 메시지를 전달하는 곳

2. 본문(Body Text) — 중간 크기

• 목표: 읽기 쉽고 편안해야 하며, 긴 문장일수록 가독성이 중요
• 예시 크기: 12pt, 14pt, 16pt
• 사용 위치: 글의 주요 내용이나 설명이 들어가는 부분

3. 캡션(Captions) — 작은 글자 크기

• 목표: 이미지나 부가적인 설명처럼 보조적 정보를 제공
• 예시 크기: 10pt, 11pt
• 사용 위치: 사진 캡션, 주석, 참고 설명 등

---

1. 자간(Letter Spacing)

자간은 글자와 글자 사이의 간격을 의미합니다.
적절한 자간을 설정하면 텍스트가 답답하지 않고 시원하게 읽히며, 글자가 주는 응집력 또는 개방감을 표현할 수 있습니다.

• 역할: 글자의 밀도와 분위기를 조절
• 효과: 자간이 좁으면 응집된 느낌, 넓으면 여유롭고 개방된 느낌
• 활용: 제목이나 로고 디자인에서는 의도적으로 자간을 넓히거나 줄여서 개성을 표현하기도 함

2. 행간(Line Height)

행간은 줄과 줄 사이의 간격을 말합니다.
행간을 잘 조정해야 본문 텍스트가 눈에 잘 들어오고, 읽기 피로도가 줄어듭니다.

• 역할: 줄 간 간격을 조절해 가독성을 확보
• 효과: 행간이 좁으면 답답하고, 넓으면 시원하지만 너무 넓으면 흐트러져 보임
• 활용: 본문은 보통 글자 크기의 1.4배~1.6배 정도 행간이 가장 읽기 편함

---

색상 & 대비 (Colors & Contrast)

- 색상 대비는 텍스트와 배경 간의 구분을 명확히 하여 가독성을 높이고, 중요한 정보를 강조하는 역할을 합니다.
- 대비를 잘 활용하면 사용자가 내용을 더 쉽게 이해하고 빠르게 읽을 수 있습니다.

- 어두운 배경에는 밝은 글씨, 밝은 배경에는 어두운 글씨처럼 기본 원칙을 지키는 것이 중요합니다.
  또한 버튼, 키워드 등 강조가 필요한 부분에는 대비되는 색상을 사용하면 효과적입니다.
  적절한 색상 대비는 디자인에서 시선을 유도하고 메시지를 더욱 강하게 전달할 수 있습니다.

 

---

기능적 타이포그래피 사용시 고려할 사항

1. 글꼴 선택
2. 자간과 자폭의 조절 및 띄어쓰기 확인
3. 행간의 조절
4. 여백을 형성

---

컬러팔레트 Color palette

- 색상 모델과 포맷을 사용하여 색상을 정의하며, 색상 간의 수학적/지각적 관계를 기반으로 작동합니다.

1. 기본 색상 선택 : 사용자는 보통 다음과 같은 형식 중 하나로 기본 색상을 지정합니다

- Hex 코드 (예: #FF5733)

- RGB (빨강, 초록, 파랑) 값 HSL/HSV (색조, 채도, 밝기/명도)

 

---

 

오늘의 실습 !

1. 나만의 팔레트(무드보드) 만들기

⬆️ 어도비 사이트 활용 컬러 팔레트 찾은 화면 캡처

 

⬆️  제작한 무드 보드

 

1-2) 선정한 컬러 팔레트를 보고 색상 팔레트의 색이 주는 느낌

• #F2AEBB
  • 명도: 높음 / 채도: 낮음 (부드러운 파스텔톤)
  • 노을 속에 퍼지는 여린 핑크빛처럼 따뜻하고 부드러운 감성을 준다. 로맨틱한 저녁하늘을 떠올리게 한다.
• #D97398
  • 명도: 중간 / 채도: 중간~높음
  • 붉은 기운이 감도는 진한 핑크빛으로 열정적이고 활기찬 에너지를 전달한다. 저무는 하늘 속 잔잔한 두근거림이 느껴진다.
• #8C5489
  • 명도: 낮음 / 채도: 중간
  • 짙은 보랏빛으로 몽환적이고 신비로운 분위기를 만들어낸다. 해가 저물며 도시 위에 내려앉는 차분한 정서를 표현한다.
• #4E458C
  • 명도: 낮음 / 채도: 중간
  • 어둡게 내려앉는 보라·남색 톤으로 고요함과 안정감을 준다. 해가 지고 난 뒤의 밤하늘처럼 깊고 차분한 감성이 있다.
• #F2786D
  • 명도: 중간~높음 / 채도: 높음
  • 따스한 주황빛으로 활발하고 생동감 있는 느낌을 준다. 석양이 산 너머로 사라질 때의 열정적인 순간을 담고 있다.

2. 컬리 화면 제작하기

⬆️  위 화면은 원본 / 아래는 만든 화면 입니다!

 

[ 느낀점 ]

- 피그마를 활용하는 게 처음이라 생각보다 시간이 오래 걸렸습니다. 어떤 부분의 자간이 조금이라도 차이가 나면 겹쳐지지 않는다는 것도 깨달았고, 디자인이 가독성을 확실히 중요시한다는 것을 몸소 느꼈습니다! 앞으로의 피그마 작업도 기대를 하며 더 성장하도록 노력할 것이고 계속 연습해볼 생각입니다!

 

3. 챗지피티로 글 작성 후 자유롭게 타이포 화면 만들어보기

왼쪽은 레퍼런스 이미지 오른쪽은 제작한 화면입니다!

 

---

[ 2일차 소감! ]

 

- 이번 과제를 통해 디자인의 기초적인 색을 이해하고, 타이포그래피를 활용한 실습을 진행하며 프로덕트 디자인으로 한 걸음 나아갈 수 있었습니다. 저는 의류학과 전공이라 무드 이미지를 작성하는 것은 익숙했지만, 피그마는 처음이라 다소 서툴고 낯설게 느껴졌습니다. 원래 1시간 안에 완성하려 했으나 실제로는 1시간 20분이 걸려 약간 아쉬웠지만.. 앞으로 익숙해지면 20분 안에도 완성할 수 있도록 노력할 계획입니다!! 또한 레퍼런스를 참고하며 저만의 칼럼을 작성하는 과정은 무척 재미있었습니다. 기존에 학과에서 들었던 강의에 대한 포트폴리오를 제작하여 수상한 적이 있는 저에게는, 사용자가 보다 편안하게 읽을 수 있도록 가독성을 높이는 방법을 연구하는 과정이 흥미로웠고, 그래서 더욱 만족스러운 결과물을 만들 수 있었다고 생각합니다!!

 

= 오늘의 한 마디 =
스스로가 통제할 수 없는 것에 갇혀있지 말기!