벡터 그래픽
색칠된 타일을 빽빽이 채우는 대신, 점과 점을 잇는 고무줄 설계도로 그림을 그리는 방식이에요.
정의 벡터 그래픽(Vector Graphics)은 점, 선, 곡선 같은 기하학적 도형의 위치와 모양을 수학 공식으로 저장하여 그림을 나타내는 방식이에요. 화면을 수많은 색상 점으로 채우는 비트맵과 달리, 아무리 확대하거나 축소해도 선이 깨지거나 흐려지지 않고 또렷함을 유지해요.
모자이크 타일과 건축 설계도의 차이
모자이크 벽화를 가까이서 들여다보면 네모난 타일들이 낱낱이 보이며 그림 형태가 흐려져요. 우리가 스마트폰으로 찍는 사진이나 일반적인 그림 파일(비트맵)도 이와 똑같아서, 픽셀이라는 네모난 점들을 촘촘하게 배열해 만든 모자이크예요. 그래서 사진을 무리하게 확대하면 점들이 커지며 계단처럼 깨지는 현상이 나타나요.
반면 벡터 그래픽은 타일을 붙이는 것이 아니라 좌표와 수학 공식으로 그린 설계도에 가까워요. 컴퓨터에게 '어디에 어떤 색 점이 있다'고 저장하는 대신 '어느 위치에서 어느 위치까지 두께 2의 파란색 곡선을 그어라' 하고 명령을 적어두는 것이죠.
덕분에 이미지를 10배, 100배 확대하더라도 컴퓨터는 매번 공식에 맞춰 선을 다시 매끄럽게 계산해서 그려줘요. 스마트폰의 작은 화면에서 보든, 건물 외벽에 걸릴 초대형 현수막으로 출력하든 화질 저하 없이 언제나 선명함을 그대로 유지할 수 있어요.
고무줄을 당기듯 곡선을 만드는 비결
컴퓨터 안에서 부드러운 곡선을 수학으로 표현할 때 가장 널리 쓰이는 도구가 바로 '베지에 곡선(Bézier Curve)'이에요. 시작점과 끝점을 찍고, 그사이에 자석 역할을 하는 조절점을 두어 선을 팽팽하게 끌어당기는 원리예요.
조절점의 위치와 방향을 마우스로 살짝만 당겨주면 곡선의 굽은 정도가 실시간으로 부드럽게 변해요. 디자이너가 그리는 모든 자유로운 선과 모양은 사실 이러한 점의 좌표와 핸들의 각도 데이터로 저장돼요.
이 방식의 큰 장점은 용량이 놀라울 정도로 가볍다는 점이에요. 복잡한 색상 타일 수백만 개를 일일이 기록할 필요 없이, 몇 개의 기준점 좌표와 선 색상 정보만 저장하면 되기 때문에 파일 크기가 매우 작고 가벼워요.
로고에는 최고, 인물 사진에는 불리해요
벡터 그래픽은 기업 로고나 아이콘, 폰트(글꼴)처럼 크기를 자유자재로 바꿔야 하는 디자인에 가장 많이 쓰여요. 우리가 웹 브라우저에서 화면을 확대해도 글자나 버튼 아이콘이 조금도 찌그러지지 않는 이유가 바로 벡터 방식을 채택했기 때문이에요.
하지만 모든 그림에 벡터가 적합한 것은 아니에요. 카메라로 촬영한 사람의 얼굴이나 노을빛 하늘처럼 수만 가지 색이 오묘하게 섞인 풍경은 공식으로 표현하기가 매우 까다롭고 컴퓨터 연산도 지나치게 많이 필요해요.
조금 더 정확히 말하면, 벡터 이미지를 우리가 보는 모니터에 띄우려면 결국 화면 픽셀에 맞춰 색을 채워 넣는 '래스터화(Rasterization)' 과정을 거쳐야 해요. 도형이 너무 복잡해지면 실시간 계산 부담이 커지므로 실사 사진은 비트맵을, 단순하고 또렷한 그래픽은 벡터를 쓰는 것이 일반적이에요.
🤔 흔한 오해
벡터 이미지는 화면 해상도나 모니터 픽셀과 완전히 무관하게 화면에 나타난다.
저장 방식 자체는 해상도에 영향을 받지 않지만, 최종적으로 우리가 사용하는 모니터 화면에 보일 때는 모니터의 픽셀에 맞추어 색을 채우는 래스터화(변환) 과정을 반드시 거쳐요.
🧺 일상에서 만나요
벡터 그래픽은 픽셀 대신 수학 공식과 좌표로 그림을 저장하여, 아무리 확대해도 깨지지 않고 선명함을 유지하는 이미지 방식이에요.