📏 표 UI 행 높이 계산기 | 딱 맞는 row height 얼마일까?

Q: 표 행 높이는 폰트 크기의 몇 배가 적당한가요?

일반적으로 줄 높이(line-height)를 폰트 크기의 1.4~1.6배로 잡고, 위아래 패딩을 더한 값을 행 높이로 사용합니다. 예를 들어 14px 폰트라면 줄 높이 약 20px에 패딩 8px씩을 더해 36px 정도가 적당합니다.

Q: 데이터 밀도가 높은 표는 행 높이를 어떻게 정해야 하나요?

관리자 페이지처럼 한 화면에 많은 행을 보여줘야 한다면 32~40px의 컴팩트 밀도를 사용합니다. 반면 사용자가 자세히 읽어야 하는 표라면 48px 이상의 여유 있는 높이가 가독성에 유리합니다.

Q: 모바일에서는 행 높이를 더 크게 잡아야 하나요?

터치로 행을 선택하거나 탭해야 하는 경우 최소 44px 이상을 권장합니다. 단순히 읽기만 하는 표라면 데스크톱과 비슷한 높이도 무방합니다.

폰트 크기 (px)

셀 상하 패딩 (px, 한쪽 기준)

셀당 텍스트 줄 수

밀도 등급 기준

등급	행 높이	용도
컴팩트	40px 미만	관리자 패널, 대용량 데이터 그리드
보통	40~56px	일반 목록형 표, 대시보드
여유	56px 초과	터치 인터랙션, 상세 정보 표

표 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 이상을 권장합니다. 읽기 전용 표라면 데스크톱과 비슷해도 무방합니다.

밀도 등급 기준

표 UI 행 높이는 왜 중요한가?

밀도별 활용 기준

줄 수와 패딩 조정

자주 묻는 질문

같은 카테고리 도구