Web

비트맵 (Bitmap) 그래픽과 벡터 (Vector) 그래픽의 특징

자주 사용되는 비트맵과 벡터 이미지의 기본적인 특징을 정리

Posted by JayB Kim on 2017-08-10

안녕하세요?

철학적인 개발자 JayB 입니다.

오늘은 컴퓨터 그래픽 디자인의 기초적인 용어와 개념인 비트맵과 벡터에 대해 알아보면서 각각 어떤 방식인지와 특징을 정리해보려고 합니다.

개발하면서 나중에 다시 참고하기 위해 여러 블로그와 문서들을 참조하였고 참고한 블로그와 문서들은 아래 적어놨습니다.

비트맵 (Bitmap) 방식과 벡터 (Vector) 방식

컴퓨터 그래픽은 크게 비트맵 Bitmap 과 벡터 Vector 방식으로 구분됩니다.

비트맵 (Bitmap) 방식

비트맵 Bitmap은 ‘비트의 지도 (map of bits)‘란 뜻으로, 각 픽셀에 저장된 일련의 비트 정보 집합이라고 보시면 됩니다.

디스플레이는 픽셀들의 배열로 구성 되어 있습니다.

픽셀들의 배열 방식, 픽셀들의 총 숫자나 가로 세로의 비율이 그 디스플레이의 해상도를 결정짓습니다.

예를들어 1920 x 1080의 해상도를 가진 디스플레이는 가로 1920개, 세로 1080개의 픽셀들을 가진 다는 것을 의미합니다.

가로와 세로의 값을 곱하면 그 디스플레이가 가진 총 픽셀 수가 됩니다.

bitmap

비트맵 방식의 특징

비트맵 이미지는 크기를 늘리거나 줄였을 때 원본 이미지에 손상이 일어나는 것이 특징입니다.

흔히들 이미지가 깨졌다,라고 표현하는데, 특히 원본 크기에 비해 이미지를 크게 늘렸을 때 이 현상이 두드러집니다.

자주 볼 수 있는 비트맵 이미지 형식으로 JPG, JPEG, PNG, GIF가 있습니다.

bitmap

벡터 방식

벡터 방식의 그래픽은 다음과 같은 메커니즘으로 구성됩니다.

두 개의 점 (point) 이 연결되면 하나의 선path이 됩니다.

그리고 그 선 (path) 이 세 개 이상이 되면 면을 만들 수 있습니다.

그리고 각각의 선은 두께 값과 색상 값, 곡률 값을, 면은 색상 값을 가질 수 있습니다.

이렇게 점과 선, 면의 기본적 벡터 그래픽 요소들이 모여 다양하고 복잡한 벡터 그래픽 을 만들 수 있게 됩니다.

vector

벡터 방식의 특징

수학 방정식을 기반으로 그림이 그려지기 때문에 사용자가 크기를 늘리거나 줄이더라도 이미지에 손상이 나지 않는 것이 특징입니다.

하지만 과도하게 복잡한 계산이 필요한 그림일 경우 컴퓨터에 큰 부담을 주기 때문에 일러스트레이터와 같은 프로그램에서 열었을 때

로딩 및 편집 속도가 굉장히 느려질 수 있습니다.

흔히 볼 수 있는 이미지 형식으로 AI, PDF가 있으며, 최근에는 SVG 형식도 많이 보이는 편입니다.

vector

비트맵 이미지와 벡터 이미지의 차이

이미지만 봐도 알 수 있습니다.

bitmap_vector

정리

비트맵

  • 사용자가 이미지 크기를 늘리거나 줄이면 이미지 퀄리티에 큰 손상이 일어난다.

  • 우리가 흔히 사용하는 비트맵 이미지 형식인 JPG, JPEG, PNG, GIF 가 있다. 저용량이기에 웹에서 자주 활용된다.

벡터

  • 사용자가 이미지 크기를 늘리거나 줄이더라도 이미지에 손상이 나지 않는다.

  • 벡터 이미지 형식으로 AI, PDF, SVG 형식이 있다.

  • 벡터 그래픽은 작업에 용이하다. 점, 선, 면으로 모든 그래픽 요소들이 이루어져 있기에 수정하는 과정에서 그래픽 작업 유지 관리에 좋다.

최근 하드웨어의 발전으로 용량에 대한 부담이 적어져 몇몇 사이트에서는 벡터 포맷의 이미지를 사용하는 추세이다.

참고한 블로그와 문서