AUD PLATFORM
페이지 트리

버전 비교

이전 버전 22

changes.mady.by.user guide

에 저장

비교대상

새 버전 현재

changes.mady.by.user guide

에 저장

키

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

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

  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 Modified

Image Modified

Image Modified

Image Modified

Hover

Image Modified

Image Modified

Image Modified

Image Modified

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

조회/검색저장/업로드추가삭제
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
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Vibrant Purple (SaaS/세련)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
마지막 레코드 색
Column 스타일 #F4F6FA
Row 스타일 #FFFFFF
행 배경 (반복) #F9FAFC
선택 레코드 색 #F0EFFF
마지막 레코드 색 #E4E0FF
가로 테두리 #E2E8F0



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Oceanic Blue (클래식)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
마지막 레코드 색
Column 스타일 #F5F7FA
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC
선택 레코드 색 #EBF2FA
마지막 레코드 색 #DCE7F5
가로 테두리 #E6E9ED



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Fresh Mint (의료/산뜻)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
마지막 레코드 색
Column 스타일 #F4F9F8
Row 스타일 #FFFFFF
행 배경 (반복) #F9FCFB
선택 레코드 색 #E8F6F3
마지막 레코드 색 #D5EFE9
가로 테두리 #DCEFEA



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Sunset Grapefruit (알림)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
마지막 레코드 색
Column 스타일 #FFF6F6
Row 스타일 #FFFFFF
행 배경 (반복) #FFFAFA
선택 레코드 색 #FDE8EA
마지막 레코드 색 #FBD5DA
가로 테두리 #FADCE0




Section


Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
블루
Sunflower Warm (
Standard Blue
친근)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F4F5F7
마지막 레코드 색
Column 스타일 #FFFCF5
Row 스타일 #FFFFFF
행 배경 (반복)
#FAFBFC
#FFFEFA
선택 레코드 색
#E6EFFC테두리 / 소계 #DFE1E6
#FFF8E5
마지막 레코드 색 #FFF0CC
가로 테두리 #F7EAC4



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
소프트 그린 (Soft Green
Lavender Indigo (트렌디)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F0FAF5
마지막 레코드 색
Column 스타일 #F6F5FB
Row 스타일 #FFFFFF
행 배경 (반복)
#F7FCF9
#FAFAFD
선택 레코드 색
#E3FCEF테두리 / 소계 #ABF5D1
#F0EDF9
마지막 레코드 색 #E6E0F5
가로 테두리 #E6E2F1



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
모던 다크 (Modern Dark
Grass Green (자연/성장)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #EBECF0
마지막 레코드 색
Column 스타일 #F6FAF2
Row 스타일 #FFFFFF
행 배경 (반복)
#FAFBFC
#FAFCF8
선택 레코드 색
#E4ECF0테두리 / 소계 #C5CDD7
#F0F7E9
마지막 레코드 색 #E5F2D8
가로 테두리 #E2EED5



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
웜 오렌지 (Warm Orange
Modern Deep Gray (다크)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #FFEBE6
마지막 레코드 색
Column 스타일 #434A54
Row 스타일 #656D78
행 배경 (반복)
#FFF7F5
#5F6670
선택 레코드 색
#FFD8CC테두리 / 소계 #FFBDAD
#4B6E7D
마지막 레코드 색 #3A5A69
가로 테두리 #AAB2BD