모바일에서 표를 카드로 안 바꾸고 읽히게 만드는 법

좁은 화면에서 표가 깨지면 다들 카드로 바꿔요. 저도 오래 그렇게 했는데, 플랜비(plan-b)에서 회비 납부 현황을 카드로 뒤집어 보니 문제가 생기더라고요. 줄 사이 비교가 안 돼요. 표의 본질은 위아래를 눈으로 훑는 건데, 카드는 그걸 통째로 버리거든요.

그래서 반대로 접근했어요. 표는 표로 두고, 무엇을 먼저 보여줄지만 정하는 거예요.

열 우선순위는 사람이 정하기 귀찮은 일

회비 표에 열이 7개 있었어요. 이름·납부월·금액·방식·입금일·메모·상태. 이 중 폰에서 한 번에 보일 건 두세 개예요. 어떤 걸 남길까요? 이게 애매해요. 화면마다 답이 다르고, 열이 늘 때마다 다시 정해야 해요.

이 판단을 AI에게 맡겨 봤어요. 단, 결과를 그때그때 받는 게 아니라 규칙으로 뽑아내는 방식으로요.

프롬프트는 이렇게 줬어요.

이 표의 열 목록과 "사용자가 이 화면에서 하려는 일"을 준다.
각 열을 primary(항상 표시) / secondary(넓을 때) / detail(펼쳤을 때)
로 분류하고, 이유를 한 줄씩 써라. primary는 최대 3개.

돌려 보니 회비 표는 이름·금액·상태가 primary로 나왔어요. 납부월은 secondary, 메모와 방식은 detail. 제 감이랑 비슷했지만 "방식은 문제 생겼을 때만 본다"는 이유가 붙어 나온 게 좋았어요. 저는 그냥 덜 중요하다고 뭉뚱그렸거든요.

받은 분류를 코드에 박아 두기

여기서 중요한 건 AI를 런타임에 부르지 않는 거예요. 분류는 한 번 받고, 상수로 고정해요.

const COLUMN_TIER = {
  name: 'primary',
  amount: 'primary',
  status: 'primary',
  month: 'secondary',
  method: 'detail',
  memo: 'detail',
} as const

그다음은 CSS 한 줄씩이에요. detail 열은 좁은 화면에서 display: none, secondary는 중간 폭부터 등장. 표 구조는 그대로라 스크린 리더도 헤더 연결을 잃지 않아요. 카드로 뒤집으면 이 연결이 끊기는데, 이게 카드 변환의 숨은 비용이에요.

detail 열은 행을 탭하면 아래 한 줄로 펼쳐지게 했어요. <tr> 하나를 더 그리는 거라 추가 라이브러리 없이 끝나요. 적용해 보니 파일 2개 수정으로 마무리됐고, 20분쯤 걸렸어요.

숫자 열은 따로 챙겨야 해요

금액 열을 그냥 두니 자릿수가 들쭉날쭉해서 비교가 안 되더라고요. font-variant-numeric: tabular-nums 한 줄 넣으니 숫자 폭이 맞아요. 플랜씨(plan-c)에서 대출이자 계산 결과를 표로 보여줄 때도 같은 이유로 넣어 뒀어요. 표에서 숫자는 읽는 게 아니라 비교하는 대상이라서요.

이 방식이 안 맞는 경우

열이 3개 이하면 그냥 다 보여주면 돼요. 우선순위를 나눌 이유가 없어요. 반대로 각 행이 독립적인 항목이고 서로 비교할 일이 없다면(알림 목록 같은 것) 그건 처음부터 표가 아니라 목록이에요. 카드가 맞아요.

AI에게 맡긴 건 판단 전체가 아니라 "열 20개 중 뭐가 덜 중요한가" 같은 지루한 분류였어요. 최종 화면은 직접 폰으로 열어서 확인했고, primary 3개 중 하나는 바꿨어요. 이 정도 선이 지금은 적당한 것 같아요.