이미지 기본 소개
디지털 이미지를 이해하기 위해서는 먼저 빛과 색에 대한 기본적인 이해가 필요합니다. 이는 우리가 이미지를 어떻게 인식하고, 디지털 환경에서 어떻게 표현하는지를 이해하는 데 핵심이 되기 때문입니다.
이미지는 결국 빛과 색의 정보를 디지털화한 것이므로, 먼저 빛의 특성, 색과 색의 인식 과정, 그리고 이러한 요소들이 디지털 환경에서 어떻게 구현되는지 순차적으로 알아보겠습니다.
빛
빛이란 좁은 의미로 전자기파 중 우리 눈에만 보이는 파장대의 에너지인 가시광선의 영역을 의미합니다. 우리가 보는 색은 특정 파장대의 빛이 반사되거나 방출되어 망막에 도달하면서 나타나게 됩니다.
가시광선의 영역은 380 ~750nm 사이이며, 해당 범위보다 파장이 길어지면 적외선, 전파 파장이 짧아지면 자외선, X선 감마선의 영역으로 진입하게 됩니다.
짧은 파장 : 청색 계열 (400~500nm)
중간 파장 : 녹색 계열 (500~600nm)
긴 파장 : 적색 계열 (600~750nm)
색
우리가 보는 세상의 색은 빛과 물질의 상호작용을 통해 만들어집니다. 물체가 색을 가지는 방식은 크게 세 가지로 나눌 수 있습니다.
먼저, 불투명한 물체는 특정 파장의 빛을 반사하고 나머지는 흡수하여 색을 가지게 됩니다. 예를 들어, 빨간 사과가 빨간색으로 보이는 것은 빨간색 파장의 빛만 반사하고 나머지 빛은 흡수하기 때문입니다.
두 번째로 유리나 필터와 같은 투명한 물체는 특정 파장의 빛만을 통과시키고 나머지는 흡수합니다. 이러한 특성은 선글라스나 컬러 필터에서 흔히 볼 수 있습니다.
마지막으로 모니터, LED, 태양, 전구와 같은 광원은 빛을 직접 방출하여 색을 만들어냅니다. 이는 다른 물체들과 달리 스스로 빛을 생성할 수 있는 특별한 경우입니다.
색의 인식은 빛이 망막을 통해 들어와 시신경을 거쳐 처리되는 과정으로 처리됩니다. 망막에는 간상세포와 원추세포라는 두 가지의 광수용체가 존재합니다. 간상세포(막대 세포, Rod cell)는 빛의 밝기를 감지하고, 원추 세포(Cone cell)는 색상을 감지합니다. 이때 원추 세포는 빨강, 초록 그리고 파랑 파장에 각각 반응하는 세 가지 유형이 존재합니다. 이러한 원추세포의 특성 때문에 우리는 모든 색상을 RGB 세 가지 색상의 조합으로 표현할 수 있습니다.
이미지
이미지는 수많은 작은 점을 집합으로 가지고 있으며, 그 작은 점들은 각자의 색을 가지고 있습니다. 즉 색상을 가진 작은 점들이 모여 하나의 이미지를 구성하게 됩니다.
여기서 집합이란 2차원 행렬(Matrix)을 의미하며, 이미지의 가장 기본적인 구성 요소인 픽셀들이 각자의 색상 정보를 가지고 이 행렬에 저장됩니다. 앞서 언급한 작은 점들을 픽셀이라고 합니다.
디지털 이미지는 세 가지의 핵심적인 요소로 구성됩니다. 먼저, 각 픽셀이 이미지 내에서 어디에 위치하는지를 나타내는 공간적 정보가 있습니다. 이 정보는 이미지의 전체적인 구조를 결정하는 중요한 요소입니다. 두 번째로, 각각의 픽셀이 가지고 있는 고유한 색상 값이 있습니다. 이 색상 정보는 이미지가 우리 눈에 어떻게 보일지를 결정하는 시각적 특성을 만들어냅니다. 마지막으로, 이미지의 세밀한 정도를 나타내는 해상도가 있습니다. 해상도는 단위 면적당 픽셀의 개수를 의미하며, 이에 따라 이미지의 전체적인 품질이 결정됩니다.
추가로 디지털 이미지는 주로 RGB 색상 모델을 사용합니다. 이는 앞서 언급한 우리 눈의 원추세포가 인식하는 방식과 유사한데, 각 픽셀은 빨강, 초록, 파랑의 세 가지 기본 색상을 조합하여 색을 만들어냅니다. 각 색상 채널은 0부터 255까지의 256단계로 표현되어, 대략 1,677만 가지의 다양한 색상을 표현할 수 있습니다.
픽셀과 해상도
앞서 언급한 픽셀과 해상도에 대해서 조금 더 자세하게 알아보겠습니다. 먼저 픽셀은 디지털 이미지를 구성하는 가장 기본적인 단위로, 각각의 픽셀은 하나의 색상 정보를 담고 있습니다.
픽셀은 일반적으로 RGB(Red, Green, Blue) 값의 조합으로 표현되며, 예를 들어 검은색은 (0,0,0), 흰색은 (255,255,255)와 같이 나타낼 수 있습니다. 이러한 픽셀들이 모여 하나의 완성된 이미지를 구성하게 됩니다.
다음으로 해상도는 이미지의 선명도(세밀한 정도)를 결정하는 중요한 요소입니다. 해상도는 가로 × 세로 픽셀 수로 표현되며, 대표적인 사례로 Full HD(1920×1080)나 4K(3840×2160)와 같은 형식이 존재합니다. 같은 크기의 이미지라도 해상도가 높을수록 더 많은 픽셀을 포함하게 되어 더 선명한 이미지를 표현할 수 있습니다.
출력 시에는 DPI(Dots Per Inch)라는 단위를 사용하여 인쇄물이나 화면에서의 선명도를 나타냅니다. 이는 1인치당 들어가는 픽셀의 수를 의미하며, DPI가 높을수록 더 세밀한 이미지를 표현할 수 있습니다.
구조
앞서 디지털 이미지의 요소 중 공간적인 정보와 색상 값이 존재한다고 언급하였습니다. 실제로 컴퓨터는 이러한 정보를 저장 및 처리하기 위해 M x N 크기의 행렬(Matrix)로 나타내며, 이미지의 작은 점인 픽셀은 행렬 내 각자 고유한 위치에서 색상에 대한 데이터를 가지고 있습니다.
물론 M x N 크기의 행렬 단 하나만을 사용해서 우리가 일반적으로 생각하는 색상 이미지를 처리할 수 없습니다. 왜냐하면 우리의 시신경은 빨강, 초록, 파랑을 바탕으로 색을 인식하기 때문입니다. 따라서 일반적인 색상 이미지를 표현할 때는 세 가지의 RGB 색상 채널에 대한 독립적인 M x N 행렬을 구성해야합니다. 구성한 세 개의 행렬이 결합되어 우리가 보는 컬러 이미지가 만들어집니다. 각 채널의 값 또한 0~255 사이의 밝기 값을 가지며, 이 조합을 통해 다양한 색상이 표현됩니다.
예시를 들어 2x2 이미지가 있다고 가정했을 때, 아래와 같은 구조를 가지게 됩니다.
\[R = \begin{bmatrix} 255 & 128 \\ 200 & 50 \end{bmatrix}, \quad G = \begin{bmatrix} 0 & 255 \\ 100 & 30 \end{bmatrix}, \quad B = \begin{bmatrix} 0 & 128 \\ 50 & 220 \end{bmatrix}\]이 행렬을 픽셀 색상으로 변환하면 아래와 같이 표현할 수 있습니다.
- 좌측상단(255, 0, 0) → 순수한 빨강
- 우측상단(128, 255, 128) → 초록 계열
- 좌측하단(200, 100, 50) → 갈색 계열
- 우측하단(50, 30, 220) → 보라색 계열
흑백 이미지(gray scale)의 경우는 색상을 가지고 있지 않습니다. 따라서 하나의 채널만을 사용하여 표현됩니다. 즉 하나의 N x M 행렬로 구현할 수 있습니다. 마찬가지로 이때 행렬의 각 원소는 0부터 255 사이의 값을 가지는데, 0은 완전한 검정을, 255는 완전한 흰색을 의미하게 됩니다.
예시를 들면, 2x3 흑백 이미지는 아레와 같이 표시될 수 있으며, 좌측 상단의 원소는 검정색 픽셀을 의미하고 우측 상단은 흰색 픽셀을 의미합니다.
\[I = \begin{bmatrix} 0 & 127 & 255 \\ 34 & 200 & 180 \end{bmatrix}\]투명도를 가지고 있는 이미지는 Alpha라는 특수한 채널을 가지게되며, 총 4개의 채널을 보유하게 됩니다. (RGBA)
컴퓨터 그래픽에서 핵심은 이러한 구조를 어떻게 효율적으로 저장하고, 처리하며, 화면에 표현할 것인지를 결정하는 것입니다. 이는 이미지의 품질과 처리 속도에 직접적인 영향을 미칩니다.
래스터와 백터
디지털 이미지는 크게 두 가지 방식으로 표현됩니다. 하나는 래스터(Raster) 이미지고, 다른 하나는 벡터(Vector) 이미지입니다.
레스터 이미지는 실제 세계의 이미지를 디지털화한 방식입니다. 레스터 이미지는 픽셀 구조로 이루어져 있으며, 각 픽셀들이 모여 하나의 그림을 만들어 냅니다. 레스터 이미지는 대표적으로 JPG, PNG, BMP가 같은 형식을 가지고 있으며, 이는 우리가 가장 흔히 접하는 이미지들입니다.
또 하나의 레스터이미지 특징으로는 이미지를 확대하면 픽셀이 커지면서 경계가 깨져보이거나 뭉개져 보이게 됩니다.
반면에 벡터 이미지는 점과 점을 잇는 선, 곡선, 도형 같은 요소들이 수식으로 정의되는 수학적인 방식으로 이미지를 표현해합니다. 예를 들어 SVG 같은 벡터 이미지 포맷은 아래와 같이 정의됩니다. 해당 예시는 중심이 (100,100)에 있고 반지름이 50인 빨간 원 하나를 의미합니다.
<circle cx="100" cy="100" r="50" fill="red" />
물론 컴퓨터가 이 벡터 데이터를 화면에 출력하려면, 결국 픽셀 단위의 포멧으로 전환하여야만 합니다. 이를 레스터화(Rasterization) 라고 표현합니다.
결국 구조 덕분에 레스터이미지와 다르게 확대를 해도 전혀 깨지지 않고 선명하게 유지됩니다. 이렇게 해상도에 대하여 독립적인 성질을 가지고 있기때문에 아이콘과 도면같은 이미지는 벡터 이미지를 사용합니다. 대표적인 형식으로는 SVG, AI, EPS등이 존재합니다.
Reference
- https://en.wikipedia.org/wiki/Color