프로토타이핑

Open Overlay 팝업 스크롤 설정

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

질문사항

Open Overlay로 띄운 팝업이 길어서 세로 스크롤이 필요합니다. 팝업 프레임에 `Vertical scroll`을 설정하면 경고(느낌표)가 뜨고, `Open Overlay` 프로토타입 설정 시 `Scroll with parent`로 되어있는데, 오버레이 팝업 스크롤을 가능하게 하려면 스크롤 포지션을 어떻게 설정해야 하나요?

답변

Open Overlay로 띄운 팝업이 스크롤되도록 하려면 다음 단계를 따르세요:

팝업 프레임 설정:

스크롤이 필요한 팝업 콘텐츠를 담고 있는 프레임(오버레이로 띄울 프레임)을 선택합니다.

이 프레임의 높이(Height)를 고정값(Fixed height)으로 설정합니다. 이 높이는 팝업이 화면에 표시될 최대 높이가 됩니다.

팝업 프레임 내부에 스크롤되어야 할 콘텐츠가 이 고정된 높이보다 더 길게 배치되어야 합니다.

Overflow Scrolling 설정:

팝업 프레임을 선택한 상태에서, 오른쪽 디자인 패널의 `Prototype` 탭으로 이동합니다.

`Overflow scrolling` 섹션에서 `Vertical scrolling`을 선택합니다. (만약 가로 스크롤이 필요하면 `Horizontal scrolling` 또는 `Both`를 선택).

Open Overlay 설정:

오버레이를 트리거하는 요소(버튼 등)에 `Open Overlay` 인터랙션을 설정합니다.

`Overlay` 설정에서 `Position`을 `Manual` 또는 `Center` 등으로 지정하고, `Close when clicking outside` 등의 옵션을 필요에 따라 설정합니다.

`Scroll with parent` 옵션은 오버레이가 아닌, 오버레이를 띄운 부모 프레임의 스크롤 동작에 영향을 줍니다. 오버레이 자체의 스크롤과는 무관합니다.

이렇게 설정하면, 팝업 프레임의 고정된 높이보다 콘텐츠가 길 때, 해당 팝업 내에서 세로 스크롤이 가능해집니다.