페이지 트리

버전 비교

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

...

화면 제작에 필요한 주요 컨트롤(버튼, 입력창, 캘린더, 그리드)의

...

디자인 요소를 확인해 보세요.

1.

...

자주 쓰는 버튼과 입력창의 형태(높이 36px)를 통일하여 시스템의 일관성을 높여 보세요.

...

기본 저장 배경: #0052CC / 글자: 흰색
Hover 저장 배경: #0043CC (약간 짙어짐)

...

기본 취소 테두리: #DFE1E6 / 글자: #172B4D
Hover 취소 배경: #F4F5F7 (약간 어두워짐)

...

2. 아이콘 버튼 및 스타일 확장 (Icon Buttons)

버튼의 중요도에 따라 4가지 스타일(Text, Outline, Light, Solid)을 골라 쓰고, 아이콘을 조합해 직관성을 높여 보세요.

...

💡 스타일별 활용 팁
Text: 그리드 셀 내부의 동작 버튼이나 중요도가 낮은 부가 기능에 사용해 보세요.
Outline: 화면에 여러 버튼이 모여 있을 때 보조 버튼(취소, 뒤로가기 등)으로 사용해 보세요.
Light: 흰 배경 위에서 버튼 영역을 부드럽게 돋보이게 하고 싶을 때 사용해 보세요.
Solid: 화면에서 사용자가 가장 먼저 눌러야 하는 가장 핵심적인 1개의 버튼에만 사용해 보세요.

3. 테마별 데이터 그리드 색상 적용표 (Grid Theme Colors)

컨트롤 디자인 테마

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

종류기본형테두리/밑줄형배경 채움형투명형
버튼
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 Added

Image Added

Image Added

Image Added

Hover

Image Added

Image Added

Image Added

Image Added



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


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



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Oceanic Blue (클래식)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F4F5F7
테두리 / 소계 #DFE1E6
마지막 레코드 색
Column 스타일 #F5F7FA
Row 스타일 #FFFFFF
행 배경 (반복) #FAFBFC
선택 레코드 색
#E6EFFC
#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
소프트 그린 (Soft Green
Sunflower Warm (친근)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #F0FAF5
마지막 레코드 색
Column 스타일 #FFFCF5
Row 스타일 #FFFFFF
행 배경 (반복)
#F7FCF9
#FFFEFA
선택 레코드 색
#E3FCEF테두리 / 소계 #ABF5D1
#FFF8E5
마지막 레코드 색 #FFF0CC
가로 테두리 #F7EAC4



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
모던 다크 (Modern Dark
Lavender Indigo (트렌디)
헤더
Column 스타일
일반 데이터
Row 스타일
행 배경 (반복)
선택 레코드 색
헤더 스타일 #EBECF0
마지막 레코드 색
Column 스타일 #F6F5FB
Row 스타일 #FFFFFF
행 배경 (반복)
#FAFBFC
테두리 / 소계 #C5CDD7
#FAFAFD
선택 레코드 색
#E4ECF0
#F0EDF9
마지막 레코드 색 #E6E0F5
가로 테두리 #E6E2F1



Column
width25%


패널
borderColor#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
Grass Green (자연/성장)
Column 스타일
Row 스타일
행 배경 (반복)
선택 레코드 색
마지막 레코드 색
Column 스타일 #F6FAF2
Row 스타일 #FFFFFF
행 배경 (반복) #FAFCF8
선택 레코드 색 #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