스크린코더: 모듈형 다중모달 에이전트를 통한 프론트엔드 자동화를 위한 시각적 입력에서 코드 생성으로의 발전

사용자 인터페이스(UI) 디자인을 프론트엔드 코드로 자동 변환하는 기술은 소프트웨어 개발 속도를 가속화하고 디자인 워크플로우의 민주화에 큰 잠재력을 지닌다. 최근 대규모 언어 모델(LLM)은 텍스트 기반 코드 생성 측면에서 상당한 진전을 보였지만, 기존의 많은 접근 방식은 자연어 프롬프트에만 의존하여 공간적 레이아웃과 시각적 디자인 의도를 충분히 포착하지 못하는 한계가 있다. 반면 실제 UI 개발은 본질적으로 다중 모달(multimodal)적이며, 시각적 스케치나 모크업에서 시작되는 경우가 많다. 이러한 격차를 해결하기 위해, 우리는 세 가지 해석 가능한 단계—지표화(Grounding), 계획(Planning), 생성(Generation)—를 거쳐 UI-to-code 변환을 수행하는 모듈형 다중 에이전트 프레임워크를 제안한다. 지표화 에이전트는 시각-언어 모델(VLM)을 활용하여 UI 컴포넌트를 탐지하고 레이블링하며, 계획 에이전트는 프론트엔드 엔지니어링 전문 지식을 기반으로 계층적인 레이아웃을 구성하고, 생성 에이전트는 적응형 프롬프트 기반 합성 방식을 통해 HTML/CSS 코드를 생성한다. 이 설계는 종단 간(end-to-end) 블랙박스 방식에 비해 강건성, 해석 가능성, 정확도 측면에서 향상된 성능을 제공한다. 또한 본 프레임워크를 확장하여 대규모 이미지-코드 쌍을 자동 생성하는 확장 가능한 데이터 엔진으로 구현하였다. 이러한 합성 예시를 활용해 오픈소스 VLM을 미세 조정하고 강화함으로써, UI 이해 능력과 코드 품질에서 두드러진 성과를 달성하였다. 광범위한 실험 결과는 본 연구 방법이 레이아웃 정확도, 구조적 일관성, 코드 정확성 측면에서 최신 기술 수준(SOTA)의 성능을 달성함을 입증한다. 본 연구의 코드는 공개되어 있으며, 다음 링크에서 확인할 수 있다: https://github.com/leigest519/ScreenCoder.