[Day43] 사용자 경험(CX)디자인 - 인터랙션 실습

캐러셀 인터랙션

캐러셀은 서비스의 메인 페이지에서 디자인 컨셉이나 마케팅 정보를 순서대로 전환하면서 보여주는 이미지 방식 (swiper)

📍 인터랙션 옵션 설정

• Trigger > on drag

📍 프로토타입 인터랙션이 연결된 모습

---

오버플로우 스크로링 인터랙션

• 오버플로우 스크롤링은 화면 내에서 좌우로 스크롤이 된다.
• 스크롤 도중 멈추면 멈춘 위치에서 이미지가 좌/우 어디로도 치우치지 않고 그대로 정지
  

📍 인터랙션 옵션 설정

• Prototype메뉴에서 Scroll behavior > Overflow > Horizontal 설정

⭐️ Frame 1이 오버플로우 될 영역을 지정해야하므로 우측 프레임 끝가지 Frame 2의 넓이를 줄여줌.

📍 프로토타입 실행

• 스크롤 도중 멈추면 멈춘 위치에서 정지

---

모달 창 인터랙션

모달창이란 특정 영역에 원하는 크기로 새로운 디자인을 띄우는 것
📍 인터랙션 옵션 설정

• Position을 설정을 통해 원하는 위치에 모달이 뜨도록 조정
• Action > Open overlay , Overlay > Modal

📍 프로토타입 인터랙션이 연결 & 실행

---

내비게이션 드로워 인터랙션

네비게이션 드로워는 화면의 왼쪽 가장자리에서 서랍처럼 열리고 닫히면서 앱을 탐색할 수 있는 패널
📍 인터랙션 옵션 설정

• Action > Open overlay , Animation > Move in (방향 설정 →)

📍 프로토타입 인터랙션이 연결 & 실행

---

파운데이션

• Appbar, Banner, Button, Menu 등 규격 정리해 놓은 곳

⭐️ Grid Tip

• Mobile Grid : 컬럼 4, 마진 16, 거터 16
• Web Grid : 컬럼 12, 마진 64, 거터 36

---

END