CS & SW & IT 용어

[색을 표현하는 방법] feat. 컴퓨터 구조와 프로그래밍

Haksae 2022. 1. 22. 02:11

👍🏻 색을 표현하는 방법

1) 색을 표현하는 방법

  • 컴퓨터 그래픽스는 전자 모눈종이에 색을 표현하는 점을 찍어서 그림을 만든다.
  • 모눈의 격자에 찍는 점을 그림 원소(picture element)라고 부르고, 줄여서 픽셀(pixel)이라 부른다.
  • 모니터는 빨,녹,파란색 광선을 섞어서 색을 만들어내는데, 이런 색 표현법을 RGB색 모델이라 부른다.
  • 아래를 컬러큐브 라고 하는데, 각 축은 주 색을 표현하며, 0이면 색의 빛을 끈다는 의미, 1이면 최대한 밝게 켠다는 뜻
  • 가산(additive) 색 시스템 : 빛을 혼합해 색을 표현하는 방식
    • 감산 시스템보다 더 많은 색을 만들 수 있다.
  • 감산(subtractive)식 시스템 : 빛을 제거하면서 색을 표현하는 방식
    • 감산 색 시스템에서는 주 색이 청록(cyan), 자홍(magenta), 노란색(yellow)이다.암순응(dark adaptation) : 전체적인 빛의 세기에 맞춰 눈의 응답이 점차 변한다.

  • 인간 눈의 한계로 인해, 현대 컴퓨터는 색을 표현하는데 24비트만 사용한다.
  • 그러나 컴퓨터가 24비트 단위로 계단하지 않기 때문에 표준 크기인 32비트에 색을 넣는다.

💡 그렇다면 남는 8비트는 그냥 버리는가? 아니다. 투명도에 사용한다.

2) 투명도 추가

  • 20세기 초부터 애니메이션의 프레임 재생산 문제로 인해 여러 시도를 하다가, 1984년 톰 더프와 토머스 포터는 투명도를 이용하여 이미지를 합성하는 방법을 고안해낸다.
  • 이들은 각 픽셀에 알파(α)라는 투명도 값을 추가하였다.
  • 합성 계산법
    • α는 수학적으로 0 이상 1 이하의 값. 0은 완전 투명, 1은 완전 불투명을 의미
    • 각 색의 값은 0-255까지 사용 가능
    • 색에 α를 곱하여 픽셀에 값을 저장

💡 예를 들어 색이 중간 밝기의 빨간색인 RGB(200,0,0)이고, 투명도 α가 0.5라면 2000.5 = 100 → RGB(100,0,0) 남은 8비트(가장 오른쪽) 에는 2550.5 = 1273) 색 인코딩
  • 웹 페이지는 텍스트로 표현하기 때문에, 색도 문자로 표현해야한다.
  • URL 인코딩과 비슷한 방식으로 색을 인코딩
  • 16진 트리플렛(hex triplet) : # 뒤에 6자리 16진 숫자를 붙여 표현
  • ex) ) #ffff00 :노란색, #000000:검은색, #ffffff:흰색.
  • 각각의 8비트 색을 두문자로 표현 

*참고 : 한 권으로 읽는 컴퓨터 구조와 프로그래밍 (조너선 스타인하트 지음)