AUD PLATFORM
페이지 트리

버전 비교

이전 버전 3

changes.mady.by.user guide

에 저장

비교대상

새 버전 4

changes.mady.by.user guide

에 저장

키

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

...

Section


Column
width50%


패널
borderColor#DFE1E6
bgColor#ffffff
borderStylesolid
🎨


1. 컬러 시스템 (Color)상세 가이드 보기 →

주조색(Primary)은 한 가지만 쓰고, 나머지는 무채색으로 채워야 화면이 깔끔해집니다.

색상이름HEX용도

Primary#0052CC주요 버튼, 활성 탭

Success#36B37E완료, 승인

Danger#EA5455삭제, 에러

Background#F4F5F7배경색



패널
borderColor#DFE1E6
bgColor#ffffff
borderStylesolid
📐


3. 레이아웃 및 간격전체 간격 보기 →

복잡한 여백 수치 대신, 아래 핵심 규칙만 적용해 보세요.

📌

규칙 1. 관련된 것끼리 묶어주기

❌ 숨막히는 간격

이름

홍길동

부서

영업팀


✅ 보기 편한 간격

이름

홍길동

부서

영업팀




Column
width50%


패널
borderColor#DFE1E6
bgColor#ffffff
borderStylesolid
🔤


2. 타이포그래피 (Typography)상세 가이드 보기 →

크기와 굵기만 잘 구분해도 데이터가 한눈에 들어옵니다.

레벨크기굵기미리보기
Page Title24pxBold페이지 타이틀
Section Header16pxSemi-Bold섹션 헤더
Body Text14pxRegular본문 텍스트


패널
borderColor#DFE1E6
bgColor#FAFBFC
borderStylesolid

▼ 정렬 원칙

1,234,567숫자 → 우측 정렬
홍길동텍스트 → 좌측 정렬
2024-01-15날짜 → 중앙 정렬




패널
borderColor#DFE1E6
bgColor#ffffff
borderStylesolid
🧩


4. 컨트롤 속성 (Controls)상세 가이드 보기 →

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

컨트롤 종류표준 높이 (Height)테두리 (Border)
주요 버튼36px없음 (배경색 활용)
입력창 / 캘린더36px1px solid #DFE1E6
데이터 그리드행 높이 36px1px solid #DFE1E6