AesCode가 이미지 참조를 미학 사전으로 삼아 코드 생성의 시각 품질을 높인다

무엇인가

슬라이드, 포스터, 대시보드처럼 정보가 빽빽한 시각물을 코드로 생성하면 결과물이 구조화되고 편집 가능하며 검증 가능하다는 장점이 있다. 문제는 코드 모델이 캔버스를 보지 못한다는 점이다. 레이아웃과 위계, 색이 한 줄씩 선언되기 때문에 내용 제약은 만족해도 시각적으로 낡아 보이는 결과가 나온다. 반대로 이미지 생성기는 시각 디자인은 뛰어나지만 텍스트·숫자·논리 관계를 자주 잘못 그려서 편집도 검증도 불가능한 래스터를 낸다. 기존 image-to-code 방식들은 입력 이미지를 픽셀 단위 정답으로 취급했는데, 생성된 참조 이미지에는 환각 콘텐츠가 섞여 있으므로 이 방식은 모델에게 오류를 베끼게 하고 정당한 디자인 변형을 벌점으로 깎는다. AesCode는 같은 프롬프트에서 생성한 이미지를 정답이 아니라 미학적 사전으로만 쓰고, 내용은 프롬프트를 엄격히 따르도록 분리한다.

어떻게 동작하나

이 분리를 가능하게 하는 것이 디자인 그래프다. 감독 목표를 G_tgt = (V, E, X_V, r) = Φ(p, I_ref)로 정의하는데, 루트 r은 페이지 수준 속성을 담고 모든 최상위 요소를 포함한다. 나머지 노드는 텍스트·이미지·차트·표·배지 같은 원자 요소와 region·card·panel·list·group 같은 컨테이너로 구성되며, 서로 교환 가능한 형제가 3개 이상이면 count 속성을 가진 하나의 group 노드로 접힌다. 속성 X_V는 내용·기하·외형(차트와 표의 구조화 데이터 포함)을 기록하고, 각 엣지는 포함·정렬·순서·인접·의미 연결이라는 관계 유형을 갖는다. 생성된 코드 c와 그 렌더링 Î에서 후보 요소를 파싱해 G_hat = Ψ(c, Î)를 만들고, 목표 그래프와 속성 단위로 비교해 보상을 뽑는다. 이 구조 덕분에 프롬프트 요구사항과 참조 이미지 단서가 서로 다른 속성을 독립적으로 제약하고, 어떤 속성이 틀렸는지 귀속시킬 수 있다.

무엇과 다른가

보상은 7개 채널로 분리된다. 코드·DOM·OCR·렌더링 픽셀에서 계산하는 결정적 검증기가 6개다. Execution은 렌더 가능성과 치명 오류를, Text는 필수 문자열을, Boundary는 캔버스 포함 여부와 종횡비 일치를 검사한다. Table/Chart는 HTML 표와 ECharts 차트의 구조·서브타입·데이터를 파싱해 정적 이미지로 대체한 답안이 점수를 받지 못하게 막는다. Semantic Layout은 참조와 후보의 OCR 텍스트 블록을 매칭해 정규화된 위치 일치를 채점하고, Whitespace는 거친 스케일과 미세 스케일에서 비배경 점유를 비교해 여백 배분을 잡는다. 나머지 속성은 VLM 판정 채널인 Visual Graph Rubric이 맡는다. 목표 그래프에서 샘플별 예/아니오 질문 목록을 만들어 각 질문을 노드·속성·관계·서브그래프에 바인딩하고, 후보 렌더링에 대한 통과율을 s_vgr로 쓴다. 참조 이미지의 단서는 이 고정된 질문을 통해서만 개입하며, VGR은 학습에만 쓰인다.

어떻게 쓰나

학습은 콜드스타트 SFT 뒤에 GDPO(Group reward-Decoupled Normalization Policy Optimization)로 진행한다. 각 프롬프트-참조 쌍에 대해 여러 코드 롤아웃을 샘플링하고 렌더링·파싱해 7차원 보상 벡터를 얻는다. 채널마다 적용 여부를 나타내는 마스크가 있고, 적용되는 롤아웃 집합에서 평균과 표준편차를 구해 채널별로 따로 정규화한 다음 적용된 채널들의 이점을 평균해 하나의 A_i로 만든다. 이렇게 하는 이유는 명시돼 있다. 보상을 합친 뒤 정규화하면 밀도 높고 거의 포화된 규칙 보상이 희소한 미학 보상을 압도해 학습 신호가 어긋나기 때문이다. 데이터는 사람이 디자인한 슬라이드·포스터·대시보드·웹페이지 약 18,000개 풀을 CLIP 이미지 특징으로 클러스터링하고, GPT-5.4-mini가 시각 스타일을 지정하지 않은 채 필요한 내용만 담은 생성 프롬프트를 추론한다. SFT에는 GPT-5.5와 원본 사람 디자인을 짝지은 3,000개 데모를 쓰고, RL에는 약 8,000개 프롬프트에 GPT-Image-2가 만든 합성 참조를 붙인다.

전제와 한계

평가는 300개 프롬프트 벤치마크에서 Rule, Visual, 그리고 둘의 평균인 Overall로 이뤄진다. Rule은 Text·Boundary·Table/Chart 평균이고, Visual은 프롬프트 요구사항에서 뽑은 체크리스트로 Content(필수 요소 존재와 완전성), Layout(조직·관계·충돌), Style(위계·타이포그래피·색·컴포넌트 완성도)을 채점하며 각 체크리스트는 평균 35.8문항이다. 결과는 Qwen3-VL-8B 백본의 Overall이 51.93에서 82.94로, 32B가 61.10에서 85.89로 올랐다. 같은 참조를 준 동일 규모 Qwen3-VL 베이스라인 대비 Visual이 8B는 31.1%포인트, 32B는 22.4%포인트 개선됐고, 32B는 Table/Chart에서 90.37을 기록했다. 다만 Style은 모든 모델에서 60% 미만인 공통 병목으로 남는데, 이 지표는 추가 시각 수정 없이 제작에 넘길 수 있는 수준일 때만 점수를 준다. Design2Code, SlidesBench, GDB/lica 세 외부 벤치마크에서는 32B가 백본 대비 14개 지표 전부에서 개선됐고, 슬라이드 레이아웃·색과 NIMA·FID·색 조화 같은 디자인 민감 지표에서 이득이 컸다. 반면 유사도 지표가 거의 포화된 Design2Code에서는 이득이 작았다.

어블레이션에서 참조의 역할이 분명히 드러난다. 추론 시점에만 참조를 제거하면 AesCode-8B의 Visual은 1.00점 떨어지지만 백본은 19.55점, GPT-5.5는 10.04점 떨어진다. 참조 기반 보상만으로 학습해도 참조 없이 추론한 prompt-only Visual이 25.17에서 69.71로 오르는데, 이는 같은 조건의 참조 조건부 학습보다 5.09점 낮아 참조가 입력 조건으로서 갖는 가치를 확인해 준다. 학습 구성에서는 RL이 이득의 대부분을 만들고 SFT가 더 강한 초기화를 제공해 같은 RL 예산에서 Overall이 77.97에서 82.94로 올랐으며, GDPO는 스칼라 GRPO보다 Visual을 5.12점 더 올렸다. 보상 설계 비교에서는 코드 정확성만 쓸 때 66.59, Layout/Whitespace를 더하면 68.12, CLIP은 70.49, 홀리스틱 VLM 점수는 68.91, VGR은 75.80이었다. 그래프 없이 질문을 직접 작성하면 Visual이 72.61로 내려간다. 블라인드 인간 평가에서 VGR은 89.3%, Visual 체크리스트는 93.3%가 인간 다수 판단과 일치했고, Visual 점수는 인간의 페어와이즈 선택과 80.66% 일치했다. AesCode-32B는 GPT-5.5보다 Content 만족도가 높았고(86.50% 대 83.47%) 미학 품질은 동등했다(평균 차 -0.15, 95% CI -0.34~0.03).

실무에서 이 논문이 주는 시사점은 참조 이미지를 조건으로 넣는 것만으로도 기존 모델의 시각 품질이 오른다는 점, 그리고 표는 HTML table, 차트는 ECharts로 출력 형식을 제약하면 검증 가능한 보상을 설계할 수 있다는 점이다. 다만 학습에 쓰는 VGR은 추론 시 필요 없고, 코드 생성 외에 브라우저 렌더링·DOM 파싱·OCR·차트 파싱을 포함한 평가 파이프라인이 함께 있어야 한다. 참조 이미지는 사실이나 구조가 틀릴 수 있는 비권위적 단서로 취급해야 하며, 평가는 하나의 정답이 아니라 여러 유효 디자인을 허용하도록 설계해야 한다.

저자들이 밝힌 한계는 세 가지다. 첫째, 캔버스 오버플로가 남아 있는데 코드 생성이 최종 픽셀 기하를 안정적으로 예측하지 못하며 이는 시각 기반 반복 정제가 필요한 미래 과제다. 둘째, 관계 구조가 개별 요소보다 어렵다. 내용 관계를 이해해 공간적 연결로 렌더링해야 하는데 관계 수준 보상이 희소하고 실패한 엣지를 국소화하지 못한다. 셋째, 의미를 담은 아이콘 같은 요소가 일반적인 마크로 퇴화하는데, 의미에 근거한 세밀한 SVG 드로잉이 필요하다. 여기에 더해 참조 이미지가 사실적·구조적으로 틀릴 수 있다는 전제, 그리고 VGR이 학습 전용이며 참조 단서가 고정된 질문을 통해서만 개입한다는 설계상의 제약도 함께 읽어야 한다.