관리자 화면의 시각적 흐트러짐은 한 번의 큰 변경보다 여기저기 흩어진 색상값, 여백, 일회성 컴포넌트에서 비롯됩니다. 같은 “성공”이 세 페이지에서 세 가지 초록으로 나타나고, 테마를 바꾸려면 수십 개 파일을 손봐야 합니다.
admin-design은 토큰과 셸을 먼저 정하고, 그다음에 페이지를 이야기합니다.
색상은 용도를 쓰고 값은 쓰지 않는다
색상은 의미를 가진 유틸리티 클래스로만 지정합니다: bg-card, text-muted-foreground, text-success, border-destructive. 테마를 바꿀 때 바뀌는 것은 토큰이며 업무 코드는 그대로입니다.
배색은 두 층입니다. 여섯 가지 프리셋(teal, blue, forest, violet, amber, graphite, 사용자 정의)이 전체 인상을 정하고, 기본색(neutral, stone, zinc 등)과 테마색(열여덟 색상)으로 세부를 조정합니다. 밝은 모드와 어두운 모드는 각각 저장됩니다.
접근성은 덧붙이는 항목이 아닙니다. 글자 크기, 굵기, 고대비, 색각 지원, 동작 줄이기, 링크 밑줄을 설정에 두고, 설정은 브라우저에 저장하며 업무 데이터에는 넣지 않습니다.
모든 차트는 직접 그린 SVG
꺾은선, 막대, 도넛, 미니 막대, 가로 막대, 히트맵, 레이더, 깔때기, 간트를 외부 차트 라이브러리 없이 그립니다. 같은 의미의 색을 쓰고 밝고 어두운 모드를 따라가며, 장식 그래픽에는 role="img"와 aria-label을 붙여 “이 그림이 무엇을 말하는지”를 전달합니다.
의존이 없는 대신 좌표와 비율을 직접 관리합니다. 그 대가로 번들 크기, 감사, 테마 일관성을 스스로 통제할 수 있고, 차트를 위한 두 번째 색상 체계를 유지할 필요가 없습니다.
컴포넌트 갤러리가 곧 검수 기준면
아홉 갈래 컴포넌트를 아홉 페이지로 나누고, 모든 컨트롤에 실제 쓰이는 자리를 둡니다. 컴포넌트를 바꾸면 갤러리 예시를 먼저 갱신하고, 새 기능은 “갤러리 예시 + 실제 자리 + 테스트” 세트로 제출합니다. 문서와 구현이 어긋나지 않고, 리뷰도 비교할 기준면이 하나로 정해집니다.