팬톤보다 270년 먼저 나온 ‘색상 견본집’
디자이너와 일하다 보면 “이 파란색에서 살짝만 더 연하게 해주세요” 같은 요청을 정말 자주 받잖아요. 색을 말로 정확하게 전달하는 건 지금도 어려운 일이에요. 그런데 1692년에 이 문제에 혼자서 정면으로 도전한 사람이 있었어요.
주인공은 네덜란드의 A. 부헤르트(A. Boogert) 라는 사람이에요. 이 사람이 직접 글을 쓰고 물감까지 칠해서 만든 색채 안내서가 있는데요, 보통 『Klaer Lightende Spiegel der Verfkonst』라는 제목으로 불려요. 대충 ‘그림 그리는 기술을 환하게 비춰주는 거울’이라는 뜻이에요. 분량은 800~900페이지 정도인데 자료마다 조금씩 다르게 소개돼요. 지금은 전체를 고해상도로 스캔한 이미지를 온라인에서 누구나 볼 수 있어요.
재밌는 건 이 책이 인쇄본이 아니라 세상에 딱 한 권뿐인 필사본이라는 점이에요. 저자 이름도 이니셜 ‘A.’만 남아 있어서 어떤 사람이었는지는 거의 알려지지 않았어요. 지금은 프랑스 엑상프로방스의 메잔 도서관(Bibliothèque Méjanes)에 보관돼 있고, 중세 필사본 연구자 에릭 크바켈(Erik Kwakkel)이 소개하면서 유명해졌어요. 우리가 아는 팬톤 매칭 시스템(PMS)이 1963년에 나왔으니까, 이 책은 그보다 270년쯤 앞서서 “색을 체계적으로 기록하고 공유하자”는 아이디어를 실천한 셈이에요.
핵심은 손으로 만든 ‘톤 스케일’
이 책은 예쁜 색 견본만 모아둔 책이 아니에요. 저자는 먼저 안료마다 수채 물감을 만드는 법을 설명해요. 그다음 물을 한 부, 두 부, 세 부씩 더 섞을 때 색이 어떻게 달라지는지를 단계별로 칠해서 보여줘요.
이게 뭐냐면, 기본색(base color) 하나에서 시작해서 밝기를 일정한 단계로 바꿔가며 늘어놓은 ‘톤 스케일’ 이에요. 진한 갈색에서 시작해서 물을 섞을수록 점점 옅은 베이지가 되는 모습을 한 줄로 쭉 보여주는 식이에요. 화가가 “이 색을 이만큼 연하게 쓰려면 물을 얼마나 섞어야 하지?” 하고 궁금할 때 바로 찾아볼 수 있는 참고서였던 거죠.
화가들을 가르치려고 쓴 책으로 알려져 있지만, 아이러니하게도 한 권뿐인 필사본이라 그 시절에는 읽은 사람이 거의 없었을 거예요. 300년이 지나서야 인터넷 덕분에 비로소 ‘배포’된 셈이에요.
개발자 눈으로 보면: 이거 그냥 디자인 시스템이잖아요?
여기서부터가 개발자한테 재밌는 부분이에요. Tailwind CSS를 써보셨다면 blue-50부터 blue-950까지 이어지는 색상 단계가 익숙하실 거예요. Material Design의 톤 팔레트도 같은 방식이고요. 기본색 하나에서 밝기만 단계적으로 바꾼 스케일을 만들고, 번호를 붙여서 팀 전체가 같은 이름으로 부르게 하는 거예요. 부헤르트가 1692년에 한 작업이 바로 이거예요.
“물을 섞어서 연하게 만든다”는 방식은 요즘 CSS에도 그대로 있어요. color-mix() 함수인데요, 기본색에 흰색을 몇 퍼센트 섞을지 지정하는 함수예요.
:root {
--brand: oklch(55% 0.15 40);
--brand-light-1: color-mix(in oklch, var(--brand) 75%, white);
--brand-light-2: color-mix(in oklch, var(--brand) 50%, white);
--brand-light-3: color-mix(in oklch, var(--brand) 25%, white);
}
물 한 부, 두 부, 세 부가 75%, 50%, 25%로 바뀌었을 뿐이에요.
여기서 중요한 게 하나 있어요. 어떤 색 공간에서 섞느냐예요. 흔히 쓰는 HSL은 숫자로 정한 밝기와 사람 눈에 보이는 밝기가 잘 맞지 않아요. 똑같이 밝기를 50%로 줘도 노란색은 아주 밝아 보이고 파란색은 어둡게 보이거든요. 그래서 색마다 스케일 간격이 들쭉날쭉해져요. 이 문제를 풀려고 나온 게 OKLCH 같은 ‘지각적으로 균일한’ 색 공간이에요. 쉽게 말하면 밝기 숫자를 10 올렸을 때 눈으로 봐도 그만큼 밝아지도록 만든 좌표계예요. 지금은 주요 브라우저가 모두 지원해요.
부헤르트도 아마 같은 문제로 고민했을 거예요. 물을 같은 양만큼 섞어도 안료마다 밝아지는 정도가 다르니까, 하나하나 눈으로 확인하면서 칠할 수밖에 없었겠죠. 우리는 그 일을 색 공간 수학에 맡기고 있는 거고요.
업계 맥락: 닫힌 표준에서 열린 데이터로
팬톤은 지금도 인쇄와 제조 업계에서 사실상 표준으로 쓰이지만, 철저히 라이선스로 돈을 버는 사업이에요. 2022년에는 어도비 제품에서 팬톤 색상 라이브러리를 무료로 못 쓰게 돼서 따로 구독을 해야 했고, 디자이너들 사이에서 원성이 꽤 컸어요.
웹은 반대 방향으로 가고 있어요. CSS Color 명세는 누구나 쓸 수 있는 열린 표준이에요. W3C 커뮤니티 그룹에서는 디자인 토큰 형식도 표준으로 정리하고 있는데요, 디자인 토큰은 색, 간격, 폰트 같은 디자인 값을 코드와 공유하려고 만든 데이터 형식이에요. 피그마에서 정한 색을 그대로 코드로 가져오는 흐름이죠. 300년 전에는 한 권뿐이던 색 견본집이 이제 누구나 볼 수 있게 공개된 것도 같은 흐름이라고 볼 수 있어요.
한국 개발자에게 주는 시사점
- 브랜드 컬러 스케일을 직접 만든다면 OKLCH로 시작해보세요. HSL로 만든 스케일보다 단계 사이 간격이 훨씬 고르게 나오고, 다크 모드 색을 뽑을 때도 편해요.
- 색 이름은 ‘값’이 아니라 ‘역할’로 붙이세요.
#3B82F6대신primary-500이나button-bg같은 이름을 쓰면, 나중에 브랜드 색이 바뀌어도 한 곳만 고치면 돼요. - 명암 대비는 꼭 확인하세요. 연한 색 위에 흰 글씨를 올리면 웹 접근성 기준(WCAG 4.5:1)을 못 넘기는 경우가 많아요. 공공 프로젝트라면 웹 접근성 인증 때문에 더 중요하고요.
마무리
색을 ‘체계’로 다루려는 고민은 1692년이나 지금이나 같고, 달라진 건 도구뿐이에요.
여러분 팀은 컬러 토큰을 어떻게 관리하세요? 아직 HEX 값을 그대로 쓰시나요, 아니면 OKLCH나 디자인 토큰으로 옮겨가셨나요? 디자이너와 색 때문에 생긴 웃픈 일이 있었다면 같이 이야기해봐요!
🔗 출처: Hacker News