이 튜토리얼서는 스테이트 (States)와 인터랙션 (Interactions)를 사용하여 세 가지 유형의 캐러셀(회전목마)를 만듭니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Ffe4e0213-2ac8-450d-808c-3e0971375637_carousel_final.mp4

→ 이 튜토리얼에 대해 이미 완성된 .uxp 파일 다운로드하기

디자인 설정

  1. UXPin에서 프로토타입을 열고 왼쪽의 Quick tools (빠른 도구모음) 메뉴에서 캔버스에 직사각형을 추가합니다. 그런 다음 직사각형을 복제하여 세 개의 직사각형을 만듭니다. 이러한 직사각형은 수평 또는 수직으로 배치할 수 있습니다.
  2. 속성 패널의 Fill with image를 클릭하거나, 상단 바의 Fill with data을 클릭하여 각 사각형을 이미지로 채웁니다.
  3. 세 개의 직사각형을 모두 선택하고 바로 가기에서 ⌘ + G 또는 상단 막대에서 그룹화합니다.
  4. 그런 다음 속성 패널의 Crop selected content 확인란을 선택하여 첫 번째로 하고 싶은 슬라이드로 자릅니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2Fa735454a-8b55-4b54-816c-6560dc54d011_01_cropcontent.mp4

  1. 톱 바에 있는 Add State 아이콘을 클릭합니다. 이미 State 1 (Base)가 생성되었습니다. 두 번째 상태로 State 2를 입력하고 Enter 키을 클릭합니다.
  2. New state를 클릭하여 State 3을 만들고 이름을 설정한 후 Enter 키를 누르십시오.
  3. State 2를 클릭하여 모든 슬라이드를 잡고 한 번에 이동한 다음 두 번째 슬라이드가 밝은 파란색 프레임 안으로 들어가도록 드롭합니다. 세 번째 슬라이드도 같은 방식으로 State 3으로 만듭니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F8da82725-d855-4bb1-8920-3ce8f4cb1eeb_02_newstates.mp4

<aside> 💡 힌트 자신의 캐러셀를 만드는 경우 각 슬라이드에 원하는 콘텐츠를 넣을 수 있으며 슬라이드 수만큼 원하는 스테이트를 만들 수 있습니다.

</aside>