Figmapedia
목록으로 돌아가기
프로토타이핑

모바일 목업 스크롤 구현

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

질문사항

피그마에서 모바일 목업 내의 콘텐츠만 스크롤되도록 구현하는 방법이 있나요?

답변

네, 피그마에서 모바일 목업(디바이스 프레임) 내의 콘텐츠만 스크롤되도록 구현할 수 있습니다.
  • 콘텐츠 프레임 준비: 스크롤될 콘텐츠를 하나의 프레임으로 묶습니다. 이 프레임의 높이는 실제 콘텐츠의 총 높이보다 길어야 합니다.
  • 뷰포트 프레임 생성: 모바일 목업의 화면 영역에 해당하는 프레임을 생성합니다. 이 프레임은 콘텐츠 프레임을 담을 '창' 역할을 합니다.
  • 콘텐츠 프레임 클리핑: 콘텐츠 프레임을 뷰포트 프레임 안으로 이동시킵니다. 뷰포트 프레임을 선택하고 우측 디자인 패널에서 'Clip content'를 활성화하여 뷰포트 밖으로 나가는 콘텐츠를 숨깁니다.
  • 스크롤 설정: 뷰포트 프레임을 선택한 후, 우측 프로토타입 패널에서 'Overflow scrolling'을 'Vertical scrolling' (세로 스크롤) 또는 'Horizontal scrolling' (가로 스크롤)로 설정합니다.
  • 목업 적용: 이 뷰포트 프레임을 모바일 목업 이미지 위에 배치하거나, 피그마의 디바이스 프리셋을 사용하여 프로토타입을 실행하면 목업 안에서만 스크롤되는 것을 확인할 수 있습니다.