DesignAsCode: Bridging Structural Editability and Visual Fidelity in Graphic Design Generation

이 논문은 그래픽 디자인 생성에서 시각적 충실도와 구조적 편집 가능성을 동시에 확보하기 위해 HTML/CSS 기반의 프로그래밍적 합성 접근법인 'DesignAsCode' 프레임워크를 제안하며, 계획 - 구현 - 반영 파이프라인을 통해 기존 방법들의 한계를 극복하고 뛰어난 구조적 유효성과 미적 품질을 달성함을 보여줍니다.

핵심

🎨 1. 기존 방식의 문제점: "사진 찍기" vs "레고 조립하기"

과거의 디자인 AI 는 크게 두 가지로 나뉘었는데, 둘 다 불완전했습니다.

• 방식 A (사진 찍기): AI 가 "멋진 포스터 그려줘"라고 하면, AI 는 마치 카메라로 사진을 찍듯 완성된 이미지를 뚝딱 만들어냅니다.
  • 문제점: 이 이미지는 종이 한 장처럼 평평합니다. 글자를 지우거나 배경색을 바꾸려면, 마치 벽에 붙은 페인트를 다시 칠해야 하듯 처음부터 다시 그려야 합니다. 수정이 거의 불가능합니다.
• 방식 B (레고 조립하기): AI 가 "여기에 사진, 여기에 글자"라고 위치만 알려줍니다.
  • 문제점: 위치는 정확하지만, 실제 이미지는 없습니다. 마치 빈 상자에 "여기에 사과 그림이 들어갈 거야"라고만 적혀 있는 상태입니다. 사용자가 직접 사과 그림을 찾아와서 넣어야 하므로, 디자인의 완성도가 떨어집니다.

최근에는 이 두 가지를 섞으려 했지만, 위치와 그림이 서로 안 맞는 경우 (예: 흰 글씨가 하얀 배경 위에 겹쳐서 안 보이는 것) 가 자주 발생했습니다.

---

💻 2. DesignAsCode 의 해법: "웹사이트 만들기"

이 논문은 디자인을 웹사이트 (HTML/CSS) 를 코딩하듯이 만들자고 제안합니다.

비유: "디지털 레고"를 조립하는 건축가

이 방식은 AI 가 그림을 그리는 게 아니라, 건축가처럼 설계도 (코드) 를 작성합니다.

• HTML/CSS: 웹사이트를 만들 때 쓰는 언어입니다. "여기에 빨간색 박스, 저기에 큰 글자"라고 명령을 내리면, 컴퓨터가 그대로 보여줍니다.
• 장점: 이 방식은 완벽한 수정 가능성을 가집니다. "배경색을 파란색으로 바꿔줘"라고 하면, 그림을 다시 그릴 필요 없이 색상 코드만 바꾸면 순식간에 변합니다.

---

🚀 3. 작동 원리: "기획 - 실행 - 피드백" 3 단계

이 시스템은 3 단계를 거치며, 마치 유능한 건축 팀이 일하는 것처럼 작동합니다.

1 단계: 기획자 (Semantic Planner) - "설계도 그리기"

• 역할: 사용자의 말 ("산악 자전거 대회 포스터 만들어줘") 을 듣고, 어떻게 구성할지 구상합니다.
• 비유: 건축가가 "이곳은 무거운 기둥이 필요하고, 저곳은 창문을 크게 내야겠다"라고 상세한 설계도를 그리는 단계입니다. 단순히 위치만 정하는 게 아니라, "이 글자는 굵게, 저 이미지는 흐리게"까지 세세하게 계획합니다.

2 단계: 시공자 (HTML Implementation) - "건물 짓기"

• 역할: 설계도대로 실제 코드 (HTML/CSS) 를 작성하고, 필요한 이미지와 글자를 배치합니다.
• 비유: 설계도를 보고 벽돌을 쌓고 창문을 끼우는 건설 현장입니다. 이때 컴퓨터는 웹 브라우저가 이 코드를 어떻게 보여줄지 정확히 알고 있습니다.

3 단계: 감수자 (Visual-Aware Reflection) - "품질 관리 (QC)"

• 역할: 지어진 건물을 실제로 눈으로 확인하고, 문제가 있으면 코드를 다시 수정합니다.
• 비유: 건축이 끝난 후 감리사가 와서 "여기 창문 색이 너무 어둡네, 글자가 배경과 섞여서 안 보이네"라고 지적합니다.
  • 기존 방식은 감리사가 지적해도 수정할 방법을 몰라 그대로 두었습니다.
  • 하지만 이 시스템은 **"아, 그럼 CSS 코드에서 '배경색'을 밝게 고치자!"**라고 코드를 직접 수정해서 문제를 해결합니다. 이 과정을 몇 번 반복하면 완벽한 디자인이 나옵니다.

---

✨ 4. 왜 이 방식이 혁신적인가요?

이 기술은 디자인의 마법 같은 능력을 열어줍니다.

1. 순간적인 스타일 변경: "이 포스터를 겨울 테마로 바꿔줘"라고 하면, 한 줄의 코드만 수정해서 눈송이 효과와 색상을 순식간에 바꿀 수 있습니다. (기존 방식은 다시 그리는 수밖에 없었습니다.)
2. 복잡한 문서도 가능: 이력서, 메뉴판, 캘린더처럼 글자가 아주 많은 문서도 깔끔하게 정리해 줍니다.
3. 애니메이션: 정지된 포스터에 CSS 코드를 추가하면, 눈이 내리거나 글자가 움직이는 움직이는 포스터도 만들 수 있습니다.
4. 다국어 지원: 같은 디자인 구조를 유지하면서, 코드 속의 글자만 영어에서 한국어, 일본어로 바꾸면 완벽한 다국어 디자인이 됩니다.

📝 요약

DesignAsCode는 "그림을 그리는 AI"가 아니라, **"디자인의 구조와 코드를 이해하는 AI"**입니다.

마치 레고 블록을 조립하듯, 각 요소 (글자, 이미지, 색상) 를 수정 가능한 개별 부품으로 만들어서, 나중에 필요할 때 부품 하나하나를 마음대로 갈아끼울 수 있게 해줍니다. 덕분에 예쁘면서도, 수정하기 쉬운 완벽한 디자인을 만들어냅니다.

기술 요약

1. 연구 배경 및 문제 정의 (Problem)

그래픽 디자인 생성은 높은 시각적 충실도 (Visual Fidelity) 와 세부적인 구조적 편집 가능성 (Structural Editability) 사이의 미묘한 균형을 요구합니다. 기존 접근 방식들은 이 두 가지 요구사항을 동시에 충족하지 못해 다음과 같은 한계를 겪고 있습니다.

• 이미지 생성 모델 (Text-to-Image): 사진처럼 사실적인 이미지를 생성하지만, 텍스트와 배경이 융합된 '플랫 (flat)'한 래스터 이미지로 출력됩니다. 이는 디자인 수정이 불가능하여 전문적인 워크플로우에 부적합합니다.
• 레이아웃 생성 모델: 요소의 위치 (Bounding Box) 를 예측하여 구조적 편집은 가능하지만, 시각적 콘텐츠가 없는 추상적인 플레이스홀더만 생성합니다. 사용자가 직접 자산을 준비해야 하므로 시각적 완성도가 낮고 스타일 불일치가 발생합니다.
• 기존 하이브리드 접근법의 한계: 최근 레이아웃 생성과 이미지 생성을 결합한 시도들이 있었으나, 다음과 같은 세 가지 주요 문제를 안고 있습니다.
  1. 표현력 부족: JSON 이나 좌표 리스트 같은 단순한 표현 방식을 사용하여 그라데이션, 블렌딩 모드 등 전문적인 디자인 속성을 구현하지 못합니다.
  2. 고정된 스키마 (Fixed-Schema): '배경 - 전경'과 같은 단순한 계층 구조에 갇혀 복잡하고 가변적인 레이아웃을 생성하지 못합니다.
  3. 해결 불가능한 시각적 불일치 (Visual Dissonance): 구조와 콘텐츠 간의 피드백 루프가 없어, 텍스트와 배경의 색상 충돌이나 가려짐 (occlusion) 같은 시각적 오류가 수정되지 않은 채 최종 결과물로 나옵니다.

2. 제안된 방법론: DesignAsCode

저자들은 그래픽 디자인을 HTML/CSS 코드로의 프로그래밍적 합성 (Programmatic Synthesis) 문제로 재정의하여 DesignAsCode 프레임워크를 제안했습니다. 이 프레임워크는 'Plan-Implement-Reflect(계획 - 구현 - 반성)' 파이프라인을 따릅니다.

A. 핵심 표현 방식: HTML/CSS

• 디자인을 실행 가능한 HTML/CSS 코드로 표현합니다.
• 이를 통해 backdrop-filter, mix-blend-mode, 복잡한 그라데이션 등 웹 표준이 제공하는 풍부한 렌더링 속성을 네이티브로 지원하며, 브라우저에서 직접 실행 가능한 편집 가능한 출력을 보장합니다.

B. Plan-Implement-Reflect 파이프라인

1. Semantic Planner (의미론적 계획자):

   • 사용자의 자연어 프롬프트를 입력받아 디자인 계획을 수립합니다.
   • 전문 디자인 코퍼라 (Crello 데이터셋 등) 에서 학습된 지식 증류 (Knowledge Distillation) 를 통해, 고정된 템플릿이 아닌 동적이고 가변적인 깊이 (variable-depth) 의 요소 계층 구조를 생성합니다.
   • 레이아웃 추론 (Chain-of-Thought), 요소 그룹화, 이미지 레이어 프롬프트, 텍스트 명세 등을 생성합니다.

2. HTML Implementation (HTML 구현):

   • 계획된 구조와 생성된/검색된 시각적 자산 (이미지) 을 결합하여 초기 HTML/CSS 문서를 생성합니다.
   • 멀티모달 LLM 을 활용하여 구조적 제약과 시각적 콘텐츠를 매핑합니다.

3. Visual-Aware Reflection (시각 인식 반성):

   • 초기 생성된 코드를 렌더링한 이미지를 시각 모델 (Vision Model) 에 입력하여 시각적 불일치 (색상 충돌, 가려짐 등) 를 감지합니다.
   • 감지된 문제를 바탕으로 이미지 편집 모델을 통해 최적화된 참조 이미지를 생성하고, 이를 바탕으로 HTML/CSS 코드를 반복적으로 수정 (Iterative Optimization) 합니다.
   • 이는 "예술 감독 (Art Director)" 역할을 하여 렌더링 아티팩트를 자동으로 보정합니다.

3. 주요 기여 (Key Contributions)

1. Design-as-Code 패러다임의 선구자: HTML/CSS 합성을 통해 원시적인 표현을 넘어선 전문급 스타일링, 네이티브 편집 가능성, 그리고 브라우저 직접 실행을 가능하게 했습니다.
2. Plan-Implement-Reflect 프레임워크: 의미론적 계획과 시각 인식 반성을 통합하여 복잡한 계층 구조를 추론하고 렌더링 불일치를 자율적으로 수정하는 새로운 아키텍처를 제시했습니다.
3. 고급 기능 확장: 코드 기반 표현을 통해 자동 레이아웃 리타게팅 (Layout Retargeting), 복잡한 문서 (이력서 등) 생성, CSS 기반 애니메이션, 다국어 지원 등 기존 방법론에서는 불가능했던 기능을 구현했습니다.

4. 실험 결과 (Results)

• 벤치마크: Crello (표준) 와 Broad (다양한 카테고리) 데이터셋에서 DeepSeek-R1, Qwen, GPT-5, OpenCOLE 등 최신 SOTA 모델들과 비교 평가했습니다.
• 정량적 평가: 구조적 유효성 (Validity), 가독성 (Readability), CLIP 점수 (시각적 충실도) 등 객관적 지표와 MLLM 기반 주관적 평가 (텍스트, 이미지, 레이아웃, 색상) 에서 모든 주요 지표에서 압도적인 우위를 보였습니다.
  • 특히 GPT-5 와 비교했을 때, GPT-5 는 텍스트 가독성 점수는 높았으나 레이아웃과 색상 조화 측면에서 웹 UI 스타일의 편향 (Web-UI bias) 을 보인 반면, DesignAsCode 는 전문적인 그래픽 디자인의 유기적 통합을 달성했습니다.
• 사용자 연구: 구조적 합리성과 시각적 미학 측면에서 인간 평가자들이 DesignAsCode 를 가장 선호했습니다.
• Ablation Study: HTML 표현 방식 제거, Semantic Planner 제거, Visual Reflection 제거 실험을 통해 각 모듈이 성능 향상에 필수적임을 입증했습니다. 특히 Visual Reflection 은 시각적 불일치를 해결하는 데 결정적인 역할을 했습니다.

5. 의의 및 응용 (Significance & Applications)

• 편집 가능성과 시각적 품질의 동시 달성: 그래픽 디자인의 가장 큰 난제였던 '수정 가능성'과 '고화질'을 동시에 해결했습니다.
• 실용적 응용 사례:
  • 속성 레벨 편집: CSS 변수를 통해 테마, 색상, 폰트 등을 코드 한 줄로 즉시 변경 가능.
  • 레이아웃 리타게팅: 컨테이너 크기 변경 시 요소가 자동으로 재배치되어 다양한 화면 비율에 대응 (Responsive Design).
  • 고정보화량 문서: 캘린더, 메뉴, 이력서 등 텍스트와 정보가 밀집된 문서 생성에 탁월한 성능.
  • 애니메이션 및 다국어: CSS 키프레임 애니메이션 생성 및 코드 내 텍스트/폰트 변경을 통한 다국어 지원.
• 사회적 영향: 소규모 사업자, 교육자, 콘텐츠 크리에이터가 전문적인 그래픽 디자인을 낮은 비용과 시간으로 제작할 수 있게 하여 진입 장벽을 낮추고, 텍스트가 기계 판독 가능하여 접근성 (Accessibility) 을 향상시킵니다.

결론

DesignAsCode 는 픽셀 단위의 모방을 넘어 실행 가능한 시맨틱 논리 (HTML/CSS) 로 디자인을 재정의함으로써, 구조적 편집성과 시각적 충실도의 간극을 성공적으로 메웠습니다. 이는 생성형 AI 를 통한 그래픽 디자인의 새로운 방향성을 제시하며, 제어 가능하고 고품질의 디자인 생성을 위한 강력한 기반이 됩니다.