AI 분석
지출 대비 예산 소진율을 한 장의 카드로 보여주는 다크 모드 UI 요소다.
거의 검정에 가까운 배경 위에 얇은 테두리의 단일 카드를 중앙 배치하고, 점 그리드와 파선 가이드로 작업 캔버스를 노출한다. 카드 상단은 제목과 소진율 배지로 구성한 헤더이고, 구분선 아래 본문은 좌측 지출 합계와 우측 예산 합계를 양 끝으로 밀어 대비시킨다. 큰 숫자는 산세리프로, 라벨은 모노스페이스로 쓰고 감소 지표만 초록, 진행 바 채움만 보라를 써서 강조색을 두 개로 제한한다. 진행 바의 잔여 구간을 촘촘한 세로 눈금으로 처리한 점과 태그 칩·아바타 스택을 한 줄에 배치한 마무리가 데이터 카드 설계 참고로 유용하다.
dark-mode · minimal · high-contrast · techy
claude-opus-5 · 2026-09-07 23:20 · 신뢰도 0.94