인터넷에서 이미지를 찾다 보면 JPG, PNG와 함께 SVG나 AI 같은 파일 형식을 볼 때가 있습니다. 특히 로고나 아이콘을 크게 확대했는데도 선명한 이미지를 본 적이 있다면 벡터 이미지일 가능성이 높습니다. 벡터 이미지와 일반 이미지가 왜 다른지 알아두면 상황에 맞는 파일을 고르기도 쉬워집니다.
사진과 벡터 이미지는 만들어지는 방식부터 다릅니다
우리가 스마트폰으로 찍은 사진이나 인터넷에서 흔히 보는 JPG, PNG 이미지는 대부분 픽셀이라는 작은 점들이 모여 만들어집니다. 사진을 아주 크게 확대해 보면 작은 네모 모양의 색점이 보이는 것도 이 때문입니다.
이런 이미지를 래스터 이미지라고 합니다. 래스터라는 말이 조금 어렵게 들릴 수 있지만, 쉽게 생각하면 사진처럼 수많은 픽셀을 모아 화면에 보여주는 이미지입니다.
사진에는 사람의 얼굴이나 하늘, 나뭇잎처럼 아주 다양한 색과 밝기가 들어갑니다. 이런 복잡한 모습을 표현하는 데는 픽셀 방식이 잘 맞습니다. JPG와 PNG가 대표적인 래스터 이미지 형식입니다.
반면 벡터 이미지는 픽셀을 하나씩 저장하는 방식이 아닙니다. 점, 선, 곡선, 도형 등의 위치와 모양을 계산해서 이미지를 표현합니다.
예를 들어 동그란 로고가 있다고 해보겠습니다.
래스터 이미지에서는 동그란 모양을 수많은 픽셀의 조합으로 저장합니다. 이미 만들어진 픽셀을 크게 늘리면 새로운 세부 정보를 만들어낼 수 없기 때문에 어느 순간 이미지가 흐려지거나 네모난 픽셀이 눈에 보이기 시작합니다.
벡터 이미지는 조금 다릅니다. 원의 크기와 위치 같은 정보를 이용해 화면에 다시 그리는 방식이기 때문에 크기를 크게 바꾸어도 선이나 도형의 모양을 비교적 선명하게 유지할 수 있습니다.
그래서 사진과 로고가 같은 이미지처럼 보여도 실제 파일을 구성하는 방법은 상당히 다를 수 있습니다.
왜 벡터 이미지는 크게 확대해도 깨지지 않을까?
가장 큰 차이는 이미지 안에 들어 있는 정보입니다.
예를 들어 작은 회사 로고를 명함에 넣을 때는 가로 2cm 정도만 필요할 수 있습니다. 그런데 같은 로고를 건물 외벽에 붙이는 간판에 사용한다면 훨씬 크게 만들어야 합니다.
이때 작은 PNG 파일을 억지로 크게 확대하면 원래 가지고 있던 픽셀보다 더 큰 공간을 채워야 합니다. 그 결과 경계가 매끄럽지 않게 보이거나 이미지가 흐려질 수 있습니다.
벡터 이미지는 크기를 키울 때 단순히 기존 픽셀을 늘리는 것이 아닙니다. 이미지의 선과 도형에 대한 정보를 바탕으로 새로운 크기에 맞춰 다시 표현합니다. 그래서 작은 아이콘부터 큰 인쇄물까지 같은 디자인을 활용하기 편합니다.
이런 특징 때문에 벡터 이미지는 로고, 아이콘, 간단한 일러스트, 도표처럼 크기를 여러 가지로 바꿔 사용할 가능성이 있는 이미지에 잘 어울립니다.
대표적인 벡터 형식으로는 SVG, AI, EPS 등이 있습니다. 그중 SVG는 웹에서 자주 볼 수 있는 형식입니다. SVG는 벡터 기반으로 만들어지기 때문에 화면 크기가 달라져도 이미지의 선명함을 유지하기에 적합합니다.
반대로 사진처럼 색과 밝기가 복잡하게 변하는 이미지는 굳이 벡터로 만들 필요가 없습니다.
예를 들어 바닷가에서 찍은 사진을 생각해보면 하늘의 색, 물결, 사람의 피부, 모래의 질감처럼 아주 많은 정보를 담고 있습니다. 이런 사진을 벡터 방식으로 표현하려고 하면 오히려 복잡해질 수 있습니다.
그래서 "벡터가 더 좋은 이미지"라고 생각하기보다는 이미지의 용도에 따라 적합한 방식이 다르다고 이해하는 편이 정확합니다.
벡터와 일반 이미지 중 무엇을 사용하면 좋을까?
이미지 파일을 선택할 때는 먼저 어떤 이미지를 만들거나 사용할 것인지 생각해보면 됩니다.
사진이라면 JPG나 PNG 같은 래스터 이미지가 일반적으로 편합니다. 스마트폰 사진, 제품 사진, 여행 사진처럼 자연스러운 색과 세부적인 모습을 표현해야 하는 경우에는 픽셀 방식이 잘 맞습니다.
반대로 회사 로고나 작은 아이콘처럼 단순한 모양을 여러 크기로 사용해야 한다면 벡터 이미지가 유리합니다.
예를 들어 온라인 쇼핑몰에 로고를 넣는다고 해보겠습니다. PC 화면에서는 크게 보이고 스마트폰에서는 작게 보일 수 있습니다. 또 명함이나 인쇄물에 사용할 수도 있습니다. 이런 상황에서는 크기를 바꾸어도 선명함을 유지하기 쉬운 벡터 파일을 가지고 있는 것이 편합니다.
다만 벡터 파일이라고 해서 모든 프로그램에서 똑같이 사용할 수 있는 것은 아닙니다. 사용하는 프로그램이나 웹사이트가 특정 파일 형식을 지원하지 않는 경우도 있습니다.
이럴 때는 벡터 원본을 보관하면서 필요한 곳에 맞게 PNG 같은 이미지로 내보내 사용하는 방법도 있습니다.
예를 들어 디자인 작업을 할 때는 SVG 원본을 가지고 있고, 특정 사이트에 이미지를 올릴 때는 PNG로 변환해서 사용하는 식입니다.
여기서 중요한 것은 한 번 PNG로 변환한 파일을 다시 크게 확대한다고 해서 원래 벡터 파일처럼 되지는 않는다는 점입니다. 벡터 파일이 가지고 있던 선과 도형에 대한 정보가 그대로 유지되는 것이 아니기 때문입니다.
그래서 로고나 아이콘처럼 오래 사용할 이미지를 만든다면 가능하면 원본 벡터 파일을 따로 보관해 두는 것이 좋습니다.
이미지 파일을 볼 때 JPG나 PNG만 익숙했다면 SVG 같은 형식이 조금 낯설 수 있습니다. 하지만 파일 형식마다 이미지를 표현하는 방법이 다르다는 것만 알아도 "왜 이 이미지는 크게 해도 선명한데 저 사진은 흐려질까?"라는 의문을 쉽게 이해할 수 있습니다.
사진은 사진에 맞는 형식으로, 로고나 아이콘은 크기를 바꿔 사용할 수 있는 벡터 형식으로 선택하면 됩니다. 파일의 이름이나 확장자만 보는 것보다 어디에 사용할 이미지인지 먼저 생각하는 것이 파일을 고르는 데 도움이 됩니다.