컴퓨터 그래픽스
CG라는 말은 이제 일상 대화에서도 쓰일 정도로 익숙한 용어이다. 컴퓨터 그래픽스(Computer Graphics)의 줄임말인 이 용어는 3D로 모델링 된 개체를 렌더링하여 이미지 혹은 영상을 만들어내는 기술을 가리킨다. 하지만 이 용어는 사실 (우리에게 익숙한 또 다른 용어인)픽셀에 색을 입혀 화면에 찍어, 그림을 만드는 기술을 가리킨 데서 유래했다.
RGB 색 모델
RGB는 빨강(R), 초록(G), 파랑(B)의 빛을 섞어서 색을 만들어내는 색 표현 방법으로 컴퓨터 모니터에서 일반적으로 색을 표현하는 방법이다. 각각의 색을 (i(r),j(g),k(b))의 좌표로 표현하며, 각 색을 몇 퍼센트의 비율만큼 반영할 것이냐라는 방법으로 저장한다. 이제 슬슬 감각적으로 이해할만 하지만, 각 색을 하나의 바이트로 표현하며, 해당 바이트를 16진수 두 개로 표현하는 것이 일반적이다.
아무 빛도 없으면 검은색(0,0,0)이고, 모든 색을 전부 최대로 출력하면 흰 색(1,1,1)이다. 빛을 혼합하여 표현하는 경우 색을 더 많이 섞을 수록 밝은 색이 나오기 때문에, 가산 색 시스템이라고 한다. 참고로 감산 색 시스템은 물감(혹은 잉크)으로 색을 표현하는 방법으로 사이언(청록), 마젠타(자홍), 옐로우(노랑)을 섞어 표현하며 물감을 많이 쓸 수록 어두운 색을 띈다.
검은 색을 표현하는 방법 : 세 가지 색을 전부 출력하지 않도록 표현
- 빨강 0% 반영 => 00000000(2) => 0x00
초록 0% 반영 => 00000000(2) => 0x00
파랑 0% 반영 => 00000000(2) => 0x00- (r,g,b) => (00, 00, 00) => (0, 0, 0)
하얀 색을 표현하는 방법 : 세 가지 색을 전부 최대로 출력하도록 표현- 빨강 100% 반영 => 11111111(2) => 0xFF
- 초록 100% 반영 => 11111111(2) => 0xFF
- 파랑 100% 반영 => 11111111(2) => 0xFF
- (r,g,b) => (FF, FF, FF) => (F, F, F)
투명도
RGB는 각 색을 1바이트로 표현하므로, 3바이트로 색을 표현한다. 하지만, 컴퓨터들이 24비트 단위로 해석과 연산을 하지 않고 32비트 단위로 정보를 처리한다. 때문에 8비트를 비워둔 채로 사용했다. 이 8비트를 활용하기 위해 도입된 정보가 투명도이다. 투명도는 CG로 표현한 두 가지 이상의 개체를 혼합할 때 활용하던 개념으로, 배경이미지 위의 물체가 가진 배경색이 투명한 경우 두 이미지를 합성하여 사용하기 편리한 점에서 착안한 데이터이다. 투명도는 0인 경우 모든 색의 출력을 차단하고, 1인 경우 입력된 RGB값을 온전히 표현하는 방식으로 표현된다.
ex) rgba(0.1, 0.1, 0.1, 0.9) =>
빨강은 0.1x0.9만큼, 초록은 0.1x0.9만큼, 파랑은 0.1x0.9만큼 출력해라.
색 인코딩
웹 상에서는 # + (16진수의 쌍)(16진수의 쌍)(16진수의 쌍)으로 색을 표현한다.
마무리
오늘부터는 CSS할 때, 색을 섞어서 만들어 봅시다.
