<aside> 💡 code : https://github.com/leigest519/ScreenCoder

</aside>

1. Introduction

1) About Author

2) 논문이 다루는 task

<aside> 🔥

Image(UI)-to-Code-Generation task

</aside>

• Input: Image(UI design Domain) + User query
• Output: Code (HTML and CSS code)

3) limitations of previous studies

자연어로만 구성되어 있는 프롬프트는 다음과 같은 3가지 한계를 가지고 있습니다.

• 1. 오직 텍스트만으로 상세한 UI 레이아웃을 생성하려면 컴포넌트의 구조, 스타일링, 공간적 관계를 충분히 포착하기 위해 매우 길고 장황한 프롬프트가 필요합니다. → 사용자에게 큰 부담을 주고 (long context length로 인한 모델 성능의 불안정성을 유발합니다.
• 2. 아무리 정교하게 설명하더라도 텍스트만으로는 컴포넌트의 비율, 간격, 정렬 등 세밀한 시각적 디자인을 지정하기가 어렵습니다.

3. 실제 디자인 작업 흐름에서 UI 디자이너들은 일반적으로 텍스트가 아닌 스케치나 목업으로 작업을 시작한다는 것입니다.

<aside> 🔥

최근 VLM 모델로 UI 디자인 이미지를 직접 해석하고 이를 구조화된 코드로 변환하는 가능성을 제시하지만 아직 어려움이 많습니다. UI-to-code 생성은 다음과 같은 능력을 요구로 합니다.

• Visual Understanding (시각적 이해) : UI 컴포넌트 등 UI에 대한 시각적 이해
• structural layout planning (레이아웃 구조 계획) : Section별로 각각 planning하는 능력
• domain-specific code synthesis (도메인 코드 합성) : html, CSS 등의 frontend 코드 generation </aside>

저자는 2가지 오류를 발견하였습니다.

1. understanding errors(이해 오류) : 컴포넌트를 놓친다거나 잘못 분류하는 경우
   1. miss : 사이드바가 생략되는 오류
   2. wrong : 버튼 텍스트가 잘못된 경우
2. Planning errors(계획 오류) : 컴포넌트가 잘못된 위치에 배치되거나 레이아웃 제약 조건을 못 지키는 경우
   1. 잘못된 위치 : header가 contents section 아래에 배치
   2. 제약 조건 : Navigation bar가 정렬이 안된 경우
3. 더 나아가 고품질의 HTML/CSS 코드를 생성하기 위해서는 레이아웃 디자인, 컨테이너 계층, 반응형 구성 패턴을 포함한 프롬프트 엔지니어링에 대한 도메인 특화 지식이 필요하지만 현재의 VLM 모델은 명확하게 모델링되어 있지 않습니다.
   • 개인적인 의견