벡터와 비트맵

 

벡터와 비트맵

컴퓨터 그래픽에서 이미지 표현방식은 크게 두가지로 구분되는데, 백터와 비트맵 방식입니다. 이 둘에 대해서 알아봅시다.

---

벡터

벡터 방식은 점과 점을 연결함으로써 수학적 함수관계에 의해 이미지를 표현하여 선과 면을 만들어냅니다. 이렇게 만들어진 선이 두껫값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 이런 점, 선, 면의 요소들이 모여 그래픽을 만들게 되는 것입니다.

여기서 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 돋보기로 봐야 할 만큼 크기를 줄이거나 건물에 붙일 만큼 크기를 키워도 깨짐 현상이 없습니다. 그러므로 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 캐릭터 등 제작할 때 사용합니다.

비트맵

비트맵은 각 픽셀에 저장된 비트 정보가 집합된 것입니다. 비트맵 이미지는 정사각형 모양의 픽셀 수백개가 모여 전체 이미지를 구성하는 방식입니다.JPG, PNG, GIF 모두 비트맵 확장자입니다.

비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능합니다. 하지만 픽셀의 수가 많아질수록 화질은 뛰어나지만, 용량 또한 커지게 되고 이미지를 확대하거나 축소하면 기존 이루고 있던 픽셀의 수가 변하게 되는데 이로 인해 깨짐 현상과 이미지 품질 저하가 발생하게 됩니다. 비트맵 방식의 대표적인 프로그램으로는 어도비에서 만든 포토샵 그리고 페인터 등이 있습니다.

---

백터와 비트맵의 차이점

	비트맵(Bitmap)	벡터(Vector)
정의	정사각형의 픽셀에 저장된 비트 정보의 집합	수학적인 함수 관계로 만든 그래픽 이미지
확대	계단현상	뚜렷한 외곽선
변화/회전	이미지 품질 손상	변화 없음
특징	사실적인 표현, 특수 효과, 풍부한 색감 표현	선명한 표현, 효과적인 응용작업
단점	이미지의 축소, 확대로 인한 이미지 품질 손상	사진과 같은 이미지 그래픽의 정교한 작업의 한계점
확장자	JPG, PNG, GIF..	AI, SVG, VML..
프로그램	포토샵, 페인터	일러스트레이터, 플래시

이미지의 종류 및 특징

종류	특징
JPG (JPEG)	1. 표현 색상도(24비트 컬러, 약 1600만 색상)가 뛰어나 고해상도 표시 장치에 적합함. 2. 이미지의 품질과 용량을 쉽게 조절 가능. 3. 가장 널리 쓰이는 이미지 포맷.
GIF	1. 비손실 압축 2. 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있음. 3. 8비트 컬러만 지원
PNG	1. .gif의 대체 포맷으로 개발됨. 2. 비손실 압축. 3. 8비트(256 색상)/24비트(약 1600만 색상) 컬러 이미지 동시 지원 및 처리. 4. W3C의 권장 포맷.
WEBP	구글에서 개발한 .jpg, .png, .gif를 모두 대체할 수 있는 이미지 포맷. 1. 완벽한 손실/비손실 압축 동시 지원(선택 사용 가능). 2. .gif와 같은 애니메이션 지원. 3. Alpha Channel(투명도) 지원(손실/비손실 모두). 4. 지원 브라우저에 제한이 있음(Explorer에서는 지원하지 않음).
SVG	1. 마크업 언어(HTML/XML) 기반의 Vector 그래픽을 표현하는 포맷. 2. 해상도의 영향에서 자유로움 3. CSS로 어느 정도의 스타일링 가능. 4. JavaScript로 Event Handling 가능. 5. 코드 혹은 파일로 사용 가능.