모바일 상세페이지 문장이 잘리지 않게 검수하는 재현 절차

가독성은 느낌표가 아니라 어떤 정보가 어떤 조건에서 남았는지 기록하는 일입니다

모바일 화면을 보고 ‘글자가 작다’거나 ‘문장이 길다’고 말하는 것만으로는 수정 위치를 정하기 어렵습니다. 같은 본문도 컨테이너 폭, 글꼴, 행간, 고정 높이, 이미지 배치, 확대율에 따라 읽을 수 있는 범위가 달라집니다. 이 글은 가독성을 사용자 만족도로 측정하지 않고, 320픽셀과 390픽셀에서 본문이 한 열로 재배치되는지, 가로 스크롤 없이 모든 정보를 찾을 수 있는지, 간격을 늘려도 글자가 잘리거나 겹치지 않는지, 링크와 버튼을 구분해 작동할 수 있는지를 관찰합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow · W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

W3C의 리플로우 해설은 많은 글 중심 페이지가 320 CSS 픽셀 너비에서 한 열로 조정되고 세로 스크롤만으로 내용을 이용할 수 있는 방식을 설명합니다. 이는 모든 모바일 디자인이 반드시 같은 폭과 모양을 가져야 한다는 뜻이 아니라, 확대하거나 좁은 화면을 쓰는 사람이 정보와 기능을 잃지 않도록 확인하는 기준입니다. 따라서 이 글의 결과표도 ‘모바일 최적화 완료’라고 쓰지 않고, 정한 화면 폭에서 양방향 스크롤·잘림·사라진 기능이 있었는지를 구체적으로 남깁니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

자체 예제는 반품 접수 안내 카드 한 장으로 범위를 좁힙니다

검수용 예제는 실제 쇼핑몰과 무관한 반품 접수 안내 카드입니다. 입력 정보는 주문번호를 준비한다는 안내, 상품 수령일을 확인한다는 안내, 신청 화면으로 이동하는 링크, 포장 상태를 확인하는 체크 항목뿐입니다. 반품 가능 기간, 배송비, 환불 처리일은 운영 정책에 따라 달라지는 값이므로 예제에서 임의로 정하지 않습니다. 카드의 목적은 좁은 화면에서도 네 정보가 순서대로 남는지 확인하는 것이며, 실제 소비자 정책을 대신하지 않습니다.

예제에는 의미 없는 후기, 처리 속도, 만족 수치를 넣지 않습니다. 검수 중 발견한 문제도 ‘사용자가 이탈할 것’이라고 추정하지 않고 ‘390픽셀에서 제목 세 번째 줄이 overflow hidden으로 보이지 않음’처럼 조건과 관찰로 씁니다. 실제 사이트에서 같은 절차를 쓰려면 먼저 운영 정책의 최신 버전을 확인하고, 안내 문장과 도착 페이지의 조건이 같은지 대조해야 합니다. 화면이 읽혀도 정책 정보가 서로 다르면 품질 검수는 통과할 수 없습니다.

폰트 크기를 조정하기 전에 고정 폭과 두 방향 스크롤부터 찾습니다

모바일에서 문장이 답답해 보일 때 글자 크기만 줄이면 데스크톱용 고정 폭이 그대로 남을 수 있습니다. 먼저 본문 컨테이너, 표, 이미지, 배지, 코드나 긴 주소가 화면 폭을 밀어내는지 확인합니다. `width`와 `min-width`가 픽셀로 고정되어 있는지, 이미지에 최대 너비가 있는지, 긴 단어와 주소가 줄바꿈 가능한지, 카드 안쪽 패딩이 콘텐츠 폭을 과도하게 줄이는지를 순서대로 기록합니다. 목표는 모든 것을 작게 만드는 것이 아니라 필요한 정보가 한 방향 흐름 안에 남도록 하는 것입니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

1. 브라우저 기본 확대 상태에서 1440×900 기준 화면을 열고 콘텐츠의 원래 순서와 너비를 기록합니다.
2. 뷰포트를 390×844로 줄여 문단, 이미지, 표, 배지 중 가로 폭을 넘기는 요소를 찾습니다.
3. 320×800에서 본문과 조작 요소가 세로 흐름으로 남는지, 양방향 스크롤이 필요한지 확인합니다.
4. 텍스트 확대 200퍼센트에서 고정 헤더나 하단 배너가 내용과 초점을 가리는지 확인합니다.
5. 예외적으로 가로 방향이 의미인 자료는 별도 스크롤 영역과 설명을 제공하고 일반 본문과 구분합니다.
6. 수정 후 같은 조건을 다시 열어 사라진 문장, 링크, 표 제목이 없는지 비교합니다.

리플로우 검사는 반응형 중단점을 많이 추가하는 작업과 같지 않습니다. 중단점 사이의 폭에서도 콘텐츠가 연속적으로 적응하는지 봐야 합니다. 390픽셀에서만 맞고 360픽셀에서 버튼 두 개가 겹친다면 특정 캡처에 맞춘 것입니다. 자체 예제는 320, 360, 390, 768픽셀을 짧게 훑은 뒤 기록 기준은 320과 390에 남깁니다. 이 폭은 대표 시험 조건일 뿐 시장의 모든 기기 분포나 실제 사용 환경을 의미하지 않습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

행간과 자간을 바꾸어도 문장이 사라지지 않는지 별도 조건으로 확인합니다

W3C의 텍스트 간격 기준은 사용자가 줄 높이, 문단 뒤 간격, 글자 간격, 단어 간격을 일정 수준까지 바꾸어도 콘텐츠나 기능이 손실되지 않아야 한다는 검사를 설명합니다. 해설에 제시된 조건은 줄 높이 1.5배, 문단 뒤 간격 2배, 글자 간격 0.12배, 단어 간격 0.16배입니다. 이 수치를 모든 디자인의 기본값으로 강제하는 것이 아니라, 사용자가 간격을 바꿀 때 고정 높이·숨김·겹침 때문에 정보가 없어지지 않는지 확인하는 스트레스 조건으로 사용합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

한글은 띄어쓰기 단위와 조사 결합 때문에 영문 예시와 다른 줄 모양을 보일 수 있습니다. 숫자, 영문 제품명, 단위, 괄호가 섞인 문장을 일부러 포함해 확인합니다. 예를 들어 ‘주문번호 A-1024와 수령일을 준비하세요’처럼 혼합 문자열을 넣고, 자간 변경 뒤 하이픈 주변이나 단위가 잘리지 않는지 봅니다. 결과는 글꼴의 우수성을 평가하는 점수가 아니라 각 조건에서 전체 문장을 읽을 수 있었는지와 어떤 CSS 제약이 실패를 만들었는지로 기록합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing

문장 길이와 이미지 순서는 내용을 삭제하지 않고 역할을 분리해 조정합니다

긴 문단을 짧게 보이게 하려고 핵심 조건을 아코디언 안에 숨기거나 말줄임표로 자르면 화면은 정돈되어도 정보가 사라집니다. 먼저 한 문단에 질문이 몇 개인지 나눕니다. 반품 예제에서는 준비할 정보, 포장 확인, 신청 이동을 각각 별도 문단이나 목록으로 분리할 수 있습니다. 같은 말을 카드 제목과 이미지 안의 텍스트와 본문에서 반복하지 않으며, 이미지에만 있는 절차는 본문에도 제공해야 합니다. 정보의 우선순위를 조정하는 일과 정책 조건을 삭제하는 일을 구분합니다.

CSS의 `order`로 시각 순서만 바꾸면 키보드와 보조기술의 읽기 순서가 다르게 남을 수 있습니다. 자체 예제에서는 HTML 순서를 제목, 준비 정보, 포장 확인, 신청 링크로 먼저 정하고 모바일과 데스크톱 모두 그 의미 순서를 유지합니다. 화면이 좁아질 때 이미지를 앞이나 뒤로 이동해야 한다면, 이미지가 장식인지 절차 정보인지 판단하고 DOM 자체를 재구성할 필요가 있는지 검토합니다. 단순히 보기 좋은 위치를 찾았다는 이유만으로 읽기 순서를 뒤집지 않습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow

읽을 수 있는 문장 뒤에는 누를 수 있고 초점을 확인할 수 있는 행동이 필요합니다

본문이 잘 보여도 신청 링크의 실제 클릭 영역이 글자 몇 자에만 있고 옆 링크와 붙어 있으면 모바일 조작에서 다른 문제가 생깁니다. WCAG 2.2의 Target Size (Minimum) 해설은 포인터 대상이 원칙적으로 최소 24×24 CSS 픽셀이어야 하며, 작은 대상에는 간격·동등한 대안 등 예외 조건이 있다고 설명합니다. 이 글에서는 예외를 성공 공식으로 사용하지 않고, 주요 신청 링크와 메뉴 버튼의 실제 bounding box가 24×24 이상인지 먼저 확인합니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.5.8: Target Size (Minimum)

• 링크 문구가 ‘여기’가 아니라 이동할 화면의 목적을 설명하는가
• 주요 조작 영역 안에 24×24 CSS 픽셀 사각형을 둘 수 있는가
• 작은 인라인 링크가 연속으로 붙어 오작동 가능성을 높이지 않는가
• 키보드 Tab 이동에서 모든 링크와 버튼에 초점 표시가 보이는가
• 고정 하단 버튼이나 쿠키 안내가 초점 받은 요소 전체를 가리지 않는가
• 버튼 레이블을 두 줄로 늘렸을 때 글자와 아이콘이 겹치지 않는가

터치 영역을 넓힌 뒤에도 링크의 목적과 주변 문장이 맞는지 확인합니다. 큰 버튼은 누르기 쉬울 수 있지만 ‘확인’처럼 모호한 레이블이면 사용자가 다음 화면을 예측하기 어렵습니다. 반품 예제의 링크는 ‘반품 신청 화면으로 이동’으로 쓰고, 실제 도착 페이지의 H1도 같은 과업을 설명하도록 맞춥니다. 이 검사는 신청 완료율을 측정하지 않으며, 조작 영역·초점·레이블·도착 제목을 재현 가능한 항목으로 남깁니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 2.5.8: Target Size (Minimum)

공개 판정표에는 화면 폭과 사용자 설정을 섞지 않고 각각 남깁니다

최종 결과표의 한 행에는 하나의 조건만 둡니다. 390픽셀 기본 간격, 320픽셀 기본 간격, 390픽셀 텍스트 간격 변경, 390픽셀 200퍼센트 확대를 각각 따로 기록합니다. 여러 조건을 한 번에 바꾸고 ‘모바일 통과’라고 쓰면 어떤 CSS가 문제였는지 재현하기 어렵습니다. 각 행에는 브라우저, viewport, 확대율, 간격 스타일, 가로 스크롤 여부, 잘린 텍스트, 사라진 기능, 링크 동작과 판정을 적습니다.참고: W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.10: Reflow · W3C Web Accessibility Initiative · Understanding Success Criterion 1.4.12: Text Spacing · W3C Web Accessibility Initiative · Understanding Success Criterion 2.5.8: Target Size (Minimum)

1. 본문과 정책 문장을 최신 원문에 맞춰 고정하고 검사 중에는 내용을 바꾸지 않습니다.
2. 320·390·1440픽셀에서 같은 URL과 같은 데이터로 화면을 엽니다.
3. 리플로우, 텍스트 간격, 200퍼센트 확대, 키보드 초점 검사를 별도 행으로 실행합니다.
4. 잘림을 고친 뒤 삭제되거나 순서가 바뀐 정보가 없는지 DOM 텍스트와 화면을 다시 대조합니다.
5. 대표·본문 설명 이미지가 서로 구분되는 경로이고 대체텍스트와 본문이 같은 의미를 제공하는지 확인합니다.
6. 실제 독자 조사 없이 읽기 속도, 만족도, 구매 전환이 개선됐다는 문장을 결과에서 제외합니다.

모바일 줄바꿈과 본문 흐름을 확인한 순서

1. 간격 변경 전후 반품 준비 문장의 처음과 끝을 비교합니다. 주문 정보·상품 상태·설명·마지막 문장이 모두 남아야 합니다.
2. 390px·320px에서 긴 참조 문자열의 가로 넘침을 봅니다. 숨김이나 고정 높이로 문장을 잘라 해결하지 않습니다.
3. 반품 기한·비용·승인은 현재 판매 정책으로 확인합니다. 레이아웃 예제가 실제 정책이나 읽기 속도를 검증한 것은 아닙니다.

모바일 줄바꿈과 본문 흐름 판단에서 제외한 범위

• 반품 안내 카드는 레이아웃 검사를 위한 자체 예제로 실제 쇼핑몰 정책이나 고객 사례를 나타내지 않습니다.
• 320·390픽셀과 지정 확대 조건은 가능한 모든 화면, 운영체제, 브라우저, 사용자 글꼴 설정을 대표하지 않습니다.
• 정보 손실과 조작 가능성은 점검하지만 실제 독자의 이해도, 읽기 속도, 이탈 또는 구매 행동은 측정하지 않습니다.
• 가로 스크롤이 의미상 필요한 표·지도·도식에는 별도 예외 설계가 필요하며 일반 문단 기준을 그대로 적용하지 않습니다.
• 실제 페이지의 정책 문구는 운영자가 보유한 최신 문서를 기준으로 검수해야 합니다.

모바일 줄바꿈과 본문 흐름에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. Understanding Success Criterion 1.4.10: ReflowW3C Web Accessibility Initiative · 확인 2026-08-20

   320 CSS 픽셀 너비와 확대 환경에서 정보나 기능을 잃지 않고 한 방향으로 이용할 수 있는지 확인하는 기준을 참고했습니다.

2. Understanding Success Criterion 1.4.12: Text SpacingW3C Web Accessibility Initiative · 확인 2026-08-20

   사용자가 줄·문단·글자·단어 간격을 변경했을 때 콘텐츠와 기능이 손실되지 않는지 확인하는 스트레스 조건을 사용했습니다.

3. Understanding Success Criterion 2.5.8: Target Size (Minimum)W3C Web Accessibility Initiative · 확인 2026-08-20

   주요 링크와 버튼의 24×24 CSS 픽셀 최소 대상 및 간격 예외 설명을 모바일 조작 검수에 사용했습니다.