페이지 트리
메타 데이터의 끝으로 건너뛰기
메타 데이터의 시작으로 이동

이 페이지의 이전 버전을 보고 있습니다. 현재 버전 보기.

현재와 비교 페이지 이력 보기

« 이전 버전 9 다음 »

화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의 디자인 요소를 확인해 보세요.

  1. 컨트롤 디자인 테마 (Style Variations)

  화면의 컨셉(보수적, 모던, 미니멀 등)에 따라 컨트롤의 테두리와 배경을 다르게 적용해 보세요.

종류기본형 (Solid / Box)테두리/밑줄형 (Outline)배경 채움형 (Soft / Filled)투명형 (Ghost)
버튼
Button

[ 이미지 첨부 ]

배경: #0052CC
테두리: 없음

[ 이미지 첨부 ]

배경: #FFFFFF
테두리: #0052CC

[ 이미지 첨부 ]

배경: #E6EFFC
테두리: 없음

[ 이미지 첨부 ]

배경: 없음
테두리: 없음
캘린더
Calendar

[ 캘린더 이미지 첨부 ]

배경: #FFFFFF
테두리: 전체 외곽선

[ 캘린더 이미지 첨부 ]

배경: 없음
테두리: 하단만

[ 캘린더 이미지 첨부 ]

배경: #EBECF0
테두리: 없음

[ 캘린더 이미지 첨부 ]

배경: 없음
테두리: 없음
콤보박스
Combo Box

[ 콤보박스 이미지 첨부 ]

배경: #FFFFFF
테두리: 전체 외곽선

[ 콤보박스 이미지 첨부 ]

배경: 없음
테두리: 하단만

[ 콤보박스 이미지 첨부 ]

배경: #EBECF0
테두리: 없음

[ 콤보박스 이미지 첨부 ]

배경: 없음
테두리: 없음

스타일별 활용 팁
기본형: 데이터가 많은 전통적인 업무 화면에 가장 적합하며, 입력 영역을 명확히 구분해 줍니다.
테두리/밑줄형: 여백을 넓게 쓰는 모던한 입력 폼이나 모바일 기기 화면에서 깔끔한 인상을 줍니다.
배경 채움형: 테두리 선을 생략하여 시각적 복잡도를 낮추고 싶을 때 사용해 보세요.
투명형: 그리드 셀 내부, 혹은 배경색이 이미 칠해진 상단 검색바 안에서 텍스트 위주로 보여줄 때 유용합니다.

️  2. 버튼 스타일

 버튼 용도에 따른 스타일을 골라 사용하세요. 이미지를 클릭해 마우스 우클릭으로 복사하고, AUD디자이너에 붙여 넣으세요.

기능 (Action)Text (가장 약함)Outline (보통)Light (약간 강조)Solid (가장 강조)
기본 (Master)MasterMasterMasterMaster
일반 (Add/Edit)AddAddAddAdd
승인 (Submit)SubmitSubmitSubmitSubmit
취소 (Cancel)CancelCancelCancelCancel
삭제 (Delete)DeleteDeleteDeleteDelete

스타일별 활용 팁
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
  • 레이블 없음