brunch

You can make anything
by writing

C.S.Lewis

by 비이크 Apr 19. 2023

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

“이거 안 깨지게 벡터 파일로 주세요. ai파일이요. 아니요. psd말고 ai요.”


이런 말, 업무 하면서 한번씩 들어보셨죠? 이미지가 깨진다까지는 어떻게 알 것도 같은데 벡터니, ai니 하는 것들은 무슨 말인지 당최 이해하기가 힘들죠. 오늘은 이 용어들에 대해 알아보겠습니다.







1. 비트맵(Bitmap)이미지


앞선 예시에서 우리는 “psd말고 ai요.” 라는 말을 봤습니다. psd는 그래도 조금 익숙한 확장자명이죠? 맞습니다. 바로 포토샵파일의 확장자명이 psd입니다. 그런데 말을 들어보니 psd파일은 벡터 파일이 아니라 깨지는 것 같아요. 그럼 대체 이 ‘깨진다’는 무엇이고, ‘벡터파일이 아닌’ 건 또 뭘까요? psd파일은 대체 왜 이러는 걸까요? 답은 바로, 포토샵이 비트맵 이미지를 다루는 대표적인 프로그램이기 때문입니다.


먼저 이해하기 쉽게 이미지가 깨지는 현상을 먼저 보겠습니다. 


작은 사이즈로 봤을 때 선명하던 이미지가 확대를 했을 때 흐려보이거나, 윤곽선이 계단현상처럼 보이게 거칠어지죠. 이것이 바로 비트맵 이미지의 특징입니다. 웹에서 가장 많이 접하는 이미지 포맷이죠. 우리가 익숙하게 접하는 jpeg, png, gif, bmp 모두 비트맵 이미지의 일종입니다.


비트맵(Bitmap)은 비트로 이루어진 지도라는 뜻입니다. 각 픽셀에 저장된 비트 정보의 집합으로 볼 수 있죠. 


그렇다면 픽셀은 무엇일까요? 픽셀은 Picture(그림)과 Element(원소)의 합성어로, 화면을 구성하는 가장 기본이 단위입니다. 컴퓨터는 모니터에 이미지를 나타낼 때 점을 찍어 나타내는 데, 이 점이 바로 픽셀인 것이죠. 위에서 봤던 이미지를 더 확대 해볼까요?



디스플레이(Display)는 이러한 픽셀들의 배열로 구성되어 있으며, 1920x1080등의 해상도는 가로에는 1920개의 픽셀을, 세로에는 1080개의 픽셀을 가지고 있다는 말입니다. 이때 가로와 세로 값을 곱하면 그 디스플레이가 가진 총 픽셀 수가 됩니다. 앞에서 픽셀은 가장 기본적인 화면 구성의 단위고, 이 픽셀 안에 비트정보가 들어가있다고 했습니다. 그렇기에 비트맵 이미지는 이미지의 크기가 커질 수록 용량도 기하급수적으로 늘어납니다. 그리고 이 픽셀 하나하나에 정보가 들어가 있기 때문에 섬세한 색상을 표현해야하는 사진 등에 적합한 파일 형식입니다.  


비트맵은 다른 표현으로는 픽스맵(pixmap)이나 래스터(Raster)이미지라고도 불립니다. 비트맵에서 대표적인 프로그램으로는 앞서 소개했듯 어도비 사의 포토샵이나 윈도우의 그림판 등이 있습니다. 







2. 벡터 이미지


시작 부분에서 우리는 “안 깨지게 벡터 파일로 주세요. ai파일이요.”라는 말을 함께 봤습니다. 앞선 비트맵 이미지에서는 이미지가 깨지는 걸 함께 보기도 했고요. 그렇다면 점들이 모여 이미지가 되는 비트맵 이미지와는 달리, 벡터 이미지는 어떤 방법으로 표현될까요?





벡터는 점과 점을 연결함으로써 수학적인 함수 관계에 의해 이미지를 표현합니다. 이렇게 만들어진 선이 두께값, 색상 값, 곡률값 등을 가질 수 있고, 선이 모여 만들어진 면도 색상값을 가질 수 있습니다. 이런 점, 선, 면의 기본적인 벡터 그래픽 요소들이 다양하고 복잡한 벡터 그래픽 이미지를 생성하게 됩니다.


여기서의 점과 점은 좌표계 (x,y)로 구성되기 때문에 비트맵의 픽셀과는 다르게 확대 시 이미지가 깨지거나 하지 않습니다. 축소되거나 확대될 때마다 계산되어 다시 보이기 때문이죠. 그렇기 때문에 벡터 작업물은 크기를 아무리 줄여도, 또 아무리 키워도 깨지는 현상이 없습니다. 그렇기에 깨지면 안되는 로고나, 또 사이즈가 큰 엑스배너, 현수막 등의 옥외광고물은 벡터 이미지로 작업을 해야합니다. 




대표적인 프로그램으로는 어도비 사의 일러스트레이터가 있습니다. 대표적인 확장자로는 ai, eps, svg 등이 있습니다.







마치며


이번 글에서는 비트맵 이미지와 벡터 이미지의 차이에 대해 알아봤습니다. 어떤 게 더 좋고 어떤 게 나쁘다는 건 없습니다. 화려한 색상의 사진을 보정할 때는 비트맵 이미지가 더 적합하고, 건물을 하나 다 덮어야 하는 옥외 광고물의 경우에는 확대를 해도 이미지 손상이 없는 벡터 이미지가 더 적합한 것이죠. 용도와 쓰임이 맞는 이미지를 포맷을 사용해야 원하는 결과물을 얻을 수 있습니다.

작가의 이전글 꼭 알아 두어야 할 기본적인 웹 UI 용어
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari