AI

ACE AI Startup Bootcamp

UI/UX Design & Interaction Design

πŸ“– Session 5 μ‹€μŠ΅ κ΅μ•ˆ 보기 ← 컀리큘럼 νŽ˜μ΄μ§€λ‘œ λŒμ•„κ°€κΈ°
Day 5 UI/UX Design & Interaction Design μ˜μƒ + AI 챗봇 ν•™μŠ΅

UI/UX λ””μžμΈ & μΈν„°λž™μ…˜ 섀계와 AI ν•™μŠ΅λ„μš°λ―Έ (Codex AI 연계)

Wireframe λ‹¨κ³„μ—μ„œ λ‚˜μ•„κ°€ μ‹€μ œ μ„œλΉ„μŠ€ μˆ˜μ€€μ˜ 고해상도 UI/UXλ₯Ό μ„€κ³„ν•˜κ³ , λ””μžμΈ μ‹œμŠ€ν…œκ³Ό μƒνƒœ 기반 μΈν„°λž™μ…˜μ„ μ μš©ν•΄ μ‚¬μš©μž μ€‘μ‹¬μ˜ μ„œλΉ„μŠ€ κ²½ν—˜μ„ κ΅¬μ²΄ν™”ν•˜λŠ” 5일차 ν•™μŠ΅ μ½˜ν…μΈ μž…λ‹ˆλ‹€. λ³Έ μ‹€μŠ΅μ—μ„œλŠ” Codex Client Workspaceλ₯Ό ν™œμš©ν•˜μ—¬ ν™”λ©΄ 섀계 μƒμ˜ 마찰 지점(Friction Points)을 κ°κ΄€μ μœΌλ‘œ λΆ„μ„ν•˜λŠ” UX Audit, κΈ°νšμ„œ ν™”λ©΄ κ°„μ˜ UI/μš©μ–΄ 일관성 검사, User Journey 동선 μ΅œμ ν™” 단좕 섀계, κ³ μ—°λ Ή 페λ₯΄μ†Œλ‚˜ 적용 κ³€κ²½ 둜그 확보 및 ν’ˆμ§ˆ 평점 μž‘μ„±μ„ μ§„ν–‰ν•©λ‹ˆλ‹€.

λŒ€μƒ: μ™€μ΄μ–΄ν”„λ ˆμž„ 섀계λ₯Ό μ™„λ£Œν•œ 학생
μ€€λΉ„λ¬Ό: λ…ΈνŠΈλΆ, Figma 계정
ꡬ성: 2μ‹œκ°„ μ‚¬μš©μž 관점 ν™”λ©΄ κ²€ν†  / 3μ‹œκ°„ UI 일관성 검증 및 동선 κ°œμ„  섀계 / 1μ‹œκ°„ 페λ₯΄μ†Œλ‚˜ ν’ˆμ§ˆ 검증 및 평가 λ³΄κ³ μ„œ μž‘μ„±
πŸ“– Session 5 κ΅μ•ˆ λ°”λ‘œκ°€κΈ°

πŸš€ Day 5 μ‹€μŠ΅ MVP Tasks λ‘œλ“œλ§΅

전체 Task λ³΄λ“œ κ°€κΈ° β†’
πŸš€
Interactive Board

μ‹€μŠ΅ Task 체크리슀트

ν•„μˆ˜ νƒœμŠ€ν¬μ˜ 진척도λ₯Ό κΈ°λ‘ν•˜κ³  상세 μ‹€μŠ΅ κ°€μ΄λ“œλΌμΈμ„ ν™•μΈν•΄λ³΄μ„Έμš”.

πŸ‘‰ 상세 Task λ³΄λ“œ 이동
TASK 1
UX Review

Task 1. μ‚¬μš©μž κ΄€μ μ—μ„œ ν™”λ©΄ κ²€ν† ν•˜κΈ°

처음 μ‚¬μš©ν•˜λŠ” 초보 μ‚¬μš©μžμ˜ μ‹œκ°μ—μ„œ ν™”λ©΄ λͺ…μ„Έλ₯Ό κ°κ΄€μ μœΌλ‘œ κ²€μ¦ν•˜κ³  뢈편 μ˜μ—­μ„ μ°ΎμŠ΅λ‹ˆλ‹€.

Task 1 μ‹€μŠ΅μ‹€ μž…μž₯
TASK 2
UI Consistency

Task 2. ν™”λ©΄μ˜ 일관성 κ²€ν† ν•˜κΈ°

μ—¬λŸ¬ 기획 ν™”λ©΄ κ°„μ˜ μš©μ–΄ 혼용, λ²„νŠΌ 크기 및 배치 λ ˆμ΄μ•„μ›ƒμ˜ λΉ„λŒ€μΉ­μ„±μ„ λ°œκ²¬ν•©λ‹ˆλ‹€.

Task 2 μ‹€μŠ΅μ‹€ μž…μž₯
TASK 3
Journey Mapping

Task 3. μ‚¬μš©μž 동선 κ°œμ„ ν•˜κΈ°

λͺ©μ μ§€μ— λ„μ°©ν•˜κΈ°κΉŒμ§€μ˜ 흐름 뎁슀λ₯Ό λ„μΆœν•˜κ³  λΆˆν•„μš”ν•œ 단독 μ•ˆλ‚΄ μŠ€ν…μ„ μΆ•μ†Œν•©λ‹ˆλ‹€.

Task 3 μ‹€μŠ΅μ‹€ μž…μž₯
MISSION 1
AI Persona

Mission 1. 처음 μ‚¬μš©ν•˜λŠ” μ‚¬μš©μž λ˜μ–΄λ³΄κΈ°

슀마트폰 μ‚¬μš©μ΄ λ‹€μ†Œ λ‚―μ„  κ³ μ—°λ Ή 페λ₯΄μ†Œλ‚˜λ₯Ό νˆ¬μ˜ν•΄ μƒμƒν•œ κ°€μž… κ³€κ²½ 둜그λ₯Ό ν™•λ³΄ν•©λ‹ˆλ‹€.

Mission 1 μ‹€μŠ΅μ‹€ μž…μž₯
MISSION 2
Usability Score

Mission 2. AI와 ν•¨κ»˜ μ„œλΉ„μŠ€ ν’ˆμ§ˆ ν‰κ°€ν•˜κΈ°

정보 가독성, 회볡λ ₯, 동선 νš¨μœ¨μ„±μ„ 점수둜 맀기고 μ’…ν•© κ°œμ„ μ•ˆμ„ μ²˜λ°©λ°›μŠ΅λ‹ˆλ‹€.

Mission 2 μ‹€μŠ΅μ‹€ μž…μž₯

Day 5 κ°•μ˜ μ˜μƒ

유튜브 μΆ”μ²œ κ°•μ˜
Day 5 컀리큘럼 핡심 주제(고해상도 UI, λ””μžμΈ μ‹œμŠ€ν…œ, μƒνƒœ 섀계, μΈν„°λž™μ…˜, ν”„λ‘œν† νƒ€μ΄ν•‘)에 ν•΄λ‹Ήν•˜λŠ” 유튜브 μΆ”μ²œ κ°•μ˜ λ¦¬μŠ€νŠΈμž…λ‹ˆλ‹€. (μ™ΈλΆ€ 퍼가기 및 μž¬μƒμ΄ ν—ˆμš©λœ 무료 κ°•μ˜ μ˜μƒμœΌλ‘œ κ΅¬μ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€.)
πŸ“š 전체 κ°•μ˜ λͺ©λ‘ (5개)
  • β–Ά
    1. Design System & Figma Variable Set Up - Full Tutorial
    38:15
  • β–Ά
    2. UI / UX Design Course - Mockup & Design in Figma
    3:58:30
  • β–Ά
    3. Master Figma Components and Variants in 20 Minutes
    20:00
  • β–Ά
    4. Figma Tutorial: Smart Animate and Drag Triggers
    15:45
  • β–Ά
    5. Figma Variables BEGINNER Guide + Variables
    18:42

핡심 μš”μ•½ λ…ΈνŠΈ

Day 5 Summary

였늘의 핡심 λͺ©ν‘œ

Day 5μ—μ„œλŠ” Wireframe λ‹¨κ³„μ—μ„œ λ‚˜μ•„κ°€ μ‹€μ œ μ„œλΉ„μŠ€ μˆ˜μ€€μ˜ 고해상도 UI/UXλ₯Ό μ„€κ³„ν•˜κ³ , λ””μžμΈ μ‹œμŠ€ν…œκ³Ό μƒνƒœ 기반 μΈν„°λž™μ…˜μ„ μ μš©ν•΄ μ‚¬μš©μž μ€‘μ‹¬μ˜ μ„œλΉ„μŠ€ κ²½ν—˜μ„ κ΅¬μ²΄ν™”ν•©λ‹ˆλ‹€.

  • 고해상도 UI λ””μžμΈ (High-fidelity): νƒ€μ΄ν¬κ·Έλž˜ν”Ό, 컬러 κ°€μ΄λ“œλΌμΈ, κ·Έλ¦¬λ“œ 적용
  • λ””μžμΈ μ‹œμŠ€ν…œ ꡬ좕: λ²„νŠΌ, 인풋, λͺ¨λ‹¬ λ“± 곡톡 μž¬μ‚¬μš© μ»΄ν¬λ„ŒνŠΈ κ·œκ²©ν™”
  • μƒνƒœλ³„ UI 섀계 (State Design): κΈ°λ³Έ(Default), ν˜Έλ²„(Hover), 포컀슀(Focus), ν™œμ„±/λΉ„ν™œμ„± μƒνƒœ μ •μ˜
  • μΈν„°λž™μ…˜ 및 νŠΈλžœμ§€μ…˜ (Interaction): ν™”λ©΄ κ°„ 유기적 μ—°κ²°κ³Ό Smart Animate κΈ°λŠ₯ ν™œμš©
  • μ‚¬μš©μ„± ν…ŒμŠ€νŠΈ 및 ν”Όλ“œλ°± 반영: ν”„λ‘œν† νƒ€μž… 싀행을 ν†΅ν•œ 흐름 검증
ν•™μŠ΅ 팁: 였λ₯Έμͺ½ AI μ±—λ΄‡μ—κ²Œ β€œHigh-fidelity와 Low-fidelity UI의 결정적인 차이가 뭐야?” λ˜λŠ” β€œFigmaμ—μ„œ λ””μžμΈ μ‹œμŠ€ν…œμ„ λ§Œλ“€ λ•Œ Variants와 Auto Layout을 μ–΄λ–»κ²Œ ν™œμš©ν•΄?” 같은 μ§ˆλ¬Έμ„ ν•΄λ³΄μ„Έμš”.