[팁]휴대전화에서 화면이 옆으로 밀릴 때 — 긴 표와 코드부터 확인하세요

모바일에서 본문을 읽다가 페이지 전체가 좌우로 움직이면 글을 따라가기 어렵습니다. 화면을 벗어난 요소 하나 때문에 발생할 수 있어, 먼저 어떤 내용에서 폭이 커지는지 찾아보는 것이 좋습니다.

자주 확인할 대상

• 줄바꿈하지 않는 긴 URL
• 긴 코드 한 줄
• 열이 많은 표
• 원본 폭을 그대로 사용하는 이미지
• 고정 너비가 있는 카드나 입력창

짧은 예시 문장으로만 시험하면 이런 문제를 놓치기 쉽습니다. 실제 이용자가 넣을 법한 긴 제목과 코드, 표를 사용해 확인해 보세요.

본문 전체와 내부 스크롤을 구분합니다

본문 전체를 옆으로 이동시키는 대신, 표나 코드처럼 줄을 유지해야 하는 영역 안에서만 가로 스크롤을 허용할 수 있습니다. 일반 문장은 화면 폭 안에서 줄바꿈하고, 이미지는 컨테이너보다 커지지 않도록 합니다.

/* 설명용 예시: 실제 구조에 맞게 적용하세요. */
.article { min-width: 0; overflow-wrap: anywhere; }
.article img { max-width: 100%; height: auto; }
.code-scroll, .table-scroll { max-width: 100%; overflow-x: auto; }

이 규칙만으로 모든 레이아웃 문제가 해결되지는 않습니다. Grid·Flex 자식의 최소 폭이나 상위 요소의 고정 너비 때문에 넘칠 수도 있습니다. 문제가 되는 요소와 부모의 크기를 함께 확인하세요.

보기 좋은 것과 사용할 수 있는 것은 다릅니다

입력창에 휴대전화 키보드가 올라왔을 때 등록 버튼에 접근할 수 있는지, 표가 스크롤된다는 것을 알 수 있는지도 봅니다. 작은 버튼은 손가락으로 누르기 어렵고, 긴 코드 위에 복사 버튼이 겹치면 읽을 수 없는 부분이 생깁니다.

Builders Korea의 본문 뷰어도 일반 문단과 긴 코드·표를 구분해 표시하도록 구성했습니다. 기능을 추가할 때는 화면 폭뿐 아니라 실제 글 내용으로 다시 확인하려 합니다.

버그를 제보할 때는 기기 이름, 화면 방향, 문제가 생긴 글 주소, 가로로 밀리는 구간을 알려주세요. 같은 내용을 큰 화면과 작은 화면에서 비교하면 원인을 좁히기 쉽습니다.