테이블 UI는 언제 카드 리스트보다 좋은가

먼저 던질 질문

대량 데이터 비교에는 어떤 UI가 적합한가

핵심 관점

테이블은 오래된 UI가 아니라 비교를 위한 고밀도 인터페이스다. 카드보다 좋은 순간은 개별 항목의 매력보다 여러 항목의 차이를 빠르게 봐야 할 때다.

탐색이 빨라지는 장면

주문 관리 화면에서 주문번호, 상태, 금액, 날짜를 열로 두고 정렬과 일괄 처리를 제공한다.

사용자 관리 화면에서 권한, 상태, 최근 활동을 빠르게 비교한다.

발견을 방해하는 흐름

이미지와 설명이 중요한 콘텐츠를 좁은 테이블에 억지로 넣는다.

모바일에서 테이블을 그대로 축소해 읽기 어렵게 만든다.

탐색 사례와 근거

테이블은 비교와 스캔에 강하다

테이블은 여러 항목의 같은 속성을 빠르게 비교해야 할 때 강력하다. 주문 목록, 사용자 관리, 인보이스, 로그, 재고처럼 행과 열의 관계가 중요한 데이터에서는 카드보다 효율적이다.

GOV.UK의 Table 컴포넌트와 WAI-ARIA Table 패턴은 표가 의미 구조를 가져야 한다는 점을 보여준다. 헤더와 셀의 관계가 명확해야 시각적으로도 보조 기술에서도 데이터를 이해할 수 있다.

실무 해석

카드는 개별 항목의 맥락을 보여줄 때 좋지만 대량 데이터 탐색과 일괄 작업에는 밀도가 낮다. 테이블을 선택할 때는 반응형 열 처리, 행 액션, 정렬, 키보드 탐색까지 함께 봐야 한다.

탐색 패턴 선택 기준

• 비교해야 할 속성이 몇 개인지 확인한다
• 정렬과 일괄 작업이 필요한지 본다
• 모바일에서 같은 밀도를 유지할 수 있는지 판단한다

자주 빠지는 함정

테이블을 반응형으로 단순 축소하면 정보 구조가 무너진다. 모바일에서는 열 우선순위나 상세 확장 패턴을 다시 설계해야 한다.

추가로 비교할 탐색 사례

• 스프레드시트형 테이블, 문서형 테이블, 관리자 주문 목록, CRM 리스트를 비교한다
• 카드가 더 나은 콘텐츠 탐색 사례도 함께 찾는다
• 모바일 테이블 대안 사례를 모은다

탐색 설계 질문

• 카드 리스트가 더 나은 상황도 설명했는가
• 정렬, 선택, 일괄 작업의 접근성을 다뤘는가

출처

• GOV.UK Design System, Table: https://design-system.service.gov.uk/components/table/
• WAI-ARIA APG, Table Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/