화면의 성격에 따라 기준이 되는 글씨 크기를 먼저 골라 보세요. 거기에 딱 맞는 제목과 본문 크기를 세트로 알려 드립니다.
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #0052CC |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 표준 (Standard) 가장 일반적인 형태의 업무 화면입니다. 입력창이나 그리드가 적당히 배치된 화면에 추천합니다. | 대제목 | 24 | 화면 최상단 타이틀 | | 소제목 | 16 | 섹션이나 그리드 제목 | | 본문 | 14 | 일반 텍스트 및 라벨 |
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #36B37E |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 밀집형 (Compact) 수많은 데이터를 담아야 하는 복잡한 조회 화면에 추천합니다. | 대제목 | 20 | 화면 최상단 타이틀 | | 소제목 | 14 | 섹션이나 그리드 제목 | | 본문 | 12 | 좁은 그리드 내부 등 |
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #172B4D |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 가독성형 (Large) 멀리서도 잘 보여야 하는 대시보드나, 현장 모니터링 화면에 추천합니다. | 대제목 | 28 | 화면 최상단 타이틀 | | 소제목 | 18 | 큰 위젯의 제목 | | 본문 | 16 | 주요 지표 텍스트 |
|
|
|
| Section |
|---|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #6554C0 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 시원형 (Spacious) 입력 폼 위주의 신청 화면이나 마법사처럼 글씨를 큼직하게 배치할 때 좋습니다. | 대제목 | 32 | 화면 최상단 타이틀 | | 소제목 | 20 | 주요 안내문 등 | | 본문 | 16 | 일반 텍스트 및 라벨 |
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #EA5455 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 초밀집형 (Data-Heavy) 수많은 데이터를 엑셀처럼 한 화면에 밀도 있게 배치해야 하는 화면에 필수적입니다. | 대제목 | 16 | 화면 최상단 타이틀 | | 소제목 | 13 | 좁은 그리드 헤더 | | 본문 | 11 | 그리드 내부 데이터 |
|
|
| Column |
|---|
|
| 패널 |
|---|
| borderColor | #008DA6 |
|---|
| bgColor | #ffffff |
|---|
| borderStyle | solid |
|---|
| 모바일형 (Mobile / Tablet) 좁은 화면에서도 손가락 터치가 쉽고 글씨가 잘 읽혀야 하는 화면에 추천합니다. | 대제목 | 20 | 모바일 헤더 타이틀 | | 소제목 | 16 | 모바일 카드 제목 | | 본문 | 14 | 일반 텍스트 (터치용) |
|
|
|