[디자인 용어] 벡터와 비트맵?

안녕하세요!

디자인에는 두가지 용어가 하나의 쌍으로 늘 언급되는 용어들이 있습니다.

지난 포스팅인 RGB와 CMYK도 그러한 용어에 포함되기도 하죠.

 

 

+ RGB와 CMYK의 차이를 알고 싶다면 ↓↓↓

https://itastudio.tistory.com/18

[디자인 용어] RGB와 CMYK의 차이?

 

 

오늘은 벡터와 비트맵에 대한 내용과 그 차이점을 소개하고자 합니다.

그럼 함께 보실까요?

 

 

---

 

벡터와 비트맵이란?

벡터와 비트맵은

포토샵이나 일러스트레이터를 배우고 있거나

그래픽 디자인 작업을 하고 계시는 분들이

익히 들어보셨을 용어인데요.

 

두 용어의 차이점을 알고 비교할 줄 알아야

사용하려는 용도에 맞는 디자인을 표현할 수 있습니다.

 

 

 

본 내용에 들어서기 앞서서

똑같이 생긴 두개의 로켓 이미지를 만들어 가져와봤는데요. 

육안상으로는 별 차이가 없는 것 같지만

확대를 해본다면 어떻게 될까요?

 

 

 

두 로켓을 확대해보면

가장자리에서부터 차이점이 있다는 걸 알 수 있습니다.

이러한 차이가 왜 생기는지 아래의 내용으로 자세히 살펴봅시다!

 

 

1. 비트맵 : Bitmap
픽셀(pixel)이라는 작은 사각형들이 모여 이미지를 만들어내는 방식

 

래스터 이미지라고도 불리는 비트맵은

지정된 픽셀에 특정한 색상을 넣어

이미지를 구현하는 방식입니다.

 

 

스누피 십자수 도안 예시_핀터레스트 발췌

 

십자수 도안에는 작은 사각형이 고유의 색상을 가진채

하나의 이미지가 만들어지는 것을 볼 수 있는데

여기서 하나의 사각형이 픽셀 한 개라고 보면 됩니다.

 

여러개의 픽셀로 이루어진 비트맵은

일반적으로 컴퓨터에서 사용되는 이미지들이 대부분 따르는 형식이며

용량이 상대적으로 적어

웹상에서 반응, 처리 속도가 빠릅니다.

 

비트맵은 많은 픽셀을 가질 수록 화질이 높아지는데요.

픽셀 수를 증가시켜 다양한 색상의 이미지를 구현하는데 용이하지만

확대해서 봤을 때 깨질 수 있다는 단점이 있습니다.

 

확대 전 후 차이

 

비트맵의 

대표적인 형식으로는

jpg, jpeg, png, gif 가 있습니다.

 

 

2. 벡터 : Vector
점과 점, 직선과 곡선으로 이루어진 수학적인 값으로 이미지를 만들어내는 방식

 

벡터는 수학적인 방정식으로 이미지를 구현합니다.

 

세 개의 점을 잇게 되면

하나의 면이 나오듯 이미지마다 가지는

점, 선, 면의 수학적 값(곡률, 선의 굵기, 색상 등)이 모여

하나의 그래픽을 만들기 때문에

아무리 확대를 해도 깨지지 않는다는 큰 장점을 가지고 있죠. 

 

디자인한 작업물이 깨지지 않고 완성되길 원한다면

대표적으로 일러스트 프로그램을 주로 사용하게 됩니다.

 

하지만,

개체 수나 효과처럼 복잡한 수학적 값이 들어간 이미지가 많아지면

일러스트의 로딩이나

편집의 속도가 느려진다는 단점이 있습니다.

 

그래도 용량은 비트맵보다는 작은 편이라

고화질의 사진 수정이나 다양한 색상 표현이 굳이 필요하지 않다면

벡터 형식을 사용하는 편입니다. 

 

 

벡터 형식으로 제작해본 예시 이미지

 

벡터의

대표적인 형식으로는

ai, pdf, svg가 있습니다.

 

---

오늘은 벡터와 비트맵의 원리와 차이점을 알아보았는데요.

 

사진 편집을 주로 사용한다면 비트맵 형식의 포토샵을, 

자유롭게 응용가능한 디자인과 깨지지 않는 결과물을 원한다면 벡터 형식의 일러스트를 사용해야합니다.

 

사용하려는 작업물의 용도에 따라 

벡터와 비트맵 중 잘 선택하여 디자인 작업 해보시길 바랍니다!

 

그럼 다음에도 유익한 정보로 돌아오겠습니다 :-)

 

 

포스팅 : 디자이너 엘모 designer Elmo