모바일 메뉴는 열리는데 읽기는 편할까: 4개 화면 폭으로 확인한 개편 기록
텍스트 중심 뉴스형 화면을 실제 브라우저에서 점검했습니다. 320·390·768·1440 CSS px의 가로 넘침, 키보드 메뉴, 검색 결과와 익명화한 운영 화면을 공개합니다.
실제 프로젝트 기록 기반 · AI 작성·검수 · 익명화 자료 포함 · 검수·수정 내용 보기
작성 방식과 자료 확인 기록
- 작성
- Startup Korea 편집팀
- 최초 발행
- 2026.09.12
- 최종 수정
- 2026.09.12
- 자료 검토
- Codex AI 검수 · 2026.09.12
- 재확인 권장일
- 2026.12.11
- 정정 요청
- 오류와 근거 자료 보내기
익명 콘텐츠 서비스 A의 화면 개편에서는 ‘뉴스 사이트처럼 깔끔하게’라는 요청을 작은 검증 항목으로 바꿔야 했습니다. 큰 화면의 첫인상만 맞추면 휴대전화에서 메뉴가 본문을 가리거나 표가 화면 밖으로 밀려날 수 있기 때문입니다. 이 사례는 현재 사이트에서 2026년 9월 9일 적용한 화면과 9월 12일 다시 실행한 브라우저 검사에 근거합니다. Codex AI가 수행한 개발·검증 기록이며 실제 사용자를 모집한 사용성 조사로 소개하지 않습니다.
보기 좋은 화면을 점검 가능한 구조로 바꾸기
로고는 아이콘을 덧붙이지 않은 텍스트로 정리하고, 상단을 사이트명·주제 탐색·검색으로 나눴습니다. 본문에서는 큰 제목 다음에 요약과 작성 정보를 두고, 참고 출처는 본문을 읽은 뒤 찾을 수 있는 위치에 배치했습니다. 홈의 시각적 구획을 늘리는 것보다 독자가 읽을 글을 고르고 그 글의 근거로 이동하는 흐름을 먼저 정했습니다.
화면 폭이 좁을 때는 모든 메뉴를 한 줄에 압축하지 않고 접고 펼치는 메뉴를 사용했습니다. 이 프로젝트는 HTML의 details와 summary 요소를 사용합니다. MDN 문서의 기본 열림·닫힘 동작을 참고했지만, 요소 선택만으로 키보드 사용성이 보장된다고 보지는 않았습니다. 실제 브라우저에서 포커스를 옮기고 키를 눌러 열리고 닫히는지 확인했습니다.

네 폭에서 같은 순서로 실행했다
Chromium 140.0.7339.186에서 높이는 940 CSS px로 고정하고 폭을 320, 390, 768, 1440으로 바꿨습니다. 각 폭에서 홈을 열어 문서 너비를 측정하고, 검색창에 ‘고객 인터뷰’를 입력해 해당 글 링크가 나오는지 확인했습니다. 이어 유지율 계산 글로 이동해 본문이 화면 너비를 넘어가는지 측정했습니다. 작은 두 폭에서는 메뉴에 포커스를 주고 Space로 열기와 닫기를 각각 시험했습니다. 검색 펼치기는 Enter로 실행했습니다.
문서 전체의 가로 넘침은 scrollWidth와 뷰포트 너비를 비교했습니다. 네 폭 모두 홈과 선택한 본문의 문서 너비가 설정한 화면 너비와 같았습니다. 이것은 페이지 전체가 옆으로 밀려나지 않았다는 뜻입니다. 표의 개별 셀 가독성, 확대 후 읽기와 보조기기 사용성까지 한 번에 확인한 값은 아닙니다.

브라우저 버전·화면 폭·측정값 JSON 보기. 실행 시각은 JSON에 UTC로 기록되어 있으며 한국 시간으로는 2026년 9월 12일입니다.
실제 화면을 남긴 이유
숫자만 보면 제목의 줄바꿈이나 메뉴의 밀도를 알 수 없습니다. 그래서 390 CSS px 본문 화면과 넓은 홈 화면도 함께 보관했습니다. 스크린샷에서는 사이트명만 익명화했으며 글 제목·본문·간격·측정 결과를 더 좋아 보이게 바꾸지 않았습니다. 익명 화면은 다른 고객사에서 수행한 작업이라는 뜻이 아니라 이 프로젝트의 식별 표시를 가린 것입니다.

1440 CSS px 실제 홈 화면 보기. 결과를 비교할 때 홈과 본문이 서로 다른 페이지라는 점도 구분해야 합니다.
통과한 것과 아직 확인하지 않은 것
| 검사항목 | 이번 결과 | 후속 확인 |
|---|---|---|
| 4개 폭의 홈·본문 가로 넘침 | 문서 너비 초과 없음 | 새 표와 긴 제목 추가 때 재검사 |
| 작은 두 폭의 모바일 메뉴 | 키보드 Space 열기·닫기 확인 | 실제 휴대전화와 보조기기 확인 |
| 검색 결과 | 각 폭에서 지정한 글 링크 확인 | 다른 검색어·결과 없음 화면 점검 |
| 브라우저 실행 오류 | 해당 실행에서 pageerror 0건 | 네트워크 실패·성능은 별도 측정 |
W3C의 Reflow 설명은 320 CSS px에서 콘텐츠를 읽는 문제를 검토하는 데 참고했습니다. 그러나 고정 폭 네 개의 자동 검사만으로 WCAG 전체 준수를 주장하지 않습니다. Safari, 화면 읽기 프로그램, 400% 확대, 실제 사람의 읽기 속도는 이번 자료에서 측정하지 않았습니다.
다음 개편에 재사용할 판단 기준
메뉴와 검색은 보이는지만 확인하지 말고 실제로 작동시켜야 합니다. 본문도 짧은 문단 하나보다 표나 긴 제목이 있는 글을 표본으로 고르는 편이 이 프로젝트에는 유용했습니다. 자동 검사는 같은 동작을 반복하는 역할, 스크린샷은 그 결과를 사람이 다시 보는 역할로 나눴습니다. 디자인 변경 뒤의 승인이나 체류시간 개선 수치는 아직 없으며, 이번 결과는 명시한 환경에서 읽기와 탐색의 기본 동작을 확인한 기록입니다.
검수와 수정 기록
아래는 실제로 수행한 AI 검수 기록입니다. 사람 검수자의 확인이나 현장 취재로 표시하지 않습니다. 출처의 설명, 자체 제안, 관측한 결과의 범위를 나누어 확인했습니다.
2026-09-12 00:26:08 · Codex AI 검수
텍스트 중심 뉴스형 화면을 실제 브라우저에서 점검했습니다. 320·390·768·1440 CSS px의 가로 넘침, 키보드 메뉴, 검색 결과와 익명화한 운영 화면을 공개합니다. 공개 측정 자료와 본문을 대조했으며 실제 확인 범위와 미확인 사항을 구분했습니다. AI 검수이며 사람 전문가의 확인을 뜻하지 않습니다.
확인한 항목
- 측정값 재대조확인
네 폭 모두 홈/표본 본문의 scrollWidth가320/390/768/1440과 일치. pageerror0, 검색결과확인, 작은두폭 Space메뉴확인.
- 화면·주장 대조확인
브라우저 캡처의 식별 표시만 익명화했으며 실사용자조사·성능·WCAG전체인증을 주장하지 않습니다.
수정 내용
최초 발행 검수. 위 항목과 공개 증거를 확인했으며 발행 후 수정 기록은 아직 없습니다.
출처와 본문의 대조
-
네 화면 폭 브라우저 측정 원자료 본문 대조 확인
본문의 주장 Chromium 버전, 4개 폭의 문서 너비·검색·메뉴·pageerror 기록
확인 근거 공개 JSON의 실제 측정 시각·항목·값을 본문과 대조했습니다.
적용 범위 사이트명·내부 식별자·계정·서버 정보를 제외한 실측 요약. 보고서 이미지는 측정 JSON의 표 재구성. 독립 제3자 감사 자료는 아닙니다.
-
브라우저 측정 요약 화면 본문 대조 확인
본문의 주장 실측 JSON의 4개 화면 폭 결과를 재구성
확인 근거 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
적용 범위 사이트명·내부 식별자·계정·서버 정보를 제외한 실측 요약. 보고서 이미지는 측정 JSON의 표 재구성. 독립 제3자 감사 자료는 아닙니다.
-
실제 모바일 메뉴 화면 본문 대조 확인
본문의 주장 390 CSS px에서 펼친 실제 메뉴
확인 근거 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
적용 범위 실제 화면의 사이트명만 익명화. 측정값·본문 내용·배치 유지. 개인정보 및 계정 정보 미포함. 독립 제3자 감사 자료는 아닙니다.
-
실제 모바일 본문 화면 본문 대조 확인
본문의 주장 390 CSS px의 실제 본문 첫 화면
확인 근거 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
적용 범위 실제 화면의 사이트명만 익명화. 측정값·본문 내용·배치 유지. 개인정보 및 계정 정보 미포함. 독립 제3자 감사 자료는 아닙니다.
-
실제 넓은 홈 화면 본문 대조 확인
본문의 주장 1440 CSS px의 실제 홈 첫 화면
확인 근거 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
적용 범위 실제 화면의 사이트명만 익명화. 측정값·본문 내용·배치 유지. 개인정보 및 계정 정보 미포함. 독립 제3자 감사 자료는 아닙니다.
-
MDN — details disclosure element 본문 대조 확인
본문의 주장 details·summary의 펼침 요소와 기본 상호작용
확인 근거 설명과 open 속성, summary 토글 동작을 확인했습니다.
적용 범위 모든 브라우저와 보조기기의 접근성 적합성을 보장하지 않습니다.
-
W3C WAI — Understanding Reflow 본문 대조 확인
본문의 주장 320 CSS px 화면 폭을 읽기 점검의 참고로 사용
확인 근거 Reflow의 의도와 320 CSS px 설명을 확인했습니다.
적용 범위 본 프로젝트 네 폭 검사는 전체 WCAG 또는 모든 확대 조건의 적합성 시험이 아닙니다.
출처와 확인 자료
아래 자료는 사실 확인과 추가 검토에 사용한 원문입니다. 본문의 해석과 조언은 Startup Korea 편집팀의 견해일 수 있습니다.
-
네 화면 폭 브라우저 측정 원자료
공개 원문 자료
[원문 확인] 공개 JSON의 실제 측정 시각·항목·값을 본문과 대조했습니다.
-
브라우저 측정 요약 화면
공개 원문 자료
[원문 확인] 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
-
실제 모바일 메뉴 화면
공개 원문 자료
[원문 확인] 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
-
실제 모바일 본문 화면
공개 원문 자료
[원문 확인] 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
-
실제 넓은 홈 화면
공개 원문 자료
[원문 확인] 생성된 이미지 파일을 열어 실측 자료 또는 실제 운영 화면과 표시 범위를 확인했습니다.
-
MDN — details disclosure element
공개 원문 자료
[원문 확인] 설명과 open 속성, summary 토글 동작을 확인했습니다.
-
W3C WAI — Understanding Reflow
공개 원문 자료
[원문 확인] Reflow의 의도와 320 CSS px 설명을 확인했습니다.