긴 표만 움직이고 본문은 제자리에

작은 화면으로 살펴보기

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

나는 표를 억지로 작게 만드는 것부터 시작하지 않는다

여러 열을 휴대전화 한 화면에 모두 넣으려고 글자를 계속 줄이면 표의 목적이 사라질 수 있다. 방문자가 비교해야 할 기준이 있는데 작은 글씨와 좁은 칸 때문에 문장을 읽을 수 없으면 정보는 남아 있어도 판단하기 어렵다. 나는 표가 유지해야 할 관계를 먼저 본다.

같은 행에서 두세 가지 선택을 비교하는 자료라면 가로 관계를 보존하는 편이 유용할 수 있다. 반대로 항목마다 독립적으로 읽는 목록이라면 작은 화면에서 카드로 바꾸는 방법도 있다. 표를 카드로 바꿀 때는 각 값의 머리글과 읽는 순서를 다시 붙여야 한다. CSS로 칸만 쌓고 기준을 지워서는 같은 정보가 되지 않는다.

본문의 폭과 표의 폭을 따로 책임지게 했다

내가 확인한 구현은 표를 감싼 영역의 최대 폭을 본문에 맞추고 그 안에서만 가로 넘침을 허용한다. 안쪽 표에는 내용을 읽을 수 있는 최소 폭을 둔다. 휴대전화에서 표가 넓어도 바깥 본문은 화면 안에 남는 구조다.

안쪽 표의 최소 폭만 지정하면 부모 grid나 flex가 그 폭에 끌려갈 수 있다. 그래서 표 래퍼와 글 영역이 줄어들 수 있는지 함께 확인한다. 이 문제를 문서 전체 overflow-x: hidden으로 덮으면 잘못 커진 내용이 잘려도 찾기 어려울 수 있다. 나는 넘침을 만든 영역을 찾고 그 영역 안에 스크롤 책임을 둔다.

표가 움직인다는 사실을 먼저 알려준다

휴대전화 화면에 두 번째 열의 일부만 보이면 방문자는 나머지 열이 있다는 사실을 모르고 읽기를 끝낼 수 있다. 나는 표 앞에 좌우로 움직여 전체 열을 확인하라는 안내를 둔다. 데이터의 중요한 내용이 가려지는 상황에서는 보이는 스크롤 표시나 첫 열의 처리도 실제 화면에서 함께 살펴본다.

마우스와 터치만 기준으로 삼지 않는다. 현재 원본은 표 영역에 초점을 받을 수 있는 속성과 이름을 연결했다. 새 예시도 초점 테두리를 남기고 표 제목과 안내를 연결한다. 다만 tabindex 하나로 모든 브라우저의 키보드 이동이 보장되는 것은 아니다. 실제 키보드와 보조 기술에서 들어가기, 이동하기, 다시 나오기를 확인해야 한다.

머리글과 표 제목은 화면 밖에서도 관계를 남긴다

표를 보기 좋게 꾸미는 div 배열로만 만들면 값과 기준의 관계를 따로 구현해야 한다. 나는 기본 table 구조를 사용하고 caption으로 표 전체의 뜻을 설명한다. 열 머리글에는 scope="col", 각 행의 기준에는 scope="row"를 둔다. 글의 제목과 표의 제목은 서로 다른 설명이므로 짧더라도 표 자체의 설명을 남긴다.

이 예시는 단순한 한 줄 머리글을 가진 비교표다. 여러 단계로 합쳐진 복잡한 머리글은 추가적인 연결이 필요할 수 있으므로 이 구조만 복사해 완성됐다고 판단하지 않는다. 같은 페이지에 표가 여러 개라면 제목과 안내의 id도 각각 달라야 한다. 다른 표의 이름을 공유하지 않게 한다.

<section class="comparison-block">
  <h2 id="comparison-title">Choose a publication workflow</h2>
  <p id="comparison-hint">Scroll this table sideways to see every column.</p>
  <div class="comparison-scroll" role="region" tabindex="0"
       aria-labelledby="comparison-title"
       aria-describedby="comparison-hint">
    <table>
      <caption>Synthetic comparison: two example approaches</caption>
      <thead><tr>
        <th scope="col">Question</th>
        <th scope="col">Approach A</th>
        <th scope="col">Approach B</th>
      </tr></thead>
      <tbody>
        <tr><th scope="row">What changes?</th>
          <td>Content records</td><td>Generated files</td></tr>
        <tr><th scope="row">What needs checking?</th>
          <td>Versions and publication state</td>
          <td>Build output and route availability</td></tr>
      </tbody>
    </table>
  </div>
</section>

나는 스크롤 규칙을 표 영역 안에 묶었다

다음 CSS는 새 설명용 표에 필요한 범위만 모은 예시다. 바깥 영역은 본문 폭을 지키고, 안쪽 표는 읽기 위해 필요한 폭을 유지한다. 최소 폭 40rem은 시작값이지 모든 표에 맞는 규격이 아니다. 실제 열 수와 문장 길이, 글자 크기에 맞춰 조정한다.

긴 단어를 위한 보완 규칙은 남기되 모든 칸에 nowrap을 붙이지 않았다. 설명 문장이 길면 자연스럽게 줄을 나누는 편이 읽기 좋다. 반대로 짧은 코드나 날짜처럼 한 덩어리로 읽어야 하는 값은 해당 칸만 따로 조정할 수 있다. 표 전체의 줄바꿈을 막아 폭을 불필요하게 늘리지 않는다.

.comparison-block { min-width: 0; max-width: 100%; }
.comparison-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #cbd2cd;
}
.comparison-scroll:focus-visible {
  outline: 3px solid #2d6a51;
  outline-offset: 3px;
}
.comparison-scroll table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  line-height: 1.6;
}
.comparison-scroll caption {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
}
.comparison-scroll :is(th, td) {
  padding: 1rem;
  border-bottom: 1px solid #dce0dd;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.comparison-scroll thead th { background: #edf2ee; }
/* If the parent is a grid, use minmax(0, 1fr) for its content track. */

나는 문서와 표의 넘침을 따로 확인한다

검수에서는 문서의 scrollWidth와 clientWidth를 비교하고 표 래퍼의 두 값도 따로 본다. 의도한 결과는 문서가 가로로 넘치지 않고 좁은 화면에서 필요한 표만 내부로 넘치는 것이다. 숫자가 맞아도 중요한 열이나 초점 표시가 가려질 수 있으므로 실제 읽기와 움직임을 함께 확인한다.

과거 기록에는 모바일 문서 넘침 없음과 표 내부 스크롤이 함께 남아 있다. 일부 기록은 표 초점만 확인했고 전체 키보드 순회는 확인하지 않았다고 범위를 적었다. 나는 그 제한도 유지한다. 이번 글의 새 HTML·CSS 예시는 구조를 확인한 자료이며 현재 PC·모바일 실화면이나 화면 낭독기 검증을 완료했다는 보고는 아니다.

1. 표 때문에 본문과 제목이 화면 밖으로 밀리지 않는가.
2. 마지막 열까지 이동할 수 있고 표를 빠져나올 수 있는가.
3. 키보드 초점과 안내가 눈에 보이고 표의 이름과 연결되는가.
4. 머리글과 값의 관계가 확대된 글자에서도 유지되는가.
5. 여러 표의 id가 겹치지 않고 각 표의 설명이 맞는가.
6. 표를 인쇄하거나 공유할 때 필요한 열이 잘리지 않는가.

나는 정보의 관계를 지키는 작은 변경을 남긴다

표를 없애면 모바일 화면은 간단해질 수 있지만 비교가 필요한 이유까지 사라질 수 있다. 글자를 줄이면 가로 폭은 맞아도 읽기가 어려워진다. 나는 본문은 편하게 읽고 표에서는 필요한 관계를 확인할 수 있는 경계를 만드는 쪽을 택했다.

재사용할 것은 특정 표의 색이나 칸 수보다 이 책임 분리다. 표가 어디까지 넓어질 수 있는지, 누가 그 안을 움직일 수 있는지, 값의 기준이 무엇인지 설명해야 한다. 그래야 내용이 늘어나도 같은 모듈을 다시 검토하고 적용할 수 있다.