그래픽 기초지식! 비트맵, 벡터, 해상도, 컬러모드, 이미지 파일 포맷

비트맵과 벡터

비트맵(Bitmap)과 벡터(Vector)는 이미지가 만들어지는 방식을 말한다. 흔히 포토샵은 비트맵 전용 프로그램으로 불리고

일러스트레이터는 벡터 전용 프로그램으로 불린다. 비트맵과 벡터의 개념을 비교해보자.

비트맵 방식

픽셀(Pixel)이라는 작은 정사각형 점을 모아 만든 이미지이다.

우리가 흔히 모니터와 스마트폰으로 보는 모든 이미지는 이 비트맵 방식으로 처리가 되며, 래스터(Raster)이미지라고도 불린다.

포토샵 기능을 익히면서 사용할 메뉴중 Layer와 Rasterize 메뉴가 이미지를 비트맵 방식으로 변경하는 기능이다.

비트맵 이미지는 수많은 픽셀을 모아 색을 나타내므로 아무리 복잡한 색상과 질감이라 할지라도 다양한 느낌으로 표현할 수 있다.

그러나, 정해진 픽셀로 만들어지기 때문에 원본 이미지의 해상도를 확대시키면 이미지가 깨지는 현상이 발생하고, 이 이미지를 출력을 하게 되면 출력물의 품질이 떨어지게 된다.

따라서, 웹, 모바일, 영상 이미지는 72ppi, 인쇄 이미지는 300dpi로 설정하여 사용한다.

어쩔 수 없이 낮은 해상도의 이미지를 사용해야 한다면 포토샵의 Sharpen 필터를 사용하자.

이미지의 선명도를 높이는 작업을 할 수 있다.

비트맵 방식을 사용하는 프로그램은 포토샵, 페인터, 그림판 등이 있다.

벡터 방식

벡터 방식은 점과 점을 연결해서 선이나 곡선으로 도형을 만들고, 내부에 색상이나 패턴을 적용한 도형들을 모아 이미지를 만든다. 

이미지 크기를 늘려도 화질이 떨어지지 않고 출력물의 크기와 상관없이 깨끗한 품질을 기대할 수 있어 인쇄 편집 용도로 많이 사용되며, CI, BI, 캐릭터 디자인에 활용된다. 비트맵 이미지를 다루는 포토샵에도 펜 툴로 그린 패스, 문자 툴로 쓴 글자, 셰이프 툴로 그린 오브젝트는 벡터 방식 이미지처럼 이미지를 아무리 키워도 뭉개지지 않는다.

벡터 방식을 사용하는 대표적인 프로그램에는 일러스트레이터, 코렐드로우, 프리핸드, 플래시 등이 있다.

※ 벡터 이미지는 전용 프로그램으로만 볼 수 있기 때문에 웹 브라우저에서 보기 위해서는 비트맵 변환 작업이 필요하다.

해상도

비트맵 방식 이미지의 최소 구성단위는 격자 형태인 '화소'로 표현되며 이것을 픽셀이라고 한다.

따라서 이미지는 픽셀의 개수에 따라 해상도(Resolution)가 결정된다. 

카메라 성능을 말할 때 우리가 흔히 쓰는 500만 화소나, 1,000만 화소는 카메라 촬영으로 나오는 이미지의 픽셀 개수를 의미한다.

위 이미지에서 픽셀을 표시하는 격자무늬를 넣어서 15x15픽셀 이미지와 30x30 픽셀 이미지의 차이를 비교해보자.

이미지 해상도가 높은 30x30픽셀의 이미지가 좀 더 세부적인 표현이 뛰어난 것을 확인 할 수 있다.

계단 모양으로 나타나는 이미지 깨짐 현상도 15x15 이미지에 비해 덜하다.

모니터 해상도도 이미지 해상도와 다르지 않다.

FHD (Full HD) 모니터의 해상도인 1,920 x 1,080 픽셀은 가로 1,920개, 세로 1,080개 픽셀로 모니터에 영상을 표시한다는 말이다.

즉, 모니터 화면에 보이는 총 화소의 개수는 2,073,600개이다.

아이폰6 플러스의 카메라로 800만 화소 이미지를 촬영할 수 있다는 말은 Full HD 모니터보다 약 4배 큰 이미지로 사진을 찍을 수 있다는 말이다.

아이폰에서 찍은 사진을 Full HD 모니터와 동일한 100% 크기로 보고 싶다면 1,920x1,80 픽셀로 해상도를 변환해야 한다. 이렇듯 카메라 화소와 모니터 해상도와 이미지 해상도는 같은 수치로 이해하면 된다.

웹 디자인이나 편집 디자인에서 해상도는 이미지를 다룰 때 매우 중요한 요소이므로 반드시 배워가자.