프로토타이핑

Fixed position 배경 이미지 스크롤 문제

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

질문사항

프로토타입에서 배경 이미지를 'Fixed position when scrolling'로 설정했더니, 해당 이미지가 스크롤되는 컴포넌트 위에 올라와서 내용이 가려집니다. 이 문제를 해결할 방법이 있을까요?

답변

프로토타입에서 배경 이미지를 'Fixed position when scrolling'로 설정했을 때 스크롤되는 콘텐츠를 가리는 문제는 레이어 순서 때문에 발생합니다. Figma에서 'Fixed position'으로 설정된 레이어는 스크롤되는 다른 레이어보다 항상 위에 표시되는 특성이 있습니다.

이 문제를 해결하는 방법은 다음과 같습니다:

배경 이미지를 가장 하단 레이어로 이동:

배경 이미지 레이어를 선택합니다.

레이어 패널에서 해당 레이어를 스크롤되어야 하는 모든 콘텐츠 레이어보다 아래로 이동시킵니다. (단축키: `Ctrl/Cmd + [` 또는 `Ctrl/Cmd + Shift + [` 로 맨 뒤로 보낼 수 있습니다.)

이렇게 하면 배경 이미지는 고정된 채로 유지되지만, 그 위에 있는 스크롤 가능한 콘텐츠가 정상적으로 표시됩니다.

프레임 구조 활용:

배경 이미지를 별도의 프레임에 넣고, 이 프레임을 메인 콘텐츠 프레임의 가장 아래에 배치합니다.

메인 콘텐츠 프레임에는 스크롤 가능한 콘텐츠만 넣고, 'Vertical scrolling' 또는 'Horizontal scrolling'을 설정합니다.

이 방법은 배경이 단순히 이미지일 때 효과적이며, 복잡한 레이아웃에서는 1번 방법이 더 간단할 수 있습니다.

Figma의 'Fixed position'은 스크롤 시 특정 요소가 화면에 고정되도록 하는 강력한 기능이지만, 레이어 순서에 유의하여 사용해야 합니다.