Layout

KRDS 기반 레이아웃 시스템입니다. Container, Breakpoints, Grid를 활용하여 일관된 반응형 레이아웃을 구성합니다.

핵심: HANUI 레이아웃 시스템은 3가지 핵심 요소로 구성됩니다.

  • Container — max-width와 반응형 패딩 관리
  • Breakpoints — 6단계 반응형 분기점 (xs~2xl)
  • Grid / SimpleGrid — CSS Grid 기반 레이아웃

Container는 @hanui/react/variables.css의 CSS 변수를 사용하고, Breakpoints는 tailwind.preset.ts의 screens 설정에 정의되어 있습니다.

Container

콘텐츠의 최대 너비와 반응형 패딩을 관리하는 래퍼 컴포넌트입니다.

  • CSS 변수 기반: @hanui/react/variables.css의 --krds-container-* 변수를 사용합니다.
  • 반응형 패딩: 화면 크기에 따라 자동으로 패딩이 조절됩니다 (16px → 24px → 32px).
  • 유연한 max-width: xs(480px) ~ 2xl(1440px) 또는 full 중 선택 가능합니다.

기본 사용

Container (기본: xl = 1280px)

CSS 변수

maxWidth 옵션

sm (640px)

md (768px)

lg (1024px)

xl (1280px) - 기본값

2xl (1440px) - KRDS 권장

Breakpoints

화면 크기에 따라 레이아웃이 변경되는 지점을 정의합니다.

  • 하이브리드 시스템: Tailwind 기본값과 KRDS 브레이크포인트를 모두 지원합니다.
  • 모바일 우선: Mobile First 접근 방식을 따릅니다.
  • 6단계 스케일: xs(360px) ~ 2xl(1440px)

브레이크포인트 스케일

HANUI는 Tailwind 기본값과 KRDS 브레이크포인트를 모두 지원하는 하이브리드 방식을 사용합니다.

하이브리드 브레이크포인트 시스템

국제 표준과의 호환성을 유지하면서 KRDS 요구사항도 충족합니다.

  • xs (360px): KRDS small 기준으로 추가. 국제 표준과의 호환성을 위해 기존 sm을 640px로 유지하고, KRDS 요구사항인 360px는 xs로 추가했습니다.
  • sm, md, lg, xl: Tailwind 기본값을 그대로 유지 (640px, 768px, 1024px, 1280px). 국제 표준과 외부 라이브러리와의 호환성을 보장합니다.
  • 2xl (1440px): Tailwind 기본값(1536px)을 KRDS xxlarge 기준인 1440px로 변경. KRDS 권장 최대 너비와 일치합니다.

브레이크포인트 상세 표

브레이크포인트뷰포트칼럼 수 (적정-최대)가터 너비 (최소-적정)최소 스크린 마진
xs

(KRDS)

360px-4-616px - 16px16px
sm

(Tailwind)

640px----
md

(KRDS/Tailwind)

768px-8-1216px - 24px24px
lg

(KRDS/Tailwind)

1024px-12-1616px - 24px24px
xl

(KRDS/Tailwind)

1280px----
2xl

(KRDS)

1440px----

브레이크포인트 선택 가이드

  • 브레이크포인트 단계가 적을수록 관리와 개발이 용이하지만 세분화가 어려울 수 있습니다.
  • 단계가 많아질수록 디자인 세분화가 가능하지만 복잡성은 증가합니다.
  • 프로젝트의 요구사항에 따라 최소 3단계에서 6단계로 설정하여 사용합니다.

사용 가이드

  • KRDS 정부 사이트: xs:를 사용하여 360px 이상의 모바일 기기를 지원합니다.
  • 일반 웹사이트: sm:부터 사용하여 Tailwind 표준을 따릅니다.
  • 공통 브레이크포인트: md:, lg:, xl:는 KRDS와 Tailwind가 동일하므로 어느 프로젝트에서나 사용 가능합니다.

사용 방법

Breakpoints를 사용하여 반응형 레이아웃을 만드는 방법입니다.

기본 사용

Tailwind CSS의 브레이크포인트 접두사를 사용하여 반응형 스타일을 적용합니다

반응형 그리드 예시

화면 크기에 따라 열의 개수가 변경되는 그리드 레이아웃입니다

1
2
3

KRDS xs 브레이크포인트 사용

정부 사이트에서 360px 이상의 작은 모바일 기기를 지원할 때 사용합니다

Grid

CSS Grid 기반의 유연한 레이아웃 컴포넌트입니다.

  • Grid: CSS Grid의 모든 기능을 props로 제어할 수 있는 유연한 컴포넌트입니다.
  • SimpleGrid: 고정 열 개수 또는 auto-fit 반응형 그리드를 간편하게 구현합니다.

SimpleGrid - 기본 사용

1
2
3

SimpleGrid - 자동 반응형

minChildWidth를 사용하면 화면 크기에 따라 자동으로 열 개수가 조절됩니다.

A
B
C
D

Grid - 고급 사용

templateColumns, templateRows 등 CSS Grid의 모든 기능을 사용할 수 있습니다.

1fr
2fr
1fr

Best Practices

  • Container 사용: 페이지 레벨에서 Container로 max-width를 설정하세요.
  • 모바일 우선: 기본 스타일을 모바일용으로 작성하고 브레이크포인트로 확장하세요.
  • SimpleGrid 우선: 단순한 그리드는 SimpleGrid로, 복잡한 레이아웃만 Grid를 사용하세요.
  • 일관성 유지: 프로젝트 전체에서 동일한 Container maxWidth와 브레이크포인트를 사용하세요.
  • 접근성 고려: 모든 화면 크기에서 콘텐츠가 접근 가능하고 사용 가능한지 확인하세요.

참고 자료

KRDS Breakpoints 관련 문서입니다.

KRDS 레이아웃 가이드

간격, 그리드, 브레이크포인트 기준

(새 창 열림)