bitmap과 vector 뭔데!?

어제 유데미 강의를 보면서 새로운 걸 배웠어여.

assets 파일에 pdf 형식도 넣을 수가 있더라구여!?! 따단

 

그래서 알아본 bitmap과 vector 방식의 차이입니다.

 

---

우선 아래는 같은 이미지를 SVG 형식(vector방식)과 PNG(bitmap 방식) 형식으로 다운 받아본건데,

차이가 느껴지실까요?

 

이 이미지를 기억하면서 아래 내용을 봐주십셔 ㅎㅎㅎ

 

 

비트에 몸을 맡겨~ 비트맵(bitmap)

 

비트맵 방식은 이미지를 점(픽셀)으로 표현한다고 해요.

점들이 모여 하나의 이미지가 완성되는데, 더 많은 점이 있을수록 더 선명하게 보여요.

아래처럼 말이져.

아이폰 12 pro 모델의 경우, 1284 x 2778의 해상도를 갖는데,

이는 가로로 1284개, 세로로 2778개의 픽셀로 이루어져 있다는 말이져.

 

그렇기 때문에 아주 자세히 보면 픽셀이 느껴질 수 밖에 없어요.

확대를 하면 깨져보이는 게 이것 때문이랍니다.

 

비트맵 방식을 사용하는 형식은 GIF, JPG, PNG, TIFF, PSD 등이에요.

 

벡터(vector)

 

vector방식은 bitmap과는 다릅니다.

 

vector방식은 모양, 색상 및 배치를 정의하는 수학 공식의 조합이래여. 무슨말이람,,,

(제가 이해한 바로는) 어떤 점의 x, y 좌표를 통해 점으로, 선으로, 면으로 만들어요.

 

A점과 B점을 이어 선을 만들고, 이와 같은 선을 3개 모아 면을 만드는거죠.

 

 

(사실 정확하게 어떻게 작동하는지는 모름주의,,,ㅎㅎ)

 

x, y 좌표로 이미지가 구성되기 때문에, 비트맵처럼 확대한다고 깨지는 게 아니라 확대된 화면에서 자기의 좌표를 찾아가죠.

 

그렇기 때문에 깨짐 현상이 없는 거랍니다.

이제 아래 사진이 이해가시져?

 

비트맵 방식을 사용하는 형식은 AI, CDR, CMX, SVG, CGM, DXF, WMF 등이 있다고 해용. 

 

 

 

실제 벡터와 비트맵 중 더 많은 저장공간을 차지하는 건 비트맵이미지라고 해요. 벡터 이미지는 픽셀이 아닌 코드 줄로 만들어지기 때문에 본질적으로 더 작아요. 그렇기 때문에 디자인이 가벼워야 하는 경우 고해상도 비트맵 이미지를 피하고 대신 작은 저품질 형식을 사용하는 게 좋겠져? 어플리케이션 디자인 같은 곳에서 말이져. 또한 벡터 방식은 이미지가 깨지지 않기 때문에 디자이너가 작업을 하기에 매우 유용하겠져?

 

그러나 실제 제품 사진이나 다양한 이미지를 나타낼 때는 벡터 방식으로는 한계가 있기 때문에 비트맵 이미지를 사용한다고 합니당. 아무래도 점/선/면으로 세세한 이미지를 표현하기에는 무리가 있져.

 

 

---

 

오늘도 얼렁뚱땅 알아본 비트맵과 벡터!

틀린 게 있다면 많이들 알려주십셔 슨배님덜!

 

 

https://spoqa.github.io/2012/06/13/bitmap-vector.html

비트맵 방식과 벡터 방식

https://blank2.tistory.com/7

벡터와 비트맵의 차이

https://xd.adobe.com/ideas/principles/app-design/bitmap-vs-vector-images-difference/

Bitmap vs. Vector Images: What's the Difference? | Adobe XD Ideas