CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기

반응형 레이아웃 점검은 작은 화면에서 보이는지만 확인하는 작업이 아닙니다. 화면 폭을 연속으로 바꾸고, 글자나 페이지를 확대하고, 긴 콘텐츠와 키보드 이동까지 확인해 정보와 조작 기능이 유지되는지 점검해야 합니다. 문제를 발견하면 재현 조건과 원인 요소를 기록하고 한 가지씩 고친 뒤 같은 조건에서 다시 확인합니다.

점검용 페이지 준비하기

앞선 강의에서 배운 유동 크기, 미디어 쿼리, 이미지 비율을 하나의 페이지에 모읍니다. 다음 코드를 responsive-check.html로 저장하면 메뉴, 카드, 이미지, 긴 문자열과 입력 양식을 함께 확인할 수 있습니다. 이미지가 파일 안에 포함되어 있고 별도 라이브러리나 서버가 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>여러 조건에서 같은 페이지 점검하기</h1>
<nav class="menu" aria-label="실습 메뉴"><a href="#cards">카드 설명</a><a href="#request">문의 입력</a><a href="#result">점검 결과 기록</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="위아래 띠와 가운데 원이 모두 보이는 실습 그림"><h2>고정 높이가 없어야 긴 설명도 끝까지 읽습니다</h2><p>확대 보기에서는 글자 한 줄에 들어가는 양이 줄어들 수 있습니다. 같은 내용이 더 많은 줄을 차지해도 그림 아래의 설명과 링크가 잘리지 않아야 합니다.</p><a href="#result">첫 번째 카드 기록</a></article>
<article class="card"><h2>긴 식별자가 포함된 카드</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>긴 문자열은 내용 자체를 삭제하지 않고 줄바꿈합니다.</p><a href="#result">두 번째 카드 기록</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>문의 입력</h2><label for="email">이메일</label><p id="help">실제 주소 대신 test@example.com으로 입력 모양을 확인하세요. 이 예제에는 정보를 저장하는 서버가 없습니다.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">입력 형식 확인</button></p></form>
<section id="result"><h2>점검 결과</h2><p>화면 폭, 확대 비율, 바꾼 규칙과 결과를 별도 메모에 기록하세요.</p></section>
</main>
</body>
</html>

이 페이지는 처음에는 가로 넘침이 없도록 작성했습니다. 이후 실습에서 오류를 만드는 CSS를 하나씩 추가하고 제거하면서 원인을 찾습니다. 원본 파일을 복사해 responsive-check-original.html로 남겨 두면 여러 속성을 실수로 바꿨을 때 되돌리기 쉽습니다. 양식 제출은 저장 서버로 보내지 않는 예제이며 실제 개인정보 대신 제시된 테스트 주소를 사용합니다.

화면 폭을 연속으로 바꾸고 분기점 전후 확인하기

Edge에서는 개발자 도구를 열고 장치 에뮬레이션 도구를 켠 뒤 반응형(Responsive) 모드에서 폭을 직접 입력할 수 있습니다. Windows의 기본 단축키는 개발자 도구 F12 또는 Ctrl+Shift+I, 장치 도구 전환 Ctrl+Shift+M입니다. 도구 모음의 선택 항목과 위치는 버전에 따라 달라질 수 있으므로 Microsoft의 Edge 장치 에뮬레이션 안내도 참고하세요.

1. 320px와 390px에서 메뉴가 여러 줄로 이어지는지, 그림과 입력칸이 본문 안에 들어오는지 확인합니다. 맨 아래까지 스크롤하며 글자 잘림과 페이지 전체의 가로 스크롤을 찾습니다.
2. 폭을 천천히 늘리며 카드가 너무 좁아지거나 메뉴 사이에 불필요한 공백이 생기는 구간을 확인합니다. 정해진 기기 몇 개만 선택하는 것으로 끝내지 않습니다.
3. 이 예제의 분기점은 42rem입니다. 초기 글꼴 크기가 16px이면 672px이므로 671px, 672px, 673px를 비교합니다. 전자는 카드 1열, 뒤의 두 폭은 2열이어야 합니다.
4. 1365px와 1920px 같은 넓은 화면에서는 본문 최대 폭이 유지되는지, 줄이 너무 길지 않은지 봅니다. 기기 에뮬레이션과 별도로 실제 사용 대상 기기에서 조작·가상 키보드·화면 회전을 확인합니다.

장치 에뮬레이션은 폭과 일부 조건을 바꿔 보는 근사 도구입니다. 실제 기기의 글꼴, 터치 조작, 가상 키보드와 브라우저 동작을 모두 재현하지 않습니다. 화면 아래쪽에 가상 키보드가 나타나는 입력 상황은 실제 기기에서 다시 확인하는 것이 좋습니다.

브라우저 확대와 글자 확대 구분하기

브라우저 확대는 페이지 전체를 키우면서 CSS가 사용할 수 있는 뷰포트 폭도 달라질 수 있습니다. Windows의 Ctrl과 +로 확대하고 Ctrl+0으로 기본 배율로 되돌립니다. 글자 크기 설정이나 글자만 확대하는 기능은 텍스트와 상자의 관계를 따로 확인하는 조건입니다. CSS에서 html의 font-size를 바꾸는 실험을 브라우저 확대와 같은 것으로 기록하면 안 됩니다.

1. 실제 브라우저 창에서 기본 배율의 화면 폭을 기록하고 200%로 확대합니다. 메뉴 문구, 카드 설명, label·입력칸·버튼의 글자가 잘리거나 겹치지 않는지 확인합니다.
2. 더 큰 확대 배율에서도 내용을 읽을 수 있는지 확인합니다. 1280 CSS px 폭을 기준으로 400% 확대하면 약 320 CSS px 상당의 공간이 되지만 브라우저 UI와 스크롤바 등에 따라 실제 값은 달라질 수 있습니다.
3. 기본 배율로 복구한 뒤 브라우저 글꼴 설정을 크게 바꾸어 다시 확인합니다. 기본 글꼴 변경, 페이지 확대, CSS 수정의 조건과 결과는 별도 항목으로 기록합니다.

접근성 기준을 참고하면 글자는 200%까지 키워도 내용과 기능을 잃지 않아야 하며, 일반적인 세로 스크롤 콘텐츠는 320 CSS px 상당의 폭에서 양방향 스크롤 없이 재배치되는지 확인합니다. 의미상 이차원 배치가 필요한 표·지도 등에는 예외가 있지만 해당 요소의 예외가 페이지 전체에 자동으로 확대되는 것은 아닙니다. W3C의 글자 크기 조절 설명과 리플로 설명에서 기준과 예외를 확인할 수 있습니다.

가로 넘침을 재현하고 원인 요소 찾기

원본 CSS의 맨 아래에 다음 선언만 추가하고 390px에서 여세요. 첫 번째 카드가 최소 40rem을 요구하므로 화면 안에 들어가지 않습니다. 개발자 도구의 요소 선택으로 해당 카드를 고르고, 계산된 폭과 min-width를 확인합니다.

.card:first-child { min-width: 40rem; }

이 문제는 Grid 열만 더 작게 만드는 것으로 해결되지 않을 수 있습니다. 아이템 자신이 최소 폭을 요구하기 때문입니다. 추가한 선언을 제거하면 원래의 min-width: 0으로 돌아갑니다. 같은 화면 폭에서 가로 스크롤과 카드 표시를 다시 확인하세요.

복구한 뒤 이번에는 다음 선언만 추가합니다. 긴 식별자가 어디에서 넘치는지 확인하고, 추가 선언을 제거해 anywhere로 되돌립니다. 한 번에 두 문제를 넣으면 어떤 변경으로 해결됐는지 알기 어려워집니다.

.card { overflow-wrap: normal; }

페이지 전체의 넘침 여부는 콘솔에서 아래 값으로 빠르게 볼 수 있습니다. 오른쪽 수치가 왼쪽보다 커지면 원인을 살펴볼 신호입니다. 이 검사는 문서의 폭을 비교할 뿐 어떤 요소가 원인인지 바로 알려 주지는 않으며, 의도한 가로 스크롤 영역과 숨겨진 요소도 별도로 판단해야 합니다.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

고정 높이로 잘리는 글 확인하기

폭 문제가 없는 원본 상태에서 다음 코드만 맨 아래에 추가합니다. 첫 번째 카드의 아래쪽 설명이나 링크가 잘리는 것을 확인하세요. 글자 확대나 긴 설명은 필요한 높이를 늘리므로 고정 높이와 숨김의 조합이 특히 문제가 되기 쉽습니다.

.card:first-child { height: 10rem; overflow: hidden; }

추가한 선언을 제거해 내용에 따른 자동 높이로 되돌립니다. 짧은 카드 높이를 서로 맞추는 것이 디자인 목표라도 정보를 잘라 버리는 방식은 피합니다. 최소 높이를 정해 빈 공간을 허용하거나 배치 조건을 조정하는 대안을 검토하고, 긴 문장과 확대 조건에서 다시 확인하세요. 가로 스크롤을 숨기거나 글자 크기를 계속 줄여 문제를 가리는 것도 같은 이유로 먼저 선택하지 않습니다.

키보드 이동과 점검 기록 남기기

페이지를 새로 연 뒤 Tab으로 메뉴, 카드 링크, 이메일 입력칸과 버튼을 순서대로 이동합니다. Shift+Tab으로 거꾸로 이동하고 포커스 테두리가 보이는지 확인합니다. 화면 밖의 요소로 이동할 때 적절히 스크롤되는지, 고정된 메뉴나 다른 요소가 포커스를 완전히 가리지 않는지도 봅니다. CSS로 시각 순서를 바꾼 경우에는 HTML의 읽기·키보드 순서와 어긋나지 않는지 확인하세요.

이 표는 기록 방법의 예이며 실제 점검 결과는 각 환경에서 확인해 채웁니다. 문제가 없었다고 기록할 때도 실행한 조건을 함께 남겨야 이후 변경과 비교할 수 있습니다. 폭·확대·콘텐츠·키보드 조작을 따로 확인하고 수정 후 원래 실패 조건을 다시 시험하면, 화면 한 장만 보고 놓치기 쉬운 문제를 줄일 수 있습니다.