[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 11일차 "프로토타입”

 

 

오늘은 프로토타입에 대해서 배웠습니다. 실습을 많이 해서 진짜 재밌는 하루였어요!

 

 

프로토타입

 

앱과 웹사이트를 개발할 때 실제 원하는 방식으로 서비스가 작동하는지 테스트하는 과정

 

• 왜 하나요?
  프로젝트 관계자 사이의 커뮤니케이션 용도
  기획을 실체화 하는 용도
  개발 전에 사용자의 피드백을 받는 용도
  커뮤니케이션 미스를 줄여서 개발 비용 절약

플로우 (Flow)

 

프로토타이핑을 사용해서 한 페이지에 여러 개의 플로우를 만들어서 전체 유저 플로우를 설계할 수 있다. 예를 들면 로그인 성공, 실패, 회원가입 등 여러가지 플로우를 만들어서 유저 플로우를 설계한다.

 

프로토타입 단축키

Present
✅ Ctrl + Alt + Enter
새 창을 띄워 인터랙션을 확인한다.

Inline Preview
✅ Shift + Space
디자인하면서 미리보기 한다.

 

 

스마트 애니메이트

 

같은 레이어를 찾아서 차이를 인식한 후에 프레임 간의 레이어를 애니메이션으로 만든다. 패럴렉스 스크롤, 터치 제스처, 롱 프레스, 슬라이더, 확대 등 다양하게 스마트 애니메이션을 사용할 수 있다.

 

• 스마트 애니메이트 주의사항
  레이어, 그룹, 프레임, 컴포넌트 모두 스마트 애니메이션 적용 가능. 이름과 계층 구조가 같아야한다.

 

실습한 것

프로토타입실습.mov

5.85MB

 

오늘 프로토타입 실습한 영상입니다. 스마트 애니메이트부터 overlay까지 이렇게 움직이는거구나 하면서 진짜 재밌었습니다! 얼른 어플 화면을 그려보고 싶네요 🥹

 

 

 

---

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.