화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의 디자인 요소를 확인해 보세요.
1. 컨트롤 디자인 테마
화면의 컨셉(보수적, 모던, 미니멀 등)에 따라 컨트롤의 테두리와 배경을 다르게 적용해 보세요.
| 종류 | 기본형 | 테두리/밑줄형 | 배경 채움형 | 투명형 |
|---|---|---|---|---|
| 버튼 Button | [ 이미지 첨부 ] 배경: #0052CC 테두리: 없음 | [ 이미지 첨부 ] 배경: #FFFFFF 테두리: #0052CC | [ 이미지 첨부 ] 배경: #E6EFFC 테두리: 없음 | [ 이미지 첨부 ] 배경: 없음 테두리: 없음 |
| 캘린더 Calendar | [ 캘린더 이미지 첨부 ] 배경: #FFFFFF 테두리: 전체 외곽선 | [ 캘린더 이미지 첨부 ] 배경: 없음 테두리: 하단만 | [ 캘린더 이미지 첨부 ] 배경: #EBECF0 테두리: 없음 | [ 캘린더 이미지 첨부 ] 배경: 없음 테두리: 없음 |
| 콤보박스 Combo Box | [ 콤보박스 이미지 첨부 ] 배경: #FFFFFF 테두리: 전체 외곽선 | [ 콤보박스 이미지 첨부 ] 배경: 없음 테두리: 하단만 | [ 콤보박스 이미지 첨부 ] 배경: #EBECF0 테두리: 없음 | [ 콤보박스 이미지 첨부 ] 배경: 없음 테두리: 없 |
스타일별 활용 팁
• 기본형 : 데이터가 많은 전통적인 업무 화면에 가장 적합하며, 입력 영역을 명확히 구분해 줍니다.
• 테두리/밑줄형 : 여백을 넓게 쓰는 모던한 입력 폼이나 모바일 기기 화면에서 깔끔한 인상을 줍니다.
• 배경 채움형 : 테두리 선을 생략하여 시각적 복잡도를 낮추고 싶을 때 사용해 보세요.
• 투명형 : 그리드 셀 내부, 혹은 배경색이 이미 칠해진 상단 검색바 안에서 텍스트 위주로 보여줄 때 유용합니다.
️ 2. 버튼 스타일
버튼 용도에 따른 스타일을 골라 사용하세요. 이미지를 클릭해 마우스 우클릭으로 복사하고, AUD디자이너에 붙여 넣으세요.
| 종류 | 기본형 | 테두리/밑줄형 |
|---|---|---|
| 버튼 Button | [ 이미지 첨부 ] 배경: #0052CC 테두리: 없음 | [ 이미지 첨부 ] 배경: #FFFFFF 테두리: #0052CC |
| 종류 | 기본형 | 테두리/밑줄형 |
|---|---|---|
| 버튼 Button | [ 이미지 첨부 ] | [ 이미지 첨부 ] |
3. 그리드 스타일 해부도 (Grid Anatomy)
데이터 그리드의 각 요소별 기본 스타일과 선 굵기를 확인해 보세요.
헤더 스타일 #F4F5F7 바탕, 굵게 중앙 정렬 | 항목 (Header) 값 (Header) |
일반 데이터 행 #FFFFFF (기본 배경) | 데이터 1 1,000 |
행 배경 (반복) #FAFBFC (구분을 위한 배색) | 데이터 2 2,000 |
소계 스타일 #F4F5F7 바탕, 상단 선 굵게 | 소계 3,000 |
총합계 스타일 #E4ECF0 바탕, 상단 선 진하게 | 총합계 3,000 |
행 높이 설정 가이드
사용하는 폰트 크기에 맞춰 그리드의 행 높이도 조절합니다. (@그리드 > 디자인 > 스타일 > 레코드 > '높이')
- 표준 (14px) : 높이 36px
- 밀집 (12px) : 높이 32px
- 초밀집 (11px) : 높이 28px
4. 테마별 데이터 그리드 색상 적용표
대시보드의 주조색(Primary Color) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
| 헤더 스타일 |
| 일반 데이터 |
| 행 배경 (반복) |
| 선택 레코드 색 |
