---
title: "AI 이미지에서 글자·숫자 안 틀리게 만드는 ‘언더드로잉’ 꼼수"
published: 2026-05-01T18:07:28.000Z
canonical: https://jeff.news/article/2152
---
# AI 이미지에서 글자·숫자 안 틀리게 만드는 ‘언더드로잉’ 꼼수

AI 이미지 모델이 글자와 숫자에 약한 문제를, 먼저 SVG나 HTML로 정확한 밑그림을 만든 뒤 그 위에 이미지 모델이 그리게 하는 방식으로 해결한 사례다. 결정론적 도구는 배치와 숫자를 맡기고, 생성형 모델은 비주얼을 맡기는 식이라 실용적인 워크플로로 꽤 쓸 만하다.

- AI 이미지 모델이 여전히 글자와 숫자에 약하다는 문제를 꽤 현실적인 방법으로 우회한 글임
  - 겉보기엔 멋진 이미지를 만들지만, 막상 숫자 순서나 버튼 개수, 텍스트를 읽어보면 깨지는 경우가 많음
  - 글쓴이는 Gemini 3.0 Pro에 한 단계를 더 붙여서, 100단계 어드벤처 보드 이미지의 숫자와 구조를 훨씬 안정적으로 만들었다고 함

- 방법 이름은 ‘언더드로잉(underdrawing)’임. 쉽게 말하면 정확한 밑그림을 먼저 깔아주는 방식임
  - 1단계는 결정론적 도구가 맡음. SVG, HTML, 파이썬, 머메이드 같은 걸로 숫자와 텍스트를 정확한 위치와 방향에 배치함
  - 2단계는 생성형 이미지 모델이 맡음. 그 밑그림 이미지를 입력으로 넣고, 프롬프트로 “이 위에 그려줘”라고 시키는 식임

> [!IMPORTANT]
> 핵심은 AI에게 정밀한 숫자 배치를 맡기지 않는 것임. 숫자와 텍스트는 코드가 만들고, AI는 그 위에 그림을 그리게 함.

- 글쓴이가 강조하는 원리는 단순함. 결정론적 기계와 생성형 기계가 잘하는 일을 나눠야 함
  - SVG나 HTML은 시각적으로는 건조해도, 좌표·회전·순서·텍스트 배치 같은 수학적 정확성은 뛰어남
  - 이미지 생성 모델은 비주얼은 화려하게 만들지만, 숫자와 글자처럼 정확해야 하는 요소는 아직 불안정함
  - 그래서 “윤곽을 주고, 그 위에 칠하게 하라”는 접근이 먹힌다는 얘기임

- 비교 결과도 꽤 직관적임
  - 밑그림 없이 Gemini 3 Pro에 맡기면 첫인상은 괜찮지만 읽기 시작하면 숫자와 텍스트가 무너짐
  - ChatGPT Images 2도 글쓴이 기대와 달리 비슷하게 실패했다고 함
  - 반면 Gemini 3.0 Pro에 언더드로잉을 같이 넣었을 때는 숫자, 버튼 개수와 순서, 나선형 구조가 맞아떨어졌다고 함

- 실제 워크플로는 어렵지 않음
  - 먼저 SVG로 숫자와 텍스트 윤곽을 만든 뒤 이미지로 내보냄
  - 그 이미지를 멀티모달 이미지 모델에 넣고 원하는 스타일을 텍스트 프롬프트로 설명함
  - 글쓴이는 지금은 클로드 코드나 코덱스 같은 도구가 이 두 단계를 대부분 자동화해줄 수 있다고 봄

- 물론 100% 완벽한 마법은 아님
  - 글 마지막에 “좋지만 매번 완벽하진 않다”고 현실 체크를 덧붙임
  - 그래도 AI 이미지에서 숫자, 표지판, 보드게임 칸, UI 목업처럼 정확한 텍스트가 필요한 경우엔 꽤 쓸 만한 패턴임

---

## 기술 맥락

- 이 방법의 핵심 선택은 생성형 모델에게 모든 걸 맡기지 않는 거예요. 왜냐하면 이미지 모델은 픽셀 분위기와 스타일은 잘 만들지만, “71 다음은 72” 같은 순서나 좌표 기반 배치는 아직 자주 틀리거든요.

- SVG를 먼저 쓰는 이유는 정확성이에요. 숫자, 텍스트, 버튼 위치, 회전 같은 요소는 코드로 만들면 같은 입력에서 같은 결과가 나오니까요. 이미지 모델에게는 그 결과물을 참고 이미지로 주고, 장식과 질감만 맡기는 구조예요.

- 이건 프롬프트 엔지니어링이라기보다 파이프라인 설계에 가까워요. 앞단에서는 결정론적 렌더링으로 제약을 만들고, 뒷단에서는 멀티모달 이미지 모델이 그 제약을 유지하며 스타일을 입혀요. 그래서 보드게임, 포스터, UI 시안처럼 읽을 수 있는 글자가 중요한 작업에 특히 잘 맞아요.

- 한계도 있어요. 모델이 밑그림을 항상 완벽히 보존하는 건 아니라서, 최종 결과 검수는 필요해요. 그래도 “정확해야 하는 건 코드로, 예뻐야 하는 건 모델로” 나누는 접근은 지금 이미지 생성 워크플로에서 꽤 실용적인 방향이에요.

## 핵심 포인트

- AI 이미지 모델은 보기엔 그럴듯해도 숫자, 글자, 순서가 쉽게 깨짐
- SVG·HTML 같은 결정론적 도구로 먼저 정확한 숫자·텍스트 밑그림을 만들면 결과가 크게 좋아짐
- 그 밑그림 이미지를 멀티모달 이미지 모델에 넣고 ‘위에 칠해달라’고 요청하는 방식임
- Gemini 3.0 Pro에서 100단계 보드게임 이미지의 숫자와 버튼 순서를 더 안정적으로 만든 사례가 소개됨

## 인사이트

이건 프롬프트를 더 길게 쓰는 문제가 아니라, 모델에게 시킬 일과 코드에게 시킬 일을 나누는 문제임. 생성형 모델이 약한 정밀 배치는 SVG가 맡기고, 모델은 스타일링을 맡기는 식이라 실제 제품 이미지 생성에도 바로 응용 가능함.