목 차

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