가로 넘침을 숨기기 전에 넓이를 만드는 요소를 찾아요. 아래 무드네일 비교는 문제를 의도적으로 만든 자체 데모이며 고객 사이트 개선 실적이 아니에요.
1. 같은 화면에서 개선 전·후를 비교해요
무드네일 개선 전 데모는 본문 폭을 1,100px로 고정해 작은 화면에서 넘치게 만든 페이지예요. 개선 후 샘플은 작은 화면에서 내용을 한 열로 배치해요. 두 화면을 같은 휴대전화에서 열고 제목·카드·버튼이 어떻게 달라지는지 봐요.
문제를 맡길 때는 주소, 사용 기기·브라우저, 잘리는 위치와 화면 캡처를 함께 준비해요. 캡처에 개인 연락처나 계정 정보가 보이지 않도록 확인해요.
2. 고정 폭과 화면 기준 설정을 확인해요
직접 코드를 고칠 수 있다면 개발자 도구에서 화면보다 넓은 요소를 찾아요. 본문에 큰 고정 폭이나 최소 폭이 있으면 작은 화면에 맞게 줄어들지 않을 수 있어요. 먼저 원본을 보관하고 복사본에서 수정해요.
<meta name="viewport"
content="width=device-width, initial-scale=1">
/* 고정 폭 대신 화면 안에서 줄어들게 해요 */
.page {
width: min(70rem, calc(100% - 2rem));
margin-inline: auto;
box-sizing: border-box;
}이 코드는 출발점이에요. 사용하는 테마·페이지 빌더·기존 CSS에 맞게 적용해야 해요. 확대를 막는 설정으로 문제를 감추지 않아요.
3. 사진·긴 주소·여러 열을 확인해요
큰 이미지는 부모 영역을 넘지 않게 하고, 비율을 유지해요. 긴 이메일 주소나 URL은 줄바꿈을 허용해요. 여러 열의 카드는 작은 화면에서 한 열로 바꿀 수 있어요.
img { max-width: 100%; height: auto; }
.long-text { overflow-wrap: anywhere; }
.cards > * { min-width: 0; }
@media (max-width: 44rem) {
.cards { grid-template-columns: 1fr; }
}그리드나 플렉스 항목이 내용보다 작게 줄어들지 못한다면 min-width도 확인해요. 표처럼 가로로 읽어야 하는 내용은 표 영역 안에서만 스크롤하도록 검토해요. 페이지 전체에 overflow-x: hidden을 주면 필요한 내용이 숨을 수 있어요.
4. 예약 버튼과 안내창도 끝까지 확인해요
본문만 고치고 화면 아래의 고정 버튼이나 안내창을 놓치기 쉬워요. 버튼 글씨가 길어져도 잘리지 않는지, 안내창을 열고 닫을 수 있는지 확인해요. 고정 바가 있다면 본문 마지막 줄을 가리지 않는지도 봐요.
무드네일의 예약 버튼, 온도커피의 문의 버튼, 한칸수학의 상담 버튼은 모두 데모 안내창을 열어요. 실제 예약은 되지 않지만 작은 화면에서 열기·닫기 흐름을 살펴볼 수 있어요.
5. 여러 화면과 큰 글씨로 다시 봐요
- 좁은 휴대전화 폭과 넓은 화면에서 가로 넘침이 없나요?
- 세로·가로 방향에서 메뉴와 버튼을 읽을 수 있나요?
- 글씨를 키워도 제목·링크·카드가 겹치지 않나요?
- 사진이 찌그러지거나 중요한 부분이 잘리지 않나요?
- 안내창의 닫기 버튼과 페이지 끝까지 접근할 수 있나요?
브라우저의 크기 조절만으로 실제 휴대전화의 모든 문제를 확인할 수는 없어요. 공개 전에 실제 사용하는 기기에서도 확인하는 편이 좋아요.
6. 화면 수정과 속도 점검을 나눠서 해요
레이아웃이 맞아도 큰 이미지나 많은 스크립트 때문에 느릴 수 있어요. Google PageSpeed Insights에서 모바일 분석을 실행하고 해당 페이지의 결과를 확인해요. 성능 점수는 측정 조건과 시점에 따라 달라지며 예약 증가나 검색 순위를 보장하지 않아요.
수정 후에는 같은 주소·같은 화면 폭에서 다시 비교하고, 무엇을 바꿨는지 기록해요. 원본 파일·사용 중인 테마·문제 주소·가려진 정보 없는 캡처가 있으면 작업 범위를 정리하기 쉬워요.
기술 참고: MDN min-width 설명 · 확인일 2026-10-27