프로토타이핑

가로 스크롤 페이지네이션 프로토타입

피그마 오픈카톡방2026. 3. 7.

질문사항

프레임 안에 페이지네이션 요소가 있고 드래그했을 때 가로로 스크롤되는 프로토타입을 어떻게 만드나요?

답변

가로 스크롤이 가능한 페이지네이션 프로토타입을 만들려면 다음과 같은 단계를 따를 수 있습니다:

콘텐츠 준비: 가로로 스크롤될 이미지나 콘텐츠들을 Auto Layout으로 묶습니다. 이 Auto Layout 프레임의 총 너비가 뷰포트(스크롤 영역) 프레임보다 넓어야 합니다.

뷰포트 프레임 설정: 콘텐츠 Auto Layout 프레임을 감싸는 메인 프레임을 만듭니다. 이 프레임이 사용자가 보게 될 스크롤 영역입니다.

이 메인 프레임의 `Clip content`를 활성화하여 콘텐츠가 프레임 밖으로 나가지 않도록 합니다.

`Prototype` 탭에서 `Overflow scrolling`을 `Horizontal scrolling`으로 설정합니다.

페이지네이션 인디케이터 준비: 각 페이지 상태를 나타내는 인디케이터(예: 점들)를 디자인합니다. 각 인디케이터가 활성화된 상태를 보여주는 별도의 프레임을 준비하거나, Variants를 사용하여 컴포넌트를 만듭니다.

인터랙션 설정 (Smart Animate 활용):

드래그 스크롤: 뷰포트 프레임 내의 콘텐츠를 드래그했을 때 다음 페이지로 이동하는 효과를 만들려면, 각 페이지의 시작점을 나타내는 별도의 프레임을 만듭니다. 예를 들어, '페이지 1' 프레임, '페이지 2' 프레임 등. 각 프레임에서 콘텐츠의 X 위치만 다르게 설정합니다.

`Prototype` 탭에서, 콘텐츠 프레임에 `On Drag` 인터랙션을 추가하고 `Navigate to` 다음 페이지 프레임을 선택합니다. `Animation`은 `Smart Animate`로 설정하여 부드러운 전환을 만듭니다. 이전 페이지로 돌아가는 드래그도 동일하게 설정합니다.

인디케이터 탭: 페이지네이션 인디케이터를 탭했을 때 해당 페이지로 이동하도록 `On Tap` 인터랙션을 설정하고 `Navigate to` 해당 페이지 프레임을 선택, `Smart Animate`를 적용합니다.

이렇게 하면 사용자가 드래그하거나 인디케이터를 탭하여 가로로 스크롤되는 페이지네이션을 구현할 수 있습니다.