Raster Graphics vs. Vector Graphics

디지털 이미지를 표현하는 대표적인 두 방식임.

2025.06.28 - [Programming/DIP] - [DIP] Digital Image 란?

[DIP] Digital Image 란?

---

1. Raster Graphics (래스터 그래픽스)

• 이미지를 픽셀(pixel) 이라는 정사각형 grid(격자)의 작은 점들의 집합으로 표현.
• 각 pixel은 "위치"와 "밝기 또는 색상 값 (intensity or color vector)"을 가짐.
• 수백만 개의 픽셀이 모여 하나의 이미지를 구성..

비트의 지도(Map of bits)라는 뜻의 비트맵(Bitmap) 또는 픽스맵(Pixmap)이라고도 불림.

---

참고: 디스플레이에서 pixel

CRT raster display에서 Phosphor Dots (인점) 이 사실상 pixel을 구성하는 최소단위임.
Color image에서는 R,G,B Phosphor dots 가 모여 pixel이 된다.

• 좌측은 CRT에서 사용되는 triade 방식임
  • 원형의 RGB "Phosphor Dots"가 삼각형 패턴으로 배치되고, CRT의 전자빔이 이들 Phosphor Dots에 충돌해 빛을 냄.
• 우측은 LCD에서 사용되는 stripe 방식임.
  • 사각형의 RGB 서브픽셀이 가로줄 형태로 배치됨.
  • LCD는 전자빔이 없고 TFT(Thin Film Transistor) 스위치로 각 서브픽셀에 전압을 걸어 액정 분자의 배열 상태를 조절해 백라이트 투과율을 다르게 함.
  • 각 서브픽셀 액정은 색상에 해당하는 컬러 필터로 덮여있고, 이를 통해 색을 만들어냄. 

---

1-1. 디스플레이 원리

• 과거 CRT에서는 전자빔이 화면 좌측 상단에서 시작해 오른쪽으로 한 줄씩 그리며 화면 전체를 채우는 래스터 스캔(raster scan) 방식으로 이미지를 표시.
• 각 줄이 끝날 때마다 수평 복귀(horizontal retrace) 로 다음 줄로 이동하고, 마지막 줄까지 그린 뒤에는 수직 복귀(vertical retrace) 로 다시 화면 상단으로 복귀함.
• LCD는 CRT와 달리 TFT 스위치를 통해 각 픽셀을 전기적으로 선택 및 제어를 함: 기본적으로는 같은 pixel 단위 갱신 구조로 화면을 refresh(갱신).

다음 그림은 raster scan을 보여줌.

original: The Secret Life of Programs

 

특징과 한계

• 일정길이당 존재하는 pixel의 개수(해상도)에 따라 이미지 품질이 결정됨.
• 확대하면 픽셀이 드러나 경계가 계단 모양으로 깨지는 계단현상(알리아싱) 이 발생.
• 과거 저해상도 CRT는 1인치당 100dpi 수준으로 해상도가 낮아 aliasing이 더 두드러짐.
• 오늘날에는 여러 안티알리아싱(anti-aliasing) 기법으로 개선되었음.
• 픽셀 간 영역에는 진정한 의미의 선을 그릴 수 없기 때문에, 복잡한 도형 경계선은 정밀하게 표현하지 못 함.

---

참고: sampling (for image)

original: The Secret Life of Programs

 

Sampling은 이미지 전체를 정사각형 격자로 나누고 각 사각형마다 색 정보를 수집.

• 보통 point sampling이 이루어짐.
• 격자 칸이 작을수록, 같은 길이에 pixel수가 늘어나며, 이는 해상도 향상으로 이어짐 (그러나 jaggy edges 등의 aliasing을 피할 수 없음).

참고: 2025.06.22 - [Programming/DIP] - Digitization

Digitization

---

참고: super-sampling

original: The Secret Life of Programs

Supersampling

• 각 픽셀을 더 작은 격자 (1pixel이 4x4subsamples로 구성)로 나눠 여러 샘플(16개)을 채취하고,
• 이 샘플들의 평균값으로 픽셀의 색을 결정
• 이 경우, 경계선의 계단현상을 줄어들게 됨.
• 가까이서 보면 중간색 픽셀이 보이지만, 멀리서 보면 자연스러운 경계로 인식

이는 샘플링 해상도를 높여 부드러운 이미지를 만드는 방법으로, 안티앨리어싱의 대표적인 기법

---

1-2. Applications

• 사진, TV, 비디오, 웹 이미지, 스캐너, 프린터, 팩스 등
• 실제 세부 묘사가 필요한 자연 이미지 표현 에 적합

---

2. Vector Graphics (벡터 그래픽스)

Vector Graphics는 이미지를 수학적으로 정의된 점과 선분(벡터) 으로 구성.

• 이미지의 구성 요소는 직선, 곡선, 다각형 등으로 표현됨
• 이 덕분에 확대·축소해도 품질 저하 없이 선명함을 유지할 수 있음.

---

2-1. 디스플레이 원리

• 초기 CRT 벡터 디스플레이에서는 전자빔을 원하는 좌표로 이동시켜 선을 직접 그리고, 인광체의 잔광이 있기 때문에 이를 이용하여 반복적으로 그림을 그려서 화면에 이미지를 유지함.
• CRT 벡터 디스플레이는 물리적으로 직접 전자빔을 통해 이미지를 표시함.
• 벡터 이미지는 라인, 곡선, 도형 등을 수학적으로 정의하므로, 해상도와 무관하게 깔끔한 표현이 가능.
• 벡터 디스플레이는 인광체의 잔광(persistence)과 인간 눈의 느린 반응을 이용해 이미지를 지속적으로 갱신해 보이게 하는 방식임.

---

참고: LCD 는 자체가 래스터 디스플레이임.

• 벡터 데이터를 직접 선으로 그릴 수 없음.
• 때문에, 벡터 데이터를 해상도에 맞는 픽셀 이미지로 변환하는 과정(래스터라이징, rasterization) 을 거침.
• 대부분 소프트웨어(브라우저, 게임 엔진 등)가 벡터 정보를 해석하고, 픽셀 단위로 어떤 좌표에 어떤 색을 표시할지 계산해 최종적으로 래스터 이미지 를 생성하고
• 만들어진 래스터 이미지를 LCD가 픽셀 행렬로 갱신(refresh)하여 화면에 표시함.

---

2-2. 특징과 한계

• (복잡한 이미지의 경우, )그릴 선의 수가 늘어날수록 1프레임 갱신 시간이 길어짐.져 플리커(flicker) 문제가 발생: 자연의 이미지들이 대부분 이에 해당.
• 전력선(60Hz) 등의 외부 간섭으로 화면이 흔들리는 위글링(wiggling) 현상이 발생해, 동기화 기술로 이를 완화해야 했음.
• 해상도 독립성: 해상도에 관계없이 언제나 선명한 이미지 제공
• 로고, 다이어그램, 설계도 등 정밀한 형태 표현 (인공적 그림)에 최적

---

2-3. Applications

• CAD, 벡터 일러스트(Adobe Illustrator, SVG), 폰트 디자인, 애니메이션, 게임 그래픽 등

다음은 SVG 코드와 이를 통해 만들어진 빨간색 원 임.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <style>
    <![CDATA[
      @keyframes pulse {
        0% { r: 10; }
        50% { r: 200; }
        100% { r: 10; }
      }
      #c {
        animation: pulse 5s infinite;
      }
    ]]>
  </style>
  <circle id="c" r="10" cx="200" cy="200" fill="red"/>
</svg>

 

 

 

---

Summary

구분	Raster Graphics	Vector Graphics
구성	픽셀(pixel)	점과 선(벡터)
해상도 의존성	해상도 의존 → 확대 시 깨짐	해상도 독립 → 무한 확대 가능
표현 방식	각 픽셀의 색상 데이터	수학적 정의로 형태 표현
용도	사진, 자연 이미지	로고, 설계도, 일러스트

 

---

같이보면 좋은 자료들

https://www.svgviewer.dev/

SVG Viewer

 

2022.12.05 - [Programming/DIP] - [DIP] Image Format (summary)

[DIP] Image Format (summary)