디지털 환경이 빠르게 변화하는 오늘날, UI/UX 디자이너는 단순히 ‘화면을 만드는 사람’을 넘어 사용자 경험을 설계하고, 데이터를 기반으로 문제를 해결하며, 인공지능과 협업하는 전문가로 진화하고 있습니다. 본 교재 『AI를 활용한 UI/UX 디지털디자인 실무』는 이러한 시대적 요구를 반영하여, 디자인 기초부터 AI 활용, 그리고 실제 서비스 배포까지 전 과정을 체계적으로 학습할 수 있도록 구성되었습니다.
이 책의 1장에서는 UI/UX 아키텍처 설계를 통해 사용자 중심의 구조적 사고를 익히고, 정보 구조, 와이어프레임, 태스크 플로우를 통해 설계 역량을 강화합니다. 2장에서는 AI 리터러시를 중심으로 프롬프트 엔지니어링, 데이터 이해, 윤리 및 HITL(Human-In-The-Loop) 개념을 학습하여 AI와 협업하는 기반을 다집니다. 3장과 4장에서는 Figma와 웹 퍼블리싱을 통해 실제 화면 구현 능력을 키우고, 공공 웹사이트 분석과 리디자인을 통해 실무 문제 해결력을 향상시킵니다.
이어지는 5장과 6장에서는 창의적 사고 확장과 함께 시각화 능력, 그리고 AI 결과물을 검증하고 개선하는 HITL 전문가 역량을 집중적으로 다룹니다. 마지막으로 7장과 8장에서는 디자인을 실제 서비스로 구현하고 배포하는 과정과 포트폴리오 제작까지 이어지며, 학습자가 하나의 완성된 결과물을 만들어낼 수 있도록 돕습니다.
이 책은 이론 중심이 아닌 실습 중심으로 구성되어 있으며, 각 챕터마다 프로젝트 기반 학습을 통해 실무에서 바로 활용 가능한 경험을 제공합니다. 디자인, 개발, AI를 통합적으로 이해하고자 하는 학습자에게 실질적인 길잡이가 될 것입니다.

목 차

Chapter 1 UI/UX 아키텍처 설계
1.1 UI/UX 설계의 개요와 프로세스 9
1.2 정보 설계하기 (Information Architecture) 13
1.3 와이어프레임 작성하기 (Wireframe) 18
1.4 태스크 플로우 작성하기 (Task Flow) 23
1.5 실전 통합 실습 프로젝트 28


Chapter 2 AI 리터러시
2.1 AI 윤리 및 보안 준수 35
2.2 프롬프트 엔지니어링 38
2.3 HITL 검증 및 최적화 42
2.4 실무 데이터 리터러시 44
2.5 AI 업무 생산성 도구 활용 46
2.6 통합 실습 프로젝트 49
2.7 생성형 AI의 기술적 이해 52
2.8 AI 리터러시 심화 — 멀티모달 AI 활용 54
2.9 AI 리터러시 총정리 및 학습 로드맵 56


Chapter 3 Figma & 웹 퍼블리싱
3.1 화면 레이아웃의 구조 원리 62
3.2 Figma 인터페이스 및 컴포넌트 설계 67
3.3 Auto Layout 기반 반응형 UI 구성 72
3.4 AI 시맨틱 구조 해석과 HTML 구조화 76
3.5 CSS Box Model · Flex 레이아웃 구현 81
3.6 화면 단위 UI 퍼블리싱 실습 87
Chapter 4 공공 웹페이지 진단 및 리디자인
4.1 공공 웹페이지 UX 접근성 기준 이해 97
4.2 사용 불편 요소 분석 및 문제 정의 100
4.3 핵심 기능 중심 구조 재설계 104
4.4 사용자 여정 기반 리디자인 시각화 107
4.5 종합 실전 프로젝트: 공공 웹사이트 리디자인 113
4.6 심화 학습: 데이터 기반 UX 의사결정 115
4.7 케이스 스터디: 실제 공공 UX 개선 사례 117


Chapter 5 백지공포 탈출과 시각화
5.1 백지공포란 무엇인가 — 창의적 블로킹 극복 123
5.2 기획서를 시각 언어로 변환하는 원리 126
5.3 Adobe Photoshop 실무 — UI 목업 제작 130
5.4 Adobe Illustrator 실무 — 아이콘 & 일러스트 134
5.5 AI 이미지 생성 도구 활용 137
5.6 시각화 통합 실습 프로젝트 140


Chapter 6 HITL(Human-In-The-Loop) 전문가 되기
6.1 HIML 개념과 UI/UX 실무 적용 149
6.2 가이드라인 기반 사용성 검증 151
6.3 AI 생성 UI의 오류 불일치 점검 154
6.4 인간 개입 기반 디자인 정제 160
6.5 실무 도구를 활용한 HITL 자동화 163
6.6 도메인별 HITL 적용 전략 166
6.7 통합 실습 프로젝트 168
6.8 HITL 성숙도 모델과 팀 역량 개발 170
6.9 심화 주제: AI 결과물 정제의 미래 172

Chapter 7 내 디자인 배포하기
7.1 디자인 핸드오프 개요 — 배포의 전체 흐름 178
7.2 UI 컴포넌트 정리와 디자인 시스템화 180
7.3 Dev Mode 기반 디자인 명세 정리 184
7.4 Framer 활용 웹서비스 구현 189
7.5 결과물 테스트 — 품질 보증(QA) 프로세스 194
7.6 서비스 배포 — 호스팅·도메인·CDN 198


Chapter 8 실전 프로젝트 및 포트폴리오
8.1 프로젝트 주제 선정 및 기획 208
8.2 기존 공공 웹서비스 UX 개선 리디자인 212
8.3 상업용 랜딩페이지 UI 구조 정의 218
8.4 웹서비스 구현 및 완성도 개선 223
8.5 포트폴리오 정리 및 결과물 발표 233
8.6 종합 프로젝트 평가 및 최종 발표 238
8.7 실전 케이스 스터리 — 시니어 대중 교통 앱 UX 개선 240
8.8 포트폴리오 프로젝트 완성 243
8.9 AI 시대의 UX 디자이너 역할과 미래 251


부록. 치트시트 모음
부록 A. HTML5 치트시트 258
부록 B. CSS3 치트시트 272
부록 C. CSS Bootstrap 치트시트 293
부록 D. CSS Tailwind 치트시트 301
부록 E. CSS Bulma 치트시트 309
부록 F. CSS Materialize 치트시트 313
부록 G. CSS Foundation 치트시트 317