벡터 이미지와 픽셀(래스터) 이미지, 무엇이 다를까?

벡터 이미지와 픽셀(래스터) 이미지, 무엇이 다를까?

개발을 진행하다 보면 "벡터 이미지"와 "픽셀(래스터) 이미지"라는 용어를 자주 접하게 됩니다. 이 두 가지는 이미지가 만들어지는 방식부터 실제로 화면에 표시되는 과정까지 완전히 다릅니다. 오늘은 이 둘의 차이점과 각각의 장단점, 그리고 언제 어떤 포맷을 선택해야 하는지 쉽게 정리해 보겠습니다.

1. 벡터 이미지란?

벡터 이미지는 점, 선, 곡선, 면 등 기하학적 요소를 수학적인 공식(좌표, 방정식 등)으로 정의해서 이미지를 만듭니다.
대표적인 포맷으로는 SVG, AI, EPS 등이 있습니다.

예시

• 로고, 아이콘, 간단한 일러스트, 폰트 등

특징

• 이미지를 아무리 확대하거나 축소해도 절대 깨지지 않습니다.
• 파일 크기가 복잡성에 따라 다르지만, 단순한 그래픽은 파일 용량이 매우 작습니다.
• 색상, 두께, 크기 등을 자유롭게 수정할 수 있습니다.

2. 픽셀(래스터) 이미지란?

픽셀 이미지는 이미지를 아주 작은 사각형(픽셀)들의 집합으로 저장합니다.
각 픽셀은 고유한 색상값을 가지고 있고, 이 픽셀들이 모여 전체 이미지를 만듭니다.
대표적인 포맷으로는 JPG, PNG, GIF, BMP 등이 있습니다.

예시

• 사진, 복잡한 그림, 웹 배너, 스크린샷 등

특징

• 이미지를 확대하면 픽셀 하나가 커져서 계단 현상(이미지 깨짐)이 발생합니다.
• 고해상도, 고품질 이미지는 파일 용량이 커집니다.
• 사진이나 세밀한 색상 변화, 자연스러운 그림에 적합합니다.

3. 구조적 차이 한눈에 보기

구분	벡터 이미지	픽셀(래스터) 이미지
구성 방식	점, 선, 곡선 등 수학적 공식	픽셀(화소)들의 색상값 배열
확대/축소	무한 확대/축소해도 깨지지 않음	확대하면 픽셀 깨짐(블록화, 계단 현상)
파일 크기	단순 그래픽은 작음, 복잡하면 커질 수 있음	해상도와 색상 수에 따라 커짐
용도	로고, 아이콘, 일러스트, 폰트 등	사진, 복잡한 그림, 웹 이미지 등

4. 동작 과정의 차이

벡터 이미지

• 이미지를 그릴 때, 저장된 수학적 정보(좌표, 곡선, 색상 등)를 해석해서 실시간으로 계산하여 화면에 렌더링 합니다.
• 크기나 색상, 두께 등을 언제든지 자유롭게 변경할 수 있습니다.

픽셀(래스터) 이미지

• 이미지를 그릴 때, 저장된 픽셀 배열을 그대로 화면에 표시합니다.
• 확대/축소 시 픽셀의 크기만 변하므로, 품질이 쉽게 저하될 수 있습니다.

5. 언제 어떤 포맷을 써야 할까?

• 벡터 이미지는 로고, 아이콘, 인쇄용 일러스트처럼 다양한 크기로 사용해야 하거나, 선명함이 중요한 그래픽에 적합합니다.
• 픽셀(래스터) 이미지는 사진, 복잡한 그림, 세밀한 색상 표현이 필요한 이미지에 적합합니다.

 

결과적으로 개발을 진행할 때 UI에 따라 다양한 이미지 크기 조정이 요구되기 때문에 벡터 이미지(SVG 등등)를 활용하는 것이 좋습니다!