대구 AI SW 파일럿

Day 5 UI/UX Design & Interaction Design 영상 + AI 챗봇 학습

UI/UX 디자인 & 인터랙션 설계와 AI 학습도우미

Wireframe 단계에서 나아가 실제 서비스 수준의 고해상도 UI/UX를 설계하고, 디자인 시스템과 상태 기반 인터랙션을 적용해 사용자 중심의 서비스 경험을 구체화하는 5일차 학습 콘텐츠입니다.

대상: 와이어프레임 설계를 완료한 학생

준비물: 노트북, Figma 계정

구성: 2시간 이론 / 3시간 실습 / 1시간 공유

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을 어떻게 활용해?” 같은 질문을 해보세요.

\n