해상도, RGB 컬러 이해하기

해상도

Device Pixel Density

위 3개의 이미지 중 어떤 이미지가 가장 고퀄입니까?

TV해상도를 비교한 그림입니다.
위 그림에서 어떤 TV가 가장 화질이 좋은가요?

픽셀이란?

• 디지털 이미지를 구성하는 가장 작은 단위
• 하나의 픽셀은 화면에서 표현할 수 있는 가장 작은 점 하나를 의미한다.

첫번째 맥킨토시 컴퓨터(Apple2)는 인치당 72개의 픽셀을 가지고 있었다.
구이(GUI)라고 불리는 Graphic User Interface 는 제록스에 의해 개발되었지만 스티븐 잡스가 맥킨토시 컴퓨터에 탑재하게 된 것입니다. 그 이후 마이크로 소프트사에서도 GUI 를 도입하면서 윈도우 운영체제를 만들게 된 것입니다.
픽셀 기반의 GUI 가 처음 나왔을 때는 사람들이 인식하기 쉬운 그림인 그래픽 아이콘 등으로 표시되는 인터페이스를 말합니다.
그래서 오리지널 맥 아이콘 디자인을 보게 되면 아래와 같은 픽셀 기반의 아이콘 디자인이었고 이것이 구이(해외에서는 이 발음대로 읽음)의 시작이었습니다.

해상도란?

선명도나 화질을 나타내며 종이나 스크린 등에 표현된 그림이나 글씨 따위가 표현된 섬세함의 정도를 나타내는 말이다.

보통 1인치(25.4mm) 안에 표현되는 화소(Pixel)나 점(Dot)의 수로 해상도를 표현한다. 단위로는 DPI가 있다.

예를 들어 72 DPI 라고 하면 1인치 안에 1/72 크기의 점이 72개 들어간다는 뜻이고, 300 DPI라고 한다면 같은 1인치 안에 1/300 크기의 점이 300개 들어간다는 뜻이다. 다시 말해 해상도가 높다는 말은 더 작은 점으로 이루어진 이미지를 구현할 수 있다는 말이고, 그렇게 함으로써 이미지를 더 섬세하고 자연스럽게 구현할 수 있게 된다.

RGB & CMYK

웹 작업을 하다보면 RGB와 CMYK라는 용어를 자주 접하게 됩니다. 이 두 용어는 색상을 표현하는 방식에 대한 용어

html 코드를 보면 색상을 표현할 때 #000000, #fff 과 같은 형태로 표현하는데, 이것은 RGB 색상 표현을 16진수로 표현한 것입니다.

RGB 란?

• Red, Green, Blue의 약자
• 빛의 삼원색으로 3가지 색을 혼합하면 흰색이 되는 원리를 이용
• 빛을 혼합하여 다양한 색을 표현
• 모니터에서 사용하는 색상 표현 방식

RGB Color

RGB( red, green , blue ) 형태로 색상을 표현하는 방식

• 각 매개변수(빨간색, 녹색, 파란색)는 0에서 255 사이의 색상 강도를 정의합니다.
• 예를 들어 rgb(255, 0, 0)은 빨간색으로 표시됩니다. 빨간색은 가장 높은 값(255)으로 설정되고 나머지는 0으로 설정되기 때문입니다.
• 검정색을 표시하려면 rgb(0, 0, 0)과 같이 모든 색상 매개변수를 0으로 설정하십시오.
• 흰색을 표시하려면 rgb(255, 255, 255)와 같이 모든 색상 매개변수를 255로 설정합니다.

HEX Color

16진수로 색상을 표현하는 방식으로 #RRGGBB 형태로 표현

• 여기서 rr(빨간색), gg(녹색) 및 bb(파란색)는 00과 ff 사이의 16진수 값입니다(10진수 0-255와 동일).
• 예를 들어 #ff0000은 빨간색으로 표시되는데, 이는 빨간색이 가장 높은 값(ff)으로 설정되고 나머지는 가장 낮은 값(00)으로 설정되기 때문입니다.
• 검정색으로 표시하려면 #000000과 같이 모든 값을 00으로 설정합니다.
• 흰색을 표시하려면 #ffffff와 같이 모든 값을 ff로 설정합니다.

CMYK

• Cyan, Magenta, Yellow, Black의 약자
• 색상을 혼합하여 다양한 색을 표현
• 인쇄에서 사용하는 색상 표현 방식