...
화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의
...
디자인 요소를 확인해 보세요.
...
자주 쓰는 버튼과 입력창의 형태(높이 36px)를 통일하여 시스템의 일관성을 높여 보세요.
...
기본 저장 배경: #0052CC / 글자: 흰색
Hover 저장 배경: #0043CC (약간 짙어짐)
...
기본 취소 테두리: #DFE1E6 / 글자: #172B4D
Hover 취소 배경: #F4F5F7 (약간 어두워짐)
...
2. 아이콘 버튼 및 스타일 확장 (Icon Buttons)
버튼의 중요도에 따라 4가지 스타일(Text, Outline, Light, Solid)을 골라 쓰고, 아이콘을 조합해 직관성을 높여 보세요.
...
💡 스타일별 활용 팁
• Text: 그리드 셀 내부의 동작 버튼이나 중요도가 낮은 부가 기능에 사용해 보세요.
• Outline: 화면에 여러 버튼이 모여 있을 때 보조 버튼(취소, 뒤로가기 등)으로 사용해 보세요.
• Light: 흰 배경 위에서 버튼 영역을 부드럽게 돋보이게 하고 싶을 때 사용해 보세요.
• Solid: 화면에서 사용자가 가장 먼저 눌러야 하는 가장 핵심적인 1개의 버튼에만 사용해 보세요.
3. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)컨트롤 디자인 테마
화면의 컨셉(보수적, 모던, 미니멀 등)에 따라 컨트롤의 테두리와 배경을 다르게 적용해 보세요.
| 종류 | 기본형 | 테두리/밑줄형 | 배경 채움형 | 투명형 |
|---|
버튼 Button | Image Added
배경: #0052CC Border: none Corner Radius: 4 Font Size: 14pt | Image Added
배경: #FFFFFF Border: #0052CC Corner Radius: 4 Font Size: 14pt | Image Added
배경: #E6EFFC Border: none Corner Radius: 4 Font Size: 14pt | Image Added
배경: 없음 Border: Corner Radius: 4 Font Size: 14pt |
캘린더 Calendar | Image Added
배경: #FFFFFF Border: 1,1,1,1 가로: 130 Font Size: 14pt | Image Added
배경: 없음 Border: 0,0,0,2 가로: 130 Font Size: 14pt | Image Added
배경: #EBECF0 Border: none 가로: 130 Font Size: 14pt | Image Added
배경: 없음 Border: none 가로: 130 Font Size: 14pt |
콤보박스 Combo Box | Image Added
배경: #FFFFFF Border: 1,1,1,1 가로: 130 Font Size: 14pt | Image Added
배경: 없음 Border: 0,0,0,2 가로: 130 Font Size: 14pt | Image Added
배경: #EBECF0 Border: none 가로: 130 Font Size: 14pt | Image Added
배경: 없음 Border: none 가로: 130 Font Size: 14pt |
| 정보 |
|---|
스타일별 활용 팁 • 기본형 : 데이터가 많은 전통적인 업무 화면에 가장 적합하며, 입력 영역을 명확히 구분해 줍니다. • 테두리/밑줄형 : 여백을 넓게 쓰는 모던한 입력 폼이나 모바일 기기 화면에서 깔끔한 인상을 줍니다. • 배경 채움형 : 테두리 선을 생략하여 시각적 복잡도를 낮추고 싶을 때 사용해 보세요. • 투명형 : 그리드 셀 내부, 혹은 배경색이 이미 칠해진 상단 검색바 안에서 텍스트 위주로 보여줄 때 유용합니다. |
2. 버튼 스타일
버튼 용도에 따른 스타일을 골라 사용하세요. 이미지를 클릭해 마우스 우클릭으로 복사하고, AUD디자이너에 붙여 넣으세요.
| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| Default | Image Added
| Image Added
| Image Added
| Image Added
|
| Hover | Image Added
| Image Added
| Image Added
| Image Added
|
| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| Default | Image Added
| Image Added
| Image Added
| Image Added
|
| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| Default | Image Added
| Image Added
| Image Added
| Image Added
|
| Hover | Image Added
| Image Added
| Image Added
| Image Added
|
3. 테마별 데이터 그리드 색상표
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| | 블루 (Standard Blue) | | 헤더 스타일 | 일반 데이터Vibrant Purple (SaaS/세련) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F4F6FA
Row 스타일 #FFFFFF
행 배경 (반복) #F9FAFC
선택 레코드 색 #F0EFFF
마지막 레코드 색 #E4E0FF
가로 테두리 #E2E8F0
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Oceanic Blue (클래식) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | 헤더 스타일 #F4F5F7테두리 / 소계 #DFE1E6 Column 스타일 #F5F7FA
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC
선택 레코드 색 #E6EFFC#EBF2FA
마지막 레코드 색 #DCE7F5
가로 테두리 #E6E9ED |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Fresh Mint (의료/산뜻) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F4F9F8
Row 스타일 #FFFFFF
행 배경 (반복) #F9FCFB
선택 레코드 색 #E8F6F3
마지막 레코드 색 #D5EFE9
가로 테두리 #DCEFEA |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Sunset Grapefruit (알림) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #FFF6F6
Row 스타일 #FFFFFF
행 배경 (반복) #FFFAFA
선택 레코드 색 #FDE8EA
마지막 레코드 색 #FBD5DA
가로 테두리 #FADCE0 |
|
|
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 소프트 그린 (Soft Green헤더 일반 데이터헤더 스타일 #F0FAF5Column 스타일 #FFFCF5
Row 스타일 #FFFFFF
행 배경 (반복) #F7FCF9 #E3FCEF테두리 / 소계 #ABF5D1 #FFF8E5
마지막 레코드 색 #FFF0CC
가로 테두리 #F7EAC4 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 모던 다크 (Modern Dark헤더 일반 데이터헤더 스타일 #EBECF0Column 스타일 #F6F5FB
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC테두리 / 소계 #C5CDD7 #E4ECF0#F0EDF9
마지막 레코드 색 #E6E0F5
가로 테두리 #E6E2F1 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Grass Green (자연/성장) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F6FAF2
Row 스타일 #FFFFFF
행 배경 (반복) #FAFCF8
선택 레코드 색 #F0F7E9
마지막 레코드 색 #E5F2D8
가로 테두리 #E2EED5 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 웜 오렌지 (Warm Orange헤더 일반 데이터헤더 스타일 #FFEBE6Column 스타일 #434A54
Row 스타일 #656D78
행 배경 (반복) #FFF7F5 #FFD8CC테두리 / 소계 #FFBDAD #4B6E7D
마지막 레코드 색 #3A5A69
가로 테두리 #AAB2BD |
|
|