[내일배움캠프] DAY3: 디자인개론_레이아웃, 색상

 

 

 

[오늘 학습한 것]

디자인개론 강의 수강, 디자인 감각 훈련 (포스터 벤치마킹)

 

 

[오늘 학습 키워드]

디자인에서의 레이아웃, 색상

디감훈 포스터 리서치: 전달하는 정보와 의미를 중심으로 포스터 분석

 

---

 

디자인개론

 

 

제 4강. 레이아웃

 

(1) 레이아웃의 정의

특정공간 안에 문자, 이미지 등의 구성요소를 보기 쉽게 효과적으로 배치하는 작업,

시각적인 균형과 조화를 이루고, 사용자의 효과적인 정보 인식을 돕는 구성방식

 

(2) 레이아웃의 중요성

• 시각적 위계 형성 > 정보전달력 향상
• 일관성으로 브랜드 이미지 제고 (레이아웃 자체가 아이덴티티가 될 수 있음)
• 사용자경험에 큰 영향을 미침 (ex. 애플vs쿠팡) *쿠팡의 복잡해 보이는 레이아웃? 장볼 때 다채로운 물건이 펼쳐져있는 느낌을 구현

 

(3) 레이아웃의 핵심 원칙

 

여백 만들기 / 핵심요소 반복 사용

1) 여백 만들기

 

2) 핵심 요소 반복 사용

사각형의 도형 요소를 반복하여 국립극장 무대예술지원센터의 공간성의 특징을 상징적으로 표현함

---

 

대비와 강조 / 정렬, 그리드

3) 대비와 강조

강한 색상 대비 (형광그린-블랙), 이미지 강조, 중앙에 이미지와 텍스트로 강조, 다른 정보는 외곽에 배치.

 

4) 정렬, 그리드

면분할을 통해 독자들이 효과적으로 정보를 분리하여 볼 수 있게 함(ex. 신문)

텍스트 뭉치를 왼 편에 정렬함으로 잘 정돈되어 보이게 함 (포스터의 경우 비교적 그리드를 엄격히 지키기보다는 자유롭게 배치)

 

---

 

초점 만들기 / 계층 구조 구성

 

5) 초점 만들기

원형으로 감싸서 분산되는 시선을 모아줌, 이미지 근처에 텍스트덩어리를 배치하여 시선이 중앙에 집중되도록함

 

6) 계층 구조 구성

시선이 [메인이미지 - 타이틀 - 부가정보 - 좌상단 QR코드 - 우상단 작은텍스트] 순서로 가도록 전략적 배치

 

 

 

---

 

 

 

제 5강.  디자인에서의 색상

 

(1) 기본 색채학

 

1) 색상이란?

색상은 빛의 반사에 의해 인식되는 시각적 속성

색상은 물체가 반사하는 빛의 파상 특성에 따라 다르며, 인간의 감각과 심리에 영향을 미침

 

2) 색상, 명도, 채도의 정의

 

 

색상 (Hue)

색의 종류를 구분하는 특성

 

명도 (Value)

색의 밝고 어두운 정도

흰색을 섞으면 명도가 높아지고, 검정을 섞으면 명도가 낮아짐

명도가 높다_틴트 or 파스텔톤, 명도가 낮다_쉐이드 or 다크톤

 

채도(Saturation)

색의 선명하고 탁한 정도

채도가 높으면 원색에 가깝고 채도가 낮으면 무채색에 가까움

 

* 디자인을 할때는 분명한 기준으로 색을 설명해야 함

ex. 채도를 높여주세요, 색상은 좀 더 블루에 가깝게 해주세요, 명도는 조금 낮춰주세요

 

---

 

3) 색의 분류

 

 

1차색 (Primary): 빛의 삼원색으로 완전 원색 (빨강, 노랑, 파랑)

2차색 (Secondary): 1차색인 원색을 혼합하면 나오는 색들 ( 초록, 주황, 보라)

3차색 (Tertiary): 2차색을 혼합하면 나오는 색들

 

따뜻한 색 (웜톤): 빨간색, 주황색, 노란색 등의 난색 → 활력이 있고 에너지가 있는 색

차가운 색 (쿨톤): 파란색, 청록색, 남색 → 차분하고 시원한 색

중간 온도 (웜): 연두색, 초록색

중간 온도 (쿨): 자주색, 보라색

 

---

 

4) 색의 조화와 대비

 

보색 대비 / 예시

보색 대비

색상환에서 서로 마주보는 반대편 색을 '보색'이라 함

→ 생동감과 에너지를 표현, 시선을 집중시키는데 가장 효과적인 색의 조합

 

유사색 조화 / 예시

유사색 조화

색상 안에서 인접한 색상끼리 조합한 것을 '유사색'이라 함 (붉은계열, 파란계열..)

자연에서 많이 보이는 색채 조합(가을이 되면 노랑,붉은색으로 물드는 등 자연스러운 현상) 눈에 익숙하고 편안함

→  눈에 익숙하고 편안함. 보색에 비해 조화로움, 차분함, 안정적. 실패할 확률이 낮은 색조합임. 보색은 잘못쓰면 촌스러울 수 있음

 

명도 대비 / 예시

명도 대비

앱이나 웹의 디지털 미디어에서 명도대비가 매우 중요 (웹접근성 명도대비)

이미지의 회색 사각형은 실제로 같은 색이지만 주변색에 따라 밝기가 달라보임

콘텐츠와 배경과의 명도가 일정 비율 이상 대비되어야 함. 명도 대비를 확인할 수 있는 웹 도구도 많이 있음

색을 별로 쓰지 않아도 명도 조절만으로 시각적 임팩트를 줄 수 있음

 

이미지 출처:  스파르타클럽 디자인개론 강의

---

4) RGB와 CMYK

 

RGB → 웹디자인 전용

CMYK 인쇄물디자인 전용

* 작업물의 용도에 따라 RGB와 CMYK를 선택

 

 

 

(2) 마케팅과 색채심리학

 

파란공간에 있으면 왜 더 차분해질까?

맥도날드, 버거킹 등 햄버거 브랜드에서는 왜 노란색, 주황색, 빨강색을 사용할까?

→  색은 우리의 기분이나 감정에 큰 영향을 줌

 

 

1) 색상과 마케팅

• 색상은 고객이 브랜드를 인식하는 방식에도 영향을 줌 (검정_고급스러움, 세련됨 / 녹색_자연스러움, 평온함)
• 브랜드 인지도를 높이는 데 효과적임 (시그니처 색상은 고객이 브랜드를 기억하게함 ex. 삼성, 이케아, 스타벅스)
• 브랜드의 개성을 드러냄

ex. 

티파니의 블루 컬러

구글의 빨강 노랑 초록 파랑_창의적, 도전적, 자유로운 사고, 혁신, 독창성

스타벅스의 짙은 녹색_커피를 마시며 느끼는 안정감, 여유로움, 느긋함

 

 

2) 브랜드 사례

 

 

검정 (Black)

힘, 권위 / 고급스러움, 세련됨 / 단정함과 진지함

---

 

 

빨강 (Red)

열정과 사랑 / 에너지와 활력 / 심박수, 혈압 등 생명력

 

- 감정 뿐 아니라 행동을 끌어내는 컬러. 경쟁이 치열한 시장에서 효과적임

- 식욕과 구매욕을 자극 -> 식품, 패스트푸드 브랜드에서 가장 흔함

---

 

 

노랑 (Yellow)

행복과 즐거움 / 주의와 경고 / 에너지와 활력 / 희망과 낙관

 

* 카카오: 사용자에게 긍정적이고 활기찬 느낌, 밝은 이미지를 줌 + 주목도 극대화 (노랑+브라운)

 

---

 

 

 

보라 (Purple)

신성함, 고귀함 / 예술과 창의성 / 신비로움, 영성 / 광기

 

 

 

이미지 출처: Pinterest

 

 

---