AI 이미지에서 글자·숫자 안 틀리게 만드는 ‘언더드로잉’ 꼼수

• AI 이미지 모델이 여전히 글자와 숫자에 약하다는 문제를 꽤 현실적인 방법으로 우회한 글임

  • 겉보기엔 멋진 이미지를 만들지만, 막상 숫자 순서나 버튼 개수, 텍스트를 읽어보면 깨지는 경우가 많음
  • 글쓴이는 Gemini 3.0 Pro에 한 단계를 더 붙여서, 100단계 어드벤처 보드 이미지의 숫자와 구조를 훨씬 안정적으로 만들었다고 함

• 방법 이름은 ‘언더드로잉(underdrawing)’임. 쉽게 말하면 정확한 밑그림을 먼저 깔아주는 방식임

  • 1단계는 결정론적 도구가 맡음. SVG, HTML, 파이썬, 머메이드 같은 걸로 숫자와 텍스트를 정확한 위치와 방향에 배치함
  • 2단계는 생성형 이미지 모델이 맡음. 그 밑그림 이미지를 입력으로 넣고, 프롬프트로 “이 위에 그려줘”라고 시키는 식임

• 글쓴이가 강조하는 원리는 단순함. 결정론적 기계와 생성형 기계가 잘하는 일을 나눠야 함

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

• 비교 결과도 꽤 직관적임

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

• 실제 워크플로는 어렵지 않음

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

• 물론 100% 완벽한 마법은 아님

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

---

기술 맥락

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

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

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

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