WAFFLE: Finetuning Multi-Modal Models for Automated Front-End Development

이 논문은 HTML 의 계층적 구조와 UI 디자인 간의 간극을 해결하기 위해 구조 인식 어텐션 메커니즘과 대비 학습을 결합한 'Waffle'이라는 미세 조정 전략을 제안하여, 기존 방법보다 WebSight-Test 와 Design2Code 벤치마크에서 성능을 크게 향상시킨 다중 모달 모델을 소개합니다.

핵심

🧇 WAFFLE: 웹페이지를 그리는 '똑똑한 요리사'가 된 AI

이 논문은 **"디자인 그림을 보고 HTML 코드를 자동으로 만들어주는 AI"**를 더 똑똑하게 만드는 새로운 방법, WAFFLE을 소개합니다.

상상해 보세요. 여러분이 맛있는 와플 (Waffle) 을 만들고 싶지만, 레시피를 잘못 읽거나 재료를 섞는 순서를 헷갈리면 와플이 찌그러지거나 맛이 없겠죠? 이 논문은 AI 가 웹페이지라는 '와플'을 만들 때, 레시피 (HTML 코드) 를 더 정확하고 맛있게 만들 수 있도록 도와주는 비법을 알려줍니다.

---

🤔 왜 AI 는 웹페이지 만들기를 어려워할까요?

AI 가 그림을 보고 코드를 짜는 것은 마치 아기에게 건축 도면을 보고 집을 짓게 하는 것과 비슷합니다. 두 가지 큰 문제가 있었습니다.

1. 구조를 모릅니다 (레시피의 계층): HTML 은 나무처럼 계층 구조를 가집니다. 부모 나무가 흔들리면 자식 나무도 흔들리지만, 옆에 있는 다른 나무는 흔들리지 않죠. 기존 AI 는 이 '가족 관계'를 잘 이해하지 못해, 한 부분을 고치면 엉뚱한 곳까지 망가뜨리는 실수를 자주 했습니다.
2. 눈과 손이 안 맞습니다 (시각 vs 텍스트): AI 는 그림을 보고 "여기 빨간색이야"라고 말해야 하는데, 코드로는 "background-color: red"라고 써야 합니다. 그림에서 아주 미세하게 색이 다르거나 크기가 조금만 달라도, AI 는 "아, 똑같네!"라고 착각해서 똑같은 코드를 뱉어내곤 했습니다.

---

🍳 WAFFLE 의 두 가지 비밀 무기

이 문제를 해결하기 위해 연구자들은 WAFFLE이라는 새로운 훈련 방법을 개발했습니다.

1. 🏗️ '구조 인식 어텐션 (Structure-Aware Attention)': 가족 관계 지도 그리기

기존 AI 는 코드를 읽을 때 모든 단어를 똑같이 중요하게 생각했습니다. 하지만 WAFFLE 은 HTML 코드의 가족 관계도를 그려줍니다.

• 비유: 집을 지을 때, '거실'을 고치려면 '벽'을 먼저 봐야 하고, '벽'은 '기둥'에 달려 있어야 한다는 걸 AI 가 명확히 알게 해줍니다.
• 원리: AI 가 코드를 쓸 때, 부모 요소 (Parent), 형제 요소 (Sibling), **자기 자신 (Self)**에만 집중하도록 훈련시켰습니다. 마치 "너는 너의 아빠와 형제에게만 귀를 기울이고, 옆집 아저씨 이야기는 무시해!"라고 가르치는 것과 같습니다. 덕분에 AI 는 구조를 훨씬 더 잘 이해하게 되었습니다.

2. 🆚 '대조 학습 (Contrastive Learning)': 미묘한 차이를 구별하는 눈

기존 AI 는 그림이 조금만 달라져도 "아, 똑같네!"라고 생각했습니다. WAFFLE 은 미세한 차이를 찾아내는 훈련을 시켰습니다.

• 비유: 두 개의 와플을 보여줍니다. 하나는 시럽이 조금 더 많고, 하나는 구멍이 하나 더 뚫려 있습니다. "이 두 와플은 다른 거야!"라고 AI 에게 가르치는 것입니다.
• 원리: 아주 비슷하지만 다른 그림과 그에 맞는 서로 다른 코드를 짝지어 보여줍니다. AI 가 "아, 이 그림은 저 그림보다 시럽 (색상) 이 더 많구나!"라고 깨닫게 하여, 그림의 작은 변화가 코드에서 어떻게 달라지는지 정확히 학습하게 합니다.

---

📊 결과는 어떨까요? (와플 맛보기)

연구팀은 이 새로운 방법 (WAFFLE) 으로 훈련된 AI 를 테스트했습니다. 결과는 정말 놀라웠습니다.

• 정확도 향상: 기존 방법보다 9% 이상 더 정확한 코드를 만들었습니다. (예: 100 점 만점에 91 점 → 100 점)
• 구조 완벽: 웹페이지의 모양이 원본과 거의 똑같이 만들어졌습니다.
• 비교: 유명한 상용 AI (GPT-4o 등) 보다도 더 좋은 성적을 낸 경우가 많았습니다. 특히 복잡한 디자인일수록 WAFFLE 이 더 잘했습니다.

💡 결론

WAFFLE은 AI 에게 "코드는 그냥 글자가 아니라, 구조를 가진 가족이고, 그림의 미세한 차이가 중요하다는 것"을 가르친 것입니다.

이제 AI 는 웹디자인을 보고 코드를 작성할 때, 더 이상 엉뚱한 실수를 하지 않고, 마치 숙련된 요리사처럼 원본의 맛과 모양을 완벽하게 재현해 낼 수 있게 되었습니다. 앞으로는 웹 개발자들이 디자인을 그리는 것만으로도, AI 가 거의 완벽하게 웹사이트를 만들어줄 날이 머지않은 것 같습니다! 🚀🌐

기술 요약

1. 문제 정의 (Problem)

웹 개발에서 UI 디자인 (이미지) 을 기능적인 웹페이지 (HTML/CSS 코드) 로 변환하는 작업은 프론트엔드 개발의 핵심이지만, 다음과 같은 두 가지 주요 과제로 인해 자동화가 어렵습니다.

1. HTML 의 계층적 구조 이해 부족: HTML 은 부모 - 자식 관계, 형제 (Sibling) 요소 간의 레이아웃 상호작용 등 복잡한 계층 구조를 가집니다. 기존 대규모 언어 모델 (LLM) 은 이러한 도메인 지식 (Domain Knowledge) 을 효과적으로 학습하지 못해, 구조적으로 잘못된 코드를 생성하거나 레이아웃 변경 시 영향을 받지 않아야 할 부분까지 영향을 미치는 오류를 범합니다.
2. 시각적 미세한 차이와 텍스트 코드의 간극: UI 디자인 이미지에서 발생하는 미세한 레이아웃 변화 (예: 여백, 색상, 그리드 비율) 는 생성된 HTML 코드의 내용을 크게 바꿀 수 있습니다. 그러나 기존 멀티모달 모델 (MLLM) 은 이러한 미세한 시각적 차이를 구별하지 못해, 서로 다른 UI 이미지에도 동일한 코드를 생성하는 경향이 있습니다.

2. 제안 방법론: WAFFLE (Methodology)

저자들은 위 문제를 해결하기 위해 WAFFLE이라는 새로운 파인튜닝 파이프라인을 제안합니다. 이는 두 가지 핵심 기법을 결합합니다.

A. 구조 인식 어텐션 (Structure-Aware Attention)

HTML 의 구조적 특성을 모델이 학습하도록 돕기 위해 어텐션 메커니즘을 수정했습니다.

• 동작 원리: 토큰이 이전 코드 세그먼트 중 가장 관련성 높은 세 가지 유형 (부모 요소, 형제 요소, 자기 자신) 에만 집중하도록 어텐션 마스크를 설계했습니다.
  • Parent-Attention: 모든 자식 요소는 부모의 스타일과 구조를 상속받으므로 부모 토큰에 집중합니다.
  • Sibling-Attention: 같은 부모 하위의 형제 요소들은 서로의 레이아웃에 영향을 주므로 선행 형제 토큰에 집중합니다.
  • Self-Attention: 동일 요소 내의 토큰들 간의 관계를 유지합니다.
• 구현: 전체 어텐션 헤드의 1/4 에만 이 구조 인식 어텐션을 적용하여, 나머지 3/4 는 사전 학습된 일반 지식을 유지하도록 하여 효율성을 높였습니다.

B. 대비 학습 (Contrastive Learning)

모델이 UI 이미지와 HTML 코드 간의 미세한 차이를 학습하도록 유도합니다.

• 데이터 생성 (Mutation): WebSight-v0.1 데이터셋을 기반으로 HTML/CSS 속성 (색상, 크기, 마진, 폰트 등) 을 실제 오류 빈도에 비례하여 변형 (Mutation) 한 '대조군 (Contrastive)' 데이터를 생성했습니다.
• 학습 목표: 시각적 차이가 있는 UI 이미지 쌍과 이에 대응하는 HTML 코드 쌍을 학습시켜, 모델이 시각적 특징과 텍스트 코드의 매칭을 정교하게 조정하도록 합니다.
• 손실 함수: 언어 모델링 손실 ($L_{lm}$) 과 대비 학습 손실 ($L_{cl}$) 을 결합하여 최적화합니다. $L_{cl}$은 대응되는 이미지와 코드의 임베딩 간 유사도를 최대화하고, 비대응 쌍의 유사도를 최소화합니다.

3. 주요 기여 (Key Contributions)

1. 구조 인식 어텐션 설계: HTML 의 계층적 구조 (부모, 형제, 자기 자신) 를 명시적으로 학습하도록 하여 MLLM 의 구조 이해도를 향상시켰습니다.
2. 대비 학습 적용: UI 이미지의 미세한 시각적 차이와 HTML 코드의 세부 사항을 정렬 (Align) 시켜, 모델이 시각적 뉘앙스를 코드 생성에 반영하도록 했습니다.
3. 새로운 데이터셋 구축: 231,940 개의 웹페이지와 HTML 코드 쌍으로 구성된 새로운 데이터셋을 생성하여 향후 웹 MLLM 연구를 지원했습니다.
4. 모델 독립적 파이프라인: WAFFLE 은 특정 모델에 종속되지 않으며, 어떤 MLLM 에든 적용 가능한 범용 파인튜닝 전략임을 입증했습니다.

4. 실험 결과 (Results)

저자들은 VLM-WebSight와 Moondream2 두 가지 백본 모델을 사용하여 WebSight-Test(합성 데이터) 와 Design2Code(실제 웹사이트 데이터) 에서 실험을 수행했습니다.

• 성능 향상: 기존 표준 파인튜닝 (Standard FT) 대비 모든 지표에서 유의미한 개선을 보였습니다.
  • HTML Match: 최대 9.00%p 향상 (구조적 정확도).
  • CW-SSIM: 0.0982 향상 (이미지 구조적 유사도).
  • CLIP Score: 32.99 향상 (시각 - 텍스트 정렬).
  • LLEM: 27.12%p 향상 (저수준 요소 매칭).
• 상업적 모델 대비: WAFFLE 로 파인튜닝된 VLM-WebSight 는 GPT-4o 보다 HTML Match 에서 25.60%p, CW-SSIM 에서 0.2339 더 높은 점수를 기록하며, 단순 데이터뿐만 아니라 복잡한 실제 데이터에서도 경쟁력을 입증했습니다.
• 강건성 (Robustness): 중간 생성 단계에서 오류가 발생했을 때, 구조 인식 어텐션을 적용한 모델은 성능 저하가 4.34% 로 제한된 반면, 적용하지 않은 모델은 27.55% 나 급격히 하락하여 WAFFLE 이 오류 복원력이 뛰어나다는 것을 보여줍니다.

5. 의의 및 결론 (Significance)

이 논문은 UI-to-HTML 코드 생성 작업에서 기존 MLLM 이 직면한 구조적 이해 부족과 시각적 미세 차이 인식 실패라는 두 가지 근본적인 문제를 해결했습니다.

• 기술적 의의: HTML 의 도메인 특성을 어텐션 메커니즘에 직접 통합하고, 대비 학습을 통해 시각 - 텍스트 정렬을 강화한 것은 프론트엔드 자동화 분야에서 새로운 패러다임을 제시합니다.
• 실용적 가치: 생성된 코드의 구조적 정확도와 시각적 유사도가 크게 향상되어, 실제 프론트엔드 개발 프로세스에서 UI 디자인을 코드화하는 작업의 효율성을 높일 수 있습니다.
• 확장성: WAFFLE 은 모델에 구애받지 않는 범용 기법으로, 향후 다양한 멀티모달 모델에 적용되어 웹 개발 자동화 기술의 발전에 기여할 것으로 기대됩니다.