[디자인부트캠프] Chapter 1-2. 디자인 입문(2)

*색상이란?

우리 눈에 보이는 빛의 파장에 따라 결정되는 특성

분위기, 톤앤매너, 시선의 유도의 중요한 요소이자 특정 프라이머리 컬러를 통해 브랜드의 아이덴티티를 구축

색의 3요소

 

ㆍ 색상(Hue)

ㆍ 명도(Value)

ㆍ 채도(Saturation)

 

색상 (Color, Hue)

• 색의 고유한 이름
• 색상환(Color Wheel)에서 각 색상의 위치
• 과도한 색상의 사용은 산만해짐

팬톤(PANTONE) : 색채 전문 기관, 올해의 컬러를 선정해 유행을 선도

컬러휠(Color Wheel) : 컬러 스팩트럼의 변화를 원형 배열로 시각화

 

명도 (Value, Brightness)

• 색의 밝고 어두운 정도
• 명도가 높으면 △ 밝은 색(흰색에 가까움) / 명도가 낮으면 ▼ 어두운 색(검은색에 가까움)

높은 명도	경쾌, 화사
낮은 명도	차분, 신뢰, 고급스러움

 

채도 (Saturation)

• 색의 선명함 (How Pure?) 

고채도(원색에 가까움)	강렬, 쨍하다, 시선 집중 패션 등의 포인트 고채도의 레드 계열의 활용 ㆍCTA 버튼, 광고 배너(할인 등) ㆍ에너제틱, 스포티한 느낌을 주어 레스토랑이나 운동화 브랜드의 로고
저채도(탁색)	흐릿, 옅다, 부드러움, 차분, 편안함, 여유 그레이톤, 파스텔톤 저채도 컬러의 활용 ㆍ카페, 침실 등의 휴식 공간 인테리어 ㆍ오피스 등 오래 머물러야 하는 공간의 인테리어

 

*색이 주는 감성

 

색상은 감정에 영향을 준다

빨강	강렬, 활기, 동적 (예: 유튜브)
파랑	신뢰감, 차분, 혁신 신뢰도가 중요한 금융/혁신적 이미지를 강조하는 테크노 (예: 페이스북, 삼성) *소셜 미디어 페이스북은 네이비에 가까운 삼성보다 비비드한 블루를 써서 친근감을 더함
초록	자연스러움, 건강, 웰빙, 친숙 (예: 스타벅스, 네이버) *네이버의 경우, 초록색이 신뢰감을 형성하기도 함
노랑	밝음, 긍정적, 즐거움, 친근함, 유쾌함 (예: 스냅챗, 카카오톡)
블랙&화이트	단정함, 심플함 (예: 나이키, 애플) 검정: 고급스러움, 강한 느낌, 모던함 흰색: 깔끔함

 

브랜드의 메시지와 감성을 전달

"색을 보는 안목 키우기"가 중요!

---

 

*기초 타이포그래피

 

타이포그래피 (Typography) : 글자를 배치하고 디자인하는 기술과 예술

 

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

 

폰트 종류

ㆍ세리프(Serif) / 명조체

 

글자 끝에 장식이 있는 폰트 클래식 / 신뢰감 / 고급스러운 이미지

예: Times New Roman, Georgia

시각적으로 연결되어 보여, 활자 인쇄에서의 시각적 피로도가 낮다

 

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

 

없다(Sans) + 장식(Serif) 장식이 없는 깔끔한 폰트 모던 / 직관적 / 가독성 좋음

예: Arial, Helvetica, Roboto, Noto Sans, 맑은 고딕

 

글자 크기와 계층구조(하이어라키)

제목, 본문, 캡션 등 글자의 크기를 조절하여 중요한 정보에 시선을 유도

예: 제목은 크고 굵게, 본문은 작고 가독성 있게, 타이틀보다 서브타이틀이 작게

 

제목 (Headline)	가장 큰 글자 크기 ㆍ목표: 주목 끌기, 내용을 한눈에 파악할 수 있게 ㆍ예시: 24pt, 36pt, 48pt 이상 (디자인의 중요도와 공간에 따라 다름) ㆍ사용위치: 페이지 최상단, 섹션 제목 등 중요한 정보가 들어가는 곳
본문 (Body Text)	중간 크기 ㆍ목표: 읽기 쉽고 편안한 크기, 긴 문단이기 때문에 가독성이 중요 ㆍ예시: 12pt, 14pt, 16pt ㆍ사용위치: 글의 주요 내용이나 설명이 들어가는 곳
캡션 (Captions)	작은 글자 크기 ㆍ목표: 보조적인 정보 제공(작은 텍스트) ㆍ예시: 10pt, 11pt ㆍ사용위치: 이미지 캡션, 사진 설명, 주석 등

 

자간 (Letter Spacing)

 

글자 사이 간격을 조정하는 요소로, 글자들이 서로 어떻게 배치될지를 결정 Balance

적절한 조절을 통해 텍스트의 가독성 향상 / 글자들 간 응집력 또는 개방감 표현 / 디자인의 느낌을 결정

예: 로고에 넓은 자간을 활용한 보그(Vogue)

 

넓은 자간: 여유 혹은 강조 but 지나치면 분리되어 보이고 가독성이 떨어짐

좁은 자간: 타이트한 느낌, 적당히 좁은 자간은 가독성을 향상

 

행간 (Line Height)

 

윗문장과 아랫문장 사이의 줄간격

자간과 함께 가독성의 중요한 요소 (예: 너무 좁은 행간은 문장끼리 겹쳐 보여 눈이 피로하고 읽기 어렵다)

폰트마다 다르기 때문에 절댓값을 지정할 수 없다

 

간격을 보는 판단력이 중요 많이 보고 직접 다양하게 시도해 보자 (넓은 간격, 중간 간격, 좁은 간격…)

 

---

 

*색상 & 대비 (Colors & Contrast)

색상 대비는 텍스트와 배경 간의 시각적 구분을 명확하게 하여 가독성을 향상 / 중요한 정보를 강조

대비를 잘 활용하면

ㆍ사용자가 정보를 더 쉽게 이해하고 빠르게 읽을 수 있다.

ㆍ강조할 부분을 두드러지게 만들 수 있다.

 

컬러팔레트 Color Palette

 

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

유사 / 보색 / 삼색 / 분할 보색 등 다양한 배색으로 조합

 

RGB	빛의 3원색 빨강, 초록, 파랑
HEX	RGB를 16진수로 표기하는 코드 두 자리씩 끊어서 각 RGB값의 강도를 나타냄 (#000000은 검정 / #FFFFFF는 하양)
HSL / HSV	색조/채도/명도로 정의 (Lightness / Value)