📋 08. table & list 올바른 사용법: 레이아웃용 table은 이제 안녕

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분 / 핵심 파트만: 8분

🗺️ 이 문서의 흐름

[table의 올바른 사용 기준] → [표 시맨틱 구조] → [접근성 속성] → [ul/ol/dl 선택 기준] → [React 데이터 테이블]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 레이아웃용 <table> 이 왜 안 되는지 설명할 수 있다.
• <thead>, <tbody>, <tfoot>, <caption>, scope 를 올바르게 쓸 수 있다.
• <ul>, <ol>, <dl> 의 상황별 사용 차이를 설명할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님, 스터디 멤버 목록 화면을 table 로 짜도 되죠? 그리고 스터디 일정은... 그냥 div 쭉 나열해도 되는 거죠?"
• 🦁 영호 ( 리드 ): "멤버 목록처럼 '행·열 관계가 있는 데이터' 라면 table 이 맞아요. 근데 일정 같이 순서 있는 목록은 <ol>, 순서 없으면 <ul>, 용어와 설명이면 <dl> 이에요. 시맨틱하게 쓰면 스크린리더가 '3개의 항목이 있는 목록' 이라고 읽어주거든요."

📋 1. table — 행·열 관계 있는 데이터만

레이아웃에 table 쓰면 안 되는 이유:

• 스크린리더가 "테이블, X열 Y행" 이라고 읽어버림 → 레이아웃 의도와 혼동
• 반응형 처리 복잡
• 모바일에서 가로 스크롤 발생

<!-- ✅ 올바른 시맨틱 table 구조 -->
<table>
  <!-- caption: 표의 제목 (스크린리더가 먼저 읽음) -->
  <caption>영수네 커뮤니티 스터디 멤버 현황</caption>
 
  <thead>
    <tr>
      <!-- scope="col": 이 헤더가 열 헤더임을 선언 -->
      <th scope="col">이름</th>
      <th scope="col">직군</th>
      <th scope="col">레벨</th>
      <th scope="col">가입일</th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <!-- scope="row": 이 셀이 행 헤더임을 선언 -->
      <th scope="row">영철</th>
      <td>프론트엔드</td>
      <td>신입</td>
      <td><time datetime="2025-01-15">2025.01.15</time></td>
    </tr>
    <tr>
      <th scope="row">영호</th>
      <td>풀스택</td>
      <td>리드</td>
      <td><time datetime="2023-03-01">2023.03.01</time></td>
    </tr>
  </tbody>
 
  <tfoot>
    <tr>
      <td colspan="4">총 멤버: 2명</td>
    </tr>
  </tfoot>
</table>

스크린리더는 이 table을 이렇게 읽어:

"표: 영수네 커뮤니티 스터디 멤버 현황. 4열 3행. 이름 열 헤더. 직군 열 헤더. ... 영철 행 헤더. 프론트엔드. 신입. 2025년 1월 15일."

scope 속성 없이 <th> 만 쓰면 복잡한 표에서 어느 방향(행/열)의 헤더인지 스크린리더가 혼동할 수 있어.

📝 2. ul / ol / dl — 상황별 선택 기준

<!-- ul: 순서 없는 목록 (항목 나열) -->
<ul>
  <li>리액트 렌더링 이해하기</li>
  <li>TypeScript 기초 다지기</li>
  <li>CSS Flexbox 정복하기</li>
</ul>
 
<!-- ol: 순서 있는 목록 (단계, 순위) -->
<ol>
  <li>프로젝트 기획서 작성</li>
  <li>와이어프레임 제작</li>
  <li>개발 환경 세팅</li>
  <li>MVP 개발 시작</li>
</ol>
 
<!-- dl: 용어(dt) + 설명(dd) 쌍 목록 -->
<dl>
  <dt>DOM</dt>
  <dd>브라우저가 HTML을 파싱해 만든 노드 트리 객체 구조</dd>
 
  <dt>CSSOM</dt>
  <dd>CSS를 파싱해 만든 객체 구조, DOM과 합쳐 Render Tree 생성</dd>
</dl>

선택 기준 표:

⚛️ 3. React에서 데이터 테이블

// 타입 정의
interface Member {
  id: number;
  name: string;
  role: string;
  level: string;
}
 
// 시맨틱 테이블 컴포넌트
function MemberTable({ members }: { members: Member[] }) {
  return (
    <table>
      <caption>스터디 멤버 현황</caption>
      <thead>
        <tr>
          <th scope="col">이름</th>
          <th scope="col">직군</th>
          <th scope="col">레벨</th>
        </tr>
      </thead>
      <tbody>
        {members.map((member) => (
          <tr key={member.id}>
            <th scope="row">{member.name}</th>
            <td>{member.role}</td>
            <td>{member.level}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

📝 마무리 퀴즈

Q1. 스크린리더가 복잡한 테이블에서 셀이 어떤 헤더에 속하는지 올바르게 읽히게 하려면?

✅ 정답: <th> 에 scope="col" (열 헤더) 또는 scope="row" (행 헤더) 속성 적용

💡 상세 해설:

• 원리 설명: scope 속성은 스크린리더에게 "이 <th> 는 열 방향의 헤더야" 또는 "행 방향의 헤더야" 를 명시해요. 복잡한 표에서 방향 없이 <th> 만 쓰면 스크린리더가 어느 셀의 헤더인지 파악하지 못할 수 있어요.
• 📌 핵심 기억법: "열 제목 <th> = scope='col', 행 첫 셀 <th> = scope='row'"

Q2. 아래 중 <ol> 이 아닌 <ul> 을 써야 하는 상황은?

• A) 스터디 신청 절차 (1단계 → 2단계 → 3단계)
• B) 인기 게시글 TOP 5 랭킹
• 가) 오늘의 스터디 주제 태그 목록
• 라) 레시피 조리 순서

✅ 정답: 가

💡 상세 해설:

• 원리 설명: 순서 자체가 의미를 가진 경우(단계 순서, 순위, 조리 순서)는 <ol>, 항목을 단순 나열하는 경우(태그 목록, 기능 목록 등)는 <ul> 이에요.
• 📌 핵심 기억법: "순서가 중요하다 = <ol>, 순서 없이 나열 = <ul>"

Q3. 영철이의 테스트 타임

영수네 커뮤니티 FAQ 페이지를 만들어야 한다. 각 질문과 답변이 쌍으로 있다.
어떤 HTML 구조로 마크업해야 하는가?

✅ 정답: <dl> + <dt> (질문) + <dd> (답변) 구조

💡 상세 해설:

• 원리 설명: <dl> (Description List)은 이름-값 쌍을 나타내는 시맨틱 요소예요. <dt> (Description Term)는 용어/질문, <dd> (Description Details)는 설명/답변에 해당해요. FAQ, 용어집, 메타데이터 표현에 의미론적으로 가장 적합합니다.
• 📌 핵심 기억법: "Q&A, 사전, 용어집 = <dl> + <dt> + <dd>"

🐣 영철이의 퇴근 일기

<table> 로 레이아웃 잡으면 간편하다고 생각했는데, 스크린리더가 "테이블 4열 10행" 이라고 읽으면서 레이아웃을 표 데이터로 인식한다는 게 충격이었다. 그리고 <dl> 은 처음 제대로 써봤는데, 용어집/FAQ 같은 데 딱이다 싶었다.

💡 "표(<table>)는 데이터 관계를 나타낼 때만, 목록은 상황에 맞는 ul/ol/dl 을 고를 것 — 시맨틱 구조가 스크린리더와 검색엔진에게 의미를 전달한다."

🔗 더 알아보기

• MDN: <table> 요소
• MDN: HTML 테이블 접근성
• MDN: <dl> 요소