Each language version is independently generated for its own context, not a direct translation.
🍽️ 문제: "한 번에 다 해보려다 망친 요리사"
지금까지의 AI(비전 언어 모델) 는 디자이너가 그린 그림 (디자인 시안) 을 보고 코드를 만들 때, 그림 전체를 한 번에 훑어보며 "아, 이거 저거 다 만들어야지!"라고 생각했습니다.
하지만 이 방식에는 큰 문제가 있었습니다.
- 큰 구조를 망침: "여기는 메뉴판이고, 저기는 음식 사진이겠지"라고 대략적인 위치는 맞췄지만, 실제로는 메뉴판이 음식 사진 위에 겹치거나, 음식이 사라지는 등 배치가 엉망이 되었습니다.
- 작은 디테일을 놓침: "이건 그냥 아이콘이겠지"라고 생각해서 빈 상자로 대체하거나, 로고 같은 중요한 요소를 아예 빼먹어버렸습니다.
이걸 **"전체적인 병목 현상 (Holistic Bottleneck)"**이라고 부릅니다. 마치 요리사가 큰 냄비 하나에 모든 재료를 다 넣고 섞으려다, 국물은 짜고 고기는 익지 않은 상태가 된 것과 같습니다.
🛠️ 해결책: "DOne(도원)" - 역할 분담을 한 명품 주방
이 논문에서 제안한 DOne은 이 문제를 해결하기 위해 세 명의 전문가가 팀을 이루어 일하는 방식을 도입했습니다.
1. 구조 설계사 (레이아웃 분할)
- 역할: 그림을 한 번에 보지 않고, **"이 부분은 헤더, 저 부분은 사이드바, 여기는 본문"**처럼 영역을 잘게 나누는 역할을 합니다.
- 비유: 큰 그림을 보지 않고, **"이곳은 주방, 저곳은 식당, 저곳은 화장실"**이라고 건물을 구역별로 나눈 건축 설계도 같은 것입니다.
- 효과: AI 가 전체를 한 번에 이해하려다 생기는 혼란을 막아, 구조가 튼튼하게 잡힙니다.
2. 보물 사냥꾼 (세부 요소 찾기)
- 역할: 나눈 구역 안에서 작은 아이콘, 로고, 버튼 같은 작은 보물들을 찾아냅니다.
- 비유: 주방에서 양념 병 하나, 식기 한 개까지 놓치지 않고 찾아내는 정밀한 수색대입니다.
- 효과: 중요한 작은 요소들이 빈 상자로 대체되지 않고, 실제 이미지로 정확히 들어갑니다.
3. 마스터 셰프 (스키마 기반 코드 생성)
- 역할: 앞선 두 전문가가 만든 **"구역도 (구조)"**와 **"찾아낸 보물 목록 (요소)"**을 받아, **최종 요리 (코드)**를 만듭니다.
- 비유: 설계도와 재료 목록을 보고, "이곳에 이 요리를, 저곳에 그 요리를" 정확히 배치하는 마스터 셰프입니다.
- 효과: AI 가 "어디에 무엇을 넣지?"라고 고민할 필요가 없어, 디자인과 똑같은 결과물을 만듭니다.
🏆 결과: "완벽한 복제"
이 새로운 방식 (DOne) 을 테스트한 결과, 기존 방법들보다 디자인과 코드의 일치도가 10% 이상 높아졌습니다.
- 시각적 정확도: 눈으로 봐도 원본과 거의 똑같습니다.
- 생산성: 개발자가 이 도구를 쓰면, 같은 작업을 3 배 더 빠르게 끝낼 수 있습니다.
💡 요약
이 논문은 **"AI 가 그림을 보고 코드를 짤 때, 한 번에 다 하려고 하지 말고, 먼저 '구조'를 나누고, '작은 요소'를 찾아낸 뒤, 마지막으로 '코딩'을 하라"**고 말합니다.
이렇게 **일을 나누고 전문화 (Decoupling)**하는 방식을 도입함으로써, AI 가 이제 복잡한 웹사이트 디자인도 거의 완벽하게 복제해낼 수 있게 되었습니다.