모바일에서 단어가 붙어 보일 때 확인할 것

작은 화면으로 살펴보기

이 예시는 구조를 설명하는 분리된 데모다. 실제 화면·동작을 검증한 범위는 본문에 남긴다.

나는 빈칸이 있는지부터 읽었다

단어가 붙어 보인다는 말에는 두 가지 문제가 들어 있다. 실제 문장에 공백이 없을 수도 있고, 공백은 있는데 자간과 글꼴 때문에 구분이 약할 수도 있다. 줄바꿈 속성은 첫 번째 문제에 필요한 빈칸을 대신 넣어주지 않는다. 나는 저장된 문구와 화면에 출력한 텍스트를 먼저 비교한다.

강조할 부분을 여러 span으로 나누면 경계의 공백을 놓치기 쉽다. 화면 폭이 넓을 때는 색이나 굵기 차이로 구분돼도 모바일에서는 하나의 낱말처럼 읽힐 수 있다. 의미상 띄어야 하는 곳은 원문과 출력 노드에 공백을 명시한다. CSS 여백으로 단어 사이를 벌리면 복사한 문장이나 보조 기술이 읽는 내용에는 같은 간격이 없을 수 있다.

<!-- The space belongs to the sentence, not to CSS. -->
<h1 lang="ko"><span>홈페이지 제작</span> <span>과정을 설명합니다</span></h1>

{/* JSX: make the boundary explicit when splitting inline nodes. */}
<h1 lang="ko">
  <span>홈페이지 제작</span>{' '}
  <span>과정을 설명합니다</span>
</h1>

단어를 지키되 화면을 밀어내지는 않게 했다

한국어 설명을 한 글자씩 끊으면 같은 내용도 읽기 어렵다. 현재 작업 소스는 단어 경계를 유지하는 keep-all을 사용하고, 긴 제목이 좁은 폭을 넘는 경우에 대비해 overflow-wrap을 보완했다. 둘은 문장을 읽는 기본 규칙과 더 이상 들어갈 수 없는 문자열에 대한 안전망으로 나누어 생각할 수 있다.

나는 안전망이 있으니 어떤 문장도 그대로 쓰면 된다고 생각하지 않는다. 지나치게 긴 표현은 쉬운 말로 고치는 편이 낫고, 좁은 카드에 긴 제목을 넣어야 한다면 카드 구조도 다시 본다. 한국어에 쓴 규칙을 모든 언어에 똑같이 적용하지 않고 문서의 언어를 표시해 영어 본문에는 별도 규칙을 둔다.

글자가 들어가는 부모 폭도 확인했다

제목의 글자 크기만 바꿔도 넘침이 사라지지 않으면 그 제목을 담은 영역을 본다. 여러 열을 나누는 grid나 flex 안에서 자식의 최소 폭이 내용 길이에 끌려갈 수 있다. 글은 휴대전화 폭 안에 있어야 하는데 그릇이 더 큰 폭을 요구하면 문서 전체가 옆으로 밀린다.

재사용 예시에서는 열을 minmax(0, 1fr)로 두고 글 영역에 min-width: 0을 명시했다. 이 규칙은 부모 구조를 확인한 다음 적용할 수 있는 방법이며, 모든 카드와 표에 무조건 붙이는 처방은 아니다. 표처럼 정보의 가로 관계를 유지해야 하는 자료는 표 내부 스크롤로 따로 다룬다.

나는 글줄 규칙을 작은 범위로 묶었다

다음 CSS는 글을 읽는 영역에만 적용하는 새 설명용 모듈이다. 기존 사이트 전체의 타이포그래피를 복사하지 않고, 제목 크기와 줄 높이, 한국어 경계, 긴 문자열 보완, 부모 폭을 한곳에 모았다. 버튼과 가격표, 코드 블록은 다른 조건이 있으므로 이 선택자에 자동으로 포함하지 않았다.

글꼴과 자간은 실제 문장으로 조정한다. 자간을 지나치게 줄여 한 줄을 맞추면 작은 화면에서 단어 간격도 좁아 보일 수 있다. 나는 제목의 줄 수보다 먼저 읽기 쉬운 크기와 간격을 정하고, 남는 줄 수는 화면 폭에 따라 달라질 수 있도록 둔다.

/* Put the language on the document or the text container. */
.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.reading-copy {
  min-width: 0;
  max-width: 46rem;
}
.reading-copy h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.3;
  letter-spacing: -.025em;
}
.reading-copy p { line-height: 1.85; }
.reading-copy :is(h1, h2, p, li) {
  overflow-wrap: anywhere;
}
.reading-copy:lang(ko) :is(h1, h2, p, li) {
  word-break: keep-all;
}
.reading-copy:lang(en) :is(h1, h2, p, li) {
  word-break: normal;
}
/* Preserve ordinary spaces in the actual text. */
/* Do not apply white-space: nowrap to these paragraphs. */

강제 줄바꿈은 문장의 뜻과 연결될 때 쓴다

내가 확인한 첫 화면 소스에는 의도적으로 질문을 나누는 br이 있다. 이런 구성은 짧은 핵심 문장을 특정 리듬으로 읽게 할 때 쓸 수 있다. 하지만 PC에서 보기 좋았던 줄 위치를 모든 설명과 모든 언어에 고정하면 휴대전화에서는 한두 글자만 남는 줄이 생길 수 있다.

나는 의미를 나누는 줄바꿈과 화면에 맞추기 위한 줄바꿈을 구별한다. 긴 소개문과 글 본문은 자연스럽게 흐르게 하고, 의도한 짧은 질문만 제한적으로 나눈다. 번역문은 길이가 달라지므로 같은 위치의 br을 기계적으로 옮기지 않는다. 같은 뜻을 읽기 좋은 문장으로 다시 구성한다.

작은 화면과 큰 글자에서 확인할 순서를 남긴다

과거 기록에는 390px 모바일에서 단어 단위 읽기와 문서 가로 넘침을 확인한 결과가 있다. 이 기록은 당시 작업의 근거다. 지금 새로 정리한 CSS 예시의 실제 PC·모바일 화면을 다시 확인했다는 뜻은 아니다. 현재는 소스와 기록을 대조했으며 실화면 검증은 별도 범위로 남긴다.

새 홈페이지에 붙일 때는 한 화면만 보고 끝내지 않는다. 짧은 제목과 가장 긴 제목, 긴 영문 문자열, 로딩 전후의 글꼴, 확대된 글자를 함께 본다. 문서에 가로 스크롤이 없더라도 제목 일부가 잘려 보일 수 있으므로 숫자 검사와 실제 읽기를 같이 한다.

1. 원문과 출력 텍스트에 필요한 공백이 남아 있는가.
2. 한국어와 영어의 언어 표시와 줄바꿈 규칙이 맞는가.
3. 좁은 폭에서 부모 영역이 내용 때문에 커지지 않는가.
4. 큰 글자와 글꼴 변경 뒤에도 제목이 잘리지 않는가.
5. 일반 문장은 자연스럽게 흐르고 의도한 줄바꿈만 남았는가.
6. 문장을 복사해도 단어의 공백과 순서가 유지되는가.

나는 한 줄에 넣는 것보다 읽히는 문장을 택한다

홈페이지 제목은 디자인의 모양이면서 방문자가 처음 읽는 설명이다. 줄 수를 줄이려고 글자를 계속 작게 만들면 모바일 이용자가 읽어야 할 비용이 커진다. 공백을 바로잡고, 단어 경계를 지키고, 길이에 맞는 그릇을 만드는 순서가 더 오래 쓸 수 있는 해결에 가까웠다.

이 모듈의 목적은 어떤 문장도 같은 줄로 보이게 만드는 것이 아니다. 문장이 바뀌고 화면이 좁아져도 뜻을 잃지 않고 읽히게 하는 것이다. 나는 글을 수정하는 사람에게도 이 기준을 함께 남기려 한다.