페이지 트리

버전 비교

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

화면의 성격에 따라 기준이 되는 글씨 크기를 먼저 골라 보세요. 거기에 딱 맞는 제목과 본문 크기를 세트로 알려 드립니다.대시보드, 입력 폼, 데이터 그리드 등에서 가장 자주 쓰이는 4가지 폰트 스케일을 추천해 드립니다. 화면 성격에 맞는 크기 세트를 골라 적용해 보세요.

Section


Column
width33%25%


패널
borderColor#0052CC#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
표준 (Standard)

가장 일반적인

형태의

업무 화면입니다.

입력창이나

입력 폼이나 그리드가 적당히 배치된 화면에 추천합니다.

대제목
24
화면 최상단 타이틀
소제목
16
섹션이나
섹션/그리드 제목
본문
14
일반 텍스트
/라벨



Column
width33%25%


패널
borderColor#36B37E#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
밀집형 (Compact)

수많은 데이터를 담아야 하는 복잡한 조회

화면에

화면이나 데이터 그리드에 추천합니다.

대제목
20
화면 최상단 타이틀
소제목
14
섹션이나
섹션/그리드 제목
본문
12
좁은 그리드
내부 등
데이터



Column
width34%25%


패널
borderColor#172B4D#DFE1E6
bgColor#ffffff
Column
width33%
가독성형 (Large)

멀리서도 잘 보여야 하는 대시보드나, 현장 모니터링 화면에 추천합니다.

패널
borderColor#6554C0
bgColor#ffffff
borderStyleborderWidthsolid
대제목28화면 최상단 타이틀
소제목18큰 위젯의 제목
본문16주요 지표 텍스트
Section
시원형 (Spacious)

입력 폼 위주의 신청 화면이나 마법사처럼 글씨를 큼직하게 배치할 때 좋습니다.

1
borderStylesolid
대제목32화면 최상단 타이틀
소제목20주요 안내문 등
본문16일반 텍스트 및 라벨
Column
width33%
패널
borderColor#EA5455
bgColor#ffffff
borderStylesolid
초밀집형 (
초밀집 (Data-Heavy)
수많은

엑셀처럼 대량의 데이터를

엑셀처럼

한 화면에

밀도 있게 배치해야 하는 화면에

빽빽하게 배치하여 비교/조회할 때 필수적입니다.

대제목
16
화면 최상단 타이틀
소제목
13
좁은 그리드 헤더
본문
11
그리드 내부
대량 테이블 데이터



Column
width34%25%


모바일 헤더
28 화면 최상단 타이틀
소제목
모바일 카드
18 섹션/위젯 제목
본문
일반 텍스트 (터치용)
16 주요 지표/텍스트
패널
borderColor#008DA6#DFE1E6
bgColor#ffffff
borderWidth1
borderStylesolid
모바일형
가독성형 (
Mobile / Tablet
Large)
좁은 화면에서도 손가락 터치가 쉽고 글씨가 잘 읽혀야 하는

멀리서도 직관적으로 잘 보여야 하는 현황판 대시보드나 주요 지표 모니터링 화면에 추천합니다.

대제목
201614