<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 모델은 명확하게 모델링되어 있지 않습니다.
   • 개인적인 의견

3) Solution approaches

<aside> 🔥

Agentic System(grounding → planning → generation)으로 접근하여 성능을 향상시켰다.

</aside>

1. grounding : VLM 모델을 이용하여 핵심 UI 영역을 localize(분할)하고 semantic label(e.g. navigation bar)을 지정합니다.
2. planning : web layout system 도메인 지식을 활용하여 hierarchical layout tree(레이아웃 위계 tree)를 만듭니다.
3. generation : adaptive prompt-based synthesis를 통해 HTML과 CSS 코드를 생성하며, layout context와 추가적인 user instruction 모두 통합하여 interation design을 지원합니다.

→ end-to-end 블랙박스 방식보다 더 견고한 컴포넌트 인식, 레이아웃 planning 및 structural code generation을 가능하게 만듭니다.

추가

저자의 Agent 시스템은 미래 VLM 훈련을 위한 확장 가능한 데이터 엔진 역할도 합니다. 대량의 이미지-코드 쌍의 합성 데이터들을 생성하여 VLM 훈련데이터로 사용합니다. 구체적으로, 우리는 공개된 VLM인 Qwen2.5-VL에 콜드 스타트(cold-start) 지도 미세 조정(supervised fine-tuning)을 적용하고, 이어서 강화 학습을 적용하여 UI 이해 및 코드 생성 능력에서 상당한 향상을 가져왔습니다.

• Glossary

2. Related Work

다중 모달 대규모 언어 모델 (MLLMs)

• VisualGPT, Frozen, BLIP-2와 같은 초기 아키텍처는 이미지 인코더와 LLM을 효과적으로 연결했습니다.
• PaLM-E, Gemini 2.5, GPT-4o와 같은 최신 시스템은 멀티모달 이해 능력을 더욱 확장하여 시각적 인식, 공간 추론, 멀티모달 작업 수행 등에서 인상적인 성능을 달성했습니다.

이미지 - 코드 생성

• pix2code와 같이 CNN과 LSTM을 사용하여 UI 스크린샷을 도메인 특화 언어(DSLs)로 변환하는 데 중점을 두었습니다.
• WebParse, Interaction2Code, MRWeb 등 HTML/CSS와 같은 더 일반적인 형식으로 대상을 확장하여 실제 웹 개발에 적용 가능성을 높였습니다. 일부 방법은 컴퓨터 비전과 OCR을 결합하여 UI 계층 구조를 재구성했지만, 잡음이 많거나 모호한 시각적 입력에 취약했습니다.
• ScreenParse와 같은 화면 파싱 방법은 객체 감지기를 사용하여 요소 감지 및 계층 예측을 모델링했습니다. 그럼에도 불구하고, 대부분의 기존 모델은 시각적 의미, 공간적 레이아웃, 도메인별 코딩 패턴을 종합적으로 이해하는 데 어려움을 겪고 있습니다. 또한, 이 모델들은 종종 블랙박스로 작동하여 도메인 지식을 통합하거나 인간이 개입하는 디자인 작업 흐름을 지원하기 어렵습니다.
• DCGen, LayoutCoder, UICopilot과 같은 최근 연구들은 분할 정복(divide-and-conquer) 방식을 사용하지만, 휴리스틱 기반 분할 방법에 의해 성능이 제한됩니다.

3. 제안 방법론

1) Main Idea

<aside> 🔥

Agentic System(grounding → planning → generation)

</aside>

1. Grounding Agent

<aside> 🔥

목표 : structural components를 detecting(인식)하고 semantic labeling(의미가 담긴 용어로 라벨링)하는 것

</aside>

1. UI 컴포넌트 클래스(라벨)을 고정시킵니다.

$$ L = \{{ \text{sidebar}, \text{header}, \text{navigation} \text{} }\} $$

1. VLM에 명시적인 text query 를 사용해서 Label을 얻습니다.

   1. text query : “Locate the header area”, “Identify the navigation bar”

   $$

   B = { (b_i, l_i) \mid l_i \in L }_{i=1}^N $$

   • $B$ : 바운딩 박스
   • $l_{i}$ : VLM 모델이 예측한 라벨

   여기서

   $$

   b_i = (x_i, y_i, w_i, h_i) $$

   • $(x_{i}, y_{i})$ : pixel 좌표 (좌상단으로 추정)
   • $(w_{i}, h_{i})$ : 컴포넌트의 가로, 세로 길이

2. 후처리를 진행합니다.

   1. 중복 제거 및 충돌 해결 : 동일한 label에 대해 여러 개의 바운딩 박스가 감지될 경우("navigation"의 두 후보와 같이), 클래스별 non-maximum suppression(NMS)를 사용하여 가장 confident가 높거나 공간적으로 정규적인 영역만 남기고 필터링합니다
   2. 대체 복구(fallback Recovery) : VLM이 필수 구성 요소를 반환하지 못하면, 공간적 사전 지식에 기반한 heuristic fallback이 호출됩니다 (예: 상단 근처에 있는 넓고 짧은 박스는 헤더 또는 내비게이션 바일 가능성이 높습니다)
   3. 메인 컴포넌트 추론 : 메인 콘텐츠 영역은 VLM에 의해 명시적으로 감지되지 않습니다. 대신, 감지된 어떤 구성 요소와도 겹치지 않는 가장 큰 남은 직사각형 영역으로 추론됩니다.

이는 콘텐츠 영역이 명시적으로 그라운딩될 필요 없이 일관되고 의미있는 정의를 보장합니다. 또한 VLM에 메인 콘텐츠 섹션만 생성하도록 직접 프롬프트하는 변형 방식을 구현했습니다. 흥미롭게도, 이 접근 방식은 입력 스크린샷의 특성에 따라 뚜렷한 이점을 제공하는 것을 관찰했습니다.

그라운딩 에이전트의 최종 출력은 레이아웃 딕셔너리입니다:

$$

\text{Layout} = \{ { l \mapsto b_l \mid l \in L \cup {\{\text{main content}\}} }\} $$

{
    "header": [0, 0, 1920, 100],
    "navigation": [0, 100, 1920, 50],
    "sidebar": [0, 150, 300, 800],
    "main_content": [300, 150, 1620, 800]
}

이 output은 (2)Planning Agent에서 레이아웃 해석의 기초 역할을 하며, (3)대화형 조작(Generation)을 위한 의미론적 그라운딩 역할을 합니다.

2. Planning Agent

<aside> 🔥

목표 : 계층 구조 트리 생성하기

</aside>

(1) Grounding 단계로부터 semantic label과 bounding box 좌표값을 받아 (3)코드 생성에 필요한 가벼운 계층적 구조를 만듭니다. 이러한 계층구조는 계산 집약적인 최적화 절차에 의존하지 않고, 간단한 spatial heuristics(공간적 휴리스틱 방법론)을 사용하고 compositional rules(구성 규칙)을 사용합니다.

이 계층 구조는 position: relative; width: 100%; height: 100% 스타일을 가진 viewport 전체를 채우는 root container를 기반으로 합니다. 각 최상위 region r은 정규화된 바운딩 박스 $(l_{t} ,t_{r}, w_{t}, h_{t})$에 매핑되며, 인라인 백분율 기반 스타일을 사용하여 절대 위치에 있는 .box로 렌더링됩니다.

하위 구획을 포함하는 영역의 경우, 에이전트는 내부에 <div class="container grid">를 삽입하며, 이 요소의 .box > .container { display: grid; } 규칙은 CSS 그리드 캔버스를 만듭니다. 자식 구성 요소들은 grid-cols-*, gap-*, bg-gray-400 등과 같은 Tailwind CSS 유틸리티 클래스를 사용하여 이 그리드 위에 배열됩니다.

트리의 각 노드는 그리드 템플릿 구성 및 순서 메타데이터로 주석이 달려 있어, CSS Grid 및 Tailwind를 사용하여 HTML/CSS 코드로 직접 컴파일될 수 있는 압축적이고 해석 가능한 레이아웃 사양을 생성합니다.

3. Generation Agent

<aside> 🔥

</aside>

generation agent는 semantic layout tree를 HTML 및 CSS로 변환하여 실행 가능한 프런트엔드 코드를 합성합니다. 이 과정은 single-stage의 프롬프트 기반 생성 프로세스를 통해 이루어집니다. 이 에이전트는 수작업으로 만든 템플릿이나 고정된 매핑에 의존하기보다는, 레이아웃 트리의 각 구성 요소에 대해 자연어 프롬프트를 구성하고 언어 모델을 사용하여 해당 코드를 생성합니다.

입력에는

• 레이아웃 트리: 각 노드에 의미론적 레이블(예: 헤더, 사이드바)이 주석으로 달려 있는 레이아웃 트리 T
• 사용자 지침(Optional) : 원하는 디자인 수정이나 동작을 설명하는 사용자 지침 U. generation agent가 사용자가 자연어를 사용하여 구성 요소를 수정하거나 사용자 정의할 수 있도록 함으로써 대화형 디자인을 지원하도록 합니다.

결합된 프롬프트는 구조적 맥락과 의도를 모두 포함하여, 생성 모델이 의미적으로 정렬되고 사용자 사양에 반응하는 코드를 생성합니다.

4. Placeholder 복원

• placeholder

웹사이트에는 배경 사진이나 프로필 이미지와 같이 스크린샷에도 나타나는 실제 이미지가 포함되어 있는 경우가 많습니다. 그러나 생성 과정에서 실제 이미지 소스를 제공할 수 없기 때문에, 일반적인 관행은 이러한 이미지를 균일한 회색 플레이스홀더로 대체합니다.

1. 전통적인 UI Element Detection (UIED) 알고리즘을 적용하여 UI component를 나타내는 감지된 바운딩 박스 집합 $E = \{{e_1, e_2, ..., e_n}\}$을 얻습니다.