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