색상에 대한 글
RGB와 CMYK, 가산혼합과 감산혼합
일반적으로 색은 빛의 3원색인 RGB, 색의 3원색인 CMYK로 구분하고는 합니다. RGB는 모니터와 같은 디스플레이를 통해 표현되는 디지털 작업에서, CMYK는 지면으로 표현되는 인쇄 작업에서 사용됩니다.
CMYK는 'C'yan, 'M'agenta, 'Y'ellow, Blac'k' 의 네 가지 색상으로 구성되어 있는데, 왜 색의 '3'원색이라고 불리는지는 아래 단락에서 감산혼합에 대하여 다룰 때 더 이야기하도록 하겠습니다.
RGB는 더할수록 밝아져 가산혼합되고, CMYK는 더할수록 어두워져 감산혼합된다고 이야기합니다. 가산혼합은 색이 합쳐질수록 밝아지는 것을, 감산혼합은 색이 합쳐질수록 어두워지는 것을 뜻합니다. 이러한 특성에 따라, 3색이 모두 겹쳐진 중앙 부분의 색은 RGB의 경우 밝아져 하얀색으로, CMYK의 경우에는 어두워져 검정색으로 나타나는 것입니다.
RGB 체계에 대한 더 자세한 설명은 칸 아카데미의 Pixar in a Box 강의를 참고하시면 좋을 것 같습니다.
RGB 색채 모델 (동영상) | 색채란? | Khan Academy
수학, 예술, 컴퓨터 프로그래밍, 경제, 물리학, 화학, 생물학, 의학, 금융, 역사 등을 무료로 학습해 보세요. 칸아카데미는 어디에서나 누구에게나 세계 최고의 무료 교육을 제공하는 미션을 가진
ko.khanacademy.org
포토샵의 블렌딩 모드를 통해 가산혼합과 감산혼합이 어떻게 이루어지는지 사용해볼 수 있습니다.
가산혼합(RGB)의 경우 배경색을 검정색으로 설정한 뒤, 위에 R, G, B 색상의 원들을 만들고, 해당 원들의 블렌딩 모드를 선형 닷지 (Linear Dodge) 로 설정한 뒤 세 원들을 서로 겹쳐보면 가산혼합이 이루어지는 것을 볼 수 있습니다.
감산혼합(CMYK)의 경우 배경색을 하얀색으로 설정한 뒤, 원들을 C, M, Y 색상으로 만들고, 블렌딩 모드를 곱하기 (Multiply) 로 변경하고 겹쳐보면 감산혼합이 적용되는 것을 볼 수 있습니다. (다만 포토샵에서 만든 감산혼합은, 실제 지면에 도료를 겹쳐 표현되는 감산혼합과 완벽히 같지는 않습니다. 이러한 느낌이구나 정도로 받아들여주시면 되겠습니다.)
CMYK는 네 가지인데, 왜 '3' 원색이라고 하는지에 대해서는, 수채화에서 모든 색을 섞으면 검정에 가까운 매우 탁한 색이 나오지만 완벽한 검정색은 아니듯이, 인쇄시에도 CMY 도료를 1:1:1로 혼합해도 완벽한 검정색이 나오지 않기 때문에 Key라고 부르는 검정색 도료를 따로 사용하기 때문에 'K'를 별도로 붙였다고 알고 있습니다.
게임 작업은 포스터 등을 출력할 때(?)말고는 대부분 디지털로 이루어지기 때문에 CMYK 색상은 사용할 일이 거의 없습니다. 다음 단락에서는 RGB를 바탕으로 디지털 상의 색에 대해서 더 이야기해보겠습니다.
RGB 값을 수로 나타내기
디스플레이 상에서는 각 픽셀에 발광소자가 있고, 이 소자는 RGB 세가지 색상으로 빛을 냅니다. 디스플레이에서 어떠한 색을 나타내기 위해서는 픽셀에 그 색의 R, G, B 수치를 전달해줘야 합니다.
하늘색 색상을 픽셀에 출력해야 한다면, 해당 픽셀의 소자에게 'R을 0, G를 186, B를 255 만큼 켜줘' 라고 이야기하는 것입니다. 눈의 초점을 흐리게 하고 우측의 출력 결과를 보면, 출력하라고 명령한 하늘색 색상처럼 보이지 않으시나요?
이렇듯 디스플레이에서 색을 나타내기 위해선 R,G,B 각 채널의 수치를 지정해줘야 하는데, 이 수치를 표시하는 방식은 크게 0~255로 표기하는 정수형, 0~1 사이의 소수점으로 표기하는 실수형, 포토샵과 여러가지 프로그램에서 흔히 볼 수 있는 Hexcode 라고 불리는 16진수 표기법으로 나뉩니다.
이러한 색상값들을 컴퓨터에선 0,1만 표현 가능한 비트로 저장하게 되는데, 한 채널당 8비트(2^8, 256)를 사용하는 것이 일반적이기 때문에 한 채널 당 256개의 값을 가지게 됩니다. 따라서 정수형으로 색상을 표시할 때 0~255 사이의 정수 값으로 표기하게 되는 것입니다.
알파채널을 가진 이미지(PNG)를 사용할 때엔, RGB 세가지 채널(24비트)에 알파 채널 하나(8비트)를 추가로 더해 RGBA 32비트로 사용하게 됩니다. 유니티에선 Color32 라는 이름의 자료형이 있는데, 이 또한 채널당 8비트, RGBA 4채널을 사용하기 때문에 '32'가 붙었다고 생각하시면 됩니다.
(유니티에는 Color32가 아닌 Color 자료형도 존재하는데, Color 자료형은 각 채널당 실수 자료형 float(32비트)를 사용하기 때문에, 각 채널당 8비트를 사용하는 Color32 보다 메모리를 더 차지합니다. - 관련 유니티 포럼 글)
하얀색, 빨간색, 보라색의 세가지 색상의 값을 정수형, 실수형, 16진수 형식으로 표기해 본다면 다음과 같이 나타낼 수 있습니다.
Hexcode (16진수) 값 읽기
16진수는 한 자리당 0~15의 값을 가지는 수로, 0~9 까지는 아라비아 숫자로, 10~15는 알파벳 A~F 으로 표기합니다. Hexcode는 RGB를 16진수로 표기한 방식으로, 한 채널당 16진수 두 자리 (16 × 16 = 256) 를 사용해 총 6자리로 RGB 값을 표현합니다. 첫 두 자리는 R채널 값을, 중간의 두 자리는 G 값을, 마지막 두 자리는 B 값을 나타냅니다.
따라서 빨간색(위의 이미지 참고) 색상의 정수값은 R 255, G 0, B 0 이기 때문에, Hexcode로는 'FF' '00' '00' 으로 표기되게 됩니다.
색상과 비트 관련해 더 자세한 내용이 궁금하시다면 아래 블로그 글을 추천드립니다. 😊
01. 컴퓨터와 색상 (bit)
컴퓨터의 모든 데이터는 0과 1로 이루어져 있습니다. 컴퓨터가 받아들이는 모든 정보는 0과 1로 변환되어 메모리에 저장되죠. 예를 들어 알파벳 'A'는 아스키코드에 따라 '1000001'로 변환되어 저장
celestialbody.tistory.com
'Graphics' 카테고리의 다른 글
| 색상 간의 혼합 - 기초 블렌딩 연산 (0) | 2023.10.09 |
|---|---|
| SDF (Signed Distance Field) (0) | 2023.09.17 |
| 색체계와 색의 구성요소 (0) | 2023.07.15 |
| 왜곡 셰이더 만들기 (0) | 2023.05.15 |
| 타일별로 크기 조절이 되는 셰이더 만들기 (0) | 2023.03.30 |
