표 UI 행 높이는 왜 중요한가?
표(table) 컴포넌트의 행 높이(row height)는 단순한 여백 값이 아니라 가독성과 정보 밀도의 균형점을 결정하는 핵심 수치입니다. 너무 촘촘하면 텍스트가 답답해 보이고, 너무 여유로우면 한 화면에 담기는 정보량이 줄어듭니다.
행 높이를 정하는 기본 공식은 줄 높이(line-height) × 줄 수 + 패딩 × 2입니다. 줄 높이는 폰트 크기의 1.4~1.6배가 일반적이며, 여기에 셀 상하 패딩을 더하면 실제 렌더링되는 행 높이가 나옵니다.
밀도별 활용 기준
관리자 페이지나 스프레드시트형 UI처럼 데이터를 대량으로 훑어봐야 하는 화면은 40px 미만의 컴팩트 밀도가 적합합니다. 반면 일반 목록이나 대시보드는 40~56px 정도의 보통 밀도가 무난하며, 사용자가 행을 터치해 선택해야 하는 모바일 UI라면 56px 이상의 여유 밀도로 최소 터치 영역(44px)을 확보해야 합니다.
줄 수와 패딩 조정
셀에 부제목이나 배지가 함께 들어가 2줄 이상이 되는 경우, 줄 수를 늘려 계산하면 콘텐츠가 잘리지 않는 높이를 바로 확인할 수 있습니다. 패딩은 시각적 여백을 좌우하므로, 표 전체의 톤과 목적에 맞게 조정하는 것이 좋습니다.
자주 묻는 질문
줄 높이를 폰트 크기의 1.4~1.6배로 잡고 위아래 패딩을 더합니다. 14px 폰트라면 대략 36px 전후가 적당합니다.
한 화면에 많은 행을 보여줘야 한다면 40px 미만 컴팩트 밀도를, 자세히 읽어야 하는 표라면 56px 이상 여유 밀도를 사용하세요.
터치로 선택해야 하는 행이라면 최소 44px 이상을 권장합니다. 읽기 전용 표라면 데스크톱과 비슷해도 무방합니다.