[논문리뷰] LaTCoder: Converting Webpage Design to Code with Layout-as-Thought

링크: 논문 PDF로 바로 열기

저자: Yi Gui, Zhen Li, Zhongyi Zhang, Guohao Wang, Tianpeng Lv, Gaoyang Jiang, Yi Liu, Dongping Chen, Yao Wan, Hongyu Zhang, Wenbin Jiang, Xuanhua Shi, Hai Jin

핵심 연구 목표

본 연구는 멀티모달 대규모 언어 모델(MLLM)이 웹페이지 디자인을 코드로 변환하는 과정에서 레이아웃을 정확하게 유지하지 못하는 문제를 해결하고자 합니다. 특히 복잡한 레이아웃을 가진 실제 웹페이지 디자인의 경우 MLLM의 한계로 인해 레이아웃 정보가 손실되는 문제를 개선하는 것이 주된 목표입니다.

핵심 방법론

본 논문은 인간의 사고 과정에서 영감을 받은 Layout-as-Thought (LAT)이라는 새로운 접근 방식을 제안합니다. 이는 웹페이지 디자인을 레이아웃 인지 분할 (Layout-Aware Division) 알고리즘을 통해 여러 이미지 블록으로 나누고, 각 블록에 대해 CoT 기반 프롬프트를 사용하여 블록별 코드 합성 (Block-Wise Code Synthesis)을 수행합니다. 최종적으로 절대 위치 지정 방식 (Absolute Positioning Assembly)과 MLLM 기반 조립 (MLLM-Based Assembly)을 동적으로 선택하여 코드를 재조립함으로써 레이아웃 보존을 강화합니다.

주요 결과

LATCODER는 DeepSeek-VL2, Gemini, GPT-4o 등 다양한 MLLM 백본을 활용하여 Design2Code-HARD 및 새롭게 도입된 CC-HARD 벤치마크에서 평가되었습니다. DeepSeek-VL2 사용 시 TreeBLEU 스코어 66.67% 증가 및 MAE 38% 감소를 달성하여 직접 프롬프트 방식 대비 크게 개선되었습니다. 또한, 인간 선호도 평가에서 60% 이상의 경우에서 LATCODER가 생성한 웹페이지를 선호하는 것으로 나타나 방법론의 효과성을 입증했습니다.

AI 실무자를 위한 시사점

LATCODER는 MLLM 기반의 디자인-투-코드 시스템에서 레이아웃 정확도를 획기적으로 향상시킬 수 있는 실용적인 방법론을 제시합니다. 이는 복잡한 UI 디자인을 자동으로 코드화하는 데 있어 MLLM의 기존 한계를 극복하는 데 기여하며, 특히 제한된 컨텍스트 길이를 가진 모델(예: DeepSeek-VL2)에서도 효과적인 성능을 보여 범용적 활용 가능성이 높습니다. 이러한 CoT 기반의 분할-합성-조립 전략은 향후 다른 복잡한 생성 AI 태스크에도 응용될 수 있는 잠재력을 가집니다.

⚠️ 알림: 이 리뷰는 AI로 작성되었습니다.