Waffle : UI 디자인을 HTML 코드로 바꿔주는 기술

1.서론

1.1.기존 방식의 문제점

웹 개발에서 UI(사용자 인터페이스) 디자인을 HTML 코드로 바꾸는 작업은 초보자와 전문가 모두에게 어려운 일입니다. HTML은 부모와 자식 관계로 복잡하게 엮여 있는 구조를 가지고 있어 이미지와 텍스트 같은 시각적 요소가 포함된 UI 디자인을 코드로 변환하기 위해서는 HTML의 구조를 제대로 이해하고 UI 이미지와 코드 간의 미세한 차이를 잘 알고 있어야 하기 때문입니다. 

 

1.2.WAFFLE이란?

WAFFLE은 UI 디자인을 HTML 코드로 쉽게 변환하도록 돕는 AI 기술입니다. HTML의 복잡한 구조와 이미지에서 코드를 추출하는 어려움을 해결하기 위해 HTML 구조를 잘 이해하고, 시각적 차이도 파악할 수 있는 특수한 학습 방법을 적용했으며, 이를 통해 프론트엔드 개발을 훨씬 더 쉽게 자동화할 수 있습니다.

 

 

2.WAFFLE의 기술적 접근

2.1.접근 방법

WAFFLE은 이 두 가지 문제를 해결하기 위해 아래의 방법을 사용합니다:

• 구조 중심 어텐션(Structure-aware Attention) : HTML이 어떻게 구조화되어 있는지(예: 부모-자식 관계)를 잘 이해하도록 모델에 구조 중심 어텐션을 도입합니다.
• 대조 학습(Contrastive Learning) : UI 이미지와 HTML 코드의 시각적 차이를 잘 파악하도록 여러 예시를 비교해 가면서 학습합니다.

그림 : WAFFLE 학습 파이프라인 개요

 

 

위의 그림은 Waffle의 학습 파이프라인을 설명한 것으로 크게 세 부분으로 나뉩니다.

1. 데이터 변형: 웹사이트 데이터셋(WebSight)을 기반으로 HTML/CSS 코드에 다양한 변형을 가하여 모델이 다양한 UI 변형을 학습할 수 있도록 함.
2. 구조 중심 어텐션: HTML 생성 시 부모, 형제, 자신 간의 관계를 반영하여 특정 토큰이 자신과 관련된 요소에 집중하도록 함.
3. 대조 학습: UI 이미지와 HTML 코드 간의 시각적 일치를 학습하도록 유도하여 유사성을 극대화.

 

2.2.Structure-aware Attention

그림 : Structured Aware Attention 예시

 

 

위의 그림은 WAFFLE 모델이 HTML의 구조를 이해하기 위해 사용하는 구조 중심 어텐션(Structure-aware Attention)에 대한 예시를 보여주는데, 이 어텐션 메커니즘은 각 요소가 자신의 부모, 형제, 자기 자신에게 집중하도록 설정된 구조를 갖추고 있습니다.

 

---

3.참고정보

 

1.WAPPLE 논문

논문 링크 : https://arxiv.org/pdf/2410.18362

 

 

 

2.WAFFLE 코드 (깃헙)

GitHub - lt-asset/Waffle: WAFFLE: Multi-Modal Model for Automated Front-End Development - by Shanchao Liang and Nan Jiang and Sh