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

왜 사이트의 모바일에서 화면 넓이가 꽉 채워지지 않을까요?

Framer로 제작한 사이트가 모바일 화면의 Breakpoint에서 전체 화면 넓이가 꽉 채워지지 않는다면, 가장 흔한 원인은 페이지 내 요소의 너비 설정이 뷰포트보다 넓기 때문입니다. 이 문제는 너비의 조정만으로 간단하게 해결할 수 있습니다.

1. 문제 요소 찾기

먼저, 모바일 화면에서 사이트가 가로로 넘치거나 여백이 생기는 부분을 찾아야 합니다. 이러한 설정은 요소가 작은 화면에서의 크기에 맞춰 제대로 줄어들지 못하게 만들어, 사이트 전체가 화면보다 넓게 표시되는 원인이 됩니다.

다음과 같은 설정이 있는 요소가 문제를 일으키는 경우가 많습니다.

• 반응형 폭(예: Fill / 1fr이나 Relative 100%) 대신, 고정 폭(예: Fixed / 460px)로 설정된 요소

• 모바일 화면에 비해, 너무 큰 Max Width 값이 적용된 요소

2. 너비 설정 수정하기

문제가 되는 요소를 찾았다면, 다음과 같이 폭 설정을 수정해주세요.

• 고정 폭을 상대 단위로 변경
  px 단위 대신 100% 또는 1fr로 변경하면 화면 크기에 따라 자동으로 조정돼요.

• Max Width 조정
  모바일 뷰포트보다 큰 값이 설정되어 있다면 제거하거나, 적절한 값으로 낮춰 수정해주세요.

3. 변경사항 적용 및 게시

설정을 모두 수정한 뒤에는 사이트를 다시 게시해야 하는데요. “Publish” 버튼을 눌러 변경사항을 적용해주시면 됩니다. 이후 모바일 화면에서 사이트가 화면 전체를 균일하게 채우는 것을 확인하실 수 있습니다.

위 단계를 모두 수행한 후에도 문제가 해결되지 않으셨다면, 문의 페이지를 통해 추가적인 도움을 받으실 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Why is my site not filling the screen on the Phone breakpoint?’를 번역·각색한 콘텐츠입니다.