갭 드롭다운 KPI 가독성과 스타일 일관성 개선

UI/스타일을 개선했음. 갭 드롭다운 테이블 폰트·여백 통일.
변경 파일: 뷰/스타일 1개

변경 내용

화면의 시각적 품질을 높이고 정보를 더 쉽게 읽을 수 있도록 스타일을 조정했음.

KPI 숫자 폰트 사이즈 대형화
행간/자간 미세 조정
보조 정보는 작고 흐리게
강조 색상 적용

디자인 원칙

일관성: 색상, 폰트, 여백을 시스템 전체에서 통일
가독성: 숫자 데이터는 크고 굵게, 보조 정보는 작고 흐리게
반응형: 모바일/태블릿/데스크톱 해상도 각각 확인
대비: 텍스트와 배경 색상 대비 비율 (WCAG AA 기준 4.5:1)

CSS 작업에서 !important를 남발하면 나중에 스타일 덮어쓰기가 어려워짐. specificity를 높이는 방향으로 작성하고, 변수(--primary-color 등)를 활용해서 일관성을 유지했음.

SCSS를 쓰는 경우 @mixin으로 재사용 가능한 패턴을 추출하면 중복을 줄일 수 있음. 특히 반응형 브레이크포인트 mixin을 만들어두면 편함.

작업 후기

사내 서비스를 만들다 보면 기능 하나가 단순히 화면에 버튼 하나 추가하는 것으로 끝나지 않는다는 걸 계속 체감함. SQL 집계, 상태 머신, 예외 처리, 화면 렌더링, 권한 체크가 모두 엮여 있어서 어느 하나만 빠뜨려도 숫자가 맞지 않거나 특정 사용자에게 이상한 화면이 나타남.

특히 금융/결제 도메인은 숫자 하나가 틀리면 신뢰가 무너질 수 있어서 꼼꼼함이 기본값이어야 함. "대충 맞는 것 같다"로 넘어가면 나중에 반드시 다시 돌아옴.