Chapter 08

대비

동네 게시판에 포스터 여섯 장이 붙어 있다. 길을 걷다 보면 그중 한 장만 먼저 눈에 들어온다. 더 크지도, 더 비싼 종이도 아닌데 왜 그 한 장일까. 답은 대개 "다름"이다. 둘레와 얼마나, 그리고 어떤 식으로 다른가. 이 장은 색이 서로 다를 수 있는 일곱 가지 방식을 하나씩 만져 보고, 그 다름으로 시선이 머물 곳을 만드는 법, 그리고 다름을 너무 많이 만들면 오히려 아무것도 보이지 않게 되는 이유를 살핀다.

눈에 띈다는 것

눈은 같은 것보다 다른 것을 먼저 본다. 회색 자갈밭의 빨간 단추, 조용한 도서관의 기침 소리처럼 둘레와 다른 것이 주의를 끈다. 미술과 디자인에서는 이렇게 나란히 놓인 두 색이 서로의 차이를 드러내는 것을 대비(Contrast)라고 부른다. 대비는 한 가지가 아니다. 밝기가 다를 수도, 색상이 다를 수도, 선명함이 다를 수도, 차지하는 넓이가 다를 수도 있다. 아래 그림의 게시판에서 어느 포스터가 먼저 보이는지, 그리고 그 포스터가 둘레와 무엇이 다른지 생각해 본다.

명도 차이가 가장 크다 나머지 다섯 장은 모두 중간 밝기의 탁한 색이다
그림 1. 게시판의 포스터 여섯 장(가상). 다섯 장은 색상은 서로 다르지만 밝기와 탁한 정도가 비슷해서 한 덩어리로 묻힌다. 아래 가운데 한 장은 중간 밝기의 탁한 초록 바탕에 아주 밝은 크림 제목(명도 차이), 그리고 초록 바탕 위의 작은 주홍 원(보색, 작은 면적)을 썼다. 흑백으로 보면 이 차이가 더 분명하다. 이 장의 끝에서 이 포스터가 어떻게 만들어졌는지 서윤의 작업 노트로 돌아온다.

그림의 다섯 장은 색상만 놓고 보면 꽤 다르다. 초록, 분홍빛 갈색, 연보라, 누런 베이지, 청회색. 그런데도 묻힌다. 밝기와 탁한 정도가 거의 같기 때문이다. 반면 가운데 아래 한 장은 바탕보다 제목이 훨씬 밝고, 어두운 책 그림이 아래를 받친다. 여기에 작은 주홍 원 하나가 초록 바탕과 반대편 색으로 박혀 있다. "다르다"는 말 안에 여러 종류가 섞여 있고, 그 종류마다 힘이 다르다는 것이 이 장의 출발점이다.

이텐의 일곱 가지 대비

"다름"의 종류를 처음으로 체계 있게 나눈 사람 중 하나가 스위스의 화가이자 교육자 요하네스 이텐(Johannes Itten, 1888–1967)이다. 이텐은 1919년부터 1923년까지 독일의 미술·디자인 학교 바우하우스에서 모든 신입생이 거치는 기초 과정을 가르쳤고, 그 뒤 수십 년의 수업을 『색채의 예술』(Kunst der Farbe, 1961)로 정리했다. 이 책에서 그는 색이 서로를 돋우는 방식을 일곱 가지 대비로 나누었다. 오늘날 미술 교육과 디자인 교재 대부분이 이 분류를 어떤 형태로든 이어 쓴다.

대비무엇이 다른가이텐의 설명(요약)
색상 대비색상(빨강·노랑·파랑…)선명한 순색끼리 맞붙을 때 생긴다. 노랑·빨강·파랑 세 원색이 맞붙을 때 가장 강하고, 색상이 원색에서 멀어질수록 약해진다고 보았다.
명암 대비밝기흰색과 검정 사이의 대비. 색이 있든 없든 모든 그림의 바탕이 되는 대비로 다루었다.
한난 대비따뜻함·차가움빨간 주황을 가장 따뜻한 극, 청록을 가장 차가운 극으로 놓고, 둘 사이의 색은 옆에 무엇이 오느냐에 따라 따뜻하게도 차갑게도 보인다고 설명했다.
보색 대비색상환의 반대편섞으면 회색이 되는 두 색을 보색이라 하고, 나란히 놓으면 서로를 가장 선명하게 만든다고 보았다.
동시 대비(눈이 만드는 색)눈은 어떤 색을 보면 그 보색을 스스로 요구하며, 실제로 없는 그 색을 둘레에 덧입힌다고 설명했다.
채도 대비선명함선명한 색과 탁한 색의 대비. 탁한 색 옆의 선명한 색은 더 선명해 보이고, 선명한 색 옆의 탁한 색은 더 탁해 보인다.
면적 대비넓이두 색이 차지하는 넓이의 비율. 색마다 "힘"이 달라 균형을 이루는 넓이가 다르다고 보고, 괴테의 수치를 빌려 비율을 제안했다.

표만 보면 비슷비슷해 보인다. 손으로 하나씩 만져 보는 편이 빠르다. 아래 탐색기에서 대비를 하나 고르고, "대비의 세기"를 0에서 끝까지 밀어 본다. 세기가 0이면 그 대비가 전혀 없는 상태, 끝까지 밀면 그 대비만 가장 강하게 남긴 상태다. 각 칸에서 다른 대비는 되도록 고정해 두었다. 예를 들어 색상 대비 칸의 색들은 명도를 같게 맞췄다.

SIMULATOR

일곱 대비 탐색기

이 대비가 바꾸는 것—
이 책의 모델로 잰 값—
함께 변한 다른 대비—
해볼 것: ① "색상"에서 세기를 0에서 100까지 민다. 한 가지 색이 무지개로 펼쳐진다. 그런데 오른쪽 위 "흑백"을 누르면 모든 칸이 같은 회색이다. 이 칸들은 색상만 다르다. ② "명암"으로 바꿔 같은 일을 한다. 흑백에서도 차이가 그대로 남는다. ③ "보색"에서 가운데 띠는 두 색을 작은 점으로 섞었을 때의 색이다. 세기를 높여도 가운데는 회색에 머문다. 보색은 섞으면 회색이 되는 짝이다. ④ "면적"에서 세기를 끝까지 밀면 노랑이 아주 작아진다. 점선 표시가 괴테와 이텐이 말한 "균형"의 넓이다. (색은 OKLCH로 만들고 화면 색역 밖은 채도를 줄였다. "함께 변한 다른 대비"는 이 칸에서 의도와 달리 조금씩 섞여 드는 대비다. 대비를 하나만 완전히 떼어 내기는 불가능하다.)

마지막 칸 "함께 변한 다른 대비"를 눈여겨볼 만하다. 보색 대비를 세게 하면 한난 대비도 함께 세진다(주황과 파랑은 보색이면서 동시에 따뜻함과 차가움의 짝이다). 채도 대비를 세게 하면 선명한 쪽이 조금 밝아 보인다. 일곱 대비는 일곱 개의 독립된 손잡이가 아니라, 같은 색 한 쌍을 일곱 가지 눈으로 본 것에 가깝다. 이텐의 분류가 쓸모 있는 이유는 "이 두 색이 왜 강하게 부딪히는가"를 말로 짚을 수 있게 해 주기 때문이다.

명암 대비가 먼저다

일곱 대비 중 하나만 고르라면 대부분의 화가와 디자이너는 명암 대비를 고른다. 6장에서 본 대로 눈은 형태와 글자를 주로 밝기 차이로 읽는다. 색상 차이는 아무리 커도 밝기 차이를 대신하지 못한다. 직접 확인해 본다. 아래는 가을 행사 포스터의 제목 띠다. 바탕은 초록, 제목 색은 두 슬라이더로 정한다. 하나는 바탕과의 색상 차이, 다른 하나는 명도 차이다.

SIMULATOR

색상만 다를 때, 명도도 다를 때

명도 차이 ΔL*—
WCAG 대비비—
색차 ΔE2000—
해볼 것: ① 기본값은 색상 차이 120°(초록 바탕 위 빨강 제목), 명도 차이 0이다. 색차 ΔE는 크지만 작은 글자는 가장자리가 지글거리고 읽기 힘들다. "흑백"을 누르면 제목이 사라진다. 6장에서 서윤의 포스터가 겪은 일이다. ② 색상 차이를 0으로 두고 명도 차이만 +0.35로 올린다. 같은 초록 계열인데도 제목이 또렷하다. ③ 색상 차이 180°, 명도 차이 0에서 작은 글자를 본다. 색은 가장 멀리 떨어졌는데 가장 읽기 어렵다. (명도는 OKLCH L로 맞췄다. 선명한 색은 같은 명도의 회색보다 조금 밝아 보이는 경향이 있어서 완전히 같은 밝기로 느껴지지 않을 수 있다. 화면 색은 기기마다 다르므로 지글거림의 정도도 화면마다 다르다.)

명도가 같고 색상만 다른 두 색이 맞닿으면 경계가 떨리거나 흔들려 보인다. 이런 상태를 등휘도(Equiluminance, 같은 휘도)라고 한다. 신경과학자 마거릿 리빙스턴(Margaret Livingstone)은 『시각과 미술』(Vision and Art: The Biology of Seeing, 2002)에서, 사람의 시각 경로 중 움직임·깊이·위치를 담당하는 쪽은 색을 거의 보지 못하고 밝기 차이만 본다고 설명하며, 모네의 「인상, 해돋이」에서 해가 둘레 하늘과 휘도가 거의 같아 일렁여 보이는 것을 그 예로 들었다. 화가는 이 떨림을 일부러 쓰기도 한다. 하지만 읽혀야 하는 글자에서는 피해야 할 상태다.

밝기 차이를 숫자로 재는 가장 흔한 방법은 웹 접근성 지침 WCAG 2의 대비비(Contrast ratio)다. 두 색의 상대 휘도(빛의 세기를 눈의 감도로 가중한 값, 0~1)를 비교한다.

$$\text{대비비} = \frac{Y_{\text{밝은 색}} + 0.05}{Y_{\text{어두운 색}} + 0.05}$$
\(Y\): 상대 휘도(검정 0, 흰색 1). 같은 색이면 1, 흰색과 검정이면 21. WCAG 2는 본문 글자에 4.5 이상, 큰 글자에 3 이상을 권한다. 0.05는 화면의 반사광 같은 주변 빛을 흉내 낸 보정값이다. 이 수치는 색상을 전혀 보지 않는다는 점에 주의한다. 자세한 기준은 13장에서 다룬다.

시뮬레이터의 세 숫자를 비교하면 이 장의 핵심 하나가 보인다. 색차(ΔE)는 "얼마나 다른가"를, 대비비는 "얼마나 읽히는가"를 잰다. 빨강과 초록은 색차로는 아주 멀지만, 명도가 같으면 대비비는 1에 가깝다. 대비로 무언가를 강조하고 싶다면 먼저 명암 대비로 뼈대를 세우고, 색상 대비는 그 위에 얹는 것이 안전하다.

실눈 뜨기와 흑백 사진 화가들은 그림 앞에서 눈을 반쯤 감는다. 실눈을 뜨면 망막에 닿는 빛이 줄고 세부가 흐려져, 색은 약해지고 밝기 덩어리만 남는다. 디자이너는 같은 일을 휴대폰 카메라의 흑백 모드나 화면 캡처의 채도 0 보정으로 한다. 시안을 고를 때 첫 질문을 "어느 색이 예쁜가"가 아니라 "흑백에서도 제목이 먼저 보이는가"로 두면, 색상 대비에 기대 놓고 명암 대비를 잊는 실수를 대부분 막을 수 있다. 실눈으로 보았을 때 제목과 배경이 한 덩어리로 붙으면 색을 바꾸기 전에 밝기부터 바꾼다.

한난 대비와 보색 대비

빨강·주황·노랑 쪽을 따뜻한 색, 파랑·청록 쪽을 차가운 색이라고 부른다. 이 구분은 온도계로 잴 수 있는 성질이 아니라 불, 햇빛, 물, 그늘 같은 경험에서 온 연상에 가깝다. 색이 실제 체감 온도까지 바꾼다는 주장은 오래된 통설이지만, 연구 결과가 엇갈리고 효과가 있더라도 작다고 보는 편이 안전하다. 그래도 한난 대비(Warm–cool contrast)는 그림에서 분명한 일을 한다. 대표적인 것이 공간감이다.

가까이 따뜻하게, 멀리 차갑게 가까이 차갑게, 멀리 따뜻하게 깊이가 자연스럽다 먼 언덕이 앞으로 튀어나온다
그림 2. 한난 대비와 공간. 두 풍경은 모양과 명도 순서가 거의 같고 색의 온도만 뒤집었다. 멀리 있는 산이 푸르고 흐리게 보이는 것은 공기 속 입자가 빛을 흩뜨리기 때문이며, 레오나르도 다빈치 이후 많은 화가가 이것을 "공기 원근법"으로 그려 왔다. 그래서 우리는 차갑고 흐린 색을 "멀다"와, 따뜻하고 선명한 색을 "가깝다"와 연결하는 데 익숙하다. 오른쪽처럼 뒤집으면 먼 언덕이 앞으로 떠 보인다. 다만 이것은 경향일 뿐 규칙이 아니다. 해 질 녘처럼 먼 하늘이 가장 따뜻한 장면도 흔하다(10장).

보색(Complementary colors)은 색상환에서 서로 반대편에 있는 두 색이다. 이텐은 보색을 "섞으면 회색이 되는 짝"으로 정의하고, 나란히 놓으면 서로를 가장 선명하게 만든다고 보았다. 다만 5장에서 본 대로 "반대편"이 어디인지는 색상환마다 다르다. 화가의 전통 색상환(RYB)에서 초록의 보색은 빨강이지만, 사람의 지각에 맞춘 색상환(OKLCH)에서는 자홍에 가깝다. 이 장에서는 이 차이를 기억하되, 보색 대비를 "색상이 크게 떨어진 두 색이 서로를 돋우는 일"로 넓게 쓴다.

보색이 서로를 돋우는 이유 중 하나는 눈의 피로에서 찾을 수 있다. 한 색을 오래 보면 그 색에 반응하는 신호가 지쳐서, 흰 바탕으로 눈을 옮겼을 때 반대 색이 잠깐 떠오른다. 이것을 잔상(Afterimage), 정확히는 음성 잔상이라 한다. 아래에서 직접 겪어 본다.

SIMULATOR

잔상으로 보는 보색

상태—
본 색(OKLCH 색상)—
예상 잔상 색상—
해볼 것: ① "시작"을 누르고 가운데 검은 점만 바라본다. 시간이 끝나면 그림이 연회색 바탕으로 바뀐다. 점을 계속 보고 있으면 같은 모양의 흐릿한 색이 떠오른다. 주홍을 봤다면 청록빛, 노랑을 봤다면 푸른 보랏빛이다. ② 떠오른 색을 기억한 뒤 "모델이 예상한 잔상 색 보기"를 켜고 비교한다. ③ 바라보는 시간을 5초로 줄인다. 잔상이 약하거나 거의 없다. (잔상의 색과 세기는 사람, 화면 밝기, 방의 조명에 따라 다르다. 예상 잔상 색은 OKLab에서 본 색의 반대 방향을 바탕 명도에 얹은 아주 거친 근사다. 눈이 피로하면 쉬었다 한다. 이 시뮬레이터는 흑백 단추를 두지 않았다.)

잔상의 색은 대략 본 색의 보색 쪽에 뜬다. 그래서 주홍 옆에 청록을 두면, 주홍을 보던 눈이 옆으로 갈 때 이미 청록 쪽으로 기울어 있어 청록이 더 진하게 느껴지고, 반대도 마찬가지다. 이텐이 "보색은 서로를 가장 선명하게 만든다"고 한 현상을 눈의 쪽에서 설명하는 한 가지 방식이다. 엄밀히는 잔상(시간 차이)과 아래에서 볼 동시 대비(공간 차이)가 서로 다른 현상이지만, 둘 다 눈이 "반대쪽 색"으로 기운다는 공통점이 있다.

동시 대비와 채도 대비

동시 대비(Simultaneous contrast)는 실제로는 없는 색을 눈이 덧입히는 현상이다. 중간 회색을 선명한 바탕 위에 올리면, 회색이 바탕의 보색 쪽으로 물들어 보인다. 이텐은 이것을 "눈이 보색을 요구한다"고 표현했다. 아래 네 칸의 작은 정사각형은 모두 같은 회색이다.

네 칸의 정사각형은 모두 이 띠와 같은 회색 #8a8a8a
그림 3. 같은 회색, 네 가지 기운. 빨간 바탕 위의 회색은 푸르스름하게, 초록 바탕 위의 회색은 분홍빛으로, 파랑 바탕 위는 누르스름하게, 노랑 바탕 위는 보랏빛으로 기울어 보인다(바탕이 넓고 정사각형이 작을수록 잘 보인다). 밝기도 함께 밀린다. 노랑 바탕의 회색이 가장 어둡게 보인다. 이 현상과 그 반대(동화, 둘레 색으로 물드는 현상)는 9장의 주제다.

동시 대비는 디자이너에게 실무 문제다. 회색 글자, 회색 아이콘, 무채색 사진을 선명한 바탕에 올리면 의도하지 않은 색이 낀다. 반대로 화가는 이것을 이용한다. 그림자를 회색으로 칠해도 둘레가 따뜻한 주황이면 그림자는 푸르게 보인다.

채도 대비(Saturation contrast)는 선명함의 차이다. 이텐은 이것을 "질의 대비"라고 불렀다. 같은 초록이 회색빛 바탕 위에서는 선명하게, 형광에 가까운 초록 바탕 위에서는 탁하게 보인다. 7장에서 "탁한 색으로 선명한 색을 살린다"고 한 요령이 바로 채도 대비를 쓰는 일이다. 일곱 대비 탐색기의 "채도" 칸에서 가운데 칸은 양쪽 모두 같은 색이다. 세기를 올리면 왼쪽(탁한 바탕)의 가운데 칸은 살아나고, 오른쪽(선명한 바탕)의 가운데 칸은 바랜다.

둘레와 비교하는 세포들 눈의 망막과 그 뒤의 시각 경로에는 "가운데"와 "둘레"를 비교하는 구조가 여러 단계에 걸쳐 있다. 가운데에 빛이 오면 흥분하고 둘레에 빛이 오면 억제되는(또는 그 반대인) 세포들이다. 이런 구조는 고른 면보다 경계에, 절대적인 값보다 차이에 크게 반응한다. 그래서 같은 회색이 밝은 바탕 위에서 어둡게 보이고, 색의 가장자리가 유난히 또렷하게 느껴진다. 색에 대해서도 빨강–초록, 노랑–파랑의 반대색 신호가 둘레와 비교된다고 본다. 다만 동시 대비 전체를 이 세포들만으로 설명할 수는 없고, 뇌가 표면과 조명을 해석하는 더 높은 단계도 관여한다는 것이 현재의 이해다. 이 장 뒤쪽의 "눈길 지도"는 이 "가운데–둘레 비교"를 아주 단순하게 흉내 낸 것이다.

면적 대비

같은 두 색도 넓이를 바꾸면 전혀 다른 그림이 된다. 넓은 초록 들판의 작은 빨간 지붕과, 넓은 빨간 벽의 작은 초록 창은 같은 두 색인데 인상이 다르다. 이것이 면적 대비(Contrast of extension)다. 이텐은 『색채론』(Zur Farbenlehre, 1810)을 쓴 독일의 시인이자 색채 이론가 괴테(Johann Wolfgang von Goethe, 1749–1832)의 것으로 소개한 색의 "빛의 값"을 가져와 면적의 균형을 계산했다. 노랑 9, 주황 8, 빨강 6, 초록 6, 파랑 4, 보라 3. 밝고 힘센 색일수록 작은 넓이로 충분하다는 생각이다. 그래서 노랑과 보라가 균형을 이루는 넓이는 빛의 값의 역수, 곧 노랑 1 대 보라 3이 된다.

괴테의 수치는 측정값이 아니다 괴테의 빛의 값은 19세기 초에 눈으로 어림한 제안이고, 이텐은 이것을 20세기 미술 교육에 옮겼다. 오늘날의 휘도 측정과 맞춰 보면 순서(노랑이 가장 밝고 보라가 가장 어둡다)는 대체로 맞지만 비율은 크게 다르다. 아래 시뮬레이터가 이 책의 모델로 계산한 휘도 비를 함께 보여 준다. 무엇보다 "균형"은 정해진 답이 아니라 하나의 선택이다. 일부러 균형을 깨서 긴장을 만드는 그림도 많다. 이 비율은 법칙이 아니라 출발점으로 쓴다.
SIMULATOR

면적 대비: 괴테의 균형과 내 눈의 균형

지금 면적비—
괴테·이텐의 균형—
휘도로 계산한 균형(이 책의 모델)—
해볼 것: ① 노랑–보라에서 면적을 50%에 둔다. 노랑이 화면을 차지하고 보라는 그 뒤로 물러난다. ② 노랑을 25%까지 줄인다(점선 표시). 두 색의 힘이 비슷하게 느껴지는지 본다. 사람마다 답이 다르다. ③ 노랑을 4%까지 줄인다. 균형은 깨지지만 작은 노랑이 보라 들판의 "점 하나"로 강하게 박힌다. 초점을 만들 때는 이렇게 일부러 균형을 깬다. ④ 빨강–초록은 괴테의 수치로도, 이 책의 휘도로도 1:1에 가깝다. 두 기준은 노랑–보라에서 가장 크게 갈린다(25% 대 12%). (휘도 균형은 "면적 × 상대 휘도가 같아지는 넓이"로 단순하게 정의한 비교용 값이다. 괴테의 수치도 휘도 균형도 지각 실험으로 검증된 비율이 아니다.)

마지막 해볼 것에서 본 장면, 아주 작은 노랑이 넓은 보라 위에 박히는 장면이 다음 절의 주제다. 면적의 균형을 일부러 깨면 작은 쪽이 강조점이 된다. 동양화의 여백도 넓은 빈 면과 작은 먹의 대비로 읽을 수 있다. 큰 화면에 작은 낙관 하나가 붉게 찍히는 것도 마찬가지다.

색종이로 일곱 대비 카드 만들기 엽서 크기 도화지 일곱 장과 색종이 몇 장을 준비한다. 카드마다 대비 하나만 보이게 색종이를 오려 붙인다. 예를 들어 명암 카드는 같은 색상의 밝은 조각과 어두운 조각, 색상 카드는 밝기가 비슷한 빨강·노랑·파랑 조각, 면적 카드는 큰 보라 위에 아주 작은 노랑 조각이다. 다 붙였으면 휴대폰 흑백 모드로 일곱 장을 찍어 본다. 명암 카드만 흑백에서도 또렷하고, 색상 카드가 거의 한 가지 회색이 된다면 잘 만든 것이다. 다른 대비가 섞여 들어간 카드는 어떤 대비가 섞였는지 뒷면에 적는다.

초점 만들기

포스터, 그림, 화면에는 대개 "먼저 봐야 할 곳"이 있다. 이것을 초점(Focal point)이라고 한다. 초점은 둘레와 가장 많이 다른 곳에 생긴다. 그러니 초점을 만드는 일은 대비를 한곳에 모으는 일이고, 동시에 다른 곳의 대비를 줄이는 일이다.

시선이 어디로 가는지를 재는 정식 방법은 시선 추적 장치로 사람들의 눈을 실제로 기록하는 것이다. 여기서는 그 대신 아주 거친 모형을 쓴다. 그림을 작은 칸으로 나누고, 각 칸의 색이 그 둘레의 평균색과 얼마나 다른지(OKLab 색 거리, 명도 차이에 조금 더 무게를 둔다)를 재서 클수록 밝게 칠한다. 이렇게 "가운데와 둘레의 차이"로 눈길을 어림하는 생각은 이티·코흐·니버의 시각 주의 모형(Itti, Koch & Niebur, 1998)에서 온 것이지만, 이 장의 모형은 그것을 크게 단순화한 것이다. 이 지도를 이 장에서는 눈길 지도라고 부른다.

아래 포스터는 서윤의 가을 행사 포스터를 단순하게 만든 가상의 시안이다. 강조할 요소(날짜 배지) 하나를 손잡이로 끌어 옮기고, 어떤 대비로 강조할지 고른다. 오른쪽은 그 포스터의 눈길 지도다.

SIMULATOR

초점 만들기: 대비 하나로

배지를 끈다
배지와 바탕의 ΔL*—
배지와 바탕의 ΔE2000—
눈길 후보 수—
초점 집중도—
해볼 것: ① "강조 없음"에서 시작한다. 눈길 지도에서 가장 밝은 곳은 제목이다(제목 두 줄과 아래 책 그림이 약한 후보로 함께 잡힌다). 이 시안의 제목은 이미 명암 대비로 강조되어 있다. ② "색상만"을 고른다. 배지는 바탕과 명도·채도가 같고 색상만 파랑으로 돌렸다. 눈길 지도에서 거의 보이지 않는다. ③ "보색"과 "명도"를 번갈아 본다. 보색 배지는 제목과 나란히 눈길 두 곳을 만든다. 명도로 강조한 크림색 배지는 지도에서 가장 밝은 곳이 되어 제목을 누르고, 눈길 후보가 한 곳으로 줄어든다. ④ 보색에서 배지 크기를 0.22까지 키운다. 배지가 제목과 부딪히기 시작하면서 눈길 후보가 늘고 초점 집중도가 떨어진다. (눈길 지도는 이 장의 거친 모형이다. 각 점의 색과 둘레 평균색의 OKLab 차이만 본다. 실제 시선은 글의 의미, 사람 얼굴, 위치, 보는 사람의 목적에도 끌린다. 지도를 조금 더 흐린 뒤 봉우리를 찾는다. "눈길 후보 수"는 가장 높은 봉우리의 55%를 넘는 봉우리 수, "초점 집중도"는 가장 높은 봉우리가 봉우리 전체의 합에서 차지하는 몫이다. 지도 전체가 약하면 "뚜렷한 곳 없음"으로 적는다.)

세 가지가 보인다. 첫째, 색상만 바꾼 강조는 거의 일하지 않는다. 명도와 채도가 바탕과 같으면 둘레와의 차이가 작다. 둘째, 명도와 보색은 모두 강한 강조 수단이지만 무엇과 경쟁하는지가 다르다. 이 포스터의 제목은 이미 크림색(아주 밝은 색)으로 명암 대비를 쓰고 있다. 배지까지 크림색으로 만들면 둘이 같은 수단으로 다투고, 더 굵은 덩어리인 배지가 이겨 제목이 뒤로 밀린다. 주홍 배지는 밝기로는 제목보다 약하지만 색으로 다른 목소리를 내서, 제목과 배지 두 곳이 역할을 나눈다. 셋째, 크게 만든다고 강해지지 않는다. 강조 요소가 커지면 면적 대비가 약해지고 다른 요소와 부딪혀 눈길이 오히려 흩어진다. 더 키우면 결국 그것이 새 바탕처럼 보이기 시작한다.

대비가 너무 많으면

강조가 효과가 있으니 더 많이 하면 더 좋을까. 시안을 다듬다 보면 흔히 이런 일이 생긴다. 제목이 약해 보여 노랗게 바꾸고, 날짜가 안 보여 파란 띠를 깔고, 허전해서 테두리를 넣고, 심심해서 책 그림을 원색으로 칠한다. 하나하나는 그럴듯한데 다 모아 놓으면 아무것도 먼저 보이지 않는다. 아래에서 강조를 하나씩 더해 본다.

SIMULATOR

강조를 하나씩 더하면

방금 더한 것—
눈길 후보 수—
초점 집중도—
해볼 것: ① 0에서 시작한다. 제목(명암 대비)과 주홍 배지(보색 대비) 두 곳에만 눈길이 모인다. ② 한 칸씩 올리며 "방금 더한 것"과 눈길 지도를 함께 본다. 강조가 셋, 넷으로 늘면 밝은 곳이 화면 곳곳으로 흩어진다. ③ 6까지 올린 뒤 흑백을 눌러 본다. 색은 시끄럽지만 명도 구조는 오히려 흐려졌다. ④ 0과 6을 오가며 "초점 집중도"가 어떻게 변하는지 본다. (눈길 지도는 앞 시뮬레이터와 같은 거친 모형이다. 숫자는 시안끼리 비교하는 데만 쓴다.)

강조를 더할 때마다 "먼저 볼 곳" 후보가 하나씩 늘고, 원래의 초점은 그만큼 몫을 잃는다. 대비는 상대적이라서, 모든 요소가 소리를 지르면 소리를 지르는 것이 평범한 상태가 된다. 그래서 초점을 살리는 가장 강력한 방법은 대개 강조를 더하는 것이 아니라 다른 곳의 대비를 빼는 것이다. 7장의 채도 예산과 같은 생각이다.

강조는 하나, 많아도 둘 편집 디자이너들 사이에는 "한 화면에 주인공은 하나"라는 오래된 습관이 있다. 실무에서는 시안마다 초점 후보를 적어 보는 방법을 쓴다. 시안을 3초만 보여 주고 무엇을 먼저 봤는지 동료에게 묻는다. 답이 사람마다 다르면 초점이 흩어진 것이다. 강조 수단도 정해 둔다. 제목은 크기와 명도, 행사 날짜는 색, 하는 식으로 요소마다 대비 하나씩만 맡기면, 나중에 누가 요소를 더해도 원칙이 무너지지 않는다. 도저히 줄일 수 없는 요소가 많다면, 그중 하나만 남기고 나머지는 같은 색 계열과 같은 밝기로 묶어 "배경 무리"로 만든다.

그림과 전통 속의 대비

화가들은 이 대비들을 이론보다 먼저 손으로 썼다. 빈센트 반 고흐(Vincent van Gogh, 1853–1890)는 파리에 머물던 1887년, 시든 해바라기 두 송이를 파란 바탕 위에 그렸다. 노랑·주황 계열의 꽃과 파란 바탕은 보색 대비이자 한난 대비의 짝이다.

빈센트 반 고흐의 해바라기. 꽃이 진 해바라기 두 송이가 옆으로 누워 있다. 꽃은 누런 노랑과 갈색, 줄기는 밝은 황토색이고, 바탕은 굵은 붓질의 파랑이다.
그림 4. 빈센트 반 고흐, 「해바라기(Sunflowers)」, 1887. 누운 해바라기 두 송이의 노랑·황토·갈색이 파란 바탕과 맞선다. 꽃의 색상각과 바탕의 색상각은 이 책의 모델로 대략 130° 떨어져 있다(OKLCH, 화면 이미지에서 잰 값). 오른쪽 위 "흑백"을 눌러 보면 오른쪽 위 밝은 줄기와 그 둘레의 파란 바탕이 비슷한 회색이 되는 곳이 있다. 이 그림에서 꽃을 바탕과 떼어 놓는 일의 상당 부분은 명도보다 색상과 온도의 대비, 그리고 꽃 가장자리의 어두운 윤곽선이 맡는다.메트로폴리탄 미술관 소장(Rogers Fund, 1949), 캔버스에 유채. 공공 도메인(The Met Open Access, CC0). 소장처 작품 페이지 · 크레딧

이 그림은 "명암 대비가 먼저다"라는 앞의 말과 어긋나 보인다. 그렇지 않다. 고흐는 꽃 전체를 바탕과 비슷한 밝기 언저리에 두면서도, 꽃 가운데의 짙은 갈색과 윤곽선으로 명도의 뼈대를 따로 세웠다. 그리고 넓은 면은 색상과 온도의 대비로 진동하게 했다. 대비마다 맡은 일이 다르다. 화면 이미지와 실제 그림의 색은 다르며, 130년 넘는 시간 동안 물감도 변했을 수 있다는 점은 기억해 둔다.

한국의 시각 문화에도 대비를 쓰는 서로 다른 전통이 있다. 아이 옷소매의 색동은 빨강, 노랑, 파랑, 초록, 분홍 같은 선명한 띠를 나란히 이어 붙인다. 색상 대비를 가장 순수하게 쓰는 방식이다. 띠들의 밝기가 제각각이라 명암 대비도 함께 생기고, 띠의 폭을 비슷하게 두어 어느 한 색도 주인공이 되지 않는다. 초점을 만들지 않는 것 자체가 목적인 배색이다. 반대편에는 수묵화가 있다. 색상 대비와 채도 대비를 거의 버리고 먹의 농담, 곧 명암 대비 하나와 넓은 여백(면적 대비)만으로 화면을 짠다. 색이 많아야 강한 그림이 되는 것은 아니다. 어떤 대비를 쓰고 어떤 대비를 버렸는지가 그림의 성격을 정한다.

포스터 대비 평가표

지금까지의 도구를 한데 모은다. 아래는 가상의 가을 행사 포스터 시안 세 개다. 시안 A는 강조를 아끼지 않았고, 시안 B는 모든 것을 차분하게 눌렀고, 시안 C는 제목과 날짜 배지 둘에만 강조를 맡겼다. 시안을 고른 뒤 제목의 명도, 배지의 색상, 배지의 면적을 바꿔 보며 일곱 대비 점수와 눈길 지도가 어떻게 움직이는지 본다. "장식 끄기"는 테두리·밑줄·띠·해 같은 덧붙인 장식을 모두 지운다.

SIMULATOR

포스터 시안을 일곱 대비로 읽기

"강함"인 대비 수—
제목 대비비(WCAG)—
눈길 후보 수—
초점 집중도—
해볼 것: ① 시안 A, B, C를 차례로 누른다. A는 일곱 대비 대부분이 "강함"인데 눈길 후보가 여러 곳으로 흩어진다. B는 대비가 모두 약해 눈길 지도 전체가 어둡다. 초점이 없다. C도 "강함"인 대비가 다섯 개로 A(여섯 개)와 거의 같지만, 눈길은 제목과 배지 두 곳에 모인다. 대비의 개수보다 대비가 놓인 자리가 초점을 정한다. ② 시안 A에서 "장식 끄기"를 켠다. 장식만 걷어도 초점이 얼마나 돌아오는지 본다. ③ 시안 C에서 제목 명도를 0.54까지 내린다. 제목이 바탕(L 0.54)과 같은 명도가 되면 대비비가 1 근처로 떨어지고 제목이 눈길 지도에서 사라진다. ④ 시안 C에서 배지 색상을 165° 근처로 돌린다. 바탕과 같은 색상이 되면 보색 대비 점수가 떨어진다. (일곱 대비 점수는 이 장이 정한 대략의 규칙으로 계산한 0~1 값이다. 요소마다 넓이를 어림해 색상 묶음 수, 최대 명도 차이, 따뜻함의 차이, RYB 색상환에서 반대편에 가까운 선명한 짝, 회색 요소와 바탕 채도, 채도 차이, 강조 요소의 넓이를 본다. 0.6 이상을 "강함"으로 셌다. 눈길 지도는 앞의 거친 모형이다.)

평가표가 말해 주는 것은 "몇 점짜리 포스터"가 아니다. 시안 A의 문제는 대비가 강한 것이 아니라, 강한 대비가 여러 곳에 흩어져 있다는 것이다. 시안 B의 문제는 반대로 대비가 어디에도 없다는 것이다. 차분함이 목적이라면 B도 좋은 선택일 수 있다. 하지만 게시판에서 지나가는 사람을 멈춰 세우는 것이 목적이라면, 강한 대비 몇 개를 정해진 자리에 모은 C 쪽이 맞다. 같은 도구도 무엇을 전하려는가에 따라 답이 달라진다.

서윤의 작업 노트

CASE 서윤작업 노트 · 8장

강조를 더할수록 아무것도 안 보였다

7장에서 서윤은 포스터 바탕을 탁한 초록 #567666으로 누르고, 크림색 제목 #ffe2d7 아래에 붉은 잎 하나와 날짜 띠만 #d24f39로 남겼다. 그런데 주인이 시안을 보더니 "가을 행사니까 좀 더 화려하면 좋겠다"고 했다. 10월 둘째 주, 서윤은 시안 세 개를 서점 계산대 옆 게시판에 나란히 붙였다. 시안 A는 주인의 말대로 노란 잎, 파란 날짜 띠, 자홍 테두리, 원색 책등, 큰 주황 해를 더했다. 시안 B는 반대로 제목까지 탁한 초록 #8c9e8f로 눌러 모든 것을 조용하게 했다. 시안 C는 제목은 그대로 두고, 붉은 잎은 탁한 초록으로 눌러 배경 무리에 넣고, 날짜만 #d24f39의 작은 배지로 남겼다.

주인은 A가 "제일 화려하다"고 했지만, 3초만 보여 주고 무슨 행사냐고 묻자 대답을 못 했다. 서윤은 세 시안을 이 장의 일곱 대비로 하나씩 적었다. 이 책의 모델로 계산하면 제목의 WCAG 대비비는 A와 C가 약 4.1, B가 1.77이다. 이 장의 평가표로 보면 A는 일곱 대비 중 여섯이 "강함"이었고 눈길 후보가 다섯 곳으로 흩어졌다. B는 강한 대비가 하나도 없어 지도 전체가 어두웠다("뚜렷한 곳 없음"). C는 "강함"이 다섯으로 A와 거의 같았는데도, 그 대비들이 제목과 배지 두 자리에만 몰려 있어 눈길 후보가 두 곳으로 모였다. 7장에서 남긴 질문("강조가 둘이면 초점이 흩어지지 않을까")에 대한 서윤의 답은 이랬다. 강조가 둘이어도 서로 다른 대비로 역할을 나누면 흩어지지 않는다. 흩어지게 만든 것은 셋째, 넷째 강조였다.

도경은 노트북 화면의 눈길 지도를 신기해하며 한참 들여다보더니, 게시판 앞에서 실눈을 뜨고 말했다. "강조는 소리 지르기랑 같아. 다 같이 소리치면 아무도 안 들려. 누구한테 무슨 소리를 맡길지 정해." 서윤은 도경에게 눈길 지도 보는 법을 알려 주었고, 도경의 실눈 뜨기를 시안 검토의 첫 단계로 적었다. 두 사람이 따져 보니 배지의 #d24f39는 바탕과 명도가 거의 같아(ΔL* 4.5, 대비비 1.18) 흑백에서는 사라졌다. 그래서 배지 안의 날짜 글자는 제목과 같은 크림색으로 써서 명도로 읽히게 했다. 색상은 OKLCH로는 바탕 초록과 약 131° 떨어져 정확한 반대편이 아니지만, 이 책의 RYB 색상환으로는 약 179° 떨어진 화가의 보색이었다.

이 장에서 정한 것포스터의 초점은 대비 두 개로만 만든다. 제목은 명도 대비(탁한 초록 #567666 위 크림 #ffe2d7, 대비비 약 4.1), 날짜 배지는 보색 대비(#d24f39, 포스터 넓이의 약 2~3%, 날짜 글자는 크림색). 붉은 잎과 부제, 책 그림은 바탕과 같은 초록 계열의 탁한 색과 어두운 색으로 묶는다. 7장의 채도 예산 안에서 선명한 색은 배지 하나만 남긴다(서윤의 선택). 시안 C를 바탕으로 다듬는다.
아직 남은 문제포스터 안에서는 정리됐지만, 같은 로고 초록이 크라프트지 간판, 흰 웹 배경, 검은 에코백 위에 놓이면 서로 다른 색처럼 보인다. 로고가 놓일 자리마다 흔들린다.
다음 단계9장: 알베르스의 실험으로 로고 초록이 바탕마다 얼마나 달라 보이는지 확인한다.

핵심 정리

  1. 대비는 나란히 놓인 색이 서로의 차이를 드러내는 일이다. 이텐은 이를 색상·명암·한난·보색·동시·채도·면적의 일곱 가지로 나누었다. 실제 색 한 쌍은 여러 대비를 동시에 만든다.
  2. 명암 대비가 형태와 글자를 읽히게 하는 뼈대다. 명도가 같은 두 색은 색상이 아무리 달라도 경계가 떨리고 흑백에서 사라진다(등휘도). 색차 ΔE는 "얼마나 다른가", WCAG 대비비는 "얼마나 읽히는가"를 잰다.
  3. 따뜻한 색과 차가운 색의 구분은 연상에 가깝지만 공간감을 만든다. 보색은 색상환의 반대편 색이며, 어느 색상환을 쓰느냐에 따라 위치가 다르다. 보색 잔상과 동시 대비는 눈이 반대쪽 색으로 기우는 현상이다.
  4. 면적 대비에서 괴테·이텐의 비율(노랑 1 : 보라 3 등)은 측정값이 아니라 역사적 제안이다. 균형을 일부러 깨면 작은 쪽이 강조점이 된다.
  5. 초점은 대비를 한곳에 모으고 다른 곳의 대비를 줄여서 만든다. 색상만 바꾼 강조는 약하고, 강조 수단끼리 같은 대비를 쓰면 서로 경쟁한다.
  6. 강조를 많이 더할수록 초점은 흩어진다. 요소마다 대비 하나씩만 맡기고, 초점을 살리고 싶으면 더하기보다 빼기를 먼저 시도한다.

확인 퀴즈

1. 초록 바탕 위의 빨간 제목이 색차 ΔE로는 아주 큰데, 흑백으로 바꾸자 제목이 거의 사라졌다. 가장 알맞은 진단과 처방은?

색차는 크지만 명도가 같으면 대비비가 1에 가깝고, 흑백에서 두 색이 같은 회색이 된다. 글자를 읽히게 하는 것은 주로 명도 차이이므로 명도를 벌려야 한다. 색상 차이를 줄이면 오히려 더 안 보이고, 흑백 변환은 같은 명도의 회색을 보여 줄 뿐 문제를 만들지 않는다.

2. 이텐이 괴테의 "빛의 값"(노랑 9, 보라 3)을 빌려 제안한 노랑과 보라의 균형 면적비와, 그 비율의 성격으로 옳은 것은?

균형 넓이는 빛의 값의 역수라서 밝은 노랑은 작게(1), 어두운 보라는 넓게(3) 둔다. 이 수치는 19세기 초의 어림값이고 현대 휘도 측정과 비율이 크게 다르다. 균형 자체도 하나의 선택일 뿐이며, 일부러 깨서 강조를 만들기도 한다.

3. 포스터 시안에 노란 제목, 파란 날짜 띠, 자홍 테두리, 큰 주홍 배지, 원색 책 그림을 모두 넣었더니 무엇이 먼저 보이는지 알 수 없게 되었다. 가장 먼저 해 볼 일은?

대비는 상대적이라 모든 요소가 강하면 강한 것이 평범해지고 초점이 흩어진다. 강조를 더하거나 모든 것을 키우면 문제가 커진다. 초점을 살리는 가장 확실한 방법은 다른 곳의 대비를 빼는 것이다.

4. 같은 중간 회색 정사각형이 빨간 바탕 위에서는 푸르스름하게, 초록 바탕 위에서는 분홍빛으로 보인다. 이텐의 분류로 이 현상의 이름은?

회색 자체는 그대로인데 눈이 바탕의 보색 쪽 기운을 덧입히는 현상이 동시 대비다. 면적 대비는 넓이의 비율, 채도 대비는 선명함의 차이, 한난 대비는 따뜻함·차가움의 차이를 말한다. 동시 대비는 9장에서 더 자세히 다룬다.