페이지 트리

버전 비교

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.

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

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

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

...

️  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) 테마에 맞춰, 데이터 그리드의 '헤더/반복행/선택행/테두리' 색상을 짝지어 입력해 보세요.

Section


Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
블루 (Standard Blue)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F4F5F7
행 배경 (반복) #FAFBFC
선택 레코드 색 #E6EFFC
테두리 / 소계 #DFE1E6



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
소프트 그린 (Soft Green)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F0FAF5
행 배경 (반복) #F7FCF9
선택 레코드 색 #E3FCEF
테두리 / 소계 #ABF5D1



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
모던 다크 (Modern Dark)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #EBECF0
행 배경 (반복) #FAFBFC
선택 레코드 색 #E4ECF0
테두리 / 소계 #C5CDD7



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
웜 오렌지 (Warm Orange)
헤더 스타일
일반 데이터
행 배경 (반복)
선택 레코드 색
헤더 스타일 #FFEBE6
행 배경 (반복) #FFF7F5
선택 레코드 색 #FFD8CC
테두리 / 소계 #FFBDAD



...