[디자인부트캠프] DAY 02 | 디자인 입문

DAY 02 | 디자인 입문 - 색상과 타이포그래피 기초

 

 

이번 강의에서는 색상 이론과 타이포그래피의 기초 개념을 배웠다.
색상과 타이포그래피는 디자인의 핵심 요소로, 브랜드의 인상과 사용자의 경험에 큰 영향을 미친다.

 

색상 이론

색상(Color)은 감정과 심리적 반응을 유도하며, 브랜드와 디자인의 중요한 요소이다.
색상을 효과적으로 사용하면 브랜드 아이덴티티를 강화하고, 사용자 경험(UX)을 향상할 수 있다.

 

색상 분류

1. 기본 색상 (Primary Colors): 빨강(Red), 파랑(Blue), 노랑(Yellow)
2. 보색 (Complementary Colors): 서로 반대 위치에 있는 색상 (예: 빨강-청록, 파랑-주황)
3. 채도 (Saturation): 색상의 선명함과 탁함 정도
4. 명도 (Brightness): 색의 밝기 (예: 흰색에 가까울수록 명도가 높음, 검은색에 가까울수록 명도가 낮음)

색상의 감성적 의미

• 빨강 (Red): 열정, 식욕 자극 / 부정적 의미: 위험, 경고
• 파랑 (Blue): 신뢰, 시원함 / 부정적 의미: 차가움, 거리감
• 초록 (Green): 자연, 안정감 / 부정적 의미: 지루함
• 노랑 (Yellow): 활기, 긍정 / 부정적 의미: 불안, 경고

 

 

예제:

• 코카콜라 (Coca-Cola) → 강렬한 빨간색 = 식욕 자극, 활기
• 레드불 (Red Bull) → 빨강 + 파랑 조합 = 에너지 & 신뢰

 

 

 

 

타이포그래피 기초

타이포그래피(Typography)는 글자의 형태와 배열을 통해 정보 전달을 효과적으로 하는 디자인 요소이다.

 

타이포그래피의 핵심 요소

1. 서체(Font Family)
   • 세리프 (Serif): 전통적, 신뢰감 (예: Times New Roman)
   • 산세리프 (Sans-serif): 현대적, 깔끔함 (예: Helvetica, Noto Sans)
   • 손글씨 스타일 (Script): 감성적, 창의적 (예: Brush Script)
2. 자간 (Kerning) & 행간 (Leading)
   • 자간: 글자 간의 간격 → 가독성을 높이거나 강조 효과
   • 행간: 줄과 줄 사이의 간격 → 너무 좁으면 답답하고, 너무 넓으면 흐름이 깨짐
3. 가독성과 계층 구조 (Hierarchy & Readability)
   • 제목(Heading), 소제목(Subheading), 본문(Body) 등의 계층 구조 설정이 중요
   • 웹 디자인에서는 H1, H2, H3 태그를 적절히 활용하여 정보 구조를 시각적으로 구분

 

 

예제:

• 뉴스 기사에서 세리프 서체가 많이 사용되는 이유 → 신뢰성과 전통적인 느낌을 주기 때문
• 스타트업 웹사이트에서 산세리프 서체를 주로 사용하는 이유 → 깔끔하고 현대적인 인상을 주기 때문

 

---

색상과 타이포그래피의 조합 사례

 

색상과 타이포그래피는 함께 사용될 때 더욱 강력한 메시지를 전달한다.

• 경고 메시지 → 빨간색 + 굵은(Bold) 산세리프 글씨
• 친환경 브랜드 → 초록색 + 부드러운 손글씨 서체
• 프리미엄 브랜드 → 검정 + 고급스러운 세리프 서체

 

실제 프로젝트에서도 색상과 서체 조합을 전략적으로 활용해야 한다.

• 브랜드의 정체성을 반영할 수 있는 색상과 타이포그래피를 선택하는 것이 중요
• UX/UI 디자인에서는 가독성, 접근성, 사용자 감정까지 고려한 조합이 필수

 

결론: 디자인에서 색상과 타이포그래피의 역할

✔ 색상은 감정을 유발하고 브랜드 아이덴티티를 구축하는 데 중요한 요소이다.
✔ 타이포그래피는 정보 전달력을 극대화하고, 사용자의 시각적 경험을 좌우한다.
✔ 두 요소를 조화롭게 사용하면 사용자 경험을 더욱 향상시킬 수 있다.

 

컬러파레트 실습

패션에 관련된 컬러파레트를 만들어보았다. 

 

타이포그래피 실습

가독성을 고려한 카드 레이아웃을 만들어보았다. 

 

배운 내용을 간단하게 적용한 모습이다.