파서는 SVG가 유효하고 안전한지 여부를 알려줄 수 있습니다. 하지만 그 디자인이 좋은지는 알려줄 수 없습니다.

이러한 차이는 제가 브라우저용으로 구축하고 있는 오픈 소스, 로컬 우선 (local-first) 비디오 편집기인 Timeline Studio에서 가장 흥미로운 문제 중 하나가 되었습니다.

Timeline Studio는 Chrome의 내장 Prompt API를 통해 Gemini Nano로 편집 가능한 벡터 그래픽을 생성할 수 있습니다. 전체 워크플로우는 브라우저 내에 머뭅니다. 요청이 감지되어 로컬에서 번역되고, 모델이 SVG를 생성하며, 결과물은 사용자의 에셋 라이브러리에 추가되기 전에 정화 (sanitize) 됩니다.

파이프라인은 작동합니다. 하지만 "작동한다"는 것이 "유용한 디자인을 생성한다"는 것과 같지는 않습니다.

현재의 브라우저 로컬 파이프라인

생성 흐름은 의도적으로 작게 설계되었습니다:

1. 요청의 실제 언어를 감지합니다.
2. 영어가 아닌 입력을 브라우저 내에서 영어로 번역합니다.
3. Gemini Nano에게 하나의 표준 SVG 문서를 요청합니다.
4. Markdown 펜스 (fences) 또는 주변 산문에서 첫 번째 완전한 SVG를 추출합니다.
5. 요소 (elements), 속성 (attributes), 링크, 스크립트 및 외부 리소스를 정화 (sanitize) 합니다.
6. 결과를 1200 × 1200 viewBox로 정규화 (normalize) 합니다.
7. 벡터를 타임라인에 자동으로 삽입하지 않고 'My Assets'에 추가합니다.

출시된 코드는 대략 다음과 같이 간단합니다:

const raw = await session.prompt(buildVectorDesignPrompt(englishRequest));
const vectorXml = extractVectorXml(raw);
const vectorBody = sanitizeGeneratedVectorXml(vectorXml, scope);

파서는 의도적으로 관대하게 설계되었습니다. Gemini Nano는 깨끗한 SVG를 반환할 수도 있고, 이를 Markdown 코드 펜스로 감싸거나, 그 앞에 문장을 추가하거나, 오래된 커스텀 래퍼 (wrapper)를 사용할 수도 있습니다. 추출기 (extractor)는 정화 도구가 실제 보안 경계 (safety boundary)를 적용하기 전에 이러한 케이스들을 처리합니다.

검증 (validation)이 잡아내는 것

현재의 검증 레이어는 구조적 및 보안 문제를 거부하는 데 탁월합니다:

• 누락되거나 잘못된 SVG 마크업 (markup)
• 스크립트 (scripts) 및 이벤트 핸들러 (event handlers)
• 안전하지 않거나 지원되지 않는 요소 (elements)
• 외부 URL 및 임베디드된 원격 콘텐츠 (embedded remote content)
• 편집 가능한 벡터 자산 (editable vector asset)에 속하지 않는 속성 (attributes)
• 에디터의 좌표계 (coordinate system)로 정규화 (normalized)할 수 없는 출력물

이는 필수적입니다. 생성된 마크업은 단순히 로컬 모델 (local model)에서 나왔다는 이유만으로 결코 신뢰해서는 안 됩니다.

하지만 안전한 SVG가 반드시 좋은 SVG인 것은 아닙니다.

검증 (validation)이 놓치는 것

시각적 품질의 실패는 합격 또는 불합격으로 표현하기가 훨씬 더 어렵습니다:

• viewBox가 유효함에도 불구하고 아트워크 (artwork)가 잘림
• 구성 (composition)이 기술적으로는 요청과 일치하지만 평범하게 느껴짐
• 투명해야 할 자산 (asset)에 전체 캔버스 배경 사각형이 포함됨
• 일러스트레이션이 거의 비어 있거나 의미 있는 도형 (shapes)을 너무 적게 사용함
• 수십 개의 아주 작은 도형들로 인해 벡터 (vector) 편집이 어려움
• 그룹 (groups)은 존재하지만, 그 ID와 계층 구조 (hierarchy)가 유용하지 않음
• 타이포그래피 (typography), 간격 (spacing) 또는 대비 (contrast) 문제로 인해 비디오에서 자산을 사용할 수 없음
• 번역이 단어는 유지하지만 디자인 의도 (design intent)를 놓침

이 중 어느 것도 반드시 유효하지 않은 XML을 생성하는 것은 아닙니다. 새니타이저 (sanitizer)는 이 모든 것을 허용할 수 있습니다.

이 부분이 제가 다음에 개선하고자 하는 부분입니다.

재현 가능한 SVG 품질 벤치마크 (benchmark)

프롬프트 (prompts)를 변경하거나 복구 로직 (repair logic)을 추가하기 전에, 퇴보 (regressions)를 가시화할 수 있는 작은 벤치마크를 만들고 싶습니다.

첫 번째 버전은 다음 범주를 아우르는 최소 24개의 프롬프트를 포함해야 합니다:

• 아이콘 (icons) 및 단순 심볼 (symbols)
• 로워 서드 (lower thirds) 및 타이틀 그래픽 (title graphics)
• 차트 (charts) 및 인포그래픽 요소 (infographic elements)
• 콜아웃 (callouts), 라벨 (labels) 및 배지 (badges)
• 프레임 (frames) 및 마스크 형태의 구성 (mask-like compositions)
• 추상적인 모션 그래픽 자산 (abstract motion-graphics assets)
• 최소 4개의 비영어권 요청

각 결과는 간결한 인간 평가 기준 (human rubric)을 통해 검토될 수 있습니다:

1. 요청 충실도 (Request fidelity) — 이미지가 요청된 내용을 제대로 나타내는가?
2. 구성 (Composition) — 간격, 균형, 계층 구조가 사용 가능한 수준인가?
3. 완성도 (Polish) — 단순히 생성된 것처럼 보이지 않고 의도적으로 설계된 것처럼 보이는가?
4. 편집 가능성 (Editability) — 그룹과 도형이 추후 편집할 수 있도록 구조화되어 있는가?
5. 안전성 및 투명성 (Safety and transparency) — 에디터의 SVG 규칙을 준수하는가?

목표는 하나의 마법 같은 품질 점수를 만들어내는 것이 아닙니다. 프롬프트 변경 사항을 이전 동작과 비교할 수 있도록, 반복 가능한 프롬프트 세트와 예시를 만드는 것입니다.

다른 모델 호출 전의 결정론적 검사 (Deterministic checks)

일부 시각적 실패는 두 번째 추론 (inference)을 실행하지 않고도 저렴한 비용으로 근사치를 구할 수 있습니다:

• 비어 있거나 거의 비어 있는 가시적 경계 (visible bounds)
• viewBox 범위를 크게 벗어나는 도형
• 캔버스의 거의 전체를 덮는 커다란 불투명 요소
• 극단적인 좌표 값
• 과도한 도형 또는 필터 복잡도
• 중복되거나 누락되었거나 도움이 되지 않는 그룹 ID
• 캔버스의 아주 작은 부분에만 밀집된 콘텐츠

이러한 검사가 시각적 검토를 완전히 대체할 수는 없지만, 기계가 읽을 수 있는 보고서를 생성할 수 있습니다. 더 중요한 점은, 모호한 "생성 실패" 메시지를 반환하는 대신 실패 원인을 설명할 수 있다는 것입니다.

단일 제한적 로컬 수정 단계 (One bounded local repair pass)

다음 실험은 단 한 번의 선택적 수정 시도입니다. 이는 제안 단계이며 아직 출시된 기능은 아닙니다:

const report = analyzeSvgQuality(vectorXml);

if (report.repairable && experiments.svgRepair) {
...

수정 프롬프트는 원래의 영어 요청, 생성된 SVG, 그리고 결정론적 경고 (deterministic warnings)의 짧은 목록을 전달받습니다. 이는 동일한 요소 및 안전 제약 조건을 유지하며, 최대 한 번만 실행됩니다.

왜 단 한 번뿐인가요?

무제한적인 생성-검사-수정 루프는 사용자의 노트북에서 예측 불가능하기 때문입니다. 브라우저 로컬 소프트웨어는 메모리, 배터리, 모델 지연 시간 (latency), 취소, 그리고 더 낮은 사양의 하드웨어를 존중해야 합니다. 제한된 수정 단계는 이해하기 쉽고, 테스트하기 용이하며, 비활성화하기도 더 쉽습니다.

수정된 결과물 또한 정확히 동일한 추출기 (extractor) 및 정화기 (sanitizer)를 통과해야 합니다. 수정 작업이 보안 예외 사항이 될 수는 없습니다.

로컬 우선 (local-first) 제약 사항이 중요한 이유

호스팅된 비전 모델 (hosted vision model)을 사용하면 평가와 수정이 더 쉬워질 수 있지만, 이는 제품의 경계를 변화시킵니다. Timeline Studio는 프로젝트 미디어(media)나 디자인 프롬프트(prompt)를 백엔드(backend)로 업로드하지 않고도 유능한 에디터가 무엇을 할 수 있는지 탐색하고 있습니다.

이는 다음과 같은 유용한 엔지니어링 제약 사항을 만들어냅니다:

• 서버 측 SVG 클린업 서비스 없음
• 숨겨진 클라우드 폴백 (cloud fallback) 없음
• 무제한 재시도 없음
• 브라우저 AI 또는 로컬 번역을 사용할 수 없을 때 명확한 오류 메시지 제공
• 생성된 에셋 (assets)은 편집 가능한 상태로 유지되며, 타임라인에 조용히 배치되지 않음

이 제약 사항은 단순히 개인정보 보호에 관한 것만이 아닙니다. 이는 품질 시스템이 이해 가능하고 재현 가능하도록 강제합니다.

기여자(contributors)를 찾습니다

이 작업을 위해 두 가지 연구 이슈 (research issues)를 오픈했습니다:

• Research spike: 브라우저 로컬 AI SVG 생성 품질 개선
• Prototype an SVG quality checker and local repair pass for Gemini Nano

이 이슈들은 브라우저 AI, SVG 내부 구조, 평가 (evaluation), 프롬프트 디자인 (prompt design), 또는 개발자 도구 (developer tooling)에 관심이 있는 분들에게 좋은 기여 기회가 될 것입니다. 시스템 전체를 해결할 필요는 없습니다. 유용한 프롬프트 세트, 측정 가능한 정적 검사 (static check), 실패 분류 체계 (failure taxonomy), 또는 작은 수정 프로토타입만으로도 프로젝트를 진전시킬 수 있습니다.

브라우저에서 Timeline Studio를 체험하거나 GitHub에서 소스 코드를 살펴보세요.

이전에 생성된 SVG 품질에 관한 작업을 해보셨다면, 특히 "유효한 출력 (valid output)"과 "유용한 디자인 (useful design)"을 어떻게 구분하는지에 대해 듣고 싶습니다.