휴대폰에서 깨지는 글과 버튼 고치기

확인할 화면과 문구를 먼저 고릅니다

홈, 글 목록, 가장 긴 제목의 상세페이지, 소개·문의 페이지를 차례로 엽니다. 관리자 실습을 한다면 입력창과 저장된 글 목록도 확인합니다. 화면마다 역할이 다르므로 첫 화면 하나가 예쁘게 보인다고 전체가 정상인 것은 아닙니다. 메뉴가 접히는 위치, 긴 본문이 이어지는 부분, 이미지 아래 설명, 마지막 링크처럼 서로 다른 요소가 만나는 지점을 살펴봅니다.

시험 제목은 ‘정리 팁’처럼 짧게 넣지 말고 실제로 쓸 문장을 사용합니다. 예를 들어 ‘책상 아래 케이블을 정리하기 전에 콘센트 위치부터 확인하는 이유’는 줄바꿈 문제를 찾기 좋습니다. 긴 영문 제품명이나 주소가 들어간 문단도 한 곳 확인합니다. 한국어 문장은 띄어쓰기에서 나뉠 수 있지만 길게 붙은 영문 문자열은 다른 방식으로 넘칠 수 있기 때문입니다.

PC 브라우저 개발자 도구의 기기 화면 보기에서 폭을 바꿔 살펴볼 수 있습니다. 360px, 390px, 430px처럼 몇 가지 폭을 비교하되 특정 숫자 하나를 모든 휴대폰의 정답으로 생각하지 않습니다. 화면을 조금씩 줄일 때 어느 폭부터 요소가 부딪히는지 보는 용도입니다. 도구가 익숙하지 않다면 실제 휴대폰의 세로·가로 화면에서 먼저 확인해도 됩니다.

긴 제목과 비교표를 넣고 좁은 화면을 확인합니다

검사용 제목을 “서랍 정리함을 사기 전에 폭·깊이·높이를 확인하는 순서”처럼 길게 넣어 보세요. 표에는 단위가 있는 값과 긴 조건을 함께 넣습니다. 휴대폰에서 페이지 전체가 옆으로 움직이면 본문 요소의 너비를 살펴보고, 표 안에서만 가로로 움직이는지 구분합니다. 미리보기 화면을 좁혀 읽은 다음 실제 기기에서 글 끝까지 내려 확인합니다.

제목의 줄바꿈은 크기와 폭을 함께 봅니다

제목이 한 글자씩 끊기는 경우는 글자 크기에 비해 사용할 폭이 너무 좁거나, 옆 요소가 폭을 차지하거나, 모든 글자를 강제로 끊는 줄바꿈 규칙이 적용된 경우가 있습니다. 카드의 좌우 여백과 제목 영역의 실제 너비를 먼저 봅니다. 글자 크기만 계속 줄이면 제목은 들어가도 전체가 읽기 어려워질 수 있습니다. 모바일에서는 옆에 있던 배지를 위아래로 배치하는 편이 나을 때도 있습니다.

한국어 제목에는 단어 단위를 가능한 한 유지하되 너무 긴 문자열은 화면 안에서 나뉘게 할 수 있습니다. GPT에 CSS 수정을 요청할 때 word-break: keep-all 과 overflow-wrap: anywhere 의 역할을 구분해 달라고 요청하세요. 앞의 값은 무조건 글자마다 끊기는 현상을 줄이고, 뒤의 값은 긴 주소처럼 나눌 곳이 부족한 문자열이 밖으로 빠지는 상황을 다룹니다. 적용 후에는 실제 제목 여러 개를 비교해야 합니다.

제목 영역에 고정 높이가 있으면 줄이 늘어날 때 아래 버튼과 겹칠 수 있습니다. 두 줄만 들어가도록 높이를 정해 둔 곳에 세 줄 제목이 들어간 사례입니다. 꼭 줄 수를 제한해야 하는 목록 요약인지, 제목 전체가 필요한 상세페이지인지 먼저 판단합니다. 상세 제목은 내용을 숨기기보다 높이가 내용에 따라 늘어나도록 하는 편이 자연스럽습니다. 카드 높이를 맞추는 목적이 읽을 내용을 지우는 이유가 되지 않게 합니다.

버튼 글자가 밖으로 나오는 원인을 찾습니다

버튼 폭이 고정되어 있는데 문구가 길어지면 글자가 밖으로 나올 수 있습니다. 좌우 여백, 최소 높이, 글자 줄바꿈 허용 여부를 함께 확인합니다. 모바일에서는 버튼을 한 줄 전체 폭으로 배치하거나 문구가 두 줄일 때 높이도 늘어나게 만들 수 있습니다. 문구를 줄일 때는 의미를 유지합니다. ‘저장’과 ‘지금 공개’는 다른 행동이므로 둘을 같은 짧은 표현으로 바꾸지 않습니다.

여러 버튼을 가로로 나란히 두었다면 좁은 화면에서 줄을 바꾸게 하거나 세로로 배치합니다. 버튼 사이 간격이 너무 좁으면 손가락으로 옆 버튼을 누르기 쉽습니다. 관리자에서 수정, 검수 완료, 지금 공개가 붙어 있다면 특히 행동을 구분할 수 있어야 합니다. 화면에 들어간다는 사실뿐 아니라 눌러야 할 버튼을 실수 없이 고를 수 있는지 확인합니다. 중요한 상태 변경 버튼은 색과 문구를 함께 봅니다.