PRODUCT DESIGNER/Daily 🫧

[Day 32] 프로토타입 Prototype

honyonii 2025. 10. 28. 22:02
📍목차
1. 단축키
2. 버티컬(Vertical) 스크롤
3. 호리존(Horizontal) 스크롤
4. 응용
5. 어플 와이어프레임 제작

1. 단축키

Shift + E Design ↔ Prototype
Starting point 누르고 Shift + space 프로토타입 실행 화면

 


2. 버티컬(Vertical) 스크롤

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

▶ 바깥 프레임에 Vertical 걸면 화면 전체가 세로로 스크롤 된다.

▶ 안쪽 요소들을 선택 후 우클릭하여 Frame selection 한 것을  Vertical 걸면 요소만 스크롤 되고 요소 옆의 공간에서는 스크롤 안됨.


3. 호리존(Horizontal) 스크롤

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

▶ 바깥 프레임에 Horizontal 걸면 화면 전체가 가로로 스크롤 된다.

▶ 안쪽 요소들을 선택 후 우클릭하여 Frame selection 한 것을  Horizontal 걸면 요소만 스크롤 되고 요소 옆의 공간에서는 스크롤 안됨.

 


4. 응용

토글, 웹사이트 스크롤, 회전, 케로셀, 메뉴

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 


 

5. 어플 와이어프레임 제작

박명수 짤을 모아서 유료로 다운로드 / 메일로 수령 하는 어플 구상
프로토타입 구성

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

▶ Vertical / Horizontal / 상단바 Fix / 애니메이션 사용

 


 

 

8월달에 혼자 지그재그 어플 따라 만들고 프로토타입 할 때 진짜 어려웠는데

이 때와 비교해보면 오늘 하루만에 많이 성장했다는게 실감난다 ㅜㅜㅜ

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

** 근데 아직도 궁금한건,, 구매하기 버튼있는 하단 바를 상단바처럼 고정해두려고 똑같이 설정했는데 안된다... 왜지..

 

🔍 지금까지 멈춰있는 UI만 만들다가 실제로 사용하는 것과 비슷한 화면을 보니까 너무 재밌었다.
각 항목들이 어떤 애니메이션을 나타내는지 더 외워야 적응될 것 같지만 오늘 하루만으로도 어떻게 움직이는지 이해할 수 있었다.

제일 신기했던건 애니메이션 속도를 마음껏 조절할 수 있는 거 와  로딩 화면 자동으로 넘어가는 거!!
내일까지만 프로토타입하고 다른 내용으로 넘어간다는게 많이 아쉽다..

'PRODUCT DESIGNER > Daily 🫧' 카테고리의 다른 글

[Day 34] 그로스 해킹  (0) 2025.10.30
[Day 33] 디자인 핸드오프  (0) 2025.10.30
[Day 31] 프레임 워크  (0) 2025.10.27
[Day 30] UX 리서치 | 멘탈모델  (0) 2025.10.24
[Day 29] UX 리서치 분석 | 휴리스틱 평가  (0) 2025.10.23