[GeekNews 요약] AesCode: 이미지 디자인을 참조하여 HTML/CSS 생성하는 AI 모델 공개
38
설명
Microsoft에서 개발한 AesCode는 텍스트 프롬프트와 이미지 생성 모델을 결합하여 시각적으로 매력적인 HTML/CSS 코드를 생성하는 새로운 AI 모델입니다. 이 모델은 기존 코드 생성 모델의 한계를 극복하고, 디자인적 요소를 코드 생성 과정에 통합하여 사용자에게 편집 가능하고 검증 가능한 인포그래픽을 제공합니다.
AesCode는 단순히 텍스트 지침을 따르는 것을 넘어, 이미지 생성 모델이 제공하는 미적 가이드라인을 학습하여 코드의 레이아웃, 색상, 계층 구조 등을 최적화합니다. 이를 통해 사용자는 시각적으로 완성도 높은 결과물을 얻으면서도 코드의 수정 및 검증을 용이하게 할 수 있습니다.
본문에서는 AesCode의 작동 방식, 성능 평가 결과, 그리고 향후 전망에 대해 자세히 살펴보겠습니다.
### 배경 설명
정보 시각화는 복잡한 데이터를 이해하기 쉽게 전달하는 데 필수적입니다. 슬라이드, 포스터, 대시보드와 같은 시각적 결과물을 코드로 생성하는 것은 구조화되고 편집 가능하며 검증 가능하다는 장점이 있습니다. 그러나 기존의 코드 생성 모델은 시각적 결과물의 미적 완성도 측면에서 한계를 보여왔습니다. 모델이 콘텐츠 요구사항을 충족하더라도 시각적으로 시대에 뒤떨어지거나 구성이 좋지 않은 디자인을 생성할 수 있었습니다.
반면, 이미지 생성 모델은 시각적으로 매력적인 페이지를 구성하는 데 강점을 가지지만, 텍스트, 숫자, 논리적 관계를 정확하게 렌더링하는 데 어려움을 겪는 경우가 많습니다. 이러한 상반된 강점과 약점을 가진 두 가지 접근 방식을 결합하려는 시도가 바로 AesCode의 배경입니다.
AesCode는 동일한 프롬프트에서 생성된 참조 이미지를 코드 모델의 미적 가이드로 활용합니다. 프롬프트는 콘텐츠의 진실 공급원 역할을 유지하며, 참조 이미지는 가능한 레이아웃과 스타일을 제공합니다. 단순히 참조 이미지를 입력으로 제공하는 것만으로는 충분하지 않으며, 기존의 비전-언어 모델은 참조 이미지의 환각적인 콘텐츠를 복사하거나 레이아웃을 무시할 수 있습니다. AesCode는 그래프 구조의 지도 학습과 분리된 교차 모달 보상을 통해 의미론적 요구사항과 시각적 단서를 명시적으로 분리하도록 모델을 학습시킵니다. 이는 2026년 arXiv에 발표된 논문 "AesCode: Aesthetic Code Generation with Decoupled Cross-Modal Rewards"를 통해 상세히 소개되었습니다.
### 1. AesCode란 무엇인가?
AesCode는 텍스트 프롬프트와 이미지 생성 모델을 결합하여 HTML/CSS 코드를 생성하는 AI 모델입니다. 이 모델의 핵심 목표는 사용자가 제공한 프롬프트의 콘텐츠 요구사항을 충족하면서도, 이미지 생성 모델이 제공하는 미적 가이드라인을 반영하여 시각적으로 매력적이고 편집 가능한 인포그래픽을 생성하는 것입니다. AesCode는 특히 슬라이드, 포스터, 대시보드와 같이 정보 밀도가 높은 시각적 결과물을 코드로 생성하는 데 중점을 둡니다. 이를 통해 생성된 코드는 구조화되어 있으며, 사용자가 쉽게 수정하고 검증할 수 있습니다.
### 2. AesCode의 작동 방식
AesCode는 참조 이미지로부터 학습하기 위해 세 가지 주요 단계를 거칩니다. 첫째, 목표를 디자인 그래프로 표현합니다. 여기서 노드는 텍스트, 차트, 테이블, 카드, 영역 및 의미론적 이미지 슬롯을 설명하며, 엣지는 포함, 정렬, 순서 및 연결을 캡처합니다. 둘째, 각 속성을 올바른 보상으로 라우팅합니다. 6가지 결정론적 검증기가 실행, 정확한 텍스트, 경계, 테이블 및 차트 데이터, 의미론적 레이아웃, 공백을 점수화합니다. 샘플별 시각적 그래프 루브릭은 나머지 시각적 속성을 그래프 기반의 예/아니오 질문으로 평가합니다. 사진 및 일러스트레이션 슬롯의 경우, 묘사된 콘텐츠보다는 기하학적 구조와 배치를 확인합니다. 셋째, 보상을 결합하기 전에 정규화합니다. GDPO는 각 채널을 롤아웃 그룹 내에서 정규화하여 밀집된 규칙 보상이 희소한 시각적 피드백을 압도하지 않도록 합니다. 이는 안정적이지 않은 단일 점수로 축소하지 않고 정확성, 공간 계획 및 시각적 품질에 대한 표적화된 지도를 생성합니다.
### 3. 성능 평가 결과
AesCode는 300개의 인포그래픽 샘플에 대해 평가되었습니다. 평가 결과, AesCode-32B 모델은 참조 이미지 없이도 95.34%의 정확도로 텍스트를, 97.27%의 정확도로 경계를 검증하는 등 전반적으로 우수한 성능을 보였습니다. 참조 이미지를 함께 사용했을 때, AesCode-32B는 85.76%의 콘텐츠 정확도, 90.58%의 레이아웃 정확도, 55.99%의 스타일 정확도를 달성하며, 총점 85.89%를 기록했습니다. 이는 GPT-5.5, Claude Opus 4.8과 같은 다른 최신 모델들과 비교했을 때도 경쟁력 있는 결과입니다. 특히, 참조 이미지를 제거했을 때 AesCode-8B의 시각적 성능은 1.0 포인트만 하락한 반면, 백본 모델은 19.6 포인트 하락하여 AesCode의 참조 이미지 활용 능력이 뛰어남을 보여줍니다. 또한, 그래프 기반 루브릭 질문이 전체적인 VLM 점수나 직접적인 루브릭 작성보다 우수하며, 채널별 정규화는 추가적인 시각적 이득을 가져오는 것으로 나타났습니다.
### 4. 환경 설정 및 사용 방법
AesCode를 사용하기 위해서는 Python 3.10, CUDA 12.6 환경과 8개의 NVIDIA B200 GPU가 필요합니다. GitHub에서 AesCode 저장소를 클론하고 requirements.txt 파일을 통해 필요한 라이브러리를 설치해야 합니다. 렌더링 및 OCR을 위해 Playwright와 PaddleOCR이 필요하며, 폰트 관련 시스템 라이브러리도 설치해야 합니다. 학습에는 verl 라이브러리의 특정 커밋 버전과 패치가 필요하며, 이를 위해 Git 저장소를 통해 설치하고 패치를 적용하는 과정이 포함됩니다. 모델 서빙은 vLLM을 사용하여 포트 8000에서 실행할 수 있으며, `microsoft/AesCode-32B` 또는 `microsoft/AesCode-8B` 체크포인트를 지정할 수 있습니다. 예제 실행은 `examples/hospital_dashboard/` 디렉토리에서 제공되며, `inference.generate` 모듈을 사용하여 HTML 파일을 생성할 수 있습니다. 또한, `inference.from_idea` 모듈을 통해 간단한 아이디어로부터 프롬프트와 참조 이미지 쌍을 생성하고, 이를 편집하여 AesCode 모델로 코드를 생성하는 과정도 지원합니다.
### 가치와 인사이트
AesCode의 등장은 생성형 AI를 활용한 웹 개발 및 디자인 분야에 중요한 시사점을 제공합니다. 기존의 텍스트 기반 코드 생성 모델이 콘텐츠의 정확성은 높였지만 디자인적 완성도에 한계를 보였던 반면, AesCode는 이미지 생성 모델과의 결합을 통해 시각적 완성도를 비약적으로 향상시켰습니다. 이는 디자이너와 개발자 간의 협업 방식을 변화시킬 잠재력을 지닙니다. 디자이너는 시각적 가이드라인을 제공하고, AesCode는 이를 바탕으로 편집 가능한 코드를 생성함으로써 디자인 구현 시간을 단축할 수 있습니다. 또한, 생성된 코드가 검증 가능하다는 점은 실제 서비스 적용 시 신뢰성을 높여줍니다. 특히, AesCode는 단순히 이미지를 모방하는 것이 아니라, 이미지의 '미적 가이드'를 학습하여 새로운 디자인을 생성한다는 점에서 차별화됩니다. 이는 웹사이트, 앱 UI, 마케팅 자료 등 다양한 시각적 콘텐츠 제작에 있어 효율성과 창의성을 동시에 증대시킬 수 있는 강력한 도구가 될 것입니다.
### 기술·메타
* **라이선스**: MIT License
* **주요 기술 스택**: Python 3.10, CUDA 12.6, NVIDIA B200 GPU, Playwright, PaddleOCR, verl, GDPO, Qwen3-VL
* **저장소**: [https://github.com/microsoft/AesCode](https://github.com/microsoft/AesCode)
* **관련 논문**: "AesCode: Aesthetic Code Generation with Decoupled Cross-Modal Rewards" (arXiv:2610.18860, 2026)
### 향후 전망
AesCode와 같은 기술의 발전은 향후 웹 디자인 및 개발 생태계에 상당한 변화를 가져올 것으로 예상됩니다. 이미지 생성 모델의 발전과 더불어 AesCode의 성능 또한 지속적으로 향상될 것이며, 이는 더욱 복잡하고 정교한 디자인의 자동 생성으로 이어질 수 있습니다. 경쟁 구도 측면에서는 Microsoft뿐만 아니라 다른 빅테크 기업 및 스타트업들도 유사한 기술 개발에 뛰어들 가능성이 높습니다. 특히, 멀티모달 AI 기술의 발전은 이러한 추세를 가속화할 것입니다.
규제 측면에서는 생성된 콘텐츠의 저작권 문제, AI 모델의 편향성 문제 등이 지속적으로 논의될 수 있습니다. 또한, AesCode와 같은 도구가 보편화될 경우, 웹 디자이너 및 프론트엔드 개발자의 역할 변화에 대한 사회적 논의도 필요할 것입니다. 그러나 이러한 도전 과제에도 불구하고, AesCode는 디자인과 코드 생성의 경계를 허물고, 사용자에게 더욱 풍부하고 접근 가능한 시각적 경험을 제공하는 데 기여할 것으로 기대됩니다. 향후 AesCode는 더욱 다양한 형태의 시각적 콘텐츠 생성으로 확장될 수 있으며, 개인화된 웹 경험 구축에도 중요한 역할을 할 수 있을 것입니다.
📝 원문 및 참고
- 원문: [링크 열기](https://github.com/microsoft/AesCode)
- GeekNews 토픽: [보기](https://news.hada.io/topic?id=35322)
---
출처: GeekNews ([원문 링크](https://github.com/microsoft/AesCode))
이 글에 대한 한 줄 의견
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 로그인하면 바로 의견을 남길 수 있습니다.