목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
가로 스크롤이 생기는 이유는 무엇인가요?
Framer 웹사이트에서 원치 않는 가로 스크롤이 발생하는 경우는 대개 특정 속성 때문에 요소가 뷰포트 너비를 초과할 때 나타납니다. 해당 가이드를 통해 이 문제를 식별하고 해결하는 방법을 알아보시길 바랍니다.
문제 파악의 중요성
가로 스크롤은 보통 뷰포트보다 너비가 넓은 요소들로 인해 발생합니다. overflow 속성을 "hidden"으로 설정하면 일시적으로 문제를 숨길 수는 있지만, 해당 방법은 sticky 요소의 작동을 방해할 수 있습니다. 결국 문제가 되는 요소를 정확히 찾아내어 수정하는 것이 중요합니다.
overflow 문제의 주요 원인들
Fixed 된 요소: 1200px처럼 픽셀 단위로 설정되어 반응형으로 조절되지 않는 너비의 요소들입니다.
큰 min-width 값: 최소 너비 설정값이 현재 뷰포트보다 큰 경우입니다.
Absolute 위치 지정: Absolute로 설정된 요소가 뷰포트 바깥이나 가장자리에 걸쳐 있는 경우입니다.
애니메이션 효과: X-offset, 회전, 스케일 등이 적용된 애니메이션으로 인해 요소가 일시적으로 뷰포트 밖으로 나가는 경우입니다.
Fit 너비: width: fit 설정이 적용된 요소가 의도치 않게 뷰포트 너비를 초과하는 경우입니다.
overflow 문제를 해결하는 방법
문제가 되는 요소를 찾아보기 위에 나열된 단서들을 바탕으로 프로젝트의 각 요소를 점검합니다. Framer의 레이아웃 도구를 사용해 너비, 위치, 애니메이션을 꼼꼼히 살펴보세요.
너비 조정하기 문제가 되는 요소의 너비를
fill로 설정하여 뷰포트 안에 들어오게 만드세요. 또한 애니메이션이 실행될 때 요소가 화면 밖으로 확장되지 않는지 다시 한번 검토해야 합니다.브라우저에서 검증하기 : 사이트를 미리보기로 확인하며 가로 스크롤 문제가 깔끔하게 해결되었는지 체크해 보세요.
결론
가로 스크롤 이슈를 해결하려면 overflow를 일으키는 요인의 너비를 직접 조정하는 것이 가장 좋습니다. overflow의 hidden 속성에만 의존하면 sticky 기능이 제대로 작동하지 않을 수 있으니 주의하세요.
만약 여전히 문제가 해결되지 않는다면 Framer의 문의 페이지를 통해 도움을 요청해 주세요.
자주 묻는 질문(FAQ)
Q. overflow에서 hidden 속성을 설정하면 sticky 속성이 작동하지 않나요?
네, Sticky 속성은 해당 요소가 포함되어있는 프레임의 overflow가 hidden으로 설정되어 있으면 고정될 스크롤 컨테이너를 찾지 못해 작동을 멈추게 됩니다.
Q. 텍스트 요소가 너무 길어서 가로 스크롤을 유발하는 경우도 있나요?
네, 텍스트 자체가 프레임보다 커질 수 있습니다. 이럴 때는 텍스트 박스의 너비를
Fill로 설정하여, 요소 내에서 줄바꿈이 생기도록 만들면 해결할 수 있습니다.
Q. 가로 스크롤 이슈는 오직 모바일 브라우저에서만 발생하는 현상인가요?
아닙니다. 화면 너비가 좁아지는 모든 환경에서 발생할 수 있습니다. 다만, 모바일은 물리적인 화면 너비가 가장 좁기 때문에 픽셀(px) 단위로 고정된 요소들이 뷰포트를 초과할 확률이 매우 높아 문제가 더 자주 발견됩니다.
본 글은 Framer 공식 블로그의 ‘How to fix horizontal scrolling issue on mobile’를 번역·각색한 콘텐츠입니다.
