StarVector : 텍스트와 이미지를 SVG 코드로 변환하는 다재다능한 멀티모달 모델

 

디지털 콘텐츠가 점차 고해상도와 다양한 기기에서 활용됨에 따라, 이미지 표현 방식 또한 변화하고 있습니다. 그중에서도 벡터 그래픽(Vector Graphics)은 크기에 상관없이 선명함을 유지하는 특성으로 인해, 웹 아이콘, 앱 UI, 기술 도표 등에서 널리 활용되고 있습니다.

 

특히 SVG(Scalable Vector Graphics)는 텍스트 기반 코드로 이미지 형태를 정의하기 때문에, 작은 용량으로도 정교한 이미지를 표현할 수 있어 각광받고 있습니다. 하지만 일반적인 비트맵 이미지를 SVG로 자동 변환하는 것은 여전히 어려운 문제로 남아 있습니다.

최근에는 인공지능, 특히 멀티모달 대형 언어 모델(Multimodal Large Language Models, MLLMs)의 급속한 발전이 이러한 문제 해결의 가능성을 보여주고 있습니다. 기존 모델은 주로 곡선 기반(path curve) 위주로 이미지 정보를 처리해 왔지만, 이 방식은 불필요하게 긴 코드와 의미적 정보 부족이라는 한계를 가지고 있습니다. 이런 배경에서 등장한 StarVector는 텍스트와 이미지를 동시에 입력받아 SVG 코드로 변환하는 신개념 멀티모달 모델로, 복잡한 이미지도 의미 단위로 해석하고 적절한 SVG 기본 도형(원, 사각형, 텍스트 등)을 활용해 보다 컴팩트하고 직관적인 코드를 생성합니다.

 

---

 

SVGVector

1) 기존 방식의 문제점

 

기존의 이미지 벡터화 방식은 크게 두 가지로 나뉩니다. 하나는 Autotrace, Potrace, VTracer와 같은 전통적인 이미지 처리 기반 기법이며, 다른 하나는 Im2Vec, DeepSVG 등 딥러닝 기반의 접근법입니다. 

 

전자는 픽셀 단위의 경계를 따라 path를 생성하는 방식으로, SVG 기본 도형 사용에 한계가 있고, 결과물의 의미 해석이 어렵습니다. 후자는 딥러닝을 통해 이미지의 특징을 학습하지만, 대부분 path만을 사용하고 도형 인식 능력이 부족해 복잡한 구조나 텍스트 기반 SVG 생성에는 부적합합니다.

 

2) 접근 방식

 

StarVector는 이미지 벡터화를 단순한 형태 재현이 아닌 '렌더링의 역방향 처리(Inverse Rendering)'와 '코드 생성(Code Generation)' 문제로 접근합니다. 이는 이미지를 해석하고 이를 구성하는 의미 단위(텍스트, 도형 등)를 식별하여, 코드로 표현하는 방식입니다. 특히 StarVector는 SVG의 다양한 기본 도형(circle, polygon, rect, text 등)을 직접 활용하여 컴팩트하고 의미 있는 SVG 코드를 생성합니다.

이를 위해 StarVector는 멀티모달 아키텍처를 사용합니다. 즉, 이미지를 처리하는 이미지 인코더(Image Encoder)와 텍스트 및 코드를 이해하는 LLM이 결합된 구조입니다. 텍스트 또는 이미지가 입력되면, 이를 각각 시각 토큰 또는 텍스트 토큰으로 변환해 LLM에 입력하고, 순차적으로 SVG 코드를 생성합니다.

 

 

 

3) StarVector 아키텍처

 

그림 : StarVector 아키텍처

 

4) 세부 적용 기술

 

1️⃣ Visual Tokens & Adapter (시각 토큰 처리)

이미지 인코더는 CLIP 기반 Vision Transformer(ViT)를 사용하여 이미지를 시각 토큰으로 변환합니다. 이 시각 토큰은 Adapter를 통해 LLM에 맞는 차원으로 변환되며, SVG 코드 생성을 위한 정보로 사용됩니다.

 

2️⃣ SVG-Stack 데이터셋

모델 학습을 위해 자체 제작한 SVG-Stack 데이터셋은 210만 개의 SVG 코드와 이에 대응하는 이미지 및 텍스트 설명으로 구성되어 있습니다. 다양한 구조와 형태의 SVG를 포함하고 있어 모델의 일반화 성능을 높입니다.

3️⃣ DinoScore 평가 지표

 

기존의 픽셀 기반 평가지표(MSE, SSIM)는 SVG의 구조적 우수함을 반영하지 못하는 단점이 있습니다. 이에 따라 StarVector는 DinoScore라는 시맨틱 유사도 기반 평가 지표를 도입하여 실제 시각적 품질을 더 정확하게 평가합니다.

 

그림 : 이미지 벡터화 결과 비교 - SVG-Stack (위 3줄) & SVG-Diagrams (아래 3줄)

4️⃣ 모델 구조 및 변형

StarVector는 1B 파라미터 기반의 소형 모델과 8B 파라미터의 대형 모델 두 가지로 제공되며, 후자는 더 넓은 컨텍스트와 고해상도 이미지 입력을 지원합니다. 텍스트로 SVG를 생성하는 Text-to-SVG 작업에서도 매우 높은 성능을 보입니다.

5️⃣ 다이어그램 생성 기능

 

StarVector는 특히 기술 문서에서 자주 쓰이는 다이어그램 생성에서도 탁월한 성능을 보입니다. 텍스트, 화살표, 사각형 등 복잡한 구조를 SVG 코드로 정확히 재현해 내는 것은 기존 모델에서는 불가능했던 일입니다.

 

 

 

5) 제약 사항

 

StarVector는 16,000 토큰의 제한된 문맥 길이(context length)와, 생성된 코드에 대한 시각적 피드백 부족, 그리고 비교적 느린 추론 속도라는 한계를 가지고 있습니다. 향후 픽셀 기반 신호와의 결합이 이러한 단점을 보완할 수 있을 것으로 기대됩니다.

---

StarVector는 이미지 또는 텍스트를 입력으로 받아, 시맨틱 기반 SVG 코드를 직접 생성하는 최초의 멀티모달 대형 언어 모델입니다. 기존의 복잡하고 비효율적인 곡선 기반 방식과는 달리, 도형 단위의 의미적 분해를 통해 컴팩트하고 직관적인 SVG를 생성할 수 있다는 점에서 큰 의의가 있습니다. 특히 웹디자인, 기술 문서 작성, 인터페이스 디자인 등 실생활에서 활용도가 높은 SVG 생성 기술의 정확성과 품질을 한 단계 끌어올렸다고 평가할 수 있습니다.

향후 제약사항을 개선한다면, StarVector는 단순한 도형 생성에 그치지 않고 복잡한 도표와 시각 콘텐츠를 자동화하는 핵심 기술로 자리잡을 수 있을 것입니다.

 

 

---

참고자료

 

• 사이트) StarVector 프로젝트 (링크)
• 논문) StarVector: Generating Scalable Vector Graphics Code from Images and Text (링크)
• 코드) StarVector Github Repository (링크)

 

---

Q&A

 

Q. StarVector는 어떤 입력을 받을 수 있나요?

텍스트 설명 또는 비트맵 이미지를 입력받아 SVG 코드로 변환할 수 있습니다.

Q. 기존 벡터화 모델과 비교했을 때 가장 큰 차별점은 무엇인가요?

기존 모델은 대부분 path만을 사용하여 이미지 경계를 따라갑니다. StarVector는 도형과 텍스트를 인식하고 이를 SVG 기본 도형으로 표현합니다.

Q. 평가 지표로 DinoScore를 사용하는 이유는 무엇인가요?

픽셀 단위의 MSE는 SVG 구조적 정확성을 잘 반영하지 못하기 때문에, StarVector는 시맨틱 기반 평가 지표인 DinoScore를 사용해 더 정확한 성능 비교를 제공합니다.