AUD PLATFORM
페이지 트리

버전 비교

이전 버전 23

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

Hover



조회/검색저장/업로드추가삭제
Default



조회/검색저장/업로드추가삭제
Default

Image Modified

Hover



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

테마별 데이터 그리드 색상표

대시보드의 주조색(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