2020. 11. 10. 07:50ㆍUI 가벼운 이야기
컴퓨터는 빨간색-녹색-파란색(RGB) 세 가지 종류의 빛을 서로 다른 강도로 섞어서 색상을 만들어냅니다. 하지만 우리가 초등학교 시절부터 익숙하게 써 왔던 방식은 빨간색-노란색-파란색(RYB) 염료를 서로 다른 비율로 섞어서 만들어내는 색상 조합들입니다. 이 글에서는 컴퓨터 화면에서 정겨운 빨간색-노란색-파란색 색상환을 흉내 내는 방법을 설명합니다.
ob:gunggmee/ryb-color-wheel/randomRects
요하네스 이텐의 색상환
요하네스 이텐(1888-1967)은 스위스의 인상파 화가이자 바우하우스의 교수였습니다. 엄격한 채식주의자로도 유명해요. 이텐의 색상환(Farbkreis; 색상farbe 원kreis)은 여러 색채학 교과서를 비롯하여 다양한 분야에서 폭넓게 인용되고 있습니다. 이텐의 저서 에 따르면 이텐은 자신이 제안한 12색이 "음악가들이 12음계를 대하듯" 정밀하게 다뤄지기를 기대했습니다. 그는 또한 "따뜻한 계열의 색"과 "차가운 계열의 색"이라는 구분을 도입한 인물이기도 합니다.
컴퓨터 화면이 표현할 수 있는 색의 범위와 종이 위 염료가 표현할 수 있는 색의 범위가 다르기 때문에, 엄밀하게 말하자면 위 이미지는 이텐의 색상환을 컴퓨터 화면으로 유사하게 표현한 근사치에 불과합니다. 그래도 컴퓨터 모니터의 한계를 벗어날 수는 없으니, 이 모델을 기반으로 시작해보면 좋겠습니다.
우선 위 이미지에서 각 색상을 순서대로 추출해서 12개의 색상 칩을 만들었습니다. 다음 이미지는 RGB 색상칩과 이텐 색상칩을 비교한 결과입니다. RGB 색상칩(위)과 이텐 색상환에서 추출한 색상칩(아래) 사이의 확연한 차이가 드러납니다. (색상칩을 클릭하면 RGB 값이 클립보드에 복사됩니다)
ob:gunggmee/ryb-color-wheel/rgbChips
ob:gunggmee/ryb-color-wheel/ittenChips
색 인상엔 주관이 많이 담기므로 뭐가 더 좋다고 단정하기는 어렵지만, 이텐 색상칩에는 RGB 색상칩에 보이는 소위 "쨍한" 색들이 없고, 물감으로 표현하던 익숙한 색과 가까운 칩들이 더 많아서 정겨운 느낌이 듭니다.
색상을 추출했으니 각각 3개, 6개, 12개 칩을 뽑아서 둥글게 배치하면 초등학교 미술 시간에 봤던 색상환을 만들어낼 수 있습니다. 왼쪽이 RGB 색상환, 오른쪽이 이텐 RYB 색상환입니다. 두 색상환 모두 빨간색을 12시 방향으로 하여 시계 방향으로 돌게 끔 그렸습니다.
가장 안에 있는 원이 1차색, 그 다음이 2차색, 가장 바깥 원이 3차색을 나타냅니다.
ob:gunggmee/ryb-color-wheel/wheelComparision
12색 사이의 색상 채워넣기
12개 색 뿐 아니라 더 많은 색을 얻어내려면 어떻게 해야할까요?
어떤 값들 사이에 빈 값을 채워 넣는 걸 보간 또는 내삽interpolation이라고 부릅니다. 예를 들어 정수로 이루어진 직선 상에 놓인 수열 [1, 2, 3, ?, 5]에서 3과 5 사이에 빠진 값을 선형 보간linear interpolation하면 4를 얻어낼 수 있습니다. 3과 4 사이에는 3.5가 있고요.
이와 비슷하게, 12색 사이사이의 비어 있는 색상도 '색으로 이루어진 공간'을 잘 정의하면 채워 넣을 수 있습니다.
이텐 색상환과 유사한 RYB 색상 모델을 알고리즘으로 구현한 사례가 있습니다. 이 알고리즘이 얼마나 잘 작동하는지 확인하기 위해 이텐의 12색(위)과 알고리즘으로 생성한 12색(아래)을 비교해봤습니다.
ob:gunggmee/ryb-color-wheel/ittenVsAlgorithm1
제법 눈에 띄는 차이가 있습니다. 위 알고리즘에서는 3차원 색공간(육면체)을 정의하기 위해 여덟개의 꼭지점 색상을 지정합니다. 흰색, 검정색, 1차색 3개, 2차색 3개(1 + 1 + 3 + 3 = 8)를 이용하는데, 여기에서 사용하는 1차색과 2차색이 이텐의 색상환과 상당히 다르기 때문에 차이가 발생하는 것으로 보입니다.
알고리즘은 그대로 구현하되 색공간 정의에 사용하는 1차색과 2차색만 이텐 색체와 일치하도록 변형해보면 아래와 같이 좀 더 나은 결과를 얻어낼 수 있습니다.
ob:gunggmee/ryb-color-wheel/ittenVsAlgorithm2
여전히 약간의 차이가 있지만 많이 개선되었습니다. 다음은 이렇게 만들어진 색공간입니다.
ob:gunggmee/ryb-color-wheel/ittenColorSpace
이제 이 색공간을 이용하여 12색 사이를 선형 보간하면 그 사이를 부드럽게 채울 수 있게 됐습니다. "부드럽게"라는 말에는 오해의 소지가 있습니다. 컴퓨터 화면의 모든 표현은 픽셀 단위이기 때문에 "부드럽게"란 엄밀하게 말하면 연속적이지 않습니다. 다만 충분히 작은 단계로 나누었을 뿐입니다. 아래 그림은 RGB(위) 및 이텐 RYB(아래)를 각각 512단계로 잘게 나누어 표현한 결과입니다.
ob:gunggmee/ryb-color-wheel/rgbRamp
ob:gunggmee/ryb-color-wheel/ittenRamp
가지고 놀기
RYB 팔레트가 만들어졌으니 이제 가지고 놀 일만 남았습니다. 예쁘지 않나요? :)
ob:gunggmee/ryb-color-wheel/ittenSpiral
다음은 어울리는 색상 집합을 골라주는 간단한 인터페이스입니다.
ob:gunggmee/ryb-color-wheel/viewof slices
ob:gunggmee/ryb-color-wheel/viewof schemeName
ob:gunggmee/ryb-color-wheel/colorHarmonies
다음은 위에서 선택한 색상과 어울리는 색들입니다. 보색complementary, 인접색analogous, 3색triad, 4색tetrad 순서입니다. 색상칩을 선택하면 RGB 값이 클립보드에 복사됩니다.
ob:gunggmee/ryb-color-wheel/hamoniousChips
소스코드
- 전체 코드: Observable 노트북
- Observable 노트북을 웹사이트에 연결하기: 깃헙 pxdinc/pxdstory-skin 중 observable.js
- 색상 보간: d3js
- RYB 색공간 알고리즘: bahamas10/ryb
- 컬러 램프: Mike Bostock의 구현
- 글 서두의 삐뚤빼뚤한 사각형 표현: rough-stuff/rough