반응형 레이아웃 · Tinyrack Design System

가장 작은 유효 레이아웃부터 시작

한 열이나 줄바꿈 레이아웃을 먼저 작성하세요. 콘텐츠를 훑기 어렵거나 레이블이 충돌하거나 동작을 쓰기 힘들 만큼 공간이 줄어들 때만 브레이크포인트를 추가해요. 기기 이름이 아니라 콘텐츠가 기준이에요.

브레이크포인트보다 치수를 먼저 선택

한 영역에 읽기 좋은 너비가 필요하면 measure를 사용해요. 재사용 영역이 놓인 공간 크기에 맞춰 반응해야 하면 컨테이너 쿼리를 사용하세요. 페이지 셸이나 여러 영역이 함께 재배치되어야 하면 뷰포트 브레이크포인트를 사용해요.

토큰	값	Tailwind
`measure-xs`	`4rem`	`max-w-tinyrack-measure-xs`
`measure-sm`	`8rem`	`max-w-tinyrack-measure-sm`
`measure-md`	`12rem`	`max-w-tinyrack-measure-md`
`measure-lg`	`16rem`	`max-w-tinyrack-measure-lg`
`measure-xl`	`24rem`	`max-w-tinyrack-measure-xl`

<article className="max-w-tinyrack-measure-xl">...</article>
<section className="@container"><div className="grid @md:grid-cols-2">...</div></section>

공통 브레이크포인트 스케일

Tailwind 테마 변수는 --breakpoint-sm, --breakpoint-md, --breakpoint-lg예요. TypeScript의 tinyrackBreakpoints도 같은 값을 제공해요.

토큰	값	Tailwind 테마 변수	Tailwind 변형
`sm`	`40rem`	`--breakpoint-sm`	`sm:*`
`md`	`48rem`	`--breakpoint-md`	`md:*`
`lg`	`64rem`	`--breakpoint-lg`	`lg:*`
`xl`	`80rem`	`--breakpoint-xl`	`xl:*`

축소하지 말고 재배치

레이블과 값이 답답해지기 전에 위아래로 배치하세요.
주요 동작을 계속 사용할 수 있도록 동작 행을 줄바꿈하세요.
보조 탐색을 숨기지 말고 명확한 컨트롤 뒤로 옮기세요.
열을 비교해야 하는 표는 자체 컨테이너 안에서 스크롤하게 하세요.

<section className="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]">
  <div>랙 세부 정보</div><div className="flex flex-wrap gap-2">동작</div>
</section>

구현 책임 나누기

시각적 재배치와 컨테이너 쿼리는 CSS 또는 Tailwind로 처리해요. 동작, 데이터 로딩, 상호작용 방식이 바뀌어야 할 때만 TypeScript에서 tinyrackBreakpoints를 읽으세요. Tailwind가 공통 --breakpoint-* 스케일을 해석하도록 컴포넌트 스타일보다 @tinyrack/ui/core.css를 먼저 불러오세요.

반응형 품질 확인

바꾼 임계값의 바로 아래, 경계, 바로 위에서 확인하세요. 390px 뷰포트, 200% 확대, 긴 현지화 레이블, 키보드 포커스 순서, 표 내부의 가로 스크롤, 필수 동작이 사라지지 않는지를 포함해요.