Grid
그리드 시스템은 4px 기반의 일관된 간격 체계를 사용하여 모든 화면에서 조화로운 비율과 정렬을 만들어냅니다. Desktop 관리 콘솔을 기준으로 사이드 내비게이션 + 유동 콘텐츠 영역의 레이아웃을 쓰며, 콘텐츠 영역 안은 12단 컬럼 그리드로 배치합니다.
Artboard size
디자이너는 해상도별 모든 화면을 디자인할 필요 없이 아래 대표 규격만 설계합니다. 기준은 1440 이며, 대형 모니터는 콘텐츠 최대 너비만 넓어집니다.
| 환경 | 너비 | 높이 | 콘텐츠 최대 너비 |
|---|---|---|---|
| Web desktop (기준) | 1440px | 960px | 1160px |
| Web desktop (대형) | 1920px | 1080px | 1600px |
Breakpoint
모바일·태블릿은 대응하지 않는 Desktop 전용 콘솔입니다. 1280 미만에서는 사이드 내비게이션을 접어 콘텐츠 폭을 확보합니다.
| 명칭 | 대응 환경 | 너비 | 레이아웃 | 콘텐츠 최대 너비 |
|---|---|---|---|---|
| md | 데스크탑 소형 · 노트북 | 1024 – 1279px | 사이드 내비 접힘 64 + 콘텐츠 | 100% (Padding 20) |
| lg | 데스크탑 (기준 1440) | 1280 – 1919px | 사이드 내비 240 + 콘텐츠 | 1160px (Padding 24) |
| xl | 데스크탑 대형 | 1920px ~ | 사이드 내비 240 + 콘텐츠 | 1600px (Padding 24) |
/* Desktop-first */
.app{display:grid;grid-template-columns:240px minmax(0,1fr)}
.content{max-width:1160px;margin:0 auto;padding:0 24px}
@media (max-width:1279px){.app{grid-template-columns:64px minmax(0,1fr)}.content{padding:0 20px}}
@media (min-width:1920px){.content{max-width:1600px}}Spacing
예측 가능한 디자인 규칙과 개발자와의 원활한 소통을 위해 4배수 간격으로 구성합니다. 기준은 4px 이며, 시각 보정이 필요할 때는 2px 단위로 움직이고 불가피할 때만 1px 씩 조정합니다. 카드 내부 padding 24, 카드·요소 사이 gap 20, 섹션 사이 48~64 를 기본으로 넉넉히 잡아 답답한 밀도를 피합니다. 노란색은 4px 그리드를 벗어난 값으로, 시각 보정이 꼭 필요할 때만 씁니다. 토큰 원본 CSS 는 Design Token 에 있습니다.
Layout
콘텐츠 영역 안은 24px 의 간격(gutter)을 두는 12단 컬럼 그리드를 사용하며, 화면 너비에 맞게 유연하게 대응합니다. 컬럼은 자유롭게 병합하여 사용합니다(KPI 카드 4단 = 3컬럼씩, 폼 2단 = 6컬럼씩).
Desktop
사이드 내비게이션 240px 을 제외한 콘텐츠 영역(최대 1160px)에 12단 컬럼, 좌우 여백 24px, 간격 24px.
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.col-3{grid-column:span 3} /* KPI 카드 4개 */
.col-4{grid-column:span 4} /* 카드 3개 */
.col-6{grid-column:span 6} /* 2단 폼 */
.col-8{grid-column:span 8} /* 본문 + .col-4 사이드 */
.col-12{grid-column:1 / -1} /* 테이블 · 차트 전체 폭 */