반응형 테이블 작업(스크롤,컬럼숨김,카드형)

깨지지 않는 관리자 화면 만드는 방법

 

반응형 작업에서
가장 난이도가 높은 요소는 테이블이다.

• 모바일에서 가로 스크롤 발생
• 컬럼이 줄어들며 의미 손실
• 버튼이 밀림
• 정렬이 깨짐

테이블은 단순히 줄이는 게 아니라
전략적으로 설계해야 한다.

 

 

1. 테이블은 줄이는 게 아니라 “방식”을 바꿔야 한다

많은 사람들이 이렇게 생각한다.

“모바일에서 width:100%면 되겠지?”

아니다.

 

테이블은 화면 크기에 따라
표현 방식을 바꾸는 것이 핵심이다.

---

2. 반응형 테이블 3가지

 2-1. 가로 스크롤 유지 (가장 안전)

/* CSS */

.table-wrap {
  overflow-x: auto;
}

/* HTML */

<div class="table-wrap">
  <table>
    ...
  </table>
</div>

 

장점

• 구조 유지
• 접근성 안전
• 관리자 화면에 적합

단점

• 모바일 UX는 다소 불편

공공기관 관리자 화면은
이 방식이 가장 현실적이다.

 

2-2. 컬럼 숨김 (중요도 기반)

모바일에서 불필요한 컬럼 제거

/* CSS */

@media (max-width: 768px) {
  .col-hide {
    display: none;
  }
}

 

핵심

• “중요도” 기준으로 설계
• 필수 데이터만 남기기

 

2-3. 카드형 변환 (모바일 전용)

/* CSS */

@media (max-width: 768px) {
  table {
    display: block;
  }
  tr {
    display: block;
    margin-bottom: 16px;
  }
}

 

장점

• 모바일 가독성 좋음
• 사용자 서비스형에 적합

단점

• 관리자 화면에는 부적합
• 접근성 재검토 필요

---

3. 공공기관 관리자 화면 추천 전략

> 기본은 “가로 스크롤 유지”
> 필요 시 컬럼 최소화

이유:

• 행정 업무는 PC 중심
• 데이터 밀도 중요
• 접근성 구조 유지 필요

---

4. 반응형 테이블 설계 체크리스트

구조

• caption 존재
• thead/tbody 구분
• scope 사용

UX

• 최소 컬럼 수 유지
• 버튼 위치 고정
• 정렬 기준 명확

기술

• overflow-x 처리
• white-space 조정
• min-width 설정

---

5. 깨지지 않는 설계 팁

1) 숫자 컬럼은 nowrap

/* CSS */

td.number {
  white-space: nowrap;
}

2) 버튼 그룹은 flex로 정렬

/* CSS */

td .btn-area {
  display: flex;
  gap: 4px;
}

 

3) 최소 너비 확보

/* CSS */

table {
  min-width: 800px;
}

 

---

6. 흔한 실수 TOP5

1. 모바일에서 강제로 font-size 줄이기
2. width를 %로만 설정
3. 버튼을 줄바꿈 허용
4. 텍스트 줄바꿈 미제어
5. 컬럼 숨김 기준 없이 삭제

---

7. 실무 판단 기준

상황	추천 방법
사용자 목록	컬럼 숨김
공공 서비스 페이지	카드형 변환
관리자 목록	가로 스크롤 유지

 

---

8. ChatGPT 활용 팁

프롬프트: 
아래 테이블을 모바일에서 가로 스크롤 유지 방식으로 개선해줘.
접근성을 유지하면서 구조는 유지해줘.

또는

프롬프트: 
아래 관리자 테이블에서 모바일에서 숨겨도 되는 컬럼을 분석해줘.

 

---

정리

반응형 테이블은
“줄이는 작업”이 아니라

데이터 우선순위를 설계하는 작업

이다.

 

특히 공공기관 고도화에서는
구조 유지 + 접근성 확보가 최우선이다.