[디자인부트캠프] Day32 l UI 화면 디자인 프로토타입

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 32일차입니다.

32일차에는 프로토타입에 대해 배우는 시간이었습니다!

1) 프로토타입이란?

✅ 프로토타입이란?

• 웹사이트나 앱을 실제처럼 미리 체험할 수 있게 만든 것
• 개발 전에 UI/UX를 테스트하는 용도로 사용
• 클릭 가능한 화면을 만든다고 생각하면 됨

✅ Figma에서 프로토타입을 만드는 이유

• 디자인만 보는 게 아니라 직접 눌러볼 수 있음
• 개발자와 협업할 때 설명하기 쉬움
• 사용자가 직접 체험하면서 피드백을 받을 수 있음

2) 프로토타입 만들기 – 기초

 

3) 프로토타입에 애니메이션 추가하기

✅ 1) 화면 전환 효과 적용하기

• 버튼을 눌렀을 때 부드럽게 화면 전환
• 기본 설정: Instant → Dissolve (부드럽게 사라지기)

✅ 2) 스마트 애니메이트 사용하기

• 스마트 애니메이트(Smart Animate)로 부드러운 이동 효과 만들기
• 예제: 이미지가 슬라이드되는 화면

✅ 3) 오버레이(팝업) 만들기

• 로그인 버튼을 누르면 작은 창이 뜨도록 설정

DAY 32 과제

UI 화면 디자인 프로토타이핑 & 구글 홈 분석하기

기능 공부중 🫡

데스크탑 & 모바일