웹프론트엔드 자동화를 위한 구조인식 및 대조학습 기반 와플 파인튜닝

초록

와플은 HTML 구조를 명시적으로 학습하도록 설계된 구조‑인식 어텐션과 UI 이미지와 HTML 코드 간의 시각‑텍스트 정렬을 위한 대조학습을 결합한 파인튜닝 기법이다. 두 가지 백본 MLLM(VLM‑WebSight, Moondream2)에 적용해 기존 방법 대비 HTML 매치, CW‑SSIM, CLIP, LLEM 등 주요 지표에서 최대 9 pp까지 향상시켰으며, 새로운 대규모 웹사이트‑HTML 데이터셋(231 940쌍)도 공개한다.

상세 분석

와플(WAFFLE)은 UI 디자인 이미지 → HTML 코드 자동 생성이라는 난제에 두 가지 핵심 문제를 동시에 해결한다. 첫 번째는 HTML의 트리 구조를 LLM이 효과적으로 인식하도록 돕는 것이며, 두 번째는 시각적 UI 변동과 텍스트 기반 코드 사이의 미묘한 차이를 모델이 구분하도록 하는 것이다. 이를 위해 저자들은 ‘구조‑인식 어텐션(structure‑aware attention)’을 제안한다. 기존 트랜스포머 디코더는 모든 이전 토큰에 균등하게 주의를 기울이지만, 와플은 각 토큰이 부모‑요소, 형제‑요소, 자기‑요소 세 종류의 어텐션 마스크만을 볼 수 있게 제한한다. 부모 어텐션은 스타일과 레이아웃이 상속되는 HTML 특성을 반영하고, 형제 어텐션은 같은 레벨에서 서로 영향을 주는 레이아웃 관계를 포착한다. 이러한 마스크는 디코더의 일부 어텐션 헤드(기본 ¼)만 적용해 사전 학습된 언어 모델의 일반화 능력을 유지하면서 구조 지식을 명시적으로 주입한다.

두 번째 기법은 ‘대조학습(contrastive learning)’이다. 저자들은 WebSight‑v0.1 데이터셋을 기반으로 실제 오류 패턴(색상 불일치, 레이아웃 누락 등)을 분석하고, 7가지 오류 유형에 대응하는 변이 규칙을 설계해 변형된 HTML/CSS와 그에 대응하는 렌더링 이미지를 생성한다. 각 변이 그룹은 k=4개의 (이미지, 코드) 쌍으로 구성되며, 이미지 패치를 비전 인코더에 입력해 패치 임베딩을 얻고, 코드 토큰을 구조‑인식 어텐션을 적용한 언어 모델에 입력해 토큰 임베딩을 얻는다. 패치와 토큰 임베딩을 평균해 각각 이미지와 코드의 전역 임베딩을 만든 뒤, 코사인 유사도를 기반으로 대조 손실 L_cl을 계산한다. 이와 동시에 전통적인 언어 모델링 손실 L_lm을 결합해 전체 손실 L_WAFFLE = L_lm + λ·L_cl (λ=0.1) 로 최적화한다. 결과적으로 모델은 시각적 미세 차이를 감지하고, 해당 차이에 대응하는 HTML 코드를 정확히 생성하도록 학습된다.

실험에서는 두 백본 모델에 와플을 적용했으며, 구조‑인식 어텐션 헤드 비율, λ 값, 변이 샘플 수 등 하이퍼파라미터를 상세히 탐색했다. 평가 지표는 HTML 매치(정확히 일치하는 토큰 비율), 구조 유사도 CW‑SSIM, 이미지‑텍스트 정합도 CLIP, 그리고 LLEM(코드‑렌더링 일관성)이다. WebSight‑Test(500개 합성 샘플)와 Design2Code(실제 웹사이트) 두 벤치마크에서 기존 파인튜닝 대비 각각 최대 9 pp, 0.0982, 32.99, 27.12 pp의 절대 향상을 기록했다. 특히 구조‑인식 어텐션만 적용했을 때도 평균 3‑4 pp 정도의 개선이 관찰됐으며, 대조학습과 결합했을 때 시너지 효과가 극대화되었다.

와플의 장점은 모델‑독립성이다. 구조‑인식 어텐션 마스크와 대조학습 목표는 기존 사전 학습된 멀티모달 모델에 추가적인 파라미터(DoRA LoRA)와 최소한의 학습 비용만으로 적용 가능하다. 또한 저자들이 공개한 231 940쌍의 웹페이지‑HTML 데이터셋은 향후 UI‑코드 자동화 연구에 귀중한 리소스로 활용될 수 있다. 한계점으로는 변이 규칙이 현재 HTML/CSS에 국한되어 있어, JavaScript 로직이나 동적 인터랙션을 포함한 복합 웹앱에는 직접 적용하기 어려울 수 있다. 또한 구조‑인식 어텐션을 디코더에만 적용함으로써 비전 인코더가 구조 정보를 직접 활용하지 못한다는 점도 향후 연구 과제로 남는다.

전반적으로 와플은 UI‑to‑HTML 변환이라는 특수 도메인에 맞춤형 구조 지식과 대조 학습을 성공적으로 도입함으로써, 멀티모달 LLM이 시각‑코드 정합성을 학습하는 새로운 패러다임을 제시한다.