[Paper Review] Misty: UI Prototyping Through Interactive Conceptual Blending

📍 Misty: UI Prototyping Through Interactive Conceptual Blending

https://dl.acm.org/doi/10.1145/3706598.3713924

---

💡 INTRODUCTION

• UI 프로토타이핑을 할 때 개발자들은 스케치, 스크린샷, 기존 디자인 언어와 같은 참조 예시들에 기반하여 창작을 진행한다.
• 개발자들은 이러한 예시에서 레이아웃, 색상 등 다양한 요소를 선택적으로 반복하고 블렌딩하여 새로운 UI를 만들어낸다.
• Fauconnier과 Turner은 이 과정을 다음과 같이 정의한다.

  개념적 블렌딩 :
  핵심은 두 개의 입력 개념 공간 사이에 부분적 일치를 구성하고, 그들로부터 선택적으로 투사하여 새로운 '블렌딩된' 개념 공간을 구축하는 것이다.
  이후 이 블렌딩 공간은 스스로 구조를 만들어간다.

• UI 연구 이외에도 다양한 창작 도메인에서 이러한 개념적 블렌딩이 computational creativity를 지원하는 데 유용하다는 연구들이 있다.
  ⚠️ 그러나 UI 디자인에서는 이러한 블렌딩을 직접 도구로 구현한 사례는 존재하지 않는다.
  • 디자이너와 개발자는 이 작업을 대부분 수작업으로 처리한다.

이에 따라 Misty는
1) 사용자가 UI 스크린샷이나 손그림 스케치를 업로드
2) 관심 있는 영역과 속성(aspects)을 지정
3) 현재 작업 중인 UI 코드에 블렌딩
4) 결과물의 의미적 변경사항을 Semantic Diff로 요약해 시각적으로 확인하고 세밀하게 제어
→ 이러한 과정을 지원하여 모바일 UI 화면을 디자인할 때 개념적 블렌딩을 적용한다.

• Misty 의 주요 요소:
  • 개념적 블렌딩을 실시간 UI 프로토타이핑에 도입
  • 코드 수정 및 디자인 반복을 위한 Semantic Diff 제공
  • 디자이너-개발자의 경계를 허물며 UI 개발을 촉진

---

💡 RELATED WORK

예시 기반 UI Prototyping

📍 디자인 예시 검색 시스템

• 디자인 예시를 통해 영감을 얻는 일은 UI 아이디어 발상 과정에서 매우 일반적이다.
  : 디자이너 및 개발자들은 예시를 통해 모범 사례를 이해하고, 아이디어를 수집하며, 디자인 개념을 정교화한다.
  → 이에 따라 Mobbin, Bribbble 등의 온라인 갤러리는 다양한 스타일, 컴포넌트, 상호작용을 포함한 예시를 제공한다.
• 이미지 인식, 생성 모델, 메타데이터 태깅 등의 방법을 통해 디자인 예시를 쉽게 검색하고 접근할 수 있도록 지원하는 디자인 예시 검색 시스템이 제안되어왔다.
• 타 연구들은 제약 기반으로 예시를 생성하거나, 레이아웃 확산 모델을 사용하는 방식을 제안하기도 했다.

  ❗️ Misty는
  이러한 예시 검색 시스템과 상호 보완적으로 작용할 수 있으며, 그 안에서 예시를 직접 블렌딩할 수 있는 사용자 인터페이스를 제공한다.

📍 UI 디자인 간 스타일 전이

• Uniform : 다양한 플랫폼 간 자동 생성된 인터페이스의 유사성을 보장하는 프레임워크

• Bricolage : 웹페이지 간 콘텐츠를 전이하는 도구

• VST : 벡터 그래픽 간 스타일을 전이하는 도구

  → 이러한 접근은 디자인 요소 간의 의미론적 대응관계를 계산하는 알고리즘을 제안한다.

  ❗️ Misty는,
  시각적 스타일 + 콘텐츠까지 포함하여 전이를 이루며, 사용자가 인터랙티브하게 블렌딩할 부분과 속성을 직접 지정할 수 있는 인터페이스를 제공한다.

개념적 블렌딩

• 인지언어학에서 유래한 개념으로, 의미 구성의 핵심 메커니즘으로 자리 잡고 있다.
• 두 개념 간의 공통 요소를 파악하고, 각 개념의 특징을 선택적으로 결합한 후 두 입력 개념의 특징을 상속 및 변형하여 새로운 개념을 생성한다.
• 이전 연구들에서 다양한 창작 영역에서 개념적 블렌딩의 유용성을 입증했다.
• UI prototyping에서 개념적 블렌딩은 본질적인 사고 과정이다.

  ❗️ Misty는,
  개념적 블렌딩을 UI 개발에 직접 적용하여 최신 멀티모달 AI 모델이 사용자의 의도를 해석하고 UI 코드를 작성할 수 있다는 점에 착안해 구축되었다.

AI 기반 UI 도구

• 많은 연구자들이 UI 디자인 작업에서 AI의 활용 가능성을 탐색해왔다.
  : Galileo, Magic Patterns, Vercel 등 신생 스타트업들은 AI를 UI 디자인에 적용하고 있으나, 대부분의 경우 챗 인터페이스와 자연어 명령에 제한되어 있다.
• 현 시점 대규모 멀티모달 AI 모델은 "UI 스크린샷 / 자연어 명령 → UI 코드 생성"의 작업에서 높은 가능성을 보여주고 있다.

  ❗️ Misty는,
  챗 인터페이스가 아닌 직접 조작할 수 있는 인터페이스를 제공한다. 이를 통해 사용자는 블렌딩 의도 (섹션, 속성)를 직접 조작하여 명시할 수 있게 된다.
  또한, input 구조를 (1) 개발자의 기존 UI 코드 + (2) 블렌딩할 예시 이미지로 설정하여 멀티모달 입력 기반의 코드 편집 시나리오를 제공한다.

---

💡 The MISTY SYSTEM

설계 목표

• DG 1 : 유연하고 친숙한 입력 형식 지원
  • 사용자는 중점을 두는 가치에 따라 다양한 fidelity의 표현을 사용한다.
    예 : 단순 스케치, 와이어프레임, 높은 fidelity의 프로토타입 등
  • 따라서 시스템은 이러한 다양한 형식에서 의도를 표현할 수 있는 유연한 입력 메커니즘을 제공한다.
  • 스크린샷 이미지와 손그림 스케치 형태의 UI 예시를 매개로 사용한다.

• DG 2 : 창의적 상호작용에서의 개발자 주도성 보존
  • 블렌딩 과정에 대한 세밀한 제어를 제공함으로써, 예측 가능성을 유지하고 사용자의 비전과 부합할 수 있도록 한다.
  • 사용자는 텍스트 기반 명령보다 시각적 인터랙션을 선호한다는 점을 기반으로 한다.

• DG 3 : 탐색, 반성, 반복의 촉진
  • 개념적 블렌딩은 여러 블렌딩 결과를 시각적으로 비교하고, 의사결정을 비판적으로 평가한 뒤, 추가적인 수정을 가할 수 있어야 한다.
  • 이는 병렬적인 prototyping 등의 기존 디자인 관행과 부합한다.

상호작용 기능

• 블렌딩 제어를 통한 암묵적 의도 해석

  • 개념적 블렌딩의 유효한 결과 공간은 매우 넓기 때문에 사용자의 의도를 정확히 해석하는 것이 중요하다.

    📍 이를 해결하기 위해 Misty는 2가지 블렌딩 모드를 제공한다.
    
    ① 글로벌 블렌딩 (Global blending through node connection)
    : 사용자는 예시 노드를 소스 노드에 연결해 전체 화면 수준의 블렌딩을 유도한다.
    → 이는 탐색 단계에서 적합하며, AI 모델의 사전 학습된 지식을 활용한다.
    
    ② 국소 블렌딩 (Localized blending using drag-and-drop)
    : 사용자는 예시 UI의 하위 섹션을 소스 UI의 특정 위치에 드래그하여 놓는다.
    드래그 중에는 강조 애니메이션이 발생하여 블렌딩 영향을 미칠 영역을 시각적으로 표시한다.
    드롭 이후 나타나는 대화창에서 블렌딩할 속성 (레이아웃, 색상 등)을 지정할 수 있다.
    → 이는 명확한 목표를 가진 수정 작업에 유용하다.

• 노드 기반 인터페이스와 무한 캔버스

  • 노드 기반 인터페이스 [Figure 1] Misty system
    • 예시 노드 (A) : 예시 이미지를 표시
    • 소스 노드 (B) : 현재 UI 코드를 렌더링

      사용자가 예시 노드를 소스 노드에 블렌딩하면, 새로운 소스 노드가 생성되어 업데이트된 UI 코드의 렌더링 결과를 보여준다.
      → 이 구조는 병렬 prototyping을 지원하며, 디자인 대안들의 탐색, 시각적 비교, 반복 개선을 가능하게 한다.

    • 각 소스 노드에는 실시간 코드 편집기를 확장 / 축소 형태로 제공한다.
      → 사용자는 결과 코드에 대해 직접 수정을 가할 수 있다.
      ⚠️ 예시 이미지는 코드적인 접근을 요구하지 않는다. 스크린샷만을 사용하며 이는 실제 작업 흐름 상 더욱 현실적인 구현 방식이다.

• 의미 기반 동적 UI 조정

  • 변경 사항은 "Semantic Diff"라는 형태로 요약한다.
    [Figure 1] Misty system

    Semantic Diff는 전통적인 코드 diff를 넘어, 블렌딩의 수행이 UI의 의미에 어떤 영향을 미쳤는지에 따라 그룹화한다.

    • 예 : UI를 다크 모드를 바꾸는 경우
      실제로는 여러 CSS 속성을 수정해야 하지만, Misty는 이들을 하나의 "다크 모드" 항목으로 요약하여 제공한다.
      또한, 토글을 통해 이러한 모드를 전체 또는 세부 항목별로 켜고 끌 수 있다.
      → 사용자가 고수준의 개념 이해와 저수준의 미세 조정을 동시에 수행할 수 있게 한다.

• 상호작용 기능 통합 효과

  • 앞서 설명한 기능들은 전자동에서 직접 조작까지 가능한, 일종의 사용자 제어 스펙트럼을 형성한다.

  • 사용자는 상황에 따라 자유롭게 제어 수준을 전환할 수 있다.

    • 초기 탐색 → 글로벌 블렌딩
    • 구체적 수정 → 국소 블렌딩 + Semantic Diff
    • 마무리 → 직접 코드 편집

구현 세부사항

• React, React Flow, Tailwind CSS, React Live 기반
• 백엔드 AI : OpenAI의 GPT-4o
• prompt : few-shot prompting + chain-of-thought reasoning
  (자세한 프롬프트 내용은 부록 A.3 참조)
• 잘못된 React 구문 탐지 및 복구는 정규표현식 기반 휴리스틱으로 처리
• Semantic diff도 GPT-4o가 함께 생성하며, 사용자 토글 시 GPT-4o 재호출로 코드 업데이트

---

💡 EXPLORATORY FIRST-USE STUDY

	연구 질문
RQ 1	개발자들은 Misty의 다양한 기능들을 어떻게 활용하는가?
RQ 2	Misty의 출력 결과는 개념적 블렌딩에 대한 개발자들의 기대를 얼마나 충족시키는가?
RQ 3	Misty 및 개념적 블렌딩은 개발자의 워크플로우를 어떻게 지원하는가?

참가자: 미국 기술 기업 프론트엔드 개발자 14명 (React/Tailwind 경험자)

• 직접 UI를 디자인하고 개선하는 경험이 있는 사람들을 중심으로 모집하였다.

연구 절차:

• 연구는 세 단계로 구성되었으며, 참가자들에게 사고 구술(think aloud) 방식으로 참여하도록 요청하여 인지 과정을 파악했다.
  

• 1단계 : 예시 활용에 대한 현재 관행 파악

  • 참가자들에게 평소 디자인 예시를 어떻게 찾고 활용하는지 질문하였다.
  • 특히 어떤 예시가 강한 영감을 주었는지, 프로젝트에 어떻게 이를 통합했는지 등을 파악하고자 하였다.

• 2단계 : Misty를 이용한 프론트엔드 과업 수행
  • Misty를 소개한 후, 총 4개의 블렌딩 과제를 수행하게 하였다.
  • 과업은 점점 open-ended로 진행되도록 구성하였다.
  • T1 - T3는 Misty의 기능에 익숙해지도록 유도하기 위함이며, T4는 실제 워크플로우에서 Misty를 어떻게 활용할지를 관찰하기 위해 구상되었다.

    T1 : 예시 UI 전체를 소스 UI에 블렌딩
    T2 : 예시 UI의 헤더 부분을 소스 UI에 추가
    T3 : 손으로 그린 스케치를 소스 UI에 블렌딩
    T4 : 자유 탐색 기반으로 온라인 예시를 찾고 UI 개선

• 3단계 : 사용성 설문 + 후속 인터뷰
  • 표준 System Usability Scale (SUS) 기반 사용성 평가하였다.
  • 항목 예 : 사용 편의성, 의도 표현 지원 여부, 출력 품질, 디자인 탐색 가치, 실제 업무 적용 가능성 등
  • 5점 리커트 척도 사용
  • 이후 반구조화 인터뷰 수행
    → Misty를 사용하고 싶은/피하고 싶은 상황, 개선 제안 사항, 사용 시 우려사항, Misty가 개발자 업무에 어떤 영향을 줄 수 있는지 등을 파악했다.

---

💡 USER STUDY RESULTS

정량적 결과

[Figure 2] Misty에서 수행한 개념적 블렌딩 작업 시각화 - 모든 블렌딩 작업 흔적과 평가 점수

• 각 원은 연구 중 발생한 시간을 기준으로 왼쪽에서 오른쪽으로 배치된 블렌딩 작업을 나타낸다.

• 안에 있는 숫자는 블렌딩 출력이 기대치와 얼마나 잘 일치했는지에 대한 참가자의 평가로, 1은 만족하지 않음, 5는 매우 만족함을 나타낸다.

• 각 원의 색상은 아래와 같이 Misty의 작업 유형을 나타낸다.
  

• Misty 사용 평균 시간: 36.3분 (중앙값 36, 표준편차 7.0)
  참가자당 평균 블렌딩 횟수: 7.4회 (중앙값 8, 표준편차 2.5)

• 사용된 작업 유형과 그 빈도 및 비율

  블렌딩 방식	빈도 (건)	비율
  글로벌 블렌딩	36	34.95%
  드래그 앤 드롭	35	33.98%
  재생성 요청	19	18.5%
  Semantic Diff 활용	9	8.74%
  코드 편집	4	3.88%

[Figure 3] 사용성 설문 결과 시각화

• 다수 참가자들이 Misty의 사용 용이성 및 업무 적용 가능성을 긍정적으로 평가했다.
• 의도 표현 지원 항목은 상대적으로 낮은 점수를 받았다.
  • 그 이유로는 드래그 앤 드롭 조작의 번거로움, Misty가 시각적 디테일을 놓치는 경우, 특정 출력과 기대와의 불일치 등의 원인이 있다.

질적 결과

• 인터뷰 및 사용 과정에서의 참가자 발화를 전사하여 6개의 주요 주제로 도출

  1) 초기 창의적 탐색 촉진
  2) 유연한 의도 명시 : 다양한 입력 방식을 통해 의도 표현을 지원
  3) 코드 생성물의 활용
  4) 우연한 영감 제공
  5) 반복적 시각 수정 지원 요구 : 블렌딩 후, 디테일한 수정을 위해 재블렌딩 없이 세밀 조정하고 싶다는 의견 다수
  6) 디자이너-개발자 경계 흐림 : 디자이너의 시각적 감각 + 개발자의 코드 능력이 상호보완

---

💡 MY THOUGHTS

• 인지 언어학과 예술 등의 영역에서 활용되던 '블렌딩'의 개념을 차용하여 UI prototyping의 도구로 구현한 점이 흥미로웠습니다. 시각적인 요소와 그것이 내포하는 의미 (semantics) 간의 연결성이 중요한 UI 디자인 과정에서, 자연어 프롬프트만으로 모든 니즈를 언어화하는 것은 어려울 것이라 생각합니다. 이를 '예시 기반 생성' 방법론을 통해 인터랙티브하게 구현하였다는 점에서 본 서비스가 HCI 연구만의 '문제 해결적' 성격을 명백히 보여주는 사례라고 생각했습니다 !
• HCI 논문들만의 특성인 듯하지만, 전체적으로 구현 과정이나 기술적인 요소보다는 사용 흐름과 아이디어, 유저 스터디를 중심으로 내용이 전개된 점이 매우 흥미로웠습니다. 사용자가 해당 아이디어에 어떻게 접근하고 반응하는지, 그것을 유발하는 요인에는 무엇이 있는지 등을 분석적으로 밝혀낸 점이 인상 깊었습니다. 본 논문을 통해 AI가 인간의 창작 흐름에 어떻게 개입할 수 있을지와, 어떻게 하면 인간과 자연스럽게 소통하는 일종의 에이전트 역할을 수행할 수 있을지를 다시금 고민해볼 수 있었습니다 :)