메인 화면에 나온 필수 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 정리했습니다.
1. 일반 폼 컨트롤 및 버튼 규격
자주 쓰는 버튼과 입력창의 형태(높이 36px)를 통일하여 시스템의 일관성을 높여 보세요.
| 컨트롤 종류 | 표준 높이 | 디자인 속성 및 상태 (State) |
|---|---|---|
| 주요 버튼 (저장, 승인 등) | 36px | 기본 저장 배경: #0052CC / 글자: 흰색 Hover 저장 배경: #0043CC (약간 짙어짐) |
| 보조 버튼 (취소, 닫기 등) | 36px | 기본 취소 테두리: #DFE1E6 / 글자: #172B4D Hover 취소 배경: #F4F5F7 (약간 어두워짐) |
| 입력창 / 캘린더 | 36px | 테두리: #DFE1E6 둥글기: 4px 내부여백: Left 12px |
2. 아이콘 버튼 및 스타일 확장 (Icon Buttons)
버튼의 중요도에 따라 4가지 스타일(Text, Outline, Light, Solid)을 골라 쓰고, 아이콘을 조합해 직관성을 높여 보세요.
| 기능 (Action) | Text (가장 약함) | Outline (보통) | Light (약간 강조) | Solid (가장 강조) |
|---|---|---|---|---|
| 기본 (Master) | Master | Master | Master | Master |
| 일반 (Add/Edit) | ＋ Add | ＋ Add | ＋ Add | ＋ Add |
| 승인 (Submit) | ✓ Submit | ✓ Submit | ✓ Submit | ✓ Submit |
| 취소 (Cancel) | ✕ Cancel | ✕ Cancel | ✕ Cancel | ✕ Cancel |
| 삭제 (Delete) | 🗑 Delete | 🗑 Delete | 🗑 Delete | 🗑 Delete |
💡 스타일별 활용 팁
• Text: 그리드 셀 내부의 동작 버튼이나 중요도가 낮은 부가 기능에 사용해 보세요.
• Outline: 화면에 여러 버튼이 모여 있을 때 보조 버튼(취소, 뒤로가기 등)으로 사용해 보세요.
• Light: 흰 배경 위에서 버튼 영역을 부드럽게 돋보이게 하고 싶을 때 사용해 보세요.
• Solid: 화면에서 사용자가 가장 먼저 눌러야 하는 가장 핵심적인 1개의 버튼에만 사용해 보세요.
3. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
블루 (Standard Blue)
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
헤더 스타일 #F4F5F7
행 배경 (반복) #FAFBFC
선택 레코드 색 #E6EFFC
테두리 / 소계 #DFE1E6
소프트 그린 (Soft Green)
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
헤더 스타일 #F0FAF5
행 배경 (반복) #F7FCF9
선택 레코드 색 #E3FCEF
테두리 / 소계 #ABF5D1
모던 다크 (Modern Dark)
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
헤더 스타일 #EBECF0
행 배경 (반복) #FAFBFC
선택 레코드 색 #E4ECF0
테두리 / 소계 #C5CDD7
웜 오렌지 (Warm Orange)
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
헤더 스타일 #FFEBE6
행 배경 (반복) #FFF7F5
선택 레코드 색 #FFD8CC
테두리 / 소계 #FFBDAD
