CH 7 | 프로토타입 | UIUX 디자인 스쿨 주 3일반 학습일지
🎯학습 내용 (54m)
Chpater 7. 프로토타입
- 7-1 인터렉티브 컴포넌트 스위치 인터랙션
- 7-2 버튼 인터랙션
- 7-3 캐러셀 인터랙션
- 7-4 모달창 인터랙션
7-1 인터렉티브 컴포넌트 스위치 인터랙션
Practice 프로토타입
 |
 |
| 바탕 누르면 인터렉션 요소 보여줌. (파악용이지 100% 구현은 ㄴㄴ)  |
 |
- 컨테이너: UI 요소들을 그룹화하여 레이아웃을 관리하는 구조적 프레임
컴포넌트 내부 프로토타입
 |
 |
- 오브제 제작
- 컴포넌트 생성
- 해당 컴포넌트에 프로토타입 적용
- new 페이지 제작해둔 컴포넌트 활용
- 프로토타입 실행
Win 컴포넌트 내 프로토타입
페이지간의 이동(오브젝트에 프로토타입) vs 오브제간의 이동(컴포넌트에 프로토타입)
: 후자. 베리언트로 활용하는게 더 좋아.
페이지 단위보다 오브제 단위인 것(실무에서는 페이지 수가 많아지고 복잡함)
인스턴스로 사용가능하니 효율적임.
7-2 버튼 인터랙션
호버와 프레스 기능을 이용한 인터렉션 컴퍼넌트
버튼 준비
- 컴포넌트 버튼 준비
호버 / 디폴트 / 프레쓰드
버튼 준비
호버 |
프레쓰드 |
적용해보기
1. 인터랙션(호버와 프레쓰드)된 컴포넌트 버튼을 불러온다.
2. 클릭하면 다음 액션을 나타낼 것을 입력한다
결과
버튼을 누르면 먼저 입력해두었던 액션이 먼저 발동.
이후 페이지 이동으로 !
7-3 캐러셀 인터랙션
슬라이드 넘기는 인터랙션
프로토콜 적용
트리거: 온 드래그
7-4 모달창 인터랙트
- 오버레이 기능: 모달 창이나 팝업처럼, 기존 화면 위에 새로운 콘텐츠를 겹쳐서 보여주는 기능
ㄴ네비게이션, 모달창에 쓰임
프로토타입 적용 할 시, 프레임에 포함 돼야 함!
오픈: 오버레이 액션
포지션: 메뉴얼
1. 모달창 떴을 시에 아무거나 누르면 돌아옴
2. 백그라운드 어둡게
☑️오늘 강의 들으면서..
지금까지 들은 강의 중 오늘, 인터랙션 부분이 가장 재밌었다!!
현재 기존 사용되고 있는 어플이 얼마나 많은 기능들이 포함돼 있는 것인지 생각할 수 있게 되었으며,
많은 페이지와 팝업, 수많은 경로들을 사용자에게 쉽게 제공하려면 어떻게 해야 좋은지 고민과 관찰력을 기를 수 있게 되었다!
😲이건 조금 헷갈렸다..
중간에 슬라이드 형식을 지원하는 캐러셀 인터랙션!
프로토타입 연결하고 지정하는 과정에서 순서와 방향이 헷갈려서 결과가 잘못 나왔었다.
그래도 왜 이렇게 나오지?하며 다시 돌아가 확인하는 과정을 거치니.
문제가 되었던 부분을 한 번 짚고 이해할 수 있어서 유익한 시간이었다 :
이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.