가이드 범위
18개
토큰·컴포넌트·화면 패턴
적용 파트
3개
동시 개발 기준 통합
예상 구축
2~3주
1단계 산출물 기준
진행 현황
스타일 가이드 수립부터 핵심 화면 시안 전달까지의 흐름
컨셉 정의82
색상 체계68
공통 컴포넌트74
화면 시안56
디자인 원칙
공공 서비스의 신뢰감과 업무 효율을 동시에 확보하는 기준
정보 위계는 명확하게, 업무 화면은 조밀하지만 답답하지 않게 구성합니다.
3개 개발 파트가 같은 버튼, 폼, 테이블 규칙을 공유하도록 설계합니다.
본 작업 확장을 고려해 토큰과 컴포넌트 명세를 먼저 안정화합니다.
브랜드 톤 전환
색상 세트를 선택하면 전체 데모의 주요 색상이 즉시 바뀝니다.
컬러 시스템
주요 토큰은 접근성과 업무 화면 가독성을 기준으로 구성됩니다.
Primary
Accent
Text
Muted
Line
타이포그래피
행정·업무 데이터를 빠르게 읽을 수 있도록 크기와 굵기를 제한합니다.
| 토큰 | 크기 | 용도 | 예시 |
|---|---|---|---|
| Title | 20px / 700 | 페이지 제목 | 신청 현황 관리 |
| Section | 16px / 700 | 패널 제목 | 공통 컴포넌트 |
| Body | 14px / 400 | 본문·폼 | 필수 정보를 입력해 주세요. |
| Caption | 12px / 600 | 상태·보조 설명 | 검토중 |
입력 폼 검증
필수값, 상태 메시지, 버튼 피드백을 테스트합니다.
상태별 컴포넌트
업무 시스템에서 반복되는 상태 표시와 액션 버튼입니다.
승인
보완 요청
검토중
| 컴포넌트 | 상태 | 권장 사용 |
|---|---|---|
| Primary Button | 완료 | 주요 저장·제출 |
| Text Field | 활성 | 검색·필수 입력 |
| Table Row | 확인 | 민감 정보 검토 |
핵심 화면 시안
3개 개발 파트에 전달할 공통 레이아웃 패턴을 전환해 볼 수 있습니다.
업무 포털
공통 레이아웃
신청 현황
접수128
검토42
완료319
| 접수번호 | 민원명 | 상태 |
|---|---|---|
| A-1028 | 증명서 발급 요청 | 검토중 |
| A-1027 | 정보 변경 신청 | 완료 |
| A-1026 | 보완 서류 제출 | 보완 |
권한 관리
| 이름 | 권한 | 상태 |
|---|---|---|
| 김민서 | 관리자 | 활성 |
| 박지훈 | 검토자 | 대기 |
| 정하린 | 조회자 | 제한 |
운영 통계
처리율91
응답 속도76
만족도84
오류 감소63
통계 화면은 요약 지표, 필터, 표를 같은 규칙으로 배치해 개발 파트 간 편차를 줄입니다.