[디자인 꿀팁 ✏️]벡터와 비트맵(픽셀) (일러스트레이터 vs 포토샵)

조회수 8232

딱 맞춰서 잘라주시면 되지 여백이 왜 필요한가요?
이 파스텔 색상은 왜 인쇄가 안되나요?

전문디자이너가 아닌 고객들도 간편하게 툴을 다루고 디자인을 하고, 인쇄물을 접수하는 세상이 왔습니다. 툴은 점점 쉬위지고, 인쇄를 쉽게 접할 수 있게 되었고, 점점 더 유용한 소스들을 공급하는 회사와 콘텐츠들도 많아지고 있지요.

네모난 디자인유치원에서는 정식으로 배우지 않았기 때문에 알 수 없었던 다양한 쉬운 디자인기초상식과 디자인 정보들을 공유합니다.



벡터와 비트맵(픽셀) (일러스트레이터, 포토샵)

존재하는 모든 이미지는 이 두가지의 방식으로 저장되고 관리하고, 그려집니다.
벡터와 픽셀의 차이는 디자인을 다루시는 분들에게 매우 기본적인 개념입니다.
어떤 경우에 벡터로 작업하면 좋고, 어떤 경우에 픽셀로 작업하면 좋은지 차이점부터 알아보겠습니다.

벡터와 비트맵(픽셀)의 차이

비트맵이란 bitmap (주요 확장자: jpg, png, bmp)

일반적으로 웹상에서 찾아볼 수 있는 거의 모든 이미지 파일은 비트맵 방식으로 저장이 된다고 보시면 됩니다.
아래와 같이 이미지를 크게 확대해서 보면, 이미지의 한 픽셀 한 픽셀에 한개의 색상만 저장되는 형태입니다.

비트맵을 주로 다루는 포토샵과 같은 프로그램은 아래와 같이,
현재 작업중인 이미지 파일의 해상도에 맞는 격자무늬가 이미 결정되어 있고, 한 픽셀에는 단 한개의 색상만 채워 저장할 수 있습니다.
그래서 색상 비트로 이루어진 map, 비트맵이라는 이름이 주어졌어요.

포토샵의 작업공간

포토샵에서는 픽셀마다 하나의 색상


이런 이유로, 비트맵 이미지는 메모리 용량을 매우 많이 차지합니다.
벡터로 5M가 넘는 현수막을 300dpi로 만든다면, 그 용량은 1기가 바이트를 훌쩍 넘어버릴겁니다.
1번째 픽셀부터 10,000,000번째 픽셀 중에서 배경색을 모두 흰색으로 채우는 데에, 10,000,000 개의 RGB 값이 필요하기 때문이지요. 현수막 예시

현수막 예시 (배경색이 흰색인데 10,000,000개의 픽셀마다 흰색RGB값을 저장한다면 너무 소모적입니다.)


벡터란 vector (주요 확장자: eps, ai, svg)

이런 현수막과 같이 대형 작업물이나 주로 단색으로 이루어진 인쇄물을 보다 빠르고 가볍게 처리하기 위해서, 벡터가 등장했습니다.
벡터로 작업된 파일은 점과 선으로 이루어져 그 방향성과 연결을 통해서 이미지를 표현합니다.

(대표적인 이미지 작업 툴은 illustrator, CorelDraw 입니다. )
카카오톡 벡터 예시

즉, 벡터의 주요 방식 eps 와 ai (Adobe Illustrator) 파일은 이미지의 정보를 점과 점을 잇는 선, 점의 위치와 그 점에서의 곡률로 저장합니다. 

그래서 이미지를 아무리 확대해서 보더라도, 컴퓨터는 이미지를 매끄럽게 표현해줍니다.


위의 사진을 예시로 들어 설명하면,

아래와 같이 카카오 동그라미를 만드는 데에 단 몇가지 정보만 있으면 충분합니다. 

1. 점의 위치를 정한다 : 좌표 저장

2. 점과 점을 패스로 연결한다. 

3. 각 점에서의 곡률을 정한다 : 곡률 저장

4. 점과 점이 연결해서 만든 영역의 색상값을 정한다 : 면의 색상 저장

* 만약 현수막만한 동그라미가 엄청 큰 동그라미라면, 4가지 정보만 기록하는 게 좋을까요? 비트맵으로 100,000,000개 픽셀에 RGB값을 기록하는 게 좋을까요?


벡터와 비트맵(픽셀)의 용량 차이

실제로 위의 예제 파일을 각각 ai와 jpg 방식으로 저장해봤습니다.  50cm 짜리 이미지를 300dpi의 고해상도 이미지로 저장했을 때의 용량 차이입니다. 

jpg는 (색상이 비슷한 픽셀을 묶어서 저장하는) 압축기능이 있는 파일형식이라 용량을 절약할 수 있지만,

그래도 ai파일보다 메모리 용량을 많이 차지합니다. 포토샵 파일은 30메가 바이트를 넘겼습니다.


5m x 60cm 짜리 글씨도 없는 현수막 캔버스 - 포토샵 파일의 용량은?  3 기가바이트를 훌쩍 넘겨버렸네요. ㄷㄷ

5m x 60cm 짜리 글씨도 없는 현수막의 포토샵 파일의 용량


벡터의 활용

벡터로 저장된 파일도 결국 웹, 인쇄물 등으로 사용할 때에는 대부분 jpg, png 등의 파일로 저장됩니다.

인쇄를 할 때도 결국 프린터가 어느 지점에 어떤 색상을 찍을지는 픽셀로 결정되게 되잖아요?

결국 벡터는 작업환경에서 빠르게 디자인하고 가볍게, 손상 없이 저장하고 전달하기 위해서 꼭 필요한 도구입니다.

벡터의 장점을 꼽자면,

1. 저장 용량이 적기 때문에 오류도 적습니다. 

2. 아무리 확대해도 이미지가 깨지지 않습니다. 

3. 사용시기에 따라 적절한 픽셀로 변환해서 활용할 수 있습니다.

벡터를 어디에 사용하면 좋을까요?

1. 명함부터 현수막, 홈페이지까지 다양하게 사용하는 우리 회사 로고와 브랜드 이미지는 벡터로 작업해두면 좋아요.

2. 인쇄물에 자주 사용하는 이미지와 캐릭터, 카피라이트에 사용해요!

3. 글씨가 많아서 최대한 깨지지 않아야 하는 인쇄물이나 서류에 사용해요.

4. 크기와 사이즈, 비율이 정확해야 하는 도면이나 도안은 벡터로 작업하는 것이 필수적이에요.

5. svg 확장자를 사용하면 웹 디자인에서도 벡터를 사용할 수 있어요.


비트맵의 활용

비트맵을 쓸 수 밖에 없는 곳에는 비트맵을 활용해요.

1. 점, 선, 면으로 구성할 수 없는 이미지나 사진은 비트맵 방식의 이미지로밖에 저장할 수 없어요.

2. 배경이 투명하지 않아도 된다면 꼭 png가 아닌 jpg로 저장해주세요. (압축률이 높습니다.) 



Tip!. 

이런 이유로 다양하게 활용해야 하는 브랜드 로고를 디자인을 할 때에는 벡터디자인에 유리한 단색으로 디자인하시는 것이 좋습니다.

예를 들어, 이런 종류의 색상이 많거나 그레데이션이 많은 로고는 예뻐보일 수는 있지만, 

벡터로 디자인하기 어려워서 활용성이 떨어집니다. 현수막 등을 제작할 때에는 반드시 깨질 수밖에 없고, 관리도 어렵지요.

큰 기업들의 로고가 대부분 깔끔한 2-3가지 색상으로 이루어져있는 이유 중 하나입니다.