본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Framer에서 Fixed가 적용이 안될 때

Framer에서 헤더나 네비게이션처럼 화면에 고정되어 있어야 하는 요소를 Fixed로 설정하려고 할 때, 설정이 비활성화되어 당황스러웠던 적이 있을 거예요. 이는 Framer에서 Fixed 속성이 적용 가능한 조건이 명확하게 정해져 있기 때문입니다.

특정 요소를 Fixed로 설정하는 방법

페이지 레벨에 있는 요소만 Fixed가 가능한데요. Fixed는 뷰포트(viewport)내의 특정한 위치에 고정되는 동작이기 때문에, 해당 요소가 반드시 메인 페이지에 직접 중첩되어 있어야 합니다. 이렇게 하면 요소가 뷰포트 내 어느 위치에 고정되어야 하는지 결정할 수 있습니다.

예시: Fixed가 가능한 경우

네비게이션처럼 페이지 레벨에 바로 배치된 요소는 Fixed로 설정할 수 있습니다.

예시: Fixed가 불가능한 경우

아래와 같이 요소가 Frame 안에 중첩되어 있으면, 해당 요소는 뷰포트 기준 위치를 판단할 수 없기 때문에 Fixed 옵션이 비활성화됩니다.

설정을 시도했는데도 Fixed가 여전히 적용되지 않는다면 Framer Contact 페이지를 통해 지원팀에 문의해 주세요.

자주 묻는 질문(FAQ)

Q. Fixed 요소는 항상 브라우저 상단에만 고정되나요?

• 아닙니다. Framer에서는 Fixed 요소의 위치를 자유롭게 조절할 수 있습니다. 상단·하단·좌측·우측 등 원하는 위치에 고정할 수 있어요.

Q. Fixed 요소는 Breakpoint별로 위치를 다르게 설정할 수 있나요?

• 네. 브레이크포인트별로 해당 요소의 위치/크기/여백을 개별 설정할 수 있습니다. 예시로 모바일에서만 중앙 정렬, 데스크톱에서는 왼쪽 고정 같이 원하는 위치에 배정 가능합니다.

Q. Fixed 요소를 여러 개 두면 충돌이 생기나요?

• 아닙니다. Fixed 요소는 여러 개 둘 수 있습니다. 다만, 서로 위치 영역이 겹친다면 시각적으로 겹쳐 보일 수 있으니 Z Index를 적절히 조정하는 걸 추천합니다.

본 글은 Framer 공식 블로그의 ‘Why can’t I set an element to position Fixed?’를 번역·각색한 콘텐츠입니다.