비트맵(래스터)과 벡터 이미지의 차이점: 언제 무엇을 써야 할까?
1. 픽셀로 이루어진 모자이크, 비트맵(래스터) 이미지
우리가 스마트폰으로 찍은 사진이나 웹에서 흔히 보는 JPG, PNG 형식의 이미지는 모두 비트맵(또는 래스터) 방식입니다. 비트맵은 수백만 개의 작은 정사각형 점(픽셀)들이 모여 하나의 거대한 모자이크처럼 이미지를 구성하는 방식입니다. 색상의 자연스러운 그라데이션이나 복잡한 질감을 표현하는 데 매우 탁월하기 때문에 '실사 사진'이나 '복잡한 디지털 페인팅'에 적합합니다. 하지만 치명적인 단점이 있습니다. 이미지를 원래 크기보다 강제로 확대하면 이 픽셀들이 함께 커지면서 사각형 테두리가 계단처럼 우둘투둘하게 보이는 현상, 즉 '이미지가 깨지는 현상(픽셀레이션)'이 발생합니다. 또한, 해상도가 높을수록 점의 개수가 기하급수적으로 늘어나 파일 용량도 함께 무거워지는 특징이 있습니다.
2. 수학 공식으로 그려지는 영원한 선명함, 벡터 이미지
반면 벡터(Vector) 이미지는 점과 선, 곡선 그리고 다각형 등의 기하학적 형태를 '수학적 공식'으로 기록하는 방식입니다. 일러스트레이터(.ai)나 웹용 확장자인 .svg가 대표적입니다. 벡터 이미지는 픽셀의 개념이 없기 때문에 1인치 크기로 줄이든, 건물 외벽에 걸릴 현수막 크기로 수천 배 확대를 하든 컴퓨터가 매번 공식을 재계산하여 새롭게 그려냅니다. 따라서 아무리 확대해도 선과 외곽선이 칼같이 매끄럽게 유지되며, '깨짐'이라는 개념 자체가 존재하지 않습니다. 또한 수식 텍스트로 이루어져 있기 때문에 해상도와 무관하게 파일 용량이 매우 작고 가볍습니다.
3. 실무에서의 활용: 언제 어떤 포맷을 써야 할까?
이 두 가지 포맷은 용도가 극명하게 나뉩니다. 기업의 로고(Logo), 타이포그래피(폰트), 웹사이트의 아이콘 등은 크기 변경이 잦고 선명도가 생명이므로 반드시 '벡터(SVG, AI, EPS)'로 제작해야 합니다. 반면에 인물 사진, 풍경 사진, 복잡한 3D 렌더링 결과물 등은 픽셀의 미세한 색상 변화가 필요하므로 '비트맵(JPG, PNG, WEBP)'으로 저장해야 합니다. 만약 일러스트레이터에서 만든 벡터 로고를 웹사이트에 업로드하기 위해 비트맵인 PNG로 내보내기(Export) 했다면, 그 순간부터는 픽셀로 변환된 것이므로 확대를 하면 깨지게 됩니다.
4. 웹 최적화를 위한 팁: SVG 십분 활용하기
웹 개발자나 블로거라면 사이트의 헤더 로고나 메뉴 아이콘 등에 비트맵 이미지 대신 벡터 방식인 SVG 형식을 적극적으로 활용해야 합니다. SVG는 텍스트 기반의 코드(XML)로 이루어져 있어 이미지 크기가 단 몆 KB(킬로바이트)에 불과하며, CSS나 JavaScript를 통해 색상 변경이나 애니메이션 효과까지 직접 제어할 수 있는 강력한 장점을 가집니다. 사진 등은 다봄랩의 이미지 압축기를 이용해 가벼운 WEBP 비트맵으로 처리하고, UI 요소는 SVG 벡터로 처리하는 것이 현대 웹 생태계의 가장 이상적인 이미지 최적화 전략입니다.