페이지 이력

...

Section

Column

width	50%

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	solid

1.

컬러 시스템

색상 (Color)

상세 가이드 보기 →

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

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

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	solid

3. 레이아웃 및 간격

전체 간격

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

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

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

숨막히는 간격

이름

홍길동

부서

영업팀

보기 편한 간격

이름

홍길동

부서

영업팀

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

Column

width	50%

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	solid

2. 타이포그래피 (Typography)

상세 가이드 보기 →

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

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

정렬 원칙

1,234,567

숫자 → 우측 정렬

홍길동

텍스트 → 좌측 정렬

2024-01-15

날짜 → 중앙 정렬

패널

borderColor	#DFE1E6
bgColor	#ffffff
borderStyle	solid

4. 컨트롤 속성(Controls)

상세 가이드 보기 →

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

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

36px

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

36px

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

페이지 트리

버전 비교

이전 버전 13

새 버전 현재

키