정확한 텍스트와 숫자를 위해 “밑그림” 사용하기

• underdrawing은 결정론적 도구로 숫자와 텍스트 위치가 들어간 밑그림 이미지를 먼저 만들고, 이미지 생성 모델이 그 위에 시각적 스타일을 입혀 정확도를 높이는 방식임
• 50개의 디딤돌을 나선형으로 배치하고 1부터 50까지 번호를 붙이는 과제에서 Gemini 3 Pro와 ChatGPT Images 2는 underdrawing 없이 숫자와 순서를 안정적으로 맞추지 못했음
• 같은 과제에 underdrawing을 함께 넣은 Gemini 3.0 Pro는 번호, 버튼 개수와 순서, 나선형 형태가 맞는 결과를 만들었음
• 구현은 SVG/HTML 같은 도구로 숫자와 텍스트를 원하는 위치와 방향에 배치해 이미지로 내보낸 뒤, 멀티모달 이미지 모델에 해당 이미지와 텍스트 프롬프트를 함께 넣는 식으로 가능함
• 이 방식은 매번 완벽하지는 않지만, 텍스트와 숫자 배치가 중요한 이미지 생성에서 결정론적 배치와 생성 모델의 시각적 표현 능력을 나눠 쓰게 해줌

핵심 맥락과 구현 방식

• 100단계 모험 보드 이미지를 만들려는 과정에서 나온 패턴이며, “윤곽을 주고 그 위에 칠하게 한다”는 방식으로 정리됨

• 결정론적 레이어

  • SVG/HTML은 시각적으로는 건조하지만 수학적 배치와 정밀도에 강함
  • 숫자와 텍스트를 원하는 위치와 방향에 맞춰 배치하고, 해당 픽셀이 포함된 이미지로 내보내면 됨
  • 형식은 SVG, Python, Mermaid 등 원하는 도구를 사용할 수 있음

• 생성형 레이어

  • 이미지 생성 모델은 시각적으로 뛰어난 결과를 만들지만 수학과 텍스트에서는 신뢰성이 낮음
  • Gemini 3.0 Pro처럼 이미지와 텍스트를 입력받아 이미지를 출력할 수 있는 멀티모달 이미지 모델에 underdrawing 이미지와 텍스트 프롬프트를 함께 넣음
  • 예시 1단계 프롬프트는 50개의 디딤돌을 반시계 방향 안쪽 나선으로 배치하고 각 돌에 1부터 50까지 연속 번호를 넣은 SVG를 만들게 함
  • 예시 2단계 프롬프트는 해당 이미지를 장인 초콜릿과 사탕이 나선형 경로로 놓인 저각도 기울어진 사진풍 클레이메이션 디오라마로 변환하게 함

• 자동화와 한계

  • Claude Code나 Codex로 각 단계를 대신 수행할 수 있음
  • 결과는 좋지만 매번 완벽하지는 않으며, 최종 결과물에서도 “71”은 보이지 않음