화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의 디자인 요소를 확인해 보세요.
1. 컨트롤 디자인 테마 (Style Variations)
화면의 컨셉(보수적, 모던, 미니멀 등)에 따라 컨트롤의 테두리와 배경을 다르게 적용해 보세요.
(Solid / Box) (Outline) (Soft / Filled) (Ghost)[ 이미지 첨부 ][ 이미지 첨부 ] Image Added
|
테두리: 없음Corner Radius: 4 Font Size: 14pt | Image Added
|
테두리[ 이미지 첨부 ]
[ 이미지 첨부 ]Corner Radius: 4 Font Size: 14pt | Image Added
|
테두리: 없음Corner Radius: 4 Font Size: 14pt | Image Added
|
테두리: 없음Corner Radius: 4 Font Size: 14pt |
캘린더 Calendar |
[ 캘린더 이미지 첨부 ][ 캘린더 이미지 첨부 ] Image Added
|
테두리: 전체 외곽선[ 캘린더 이미지 첨부 ]Border: 1,1,1,1 가로: 130 Font Size: 14pt | Image Added
|
테두리: 하단만[ 캘린더 이미지 첨부 ]Border: 0,0,0,2 가로: 130 Font Size: 14pt | Image Added
|
테두리: 없음 | Image Added
|
테두리: 없음[ 콤보박스 이미지 첨부 ] Image Added
|
테두리: 전체 외곽선[ 콤보박스 이미지 첨부 ] Border: 1,1,1,1 가로: 130 Font Size: 14pt | Image Added
|
테두리: 하단만[ 콤보박스 이미지 첨부 ] Border: 0,0,0,2 가로: 130 Font Size: 14pt | Image Added
|
테두리: 없음[ 콤보박스 이미지 첨부 ] | Image Added
|
테두리: 없음
| 정보 |
|---|
스타일별 활용 팁 • 기본형 : 데이터가 많은 전통적인 업무 화면에 가장 적합하며, 입력 영역을 명확히 구분해 줍니다. • 테두리/밑줄형 : 여백을 넓게 쓰는 모던한 입력 폼이나 모바일 기기 화면에서 깔끔한 인상을 줍니다. • 배경 채움형 : 테두리 선을 생략하여 시각적 복잡도를 낮추고 싶을 때 사용해 보세요. • 투명형 : 그리드 셀 내부, 혹은 배경색이 이미 칠해진 상단 검색바 안에서 텍스트 위주로 보여줄 때 유용합니다. |
️ 2. 버튼 스타일
버튼 버튼 용도에 따른 스타일을 골라 사용하세요. 이미지를 클릭해 마우스 우클릭으로 복사하고, AUD디자이너에 붙여 넣으세요.
...
스타일별 활용 팁
• Text: 그리드 셀 내부의 동작 버튼이나 중요도가 낮은 부가 기능에 사용해 보세요.
• Outline: 화면에 여러 버튼이 모여 있을 때 보조 버튼(취소, 뒤로가기 등)으로 사용해 보세요.
• Light: 흰 배경 위에서 버튼 영역을 부드럽게 돋보이게 하고 싶을 때 사용해 보세요.
• Solid: 화면에서 사용자가 가장 먼저 눌러야 하는 가장 핵심적인 1개의 버튼에만 사용해 보세요.
3. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)| 조회/검색 | 저장/업로드 | 추가 | 삭제 |
|---|
| 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 |
|
|