생성형 AI연동 UI 디자인 프로세스 연구 : 커머스 플랫폼의 시각적 일관성 최적화를 중심으로 = A Study on a Generative AI-Integrated UI Design Process : Focusing on Visual Consistency Optimization in E-Commerce Platforms

국문 초록 (Abstract)

본 연구는 커머스 플랫폼 UI 디자인을 대상으로, Midjourney와 Motiff를 활용한 생성형 AI 연동 UI 디자인 프로세스가 시각적 일관성 최적화와 디자인 효율성 향상에 어떻게 기여하는지를 분석하였다. 커머스 UI는 상품 목록 페이지, 상품 상세 페이지 및 관련 기능 페이지 사이에서 색채 시스템, 상품 이미지 스타일, 컴포넌트 규칙, 정보 위계 및 레이아웃 구조의 연속성이 중요하다. 따라서 생성형 AI 도구를 활용하더라도 페이지 간 시각적 일관성을 유지하고 통제하는 과정이 필요하다.
본 연구는 생성형 AI 연동 UI 디자인 프로세스를 네 단계로 구성하였다. 첫째, Midjourney의 통제된 콘셉트 생성 단계이다. 둘째, 디자이너의 선별 및 시각 요소 전환 단계이다. 셋째, Motiff의 자동 모듈화 분리 단계이다. 넷째, 디자이너의 직접 조정 및 시각적 일관성 최적화 단계이다. 이 과정에서 Midjourney는 초기 시각 방향을 제공하고, 디자이너는 생성 결과에서 연속 가능한 시각 요소를 선별하여 후속 디자인 규칙으로 전환한다. Motiff는 정적 콘셉트 이미지를 편집 가능한 구조로 분리하며, 최종적으로 디자이너는 텍스트, 아이콘, 컴포넌트, 레이아웃 및 페이지 간 시각 언어를 통일한다.
연구 방법으로는 문헌 연구, 프로세스 분석, 사례 이미지 분석, Motiff 분리 과정 분석, 직접 조정 전후 비교 분석 및 과업 완료 시간 비교를 활용하였다. Midjourney 단계에서는 운동화, 다운재킷, 자전거 사례를 중심으로 색채 분위기, 상품 이미지 스타일, 페이지 이미지 및 구도 방향을 분석하였다. Motiff 단계에서는 Midjourney 콘셉트 이미지가 페이지 모듈, 텍스트 영역, 상품 이미지, 아이콘 버튼, 썸네일 그리드 및 스타일 파라미터로 전환되는 과정을 분석하였다. 또한 직접 조정 전후의 결과를 비교하여 시각적 일관성 최적화 효과를 검토하였다.
연구 결과, Midjourney는 통제된 프롬프트 조건하에서 커머스 UI의 초기 시각 기조를 형성하는 데 효과적이었다. 제품 범주, 브랜드 스타일, 색채 방향, 상품 이미지 스타일 및 페이지 분위기와 같은 핵심 조건을 고정할 경우, 생성 결과는 색채 분위기, 상품 제시 방식, 페이지 이미지 및 구도 경향에서 일정한 연속성을 보였다. 그러나 생성 이미지에는 가짜 텍스트, 무작위 아이콘, 불안정한 버튼, 모호한 컴포넌트 논리 및 페이지 스타일 드리프트가 나타났다. 이에 따라 Midjourney 생성 결과는 디자이너의 선별과 시각 요소 전환을 거쳐야 후속 UI 디자인 근거로 활용될 수 있었다.
Motiff는 선별된 Midjourney 콘셉트 이미지를 편집 가능한 UI 구조로 전환하는 데 유효하였다. Motiff는 페이지 레이아웃, 상태 표시줄, 내비게이션 바, 상품 이미지, 텍스트 영역, 아이콘 버튼, 카드 구조 및 스타일 파라미터를 분리할 수 있었으며, 이를 통해 정적 이미지는 반구조화된 UI 기반으로 전환되었다. 디자이너는 이 구조를 바탕으로 텍스트 재구성, 아이콘 교체, 컴포넌트 통일, 레이아웃 보정 및 페이지 간 시각 언어의 연속을 수행하였다.
직접 조정 이후의 결과에서는 시각적 일관성이 더욱 명확하게 나타났다. 다운재킷 상품 전시 페이지와 맞춤 편집 페이지는 어두운 배경, 따뜻한 색상의 상품 시각 초점, 둥근 카드, 썸네일 그리드, 하단 내비게이션 및 아이콘 스타일에서 안정적인 연속성을 형성하였다. 이는 시각적 일관성이 AI 생성 결과만으로 완성되는 것이 아니라, 디자이너의 선별, 전환, 구조 판단 및 직접 조정을 통해 단계적으로 형성된다는 점을 보여준다.
디자인 효율성 측면에서도 생성형 AI 연동 프로세스는 긍정적인 결과를 보였다. 전통적 UI 디자인 프로세스의 평균 완료 시간은 51.3분이었고, 생성형 AI 연동 UI 디자인 프로세스의 평균 완료 시간은 39.6분이었다. 평균 11.7분이 단축되었으며, 이는 약 22.8%의 과업 시간 감소에 해당한다. 이는 Midjourney가 초기 시각 탐색 시간을 줄이고, Motiff가 콘셉트 이미지에서 편집 가능한 구조로 전환하는 비용을 낮추며, 디자이너가 핵심 판단과 최종 조정에 집중할 수 있도록 한다는 점을 보여준다.
종합하면, 본 연구는 Midjourney와 Motiff를 활용한 생성형 AI 연동 UI 디자인 프로세스가 커머스 UI 디자인에서 시각적 일관성 최적화와 디자인 효율성 향상에 기여할 수 있음을 확인하였다. 이 프로세스에서 AI 도구는 시각 방향과 구조화 기반을 제공하고, 디자이너는 판단, 선별, 전환 및 최종 품질 통제를 수행한다. 본 연구는 생성형 AI 도구를 UI 디자인에 단계적으로 활용하기 위한 프로세스 모델을 제안하고, 커머스 UI 디자인에서 시각적 일관성을 통제하기 위한 이론적·실무적 근거를 제시하였다.

목차 (Table of Contents)

• 1. 서 론 ∙ 1
• 1-1. 연구 배경 ∙ 2
• 1-1-1. 생성형 AI와 디자인 환경 변화 ∙ 2
• 1-1-2. 커머스 UI 디자인의 특성과 문제점 ∙ 7
• 1-2. 연구 목적 ∙ 9
• 1-3. 연구 문제 및 연구 가설∙ 12
• 1-4. 연구 대상 및 연구 범위 ∙ 19
• 1-5. 연구 방법 및 절차 ∙ 24
• 1-6. 논문의 구성 ∙ 31
• 2. 선행연구 ∙ 35
• 2-1. 커머스 UI의 시각적 일관성 관련 선행연구∙ 36
• 2-1-1. 커머스 UI의 시각적 일관성 관련 선행연구 ∙ 42
• 2-1-2. 커머스 UI에서 시각적 일관성의 적용 특성 ∙ 47
• 2-1-3. 생성형 AI 환경에서의 스타일 드리프트와 연동 필요성 ∙ 51
• 2-2. 시각적 일관성 선행연구 ∙ 54
• 2-3. 생성형 AI 디자인 프로세스 관련 선행연구 ∙ 54
• 2-3-1. AI 기반 시각 콘셉트 생성 관련 선행연구 ∙ 59
• 2-3-2. AI 지원 UI 디자인 및 디자인 시스템 관련 선행연구 ∙ 64
• 2-3-3. AI 생성 디자인의 가능성과 한계 ∙ 69
• 2-3-4. 선행연구 종합 및 본 연구의 차별성 ∙ 73
• 2-4. Midjourney와 Motiff 기반 디자인 선행연구 ∙ 75
• 2-4-1. Midjourney 기반 디자인 선행연구 ∙ 75
• 2-4-2. Motiff 및 생성형 AI 연동 UI 디자인 도구 관련 선행연구 ∙ 82
• 2-4-3. Midjourney와 Motiff의 연동 활용 연구의 필요성 ∙ 91
• 3. 연구 설계 및 방법론 ∙ 96
• 3-1. 연구 분석 틀의 설정 ∙ 97
• 3-2. Midjourney와 Motiff의 연동 프로세스 설정 ∙ 102
• 3-3. 실험 설계 ∙ 108
• 3-4. 실험 참여자 및 과업 설계 ∙ 113
• 3-5. 평가 지표 ∙ 124
• 3-6. 데이터 수집 및 분석 방법 ∙ 131
• 3-7. 소결 ∙ 139
• 4. Midjourney 기반 UI 디자인 콘셉트 생성 분석 ∙ 143
• 4-1. Midjourney 콘셉트 생성 실험 설정 ∙ 144
• 4-2. Midjourney 생성 이미지 특성 분석 ∙ 148
• 4-3. Midjourney 단계의 시각적 일관성 통제 분석 ∙ 157
• 4-4. 디자이너의 선별 및 시각 요소 전환 분석∙ 163
• 4-5. 소결 ∙ 170
• 5. Motiff의 모듈화 분리 및 직접 일관성 최적화 분석 ∙ 173
• 5-1. Motiff의 자동 모듈화 분리 과정 ∙ 174
• 5-2. Motiff 분리 결과의 구조적 특성 분석 ∙ 182
• 5-3. Motiff 단계의 시각적 일관성 보조 작용 ∙ 189
• 5-4. 디자이너의 직접 조정과 시각적 일관성 최적화 ∙ 195
• 5-5. 소결∙ 203
• 6. Midjourney와 Motiff 연동 프로세스의 시각적 일관성 검증 ∙ 207
• 6-1. 연동 프로세스 검증 프레임워크 ∙ 208
• 6-2. Midjourney 단계의 시각적 일관성 통제 효과 검증 ∙ 211
• 6-3. 디자이너의 선별 및 시각 요소 전환 효과 검증 ∙ 217
• 6-4. Motiff의 모듈화 분리 및 구조화 지원 검증 ∙ 222
• 6-5. 직접 조정 후 시각적 일관성 최적화 효과 검증 ∙ 226
• 6-6. 디자인 효율성 검증 ∙ 231
• 6-7. 소결 ∙ 235
• 7. 결론 ∙ 239
• 7-1. 연구 요약 ∙ 240
• 7-2. Midjourney와 Motiff 연동에 따른 시각적 일관성 최적화 프로세스 ∙ 244
• 7-3. 연구의 학술적 기여 ∙ 253
• 7-4. 실무적 시사점 ∙ 257
• 7-5. 연구의 한계 ∙ 262
• 7-6. 향후 연구 방향 ∙ 267
• 참고 문헌 ∙ 272