반응형 웹을 위한 table 구조 개선 – ul, li로 바꾸고 접근성까지 챙기기

 

 

 

웹에서 데이터를 표(table) 형태로 보여주는 건 흔한 일이지만,

모바일 환경에서는 표가 잘려 보이거나 가독성이 떨어지는 경우가 많습니다.

이럴 때 유용한 방법이 바로 table을 ul, li 구조로 바꿔 반응형으로 구현하는 것입니다.

 

이번 글에서는 실제 예제를 통해 table을 ul/li로 바꾸는 방법과,

접근성(Accessibility)까지 고려한 마크업 전략을 소개합니다.

 

✅ 왜 table 대신 ul, li를 사용할까?

 

항목	table	ul, li
반응형 구현	어려움	유연함
스타일 커스터마이징	제한적	자유로움
접근성	명확한 구조 제공	추가 속성 필요
모바일 가독성	낮음	높음

table은 의미론적으로는 좋지만, 작은 화면에서 스크롤 없이 보기 어렵고 스타일링도 제한적입니다. ul, li 구조는 더 유연하게 레이아웃을 구성할 수 있어 모바일 친화적인 UI를 만들기에 적합합니다.

 

 

🧩 기본 구조 예시 (ul, li 기반)

 

<section aria-labelledby="price-list-heading">
  <h2 id="price-list-heading">요금 정보</h2>
  <ul class="price-list" role="list" aria-label="요금 테이블">
    <li class="price-row" role="listitem" aria-label="일반 요금: 10,000원">
      <span class="label">일반</span>
      <span class="price">10,000원</span>
    </li>
    <li class="price-row" role="listitem" aria-label="학생 요금: 8,000원">
      <span class="label">학생</span>
      <span class="price">8,000원</span>
    </li>
    <li class="price-row" role="listitem" aria-label="경로 우대 요금: 5,000원">
      <span class="label">경로 우대</span>
      <span class="price">5,000원</span>
    </li>
  </ul>
</section>

 

🎨 CSS로 반응형 처리하기

 

.price-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.price-row {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.label {
  font-weight: bold;
}

@media (max-width: 480px) {
  .price-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

 

이렇게 하면 데스크톱에서는 가로 정렬, 모바일에서는 세로 정렬로 자연스럽게 전환됩니다.

 

 

 

 

우리가 흔하게 사용하는 공지사항 게시판을 만들 때, table을 사용하는데 모바일 반응형으로 대응하기엔

구조가 유연하지 않습니다. 그럴 경우 ul, li를 사용하여 PC버전에선 table 모양으로 나오도록 하고

모바일에서 유연하게 구조를 바꾸어 가독성을 챙길 수 있습니다. 예시를 하나 들어보죠.

 

✅ 공지사항 게시판 (ul/li 기반 4 칼럼 UI)

<section aria-labelledby="notice-heading">
  <h2 id="notice-heading">공지사항</h2>

  <!-- 컬럼 헤더 영역 -->
  <ul class="notice-board header" role="presentation" aria-hidden="true">
    <li class="col-no">No</li>
    <li class="col-title">Title</li>
    <li class="col-file">Files</li>
    <li class="col-date">Date</li>
  </ul>

  <!-- 공지 목록 -->
  <ul class="notice-board" role="list" aria-label="공지사항 목록">
    <li class="notice-row" role="listitem" aria-label="공지 101: 시스템 점검 안내, 첨부 파일 있음, 2025년 6월 23일">
      <span class="col-no">101</span>
      <a href="/notice/101" class="col-title">[공지] 시스템 점검 안내</a>
      <span class="col-file">
        <span class="icon" aria-hidden="true">📎</span>
        <span class="visually-hidden">첨부파일 있음</span>
      </span>
      <time class="col-date" datetime="2025-06-23">2025.06.23</time>
    </li>

    <li class="notice-row" role="listitem" aria-label="공지 100: 여름 휴무 안내, 첨부 파일 없음, 2025년 6월 10일">
      <span class="col-no">100</span>
      <a href="/notice/100" class="col-title">[안내] 여름 휴무 안내</a>
      <span class="col-file visually-hidden">첨부파일 없음</span>
      <time class="col-date" datetime="2025-06-10">2025.06.10</time>
    </li>
  </ul>
</section>

 

🎨 반응형 CSS (기본 예시)

.notice-board {
  display: grid;
  grid-template-columns: 60px 1fr 50px 120px;
  gap: 8px;
  padding: 0;
  list-style: none;
  align-items: center;
}

.notice-board.header {
  font-weight: bold;
  border-bottom: 2px solid #333;
  padding-bottom: 8px;
}

.notice-row {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.col-no,
.col-title,
.col-file,
.col-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 반응형 대응 */
@media (max-width: 600px) {
  .notice-board {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .col-no,
  .col-file,
  .col-date {
    display: none;
  }
}

 

♿ 접근성을 위한 마크업 팁

 

ul, li는 본래 목록이기 때문에 표처럼 의미를 전달하려면 추가 속성이 필요합니다:

• role="list"와 role="listitem"으로 스크린리더가 구조를 인식할 수 있도록 설정
• aria-label에 공지 제목, 첨부 여부, 날짜 정보를 요약해 스크린리더 지원
• <section>과 aria-labelledby로 제목과 콘텐츠를 연결
• 파일 유무는 아이콘(시각적)과 visually-hidden 텍스트(보조 기술용)로 병행
• <time datetime="YYYY-MM-DD"> 요소 사용으로 날짜 기계 판독 지원

 

✍️  정리 및 팁

• 표는 비교 목적일 때만 사용. 일반 정보 표시용이라면 ul/li가 더 유연하고 접근성 높음.
• 시맨틱 레이아웃 + ARIA의 조화. 시각 모드는 ul/li 구조, 보조기술 모드는 table 역할 유지.
• 미디어쿼리 활용: 큰 화면에서는 table, 작은 화면에서는 ul/li 구조로 토글.
• 스크린리더 테스트 필수: Chrome, Safari 등 다양한 환경에서 semantics가 유지되는지 확인해야 함

 

✨ 마무리하며

table은 구조적으로 강력하지만,

모바일 환경과 접근성까지 고려한다면

ul, li 구조로의 전환이 더 나은 선택일 수 있습니다.

특히 요금표, 리스트형 데이터, 카드형 UI 등에 적용하면

가독성과 유연성 모두를 잡을 수 있어요.