[1주차 - Day3] 7. 프로토타입

Chapter 7. 프로토타입

7-1) 인터랙션과 미리보기

 

 

 

두 페이지 인터랙션 걸어주기

 

두 페이지를 연결하고 미리보기를 눌러보면 화면 클릭시 다음 화면으로 파란색 페이지가 뜨고 다시 한 번 클릭하면 분홍색 페이지가 뜬다.

 

 

 

---

 

7-2) 베리언트 인터랙션

 

 

버튼 두 개를 만들고 인터랙션을 연결한다. 컴포넌트로 생성해 다음 페이지에서 버튼을 가져가 미리보기를 눌러보면 버튼이 바뀌게 된다.

 

 

 

 

---

 

7-3) 버튼 인터랙션

 

 

normal 버튼에서 hover 버튼으로 갈 때는 While hovering 으로 설정하고, hover 버튼에서 pressed 로 연결할 때는 while pressing으로 설정한다.

 

 

미리보기로 보면 버튼 위에 마우스를 올렸을 때와 클릭할 때 버튼 색이 바뀌는 것을 확인할 수 있다.

 

 

 

---

 

7-4) 캐러셀 인터랙션

좌우로 슬라이딩 되는 이미지

 

사진을 불러와서 세개의 프레임을 만들고 인터랙션 연결시켰다.

아래 3개도 연결시켜서 사진은 드래그, 점은 탭 하면 사진이 바뀌도록 했다.

 

 

조금 복잡해서 따로 혼자 처음부터 해보는 시간을 가져야할 것 같다.

 

 

---

 

7-5) 오버플로우 스크롤링

 

 

동그라미를 두 개 만든 후 shift + A를 눌러 오토레이아웃을 만들고 프로필을 만들고 사진을 넣었다.

프레임1을 누르고 Frame selection을 눌러야 프로토타입으로 갔을때 스크롤링이 작동한다.

 

 

Frame selecion은 드래그했을 때 왔다갔다 보여질 부분을 만들어 주는 역할을 한다.

Scroll behavior에서 수평으로 설정해준다.

 

 

미리보기를 해보면 프로필을 좌우로 드래그할 수 있다.

 

 

 

---

 

 

7-6) 모달 창 인터랙션

 

모달창이 뜰 자리를 스티치로 표시해 보았다.

 

 

Manual로 설정하면 모달 창을 어디에 뜨게할건지 직접 설정할 수 있다.

모달창이 뜰땐 위에서 아래로, 닫을 땐 위에서 아래로 내려가게 설정했다. (보라색 동그라미 화살표)

 

close when clicking outside를 체크하면 모달창이 뜬 후 배경을 클릭했을때 모달창이 사라지게 된다.

Add background는 모달창이 떴을 때 잘 보이게 하기 위해서 배경 프레임이 살짝 어두워지게 만든다.

 

오픈 버튼과 모달창을 연결시키고 클로즈 버튼을 배경 프레임과 연결시켰더니 오픈 버튼을 누르면 모달창이 위로 올라오고 배경이나 클로즈 버튼을 누르면 아래로 내려가는 것을 볼 수 있었다.

 

 

 

---

 

7-7) 내비게이션 드로워

메뉴 아이콘과 닫힘 아이콘을 넣었다.

메뉴 아이콘과 메뉴 프레임을 연결시키는데 메뉴 프레임이 떠야하므로 Open overlay로 설정하고 왼쪽에서 오른쪽으로 창이 뜨도록 설정했다.

 

그다음 메뉴 프레임이 떴을 때 옆으로 드래그하면 메뉴 프레임이 사라지도록 close overlay를 사용하면 된다.

 

메뉴 프레임 속 닫힘 아이콘도 원래 프레임으로 연결시켰다. 클릭했을 때 닫혀야하므로 on tap, Close overlay로 설정했다.

 

 

이렇게 하면 메뉴 아이콘을 누르면 메뉴 창이 뜨고 메뉴 창에 있는 클로즈 아이콘을 누르거나 옆으로 드래그 했을 때 둘다 메뉴 창이 사라지는 것을 확인할 수 있다.

 

 

---

 

7-8) 드래그 인터랙션

 

 

지도를 드래그하면 화면에 보이지 않는 다른 부분을 볼 수 있도록 만들기 위해 프레임 배경에 큰 지도 이미지를 불러오고 상단바를 만들었다.

프레임 전체를 누르고 수평 수직 둘다 움직일 수 있도록 설정했다.

 

 

 

지도 이미지만 움직이는 것이 아니라 상단바까지 움직이는 것을 볼 수 있다.

 

상단바와 텍스트, 아이콘 모두 선택한 뒤 고정을 시켰다.

고정시킨 상단바는 움직이지 않고 지도 이미지만 움직이는 것을 볼 수 있다.