색의 기본

01. RGB/CMYK

디자인에서 컬러를 다룰 때 가장 기본적으로 이해해야 할 두 가지 색상 모델은 RGB와 CMYK입니다.

이 두 모델은 빛을 기반으로 하느냐, 색료(잉크)를 기반으로 하느냐에 따라 구분됩니다.

1. RGB 색상 모델

Red(빨강), Green(초록), Blue(파랑)의 빛의 3원색으로 구성됩니다.
가산혼합(Additive Color Mixing) 방식 : 색이 섞일수록 밝아지며, 모든 색상이 최대값일 때는 흰색(White), 모두 0일 때는 검정(Black)이 됩니다.
일반적인 8비트 RGB에서는 채널당 0~255로 표현합니다. rgb(255, 255, 255)와 #FFFFFF는 모두 이 방식에서 흰색을 나타내는 예입니다.
주로 사용되는 영역 : 웹사이트 / 모바일 앱 / 디지털 디스플레이 / 사진 / 영상 / LED 등 화면 기반 매체

모니터에서 우리가 보는 모든 색상은 RGB 모델을 통해 출력됩니다.

2. CMYK 색상 모델

Cyan(청록), Magenta(자홍), Yellow(노랑)의 색료 3원색과 명도 보정을 위한 Black(검정)을 포함해 4원색으로 구성됩니다.
감산혼합(Subtractive Color Mixing) 방식 : 색이 섞일수록 어두워지며, 세 가지 색을 모두 섞으면 이론상 검정에 가까워지지만, 실제 인쇄에서는 완전한 블랙을 표현할 수 없기 때문에 K(Black)을 보완적으로 사용합니다.
색상값은 각 채널당 0~100%로 표현되며, 이는 잉크의 농도를 의미합니다.
주로 사용되는 영역 : 인쇄물(책자, 브로셔, 패키지, 포스터 등) / 오프셋 & 디지털 프린트 출력

CMYK는 종이에 잉크가 인쇄되는 방식이므로, 배경이 되는 흰색은 종이 자체의 색입니다. 따라서 종이 색상이 컬러 표현에 영향을 줄 수 있습니다.

02. 브랜드 컬러

1. 브랜드 컬러란?

브랜드 컬러는 기업이나 제품을 떠올리게 하는 대표 색상입니다. 로고와 포장, 웹사이트와 광고에서 같은 기준으로 사용하면 사람들에게 브랜드를 기억시키는 데 도움이 됩니다.

2. 정확한 색상값 사용의 중요성

브랜드 컬러는 승인된 가이드에 맞춰 사용해야 합니다. 다만 인쇄·화면·다크모드처럼 환경이 달라질 때를 위한 변형이나 대체값이 가이드에 정해져 있을 수 있으므로 적용 조건까지 확인하세요.

RGB : 디지털 화면용
CMYK : 인쇄용
HEX : 웹에서의 색상 표현 (예: #0055A5)
PANTONE(팬톤) : 별색 인쇄용 색상 표준, 가장 정밀한 컬러 일치 구현 가능

브랜드가 정한 매체별 색상값이 있으면 이를 우선합니다. 새 값을 만들어야 한다면 RGB·CMYK를 단순 숫자 변환으로 끝내지 말고, 색상 프로파일과 종이·출력 조건을 확인하고 승인받는 과정이 필요합니다.

3. 왜 별색(PANTONE)을 사용하는가?

디지털 화면은 기기마다 색상이 다르게 보일 수 있고, 일반 4원색(CMYK) 인쇄는 색상 재현에 한계가 있습니다. 따라서 브랜드 로고나 핵심 색상이 CMYK로 정확하게 구현되지 않을 경우, PANTONE(팬톤)과 같은 별색(SPOT COLOR) 시스템을 사용해 일관된 색상을 구현합니다.

색상 견본과 번호로 소통할 수 있습니다. 같은 번호라도 종이와 출력 조건에 따른 차이는 확인해야 합니다.

PANTONE은 색상 번호뿐 아니라 코팅지·비코팅지 등 적용 조건도 구분합니다. 특정 브랜드의 공식 색상이라고 단정하기보다 해당 브랜드 가이드에서 정확한 번호와 조건을 확인하세요.

4. 브랜드 컬러 구성

Primary Color 메인 컬러

브랜드를 대표하는 핵심 색상입니다. 개수와 사용 비율은 브랜드 가이드와 적용 환경에 맞춰 정합니다.

Secondary Color 서브 컬러

메인 컬러를 보완하거나 다양한 상황에서 유연하게 활용할 수 있는 색상. 웹 UI, 인포그래픽, 포장 등에 활용됩니다.

Accent Color 강조 색상 - 선택적

클릭 유도(CTA), 포인트 요소 등에 활용되는 보조 강조색

5. 브랜드 컬러 가이드라인

브랜드 가이드 또는 CI·BI 매뉴얼에는 다음과 같은 내용을 정리할 수 있습니다.

정확한 색상값 (RGB / CMYK / HEX / PANTONE)
배경색과의 조합
밝기 제한 / 색상 변형 금지
사용 예시 및 금지 예시

디자이너는 이 가이드를 반드시 숙지하고, 브랜드 컬러를 정확하게 적용할 책임이 있습니다.

정의	브랜드 정체성을 시각적으로 표현하는 고유 색상
사용 환경	로고, 포장, 웹, 광고 등 모든 시각 매체
주요 시스템	RGB, CMYK, HEX, PANTONE
디자인 규칙	브랜드 가이드라인 내 색상값, 사용 비율, 배색 제한 등을 반드시 준수

03. 컬러 배색

색을 어떻게 조합하느냐에 따라 디자인의 분위기와 내용이 전달되는 방식이 달라집니다. 브랜드의 성격과도 연결되기 때문에 예쁜 색만 골라 넣을 수는 없겠죠. 처음에는 기본적인 배색부터 익히고, 실제 작업에서 비교해 보는 것이 좋습니다.

1. 유사색 배색 Analogous Colors

유사색은 색상환에서 인접한 컬러들을 조합하는 방식입니다.
가까운 색상들을 선택한 뒤 명도와 채도를 조절해 연결감을 만들 수 있습니다.
시각적으로 자연스럽고 안정적인 느낌을 주며, 초보자가 활용하기에 안전한 배색 방식입니다.

한 가지 파랑에서 밝은 하늘색·짙은 네이비처럼 명도와 채도를 바꾸는 방식은 단색 계열 배색입니다. 유사색 배색은 서로 가까운 색상을 함께 사용하는 방식과 구분해서 이해하세요.

2. 보색 배색 Complementary Colors

보색은 색상환에서 정반대에 위치한 컬러 조합입니다.
강한 대비와 시각적 긴장감을 주기 때문에, 강조 요소나 포인트 컬러로 적절합니다.
그러나 넓은 면적에서의 사용은 시각 피로를 유발할 수 있어 주의가 필요합니다.

보색 관계는 사용하는 색상 모델과 색상환에 따라 확인해야 합니다. 보색이라는 이유만으로 글자와 배경의 대비까지 충분해지는 것은 아닙니다.

3. 기타 배색 전략

단색 계열 Monochromatic : 한 가지 색상의 명도와 채도만 조절해 통일감 있는 배색 구성
3색 배색 Triad : 색상환에서 120° 간격의 3가지 색을 선택, 균형 잡힌 대비 효과
중성 배색 Neutral : 블랙, 화이트, 그레이, 베이지 등 중성색을 중심으로 컬러를 보조

4. 배색 실습과 참고 자료

초보 디자이너일수록 많은 레퍼런스를 참고하고, 실제 컬러 팔레트를 분석해보는 것이 중요합니다.

추천 툴 : Adobe Color / Coolors.co / Colormind.io

배색은 디자인 툴에서 적용하기 전에 반드시 ‘톤앤매너’와 ‘콘텐츠 목적’을 함께 고려해야 합니다.

유사색	자연스럽고 부드럽다	브랜드 컬러 중심의 레이아웃
보색	강한 대비, 주목성	CTA 버튼, 강조 텍스트
단색	일관된 톤, 안정감	미니멀 디자인, 브랜드 패키지
삼각형 배색	대비 + 균형	웹 UI, 인포그래픽

04. 컬러 가이드

1. 컬러 가이드란?

컬러 가이드는 어떤 색을 어디에 쓸지 정리해 둔 기준입니다. 메인 색상과 보조 색상, 강조할 때 쓰는 색을 미리 정해두면 여러 사람이 작업해도 같은 인상을 유지하기 쉽습니다.

2. 컬러 가이드가 필요한 이유

1) 작업의 일관성 확보

여러 페이지, 다양한 디자인에서 색상이 불규칙하게 사용되는 것을 방지
동일 프로젝트 내에서 디자이너나 개발자가 통일된 기준으로 작업 가능

2) 브랜드 아이덴티티 강화

브랜드 컬러의 정확한 적용 및 오남용 방지
소비자 인식에서 시각적 통일성 제공

3) 팀 간 협업 효율성 증가

디자인팀 ↔ 개발팀 간 명확한 색상 정의 전달
Style Guide, Design System의 핵심 기반 자료 역할

▍컬러 가이드 구성 예시

구분	용도	예시
Primary	브랜드의 핵심 컬러	#0055A5 등 · CMYK 값은 승인된 프로파일별로 지정
Secondary	보조적 요소 / 콘텐츠 강조	#FFC400, #4CAF50
Background	배경색상 / 블록, 섹션	#F8F9FA, #E0E0E0
Text	본문 및 제목, 서브 텍스트 등	#212121, #555555, #888888
Accent	버튼, 링크, 강조 등 액션 요소	#E53935, #03A9F4

매체별 색상값과 적용 조건을 함께 기록하세요. HEX는 RGB 값을 나타내는 표기 방식이며, RGB·CMYK·별색의 색상값은 조건 없이 완벽하게 일치하지 않습니다.

3. 언제 컬러 가이드를 만들어야 할까?

1) 필수 상황

페이지 수가 많거나, 다양한 디자인 산출물이 존재하는 경우
협업 환경에서 여러 디자이너/개발자가 함께 작업하는 경우
브랜드 론칭 또는 리뉴얼을 계획 중인 경우

2) 생략 가능

단일 페이지 또는 포스터 등 단발성 디자인
매우 단순한 내부용 시안

컬러 가이드는 단순한 색상 나열이 아니라, 사용 맥락과 조합 규칙까지 포함하는 “시각 언어의 기준”입니다.

항목	설명
정의	브랜드 중심의 디자인 색상 체계 정의
필요성	일관성, 협업 효율, 브랜드 정체성 유지
구성 요소	메인컬러, 서브컬러, 텍스트, 배경, 포인트 등
사용 시기	복수 페이지/협업 프로젝트/시스템 구축 시

05. 컬러 대비

색의 대비는 두 색이 얼마나 다르게 보이는지를 말합니다. 글자가 잘 읽히는지, 중요한 정보가 먼저 보이는지에도 영향을 줍니다. 색상만 바꾸기보다 밝기와 선명도를 함께 조절해 보세요.

1. 색상 대비의 종류

구분	설명	예시
색상(Hue) 대비	색상환 상 떨어진 색상 간의 대비	보라 ↔ 노랑, 파랑 ↔ 주황
명도(Lightness) 대비	밝고 어두움의 정도 차이	흰색 ↔ 검정, 연회색 ↔ 진남색
채도(Saturation) 대비	선명한 색과 탁한 색의 대비	강렬한 빨강 ↔ 회색빛 빨강
온도 대비	따뜻한 색과 차가운 색의 대비	주황 ↔ 파랑
보색 대비	색상환에서 정반대 위치의 색상	빨강 ↔ 초록, 파랑 ↔ 주황

하나의 디자인에서도 2~3가지 대비 요소가 복합적으로 작용할 수 있습니다.

2. 유사색에서도 대비는 존재한다

유사색(Analogous Colors) 조합은 기본적으로 조화롭지만, 명도나 채도에 큰 차이를 주면 강한 대비가 가능합니다.

예 :

하늘색 (#ADD8E6) ↔ 진한 네이비 (#003366)
연보라 (#D8CFFF) ↔ 짙은 보라 (#4B0082)

이처럼 유사색도 밝기, 선명도를 조절하면 조화 속에 대비를 줄 수 있습니다.

항목	설명
대비 요소	색상, 명도, 채도, 온도
주요 기능	가독성 향상, 정보 위계, 시선 유도
실무 팁	보색은 포인트에만 제한적 사용, 본문은 명도 대비 중심

3. 실무 적용 팁

본문 텍스트와 배경 간 대비가 충분하지 않으면 가독성 저하

WCAG 2.2의 AA 기준에서 일반 텍스트는 최소 4.5:1, 큰 텍스트는 최소 3:1의 대비가 필요합니다. 큰 텍스트는 18pt 이상 또는 14pt 이상인 굵은 글자에 해당하며, 모든 UI 요소에 4.5:1을 일괄 적용하는 기준은 아닙니다.

오류·성공·선택 상태도 색상만으로 구분하지 말고 글자나 아이콘 같은 정보를 함께 제공하세요.

보색 대비는 포인트 요소(버튼, 강조 문구)에 사용

→ 넓은 면적에 과도하게 사용 시 시각 피로 유발 가능

같은 색상 계열 내에서도 대비를 섬세하게 조절하면

→ 톤앤매너를 유지하면서도 위계감 있는 디자인 가능

06. 원색과 별색

인쇄 디자인에서 색상을 표현하는 방식은 크게 원색(프로세스 컬러)와 별색(스폿 컬러)로 나뉘며, 디자인 결과물의 정확도, 품질, 인쇄 비용에 직접적인 영향을 줍니다.

1. 원색 Process Color / CMYK

Cyan, Magenta, Yellow, Black의 4원색을 조합해 색상을 표현하는 방식입니다.
일반적인 옵셋 및 디지털 인쇄에서 가장 많이 사용되며, 전체 색상을 분판하여 겹쳐 인쇄함으로써 다양한 색을 만들어냅니다.

※ 장점 :

다양한 색을 저비용으로 구현 가능
대부분의 일반 인쇄물(브로셔, 포스터, 책자 등)에 적합

※ 단점 :

원하는 색상이 정확하게 표현되지 않을 수 있음
형광, 금속, 특정 브랜드 컬러 등 구현 불가

2. 별색 Spot Color

CMYK로 조합하는 것이 아닌, 특정 색상의 잉크를 별도로 제작하여 인쇄하는 방식입니다.
팬톤(PANTONE), DIC, Toyocolor 등의 국제 표준 컬러 시스템을 사용해 색상을 지정합니다.
브랜드 컬러나 형광·금속성 잉크에 사용할 수 있습니다. 금박·은박은 금속성 잉크 인쇄와 다른 후가공이므로 제작 방식을 구분해야 합니다.