마이크로소프트(Microsoft)가 이미지 디자인을 분석해 웹 페이지를 구성하는 HTML/CSS 코드를 자동으로 생성하는 인공지능(AI) 모델 'AesCode'를 선보였습니다. 이 모델은 슬라이드, 포스터, 대시보드와 같은 시각 자료를 입력받아, 해당 이미지의 레이아웃과 스타일을 파악한 후, 사용자가 제공하는 프롬프트(prompt)를 기반으로 텍스트와 수치를 채워 넣습니다. 최종 결과물은 웹 브라우저에서 즉시 확인하고 수정할 수 있는 완전한 HTML 문서 형태로 제공됩니다.
AesCode는 이미지 생성 모델이 만든 참고 이미지에서 디자인 요소를 추출하고, 문구와 수치는 프롬프트를 통해 생성하도록 학습되었습니다. 특히, 결과물은 HTML 테이블이나 ECharts를 활용한 차트 등으로 구성되어 있어 데이터를 직접 확인하고 수정하기 용이합니다. 이 모델은 글자와 데이터의 정확성, 배치와 여백, 전반적인 디자인을 개별적으로 평가하여 강화 학습(reinforcement learning)에 반영하는 방식으로 성능을 고도화했습니다. 또한, 짧은 아이디어에서 참고 이미지와 요구사항을 만든 뒤, 내용을 수정하고 HTML을 생성하는 일련의 작업 흐름을 지원합니다. Qwen3-VL 기반의 8B와 32B 모델이 공개되었으며, 추론(inference) 시에는 참고 이미지 없이도 코드 생성이 가능합니다.
AesCode의 등장은 웹 개발 과정에서 디자이너와 개발자 간의 간극을 좁히고 생산성을 혁신할 잠재력을 가지고 있습니다. 디자이너는 시각적인 아이디어를 빠르게 코드로 구현해볼 수 있고, 개발자는 디자인을 코드로 옮기는 반복적인 작업을 줄여 더 복잡한 기능 구현에 집중할 수 있게 됩니다. 이는 웹 개발의 진입 장벽을 낮추고, 아이디어를 실제 제품으로 전환하는 속도를 가속화할 것으로 기대됩니다. 오픈소스(MIT, Apache 2.0 라이선스)로 공개된 코드와 모델은 개발자들이 직접 활용하고 개선할 수 있는 기회를 제공하며, 로컬 실행 및 API 연결을 지원하여 다양한 개발 환경에 통합될 수 있습니다.