메인 화면에 나온 필수 화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의 기본 형태와 상태별 속성값을 정리했습니다.디자인 요소를 확인해 보세요.
1. 컨트롤 디자인 테마
화면의 컨셉(보수적, 모던, 미니멀 등)에 따라 컨트롤의 테두리와 배경을 다르게 적용해 보세요.
| 종류 | 기본형 | 테두리/밑줄형 | 배경 채움형 | 투명형 |
|---|
버튼
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 |
|---|
| | width | 50%
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| 버튼 형태 및 상태 (Button States) 가장 많이 쓰는 기본(Normal) 상태와 마우스를 올렸을 때(Hover)의 설정값입니다. 주요 버튼 (저장, 조회 등) 기본 (Normal) 높이 36px
둥글기 4px
배경색 #0052CC 마우스오버 (Hover) 배경색 #0043CC | 보조 버튼 (취소, 닫기 등) 기본 (Normal) 높이 36px
테두리 #DFE1E6
글자색 #172B4D 마우스오버 (Hover) 배경색 #F4F5F7 |
|
|---|
| Column |
|---|
| 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 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F5F7FA
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC
선택 레코드 색 #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 |
|---|
| 일반 폼 컨트롤 (Form Inputs) 입력창, 캘린더, 콤보박스의 공통 속성입니다. 텍스트 입력 2024-03-24 [달력] 옵션 선택하기 ▼ | 높이 (Height) | 36px | | 테두리 (Border) | #DFE1E6 (기본선) | | 내부 여백 | 텍스트가 붙지 않게 10px |
Sunset Grapefruit (알림) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #FFF6F6
Row 스타일 #FFFFFF
행 배경 (반복) #FFFAFA
선택 레코드 색 #FDE8EA
마지막 레코드 색 #FBD5DA
가로 테두리 #FADCE0 |
|
|
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
|
|
데이터 그리드 상세 설정 (Grid Details) 행 높이 비례 가이드 사용하시는 폰트 크기에 맞춰 조절하세요.
• 표준 (14px) : 36px
• 밀집 (12px) : 32px
• 초밀집 (11px) : 28px | 행/열 테두리 꿀팁 모든 선을 진하게 그으면 데이터가 갇혀 보입니다. 바깥 테두리는 #DFE1E6로 영역을 잡고, 가로/세로 내부 선은 가장 연한 #F4F5F7를 쓰거나 세로선은 투명(없음)으로 처리해 보세요. |
그리드 스타일 해부도 (Anatomy) |
| 헤더 (Header) | #F4F5F7 바탕, Bold, 텍스트 중앙 정렬. 하단 라인은 조금 더 진하게 1px solid #C5CDD7 |
| 일반 행 (Data) | #FFFFFF 바탕 기본 데이터. 텍스트 좌측, 숫자 우측 정렬 유지. |
| 반복 행 (Zebra) | #FAFBFC (데이터 구분을 위한 아주 옅은 회색 배색) |
| 소계 (Subtotal) | #F4F5F7 바탕, Bold. 상단에 1px solid #C5CDD7 선 추가하여 구분 |
| 총합계 (Total) | #E4ECF0 바탕, Bold. 상단에 더 진한 1px solid #A9B4C3 선 추가하여 강력한 구분 |
Sunflower Warm (친근) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #FFFCF5
Row 스타일 #FFFFFF
행 배경 (반복) #FFFEFA
선택 레코드 색 #FFF8E5
마지막 레코드 색 #FFF0CC
가로 테두리 #F7EAC4 |
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #DFE1E6 |
|---|
| bgColor | #ffffff |
|---|
| borderWidth | 1 |
|---|
| borderStyle | solid |
|---|
| Lavender Indigo (트렌디) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #F6F5FB
Row 스타일 #FFFFFF
행 배경 (반복) #FAFAFD
선택 레코드 색 #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 |
|---|
| Modern Deep Gray (다크) | Column 스타일 | | Row 스타일 | | 행 배경 (반복) | | 선택 레코드 색 | | 마지막 레코드 색 | Column 스타일 #434A54
Row 스타일 #656D78
행 배경 (반복) #5F6670
선택 레코드 색 #4B6E7D
마지막 레코드 색 #3A5A69
가로 테두리 #AAB2BD |
|