📝

숙제 : 인터랙션 프로토타입 만들기

1️⃣ 아코디언 메뉴

과정 🖍️

1. 베리언츠에서 기본 상태, 선택된 상태 두 버전을 생성한다.
2. 선택된 상태 안에 리스트와 타이틀이 함께 들어가있어야하니 유의
3. 인터렉션에서 클릭하면 상태를 바꾸는 Change to 로 변경
   (닫힌 상태를 off, 열린 상태를 on으로 적용하였기 때문에 토글 버튼이 나와있다.)

완성 🥸

부족한 점 🥹

메뉴를 선택하여 리스트를 보이도록 하는 것은 완성했지만 다시 닫지 못 한다.

미리보기를 하기 전까지 펼쳐진 상태를 확인할 수 없는 것이 어려웠다.

2️⃣ 글쓰기 버튼 인터렉션

📢 글쓰기 버튼 주목
다행히 2주차 과제로 당근 앱 화면을 클론 디자인했기때문에 인터렉션만 추가하면 됐다.

과정 🖍️

1. 글쓰기 버튼이 눌렸을 때 (Pressed), 클릭됐을 때 두가지 버전의 베리언츠 설정
2. 당근 앱 화면의 세번째 사진과 같이 글쓰기 버튼을 클릭했을 때 보여지는 오버레이 속성의 다이얼로그 생성
   클릭되었을 때는 글쓰기 버튼보다 작은 원인데 원래 글쓰기 버튼 컴포넌트 안에 원 버튼을 끝에 맞춰 배치하였다.
3. 두개의 다이얼로그를 함께 선택하여 오토 레이아웃 적용
4. 프로토타입 패널로 넘어가 글쓰기 버튼에 인터렉션을 추가한다.
   누르고 있는 경우에 보여지는 인터렉션이므로 트리거를 While pressing으로 변경, 눌린 상태 pressed가 될 수 있도록 change to로 액션 변경

5. 누르고 있다가 마우스에서 손을 뗐을 때 (클릭 되었을 때)의 인터렉션을 추가한다.
   플러스 버튼을 눌러 인터렉션을 추가하면 두가지가 적용이된다.
   트리거를 온 클릭, 액션을 오버레이 열기 (Open overlay) 로 적용
   포지션을 매뉴얼로 변경하면 다이얼로그를 내가 원하는 위치에 가져다 놓을 수 있다.
   뒷 배경이 어두워지는 것을 확인하였으므로 배경 추가

완성 🥸

부족한 점 🥹

버튼을 누르고 있을 때, 클릭했을 때 모두 원활하게 작동하지만 닫는 것이 안 된다.

3️⃣ 네이버 지도 바텀시트

📢 푸터가 있었는데 없어요

3주차 과제가 네이버 지도 클론 디자인이라서 인터렉션만 적용하면 됐다.

과정 🖍️

1. 바텀 시트가 안 보이는 화면과 바텀 시트 준비
2. 프로토타입 패널에서 핸들에 인터렉션 적용
   드래그를 해야 올라오는 것이므로 트리거에 On drag, 올라오는 방향 적용, 행동에 오버레이 열기 적용한 후 열고 싶은 오버레이 선택
   라이트 박스가 있었으므로 백그라운드 선택

3. 다시 내리면 안 보이게 하고 싶어서 바텀 시트의 핸들에 인터렉션 추가

완성 🥸

부족한 점 🥹

핸들을 잡고 드래그 해야하는데 핸들 선택이 어려웠다.

원래 네이버 지도 어플을 보면 하단의 내비게이션 바로 바텀시트가 보여지는데 내가 드래그를 할 때 하단 내비게이션 바를 가려 어색해보였기 때문에 안 보이게 하고 진행하였다.