[디자인부트캠프] DAY 32 | 프로토타입

32일차!

ux 파트가 끝났지만 더 보완 중인..

하지만 강의는 프로토타입파트로 넘어갔다!

프로토타입은 만든 작업물에 움직이는 애니메이션을 넣을 수 있는 기능이다!

ㅎ-ㅎ 작업물을 실제 어플처럼 구현해볼 수 있을 거 같아 재밌을 거 같다!!

 

 

 

 

프로토타입이란?

 

 

프로토타입이란?

 

🌟 프로토타입이란?

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

 

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

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

프로토타입 만들기 – 기초

프로토타입 기초

✅ 1) 디자인을 준비해요

• 간단한 로그인 화면과 홈 화면을 준비
• 프레임(화면)을 만든 후, 버튼과 텍스트 배치

 

 

✅ 2) 프로토타입 연결하기

• Figma에서 Prototype 탭 선택
• 버튼을 클릭 → 다음 화면으로 이동하는 연결 만들기
• 클릭하면 이동하는 간단한 프로토타입 완성

 

 

✅ 3) 미리 보기 & 테스트

• 오른쪽 상단의 "Present" 버튼 클릭
• 실제 화면처럼 눌러보고 확인하기

 

 

 

 

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

 

 

프로토타입 애니메이션

 

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

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

 

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

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

 

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

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

 

 

 

 

나만의 간단한 프로토타입 만들기

 

 

프로토타입 애니메이션

 

✅ 1) 프로젝트: 간단한 네비게이션 만들기

• 홈 화면 → 프로필 화면 → 설정 화면 연결
• 실제 앱처럼 클릭해서 이동해 보기

 

✅ 2) 프로토타입 공유하기

• 팀원이나 친구에게 공유해서 테스트
• "Share" 버튼을 눌러 링크 공유

 

 

 

 

 

🌟오늘 핵심
✅ 클릭 가능한 간단한 프로토타입을 만들 수 있다.
✅ 버튼을 눌렀을 때 화면이 바뀌는 기능을 적용할 수 있다.
✅ 기본적인 애니메이션 효과를 넣을 수 있다.

 

 

2025.03.12 과제 32일차

 

전에 도서앱으로 클론디자인했던 작업물로 프로토타입연습했다!

이거저거 만져보면서 ㅎㅎ 해보니까 재밌고 신기하다