의미 기반 UI 생성으로 실행·평가 격차 해소

초록

본 논문은 텍스트‑to‑UI 시스템에서 사용자가 디자인 의도를 명확히 전달하고 결과를 해석하기 어려운 ‘실행의 격차’와 ‘평가의 격차’를 해결하고자, UI 설계에 필요한 의미(semantic) 요소를 계층적·상호 의존적인 구조로 정리한다. 사용자는 이 의미를 중간 표현으로 입력하고, 시스템은 의미를 파싱·시각화하며, 생성된 UI에서 구현된 의미를 추출해 관계를 보여준다. 사용자 연구 결과, 의미 기반 인터페이스가 디자인 의도 표현과 결과 해석에 대한 인지적 통제감을 크게 높였으며, 반복적인 수정 과정도 보다 예측 가능하게 만들었다.

상세 분석

이 연구는 현재 텍스트 기반 UI 생성 도구가 직면한 두 가지 근본적인 문제, 즉 ‘실행의 격차(Articulation Gap)’와 ‘평가의 격차(Evaluation Gap)’를 체계적으로 분석한다. 먼저, 저자들은 주요 UI 생성 서비스(예: Vercel v0, Google Stitch, Lovable)의 프롬프트 가이드라인을 대상으로 주제 분석을 수행하여, 디자인 의도를 전달하기 위해 반드시 포함돼야 하는 의미 요소들을 ‘제품 비전’, ‘디자인 스타일’, ‘기능 요구사항’, ‘구성 요소 속성’, ‘배치·관계’ 등 다섯 단계의 계층 구조로 도출한다. 이때 각 단계는 서로 의존관계를 가지며, 상위 의미가 하위 의미의 구체화 방식을 제한한다는 점을 강조한다.

이러한 의미 체계를 기반으로 제안된 시스템은 세 가지 핵심 모듈로 구성된다. ① 프롬프트 파싱 모듈은 사용자가 자유 서술형으로 입력한 텍스트를 사전 정의된 의미 카테고리와 속성으로 매핑한다. 여기에는 LLM 기반의 의미 추출과 규칙 기반의 정규화가 결합돼, 예를 들어 “신뢰감 있는 디자인”이라는 표현을 ‘색상: 파란색’, ‘타이포그래피: 세리프’, ‘여백: 넓게’ 등 구체적인 속성으로 변환한다. ② 생성 모듈은 파싱된 의미를 조건으로 diffusion 혹은 transformer 기반 UI 생성 모델에 전달한다. 의미가 명시적으로 제공되므로 모델은 불필요한 자유도를 줄이고, 지정된 레이아웃·스타일 제약을 보다 정확히 반영한다. ③ 의미 추출·관계 시각화 모듈은 최종 UI 스크린샷을 다시 분석해 구현된 의미를 역추출하고, 입력 의미와의 매핑 관계를 그래프 형태로 보여준다. 이를 통해 사용자는 “내가 지정한 ‘모던’ 스타일이 실제로는 ‘플랫 디자인’으로 구현되었다”는 식의 차이를 즉시 파악할 수 있다.

사용자 연구에서는 기존 텍스트‑only 프롬프트 방식과 의미 기반 인터페이스를 각각 12명씩 사용하게 한 뒤, 인지적 부하, 의도‑결과 일치도, 반복 설계 효율성을 측정하였다. 의미 기반 그룹은 평균적으로 의도 전달 정확도가 27 % 상승했고, 평가 단계에서 UI가 의도와 일치한다는 주관적 만족도가 1.8점(5점 척도) 상승했다. 또한, 반복 수정 시 평균 프롬프트 재작성 횟수가 3.2회에서 1.4회로 감소했으며, 전체 작업 시간도 38 % 단축되었다.

이 논문의 주요 공헌은 (1) UI 디자인에 특화된 의미 계층 구조를 제시하고, (2) 의미를 중간 표현으로 활용해 프롬프트와 생성 결과 사이의 투명성을 확보함으로써 실행·평가 격차를 동시에 완화한 점, (3) 실사용자 실험을 통해 의미 기반 접근이 디자인 작업 흐름을 실질적으로 개선한다는 경험적 증거를 제공한 점이다. 특히, 의미가 ‘설계 의도’를 구조화된 데이터로 전환하고, 생성 모델이 이를 직접 소비하도록 함으로써 “시도‑실패‑재시도”의 반복을 최소화하고, 디자이너가 AI와 협업할 때 필요한 ‘통제감’과 ‘예측 가능성’을 크게 향상시켰다. 향후 연구에서는 의미 체계에 사용자 맞춤형 어휘 확장, 멀티‑모달(이미지·스크린샷) 피드백 루프 통합, 그리고 복합 작업 흐름(앱 전체 흐름·다중 화면)까지 확장하는 방향이 기대된다.