페이지 이력

...

Section

Column

width	50%

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	nonesolid

1.

컬러 시스템

색상 (Color) 상세 가이드 보기 →

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

색상	이름	HEX	용도
	Primary	#0052CC	주요 버튼, 활성 탭
	Success	#36B37E	완료, 승인
	Danger	#EA5455	삭제, 에러
	Background	#F4F5F7	배경색

화면 가장 바깥쪽 여백은 최소 20px을 권장합니다.
카드형 구조의 경우 카드 사이는 16px로 띄우세요.
카드 내부의 '소제목'과 '차트/그리드' 사이는 16px을 띄우세요.
관련된 항목(라벨-입력창)은 8px로 가깝게 붙이세요.

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	nonesolid

3. 레이아웃 및 간격

전체 간격

(Layout & Spacing) 상세 가이드 보기 →

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

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

숨막히는 간격

이름

홍길동

부서

영업팀

보기 편한 간격

이름

홍길동

부서

영업팀

Column

width	50%

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	nonesolid

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

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

레벨	크기	굵기	미리보기
Page Title	24px	Bold	페이지 타이틀
Section Header	16px	Semi-Bold	섹션 헤더
Body Text	14px	Regular	본문 텍스트

#FAFBFC

정렬 원칙

패널

bgColor
borderColor	#DFE1E6

#ffffff
borderStyle	solid

1,234,567

숫자 → 우측 정렬

홍길동

텍스트 → 좌측 정렬

2024-01-15

날짜 → 중앙 정렬

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	none

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

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

컨트롤 종류	표준 높이 (Height)	테두리 (Border)
주요 버튼

36px

30px	없음 (배경색 활용)
입력창 / 캘린더

36px

30px	1px solid #DFE1E6
데이터 그리드	행 높이 36px	1px solid #DFE1E6

페이지 트리

버전 비교

이전 버전 11

새 버전 현재

키