[TIL] 시각 AI 관련 연구 찾아보기

들어가며

프론트엔드 개발자라면 SVG를 자주 다룬다. 디자이너가 전달한 아이콘, 로고, 일러스트 - 이 벡터 파일들을 코드로 다루는 건 익숙한 일이다. 그런데 만약 래스터 이미지(PNG, JPG)를 넣었을 때 AI가 SVG 코드를 생성해준다면?

이는 AI가 시각적 정보를 이해하고, 이를 구조화된 벡터 코드로 번역하는 문제라고 할 수 있겠다. 최근 이 분야에서 주목할 만한 연구들이 나오고 있어 정리해본다.

1. 배경: 이미지 → SVG, 왜 어려운가

전통적 접근법의 한계

래스터를 벡터로 바꾸는 것 자체는 오래된 문제다. Potrace, VTracer 같은 도구들이 이미 존재한다. 하지만 이들은 라인 디텍션 + 경로 최적화 방식이라 구조적 의미를 이해하지 못한다.

# 전통 방식의 파이프라인
래스터 이미지 → 엣지 검출 → 윤곽 추적 → 경로 단순화 → SVG 출력

문제점:

• 색상 그라디언트 표현이 어렵다
• 레이어/그룹 같은 시맨틱 구조가 없다
• 복잡한 일러스트에서 경로 수가 폭발적으로 증가한다
• 텍스트, 패턴 같은 고수준 요소를 인식하지 못한다

AI가 필요한 이유

SVG는 사실상 프로그래밍 언어다. <path>, <circle>, <rect>, <g> 같은 요소들로 구성된 마크업이고, 각 요소는 좌표, 색상, 변환 등의 속성을 가진다. 즉 이미지를 SVG로 바꾸는 문제는 비전(vision) → 코드(code) 생성 문제와 같다.

<!-- AI가 생성해야 하는 것: 구조적인 SVG 코드 -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#4A90D9" />
  <path d="M30 45 L45 60 L70 35" stroke="white" stroke-width="6"
        fill="none" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<!-- ↑ 체크 아이콘: 원 위에 체크마크. 단 2개 요소로 표현 -->

2. StarVector: 비전-언어 모델로 SVG 생성하기

논문 정보

"StarVector: Generating Scalable Vector Graphics Code from Images" Juan A. Rodriguez, Shubham Agarwal, Issam H. Laradji, Pau Rodriguez, David Vazquez, Christopher Pal, Marco Pedersoli ServiceNow Research, ETS Montreal, Polytechnique Montreal arXiv: 2312.11556 (2024)

핵심 아이디어

StarVector는 멀티모달 비전-언어 모델(VLM) 아키텍처를 SVG 생성에 적용한 모델이다. "이미지를 보고 코드를 쓴다"는 직관적인 접근이다.

아키텍처

┌─────────────────────────────────────────────────────┐
│                    StarVector                        │
│                                                      │
│  ┌──────────┐    ┌──────────────┐    ┌────────────┐  │
│  │  Visual  │    │   Visual     │    │   Code     │  │
│  │  Encoder │ → │   Adapter    │ → │   Decoder  │  │
│  │(CLIP ViT)│    │ (Projection) │    │(StarCoder) │  │
│  └──────────┘    └──────────────┘    └────────────┘  │
│       ↑                                     ↓        │
│   래스터 이미지                             SVG 코드     │
└─────────────────────────────────────────────────────┘

1. Visual Encoder (CLIP ViT): 입력 이미지를 비전 트랜스포머로 인코딩하여 시각적 특징 벡터(토큰)를 추출한다.
2. Visual Adapter: 비전 토큰을 LLM의 임베딩 공간으로 투영(projection)한다. 두 모달리티를 연결하는 다리 역할.
3. Code Decoder (StarCoder): 코드 생성 특화 LLM인 StarCoder를 기반으로, 시각 토큰을 조건으로 받아 SVG 코드를 토큰 단위로 생성한다.

왜 StarCoder인가

SVG는 XML 기반 마크업이므로 일반 텍스트 LLM보다 코드 LLM이 유리하다. StarCoder는 다양한 프로그래밍 언어의 문법 구조를 학습했기 때문에, SVG의 태그 열기/닫기, 속성 값 포맷, 좌표계 등을 자연스럽게 생성할 수 있다.

학습 데이터 & 벤치마크

• SVG-Stack: 웹에서 수집한 대규모 SVG-이미지 쌍 데이터셋
• SVG-Bench: StarVector와 함께 도입된 벤치마크로, 아이콘 생성, 폰트/글리프 생성, 일반 이미지 벡터화 등 다양한 태스크를 포함
• 기존 방법(VTracer, LIVE, DiffVG, Im2Vec)과 비교하여 FID, LPIPS 등의 지표에서 우수한 성능

생성 예시 (개념)

입력: 별 모양 아이콘 PNG 이미지
 
StarVector 출력:
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M12 2 L15.09 8.26 L22 9.27 L17 14.14 L18.18 21.02 L12 17.77 L5.82 21.02 L7 14.14 L2 9.27 L8.91 8.26 Z"
    fill="#FFD700" stroke="#DAA520" stroke-width="0.5"
  />
</svg>

핵심은 이 SVG가 단순 트레이싱이 아니라, 의미적으로 구조화된 코드라는 점이다. 하나의 <path>로 별 전체를 표현하고, 적절한 색상과 스트로크를 지정한다.

3. RLRF: 렌더링 피드백으로 학습 강화하기

Reinforcement Learning from Rendering Feedback

RLRF는 SVG 생성 모델의 학습을 개선하기 위한 기법으로, LLM 분야의 RLHF(Reinforcement Learning from Human Feedback)에서 영감을 받았다.

핵심 아이디어

일반적인 다음 토큰 예측 학습(next-token prediction)은 SVG 코드의 텍스트적 정확도는 높일 수 있지만, 그 코드가 렌더링되었을 때 시각적으로 원본과 얼마나 유사한지는 직접 최적화하지 못한다.

RLRF는 이 격차를 해결한다:

┌───────────────────────────────────────────────────────┐
│                    RLRF 학습 루프                       │
│                                                        │
│  원본 이미지 ──→ 모델 ──→ SVG 코드                      │
│       ↑                      ↓                         │
│       │              SVG 렌더러 (CairoSVG 등)            │
│       │                      ↓                         │
│       │              렌더링된 이미지                      │
│       │                      ↓                         │
│       └──── 시각 유사도 비교 (LPIPS, SSIM) ← ┘          │
│                      ↓                                 │
│               보상 신호 (Reward)                         │
│                      ↓                                 │
│          강화학습으로 모델 파라미터 업데이트                  │
└───────────────────────────────────────────────────────┘

단계별 동작

왜 효과적인가

일반 학습:    "코드가 정답 SVG와 토큰 단위로 같은가?" → 텍스트 레벨 최적화
RLRF 학습:   "코드를 실행했을 때 그림이 같아 보이는가?" → 시각 레벨 최적화

같은 그림을 표현하는 SVG 코드는 무수히 많다. <circle cx="50" cy="50" r="30"/>과 <ellipse cx="50" cy="50" rx="30" ry="30"/>은 같은 결과를 낸다. 텍스트 기반 학습은 이런 동치 관계를 처리하기 어렵지만, RLRF는 렌더링 결과만 같으면 높은 보상을 주므로 이 문제를 자연스럽게 해결한다.

관련 선행 연구

• DiffVG (Li et al., 2020): 미분 가능한 벡터 그래픽 렌더러. 렌더링 과정 자체를 미분 가능하게 만들어 그래디언트를 직접 역전파. RLRF의 이론적 기반
• CodeRL (Le et al., 2022): 코드 생성에서 실행 피드백을 보상으로 사용하는 RL 기법. RLRF는 이 아이디어를 시각 도메인에 적용한 것

4. Arrow 1.0과 상용 벡터 생성 AI

Recraft AI와 벡터 생성

Recraft AI는 AI 기반 디자인 도구 회사로, 벡터 그래픽 생성에 특화된 모델을 개발하고 있다고 한다.

• Recraft V3 (Red Panda): 2024년 말 Hugging Face Artificial Analysis 벤치마크 Text-to-Image 카테고리 1위를 차지한 모델
• 래스터뿐만 아니라 벡터 네이티브 출력을 지원하는 것이 차별점
• 아이콘, 일러스트, 로고 등 다양한 스타일의 벡터 생성 가능

Arrow 1.0은 Recraft AI의 벡터 생성 모델 라인업에서 등장한 것으로 알려져 있으며, 텍스트/이미지 입력으로부터 편집 가능한 벡터 그래픽을 직접 생성하는 접근을 취한다. 기존 "래스터 생성 후 트레이싱" 방식이 아닌, 처음부터 벡터로 출력하는 end-to-end 파이프라인이 핵심이다.

기존 래스터 AI와의 차이

# 기존 방식 (DALL-E, Midjourney 등)
텍스트 프롬프트 → 래스터 이미지(PNG) 생성 → [별도 트레이싱] → SVG
                                              ↑ 품질 손실 발생
 
# 벡터 네이티브 방식 (Arrow, StarVector 등)
텍스트/이미지 → 직접 SVG 코드 생성
                ↑ 구조적 정보 보존

5. 관련 분야 연구 흐름도

이 분야의 주요 연구들을 시간순으로 정리하면,

최적화 기반 (Optimization-based)

신경망 기반 (Neural / VLM-based)

핵심 논문 링크

6. 프론트엔드 개발자 관점에서 생각해볼 점

SVG 코드 품질의 문제

AI가 생성한 SVG가 "그림은 맞는데 코드가 지저분한" 경우가 많다. 예를 들어

<!-- AI가 생성한 SVG (비효율적) -->
<svg viewBox="0 0 100 100">
  <path d="M10.0000 10.0000 L90.0000 10.0000 L90.0000 90.0000
           L10.0000 90.0000 Z" fill="#FF0000"/>
</svg>
 
<!-- 같은 결과, 더 나은 코드 -->
<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="#FF0000"/>
</svg>

StarVector 같은 코드 LLM 기반 모델은 이런 시맨틱 프리미티브 선택 에서 기존 최적화 방식보다 유리하다. SVG의 <rect>, <circle>, <line> 등 고수준 요소를 적절히 사용하는 코드를 생성할 가능성이 높다.

예를 들면...

1. 디자인 시스템 연동: AI가 디자인 토큰(색상, 간격 등)을 참조하여 일관된 SVG 아이콘 세트를 생성
2. 접근성 내장: aria-label, role 등 접근성 속성이 포함된 SVG 생성
3. 편집 가능한 출력: 레이어, 그룹이 잘 나뉜 SVG로 디자이너가 후편집 가능
4. 코드 최적화: SVGO 같은 최적화를 학습 과정에 내장

정리

이 분야는 비전(Vision) + 코드 생성(Code Generation) + 강화학습(RL) 이 교차하는 흥미로운 지점에 있다. 이미지의 의미를 이해한다는 게 좀 고무적으로 느껴진다.

더 넓게 보면? SVG만의 이야기가 아니다

위에서 다룬 내용은 SVG 생성이라는 구체적인 사례지만, 사실 더 본질적인 흐름이 있다. AI가 시각 정보를 이해하고, 이를 구조화된 코드로 번역할 수 있게 되었다는 것이다.

비전 → 코드, 확장되는 영역

StarVector가 이미지 → SVG 코드를 해냈다면, 같은 원리가 다른 도메인에도 적용되고 있다.

이 모든 사례의 공통점은 유사하다.

시각적 정보 (픽셀) → 멀티모달 모델 → 구조화된 코드/데이터

핵심 원리는 같을 것 같은데

StarVector의 아키텍처를 다시 보면

1. Visual Encoder - 이미지를 이해하여 의미 있는 벡터로 변환
2. Adapter - 시각 정보를 언어/코드 모델이 이해할 수 있는 형태로 변환
3. Code Decoder - 구조화된 출력을 생성

이 세 단계는 Screenshot-to-Code든, 수식 인식이든, 도면 해석이든 거의 동일한 구조로 나타난다. 달라지는 건 디코더가 생성하는 출력의 종류(SVG, HTML, LaTeX, SQL 등)뿐이다.

RLRF도 마찬가지다. "생성한 코드를 실행하고, 결과를 피드백으로 사용한다"는 아이디어는 SVG 렌더링뿐 아니라 코드 생성 전반에 적용 가능하다.

• SVG 코드 → 렌더링 → 이미지 비교 (RLRF)
• Python 코드 → 실행 → 테스트 통과 여부 (CodeRL)
• HTML/CSS → 브라우저 렌더링 → 디자인 시안 비교 (Design2Code)
• SQL 쿼리 → 실행 → 정답 테이블 비교

고무적인 부분

결국 이것이 의미하는 건, AI가 "보는 것"과 "만드는 것" 사이의 간극을 좁히고 있다는 것이다. 예전에는 이미지를 이미지로만 처리했고 (분류, 검출, 세그멘테이션), 코드를 코드로만 처리했다 (자동 완성, 리팩터링). 지금은 이미지를 보고 코드를 쓰고, 그 코드를 실행해서 다시 시각적으로 검증하는 루프가 가능해졌다.

프론트엔드 개발자 입장에서 보면, 이건 단순히 "AI가 코딩을 대신해준다"가 아니라 시각적 의도를 코드로 정확히 번역하는 능력이 발전하고 있다는 이야기이고, 디자인-개발 워크플로우 자체가 바뀔 수 있는 가능성을 보여준다고 생각한다.

참고 자료

• Rodriguez, J. A. et al. "StarVector: Generating Scalable Vector Graphics Code from Images." arXiv:2312.11556 (2024)
• Li, T. et al. "Differentiable Vector Graphics Rasterization for Editing and Learning." SIGGRAPH Asia (2020)
• Ma, X. et al. "Towards Layer-wise Image Vectorization." CVPR (2022)
• Jain, A. et al. "VectorFusion: Text-to-SVG by Abstracting Pixel-Based Diffusion Models." CVPR (2023)
• Xing, X. et al. "SVGDreamer: Text Guided SVG Generation with Diffusion Model." CVPR (2024)
• Reddy, P. et al. "Im2Vec: Synthesizing Vector Graphics without Vector Supervision." CVPR (2021)
• Carlier, A. et al. "DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation." NeurIPS (2020)