관리자 배지·테이블 시각 일관성 개선

관리자 배지/테이블 가독성 개선 및 플랜 기능 목록 정보 계층 정돈

UI 스타일 관련 정비 작업을 했음.

배경

기능 개발이 빠르게 이루어지면 스타일이 파편화되기 쉬움. 같은 역할의 배지인데 페이지마다 색이 다르거나, 테이블 간격이 들쭉날쭉하면 사용자 신뢰도가 떨어짐. 주기적으로 시각적 일관성을 점검하는 작업이 필요함.

작업 범위

SCSS/CSS 3개 파일, JSP 1개 파일

주요 변경

• 배지 컴포넌트 색상 및 크기 통일 — 상태값마다 다른 색상을 일관되게 적용
• 테이블 행 간격/패딩 조정으로 데이터 밀도와 가독성 균형 확보

CSS 설계 원칙

/* 공통 변수 활용 */
:root {
  --primary: #3b82f6;
  --success: #22c55e;
  --danger: #ef4444;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius: 6px;
}

/* 컴포넌트는 변수를 참조 */
.badge-success {
  background: var(--success);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
}

CSS 변수를 활용하면 테마 변경 시 한 곳만 수정해도 전체에 반영됨.

검증 체크리스트

• Chrome, Safari, Edge 렌더링 확인
• 모바일 viewport 기준 레이아웃 점검
• 접근성(명도 대비) 기준 충족 여부

UI/UX 관점

화면 변경 시 몇 가지를 체크했음.

로딩 상태: 비동기 요청 중에는 로딩 인디케이터를 표시했음. 버튼을 비활성화해서 중복 클릭을 방지했음.

btn.disabled = true;
try {
    await fetch('/api/...');
    showSuccess();
} catch(e) {
    showError(e.message);
} finally {
    btn.disabled = false;
}

빈 상태 처리: 데이터가 없을 때 빈 화면 대신 "데이터가 없습니다" 메시지를 표시했음.

오류 메시지: 기술적인 에러 코드 대신 사용자가 이해할 수 있는 메시지를 표시했음.

다음