브레이크포인트
진행 중 (Breakpoints — work in progress)
반응형 표준을 admin을 기준 앱으로 세우는 중입니다(2026-07-09 결정). 현재는 admin의 LNB(좌측 네비) 전환을 기준으로 정의되어 있고, 다른 앱으로 확장하며 다듬어집니다.
이 문서가 규칙 정본입니다
브레이크포인트 강제 규칙(금지·작성 규칙)의 단일 출처는 이 페이지입니다 — 사람용 설명·라이브 데모와 AI가 따르는 규칙이 모두 여기 있습니다. 규칙을 바꿀 땐 이 문서만 고치면 됩니다. (코딩 에이전트는 자동 로드되는 얇은 규칙 포인터를 통해 이 페이지로 안내되며, 그 포인터에는 규칙 내용을 복제하지 않습니다.)
규칙 (강제) · 코딩 에이전트용 — 사람은 접힌 채로 두어도 됩니다
이 규칙의 정본은 이 접이 섹션입니다(변경 시 여기만 수정). 아래 나머지 섹션은 배경·근거·라이브 데모입니다.
- 전환선은 Tailwind 기본 프리픽스
md(768) ·xl(1280) 딱 둘만 사용.sm(640)·2xl(1536)은 카드 열 수 조정 등 부수적으로만. - 새 px media query 금지.
480px/580px/1200px같은 임의값은 드리프트입니다. @theme에서 breakpoint 재정의 금지. 앱 전반 약 495곳의 프리픽스 의미가 한꺼번에 흔들립니다.- 모바일 퍼스트로 작성. 프리픽스 없는 스타일이 모바일 기준선이고,
md:/xl:로 위 구간을 덧씌웁니다. - 반응형 CSS는 admin
main.css에만 둡니다(design-system.css@import뒤라 source order로 이겨!important불필요). mgmt · general-affairs LNB에는 영향 없음. - 전환 축은 좌측 LNB 하나(드로어 / 68px 레일 / 208px 펼침), admin이 기준 앱.
- 햄버거 버튼은 native 헤더(
dashboard.html)·embed 헤더(tabs/embed.html) 양쪽 모두에 배치(embed는 자체 헤더를 렌더해 빠지기 쉬움). - 헤더 언더라인은 감싸는 sticky 컨테이너의
border-b가 담당(햄버거까지 전체 폭)..ds-page-header자체 border는 adminmain.css에서 제거해 1px 이중선을 막습니다. - 이 페이지가 소유하는 건 전환선(
md·xl)과 LNB 축뿐입니다. 개별 패턴이 모바일에서 어떻게 달라지는지는 각 패턴 페이지의 모바일 섹션을 보세요 — 모달 풀페이지 변형·ds-input--48스케일은 Modal → 모바일, 폼 컨트롤 사이즈 선택은 Form controls → 포인터 vs 손가락, 버튼 크기는 Buttons → 크기. 그 값들은 권장 기본값(강제 아님)입니다. 여기에 패턴별 내용을 복사하지 마세요(드리프트).
직접 확인하기
아래 박스 안에서 프레임 오른쪽 손잡이를 좌우로 드래그해 보세요. 프레임 폭이 대략적으로 줄었다 늘었다 하며 md(768)·xl(1280) 경계를 넘을 때 LNB가 드로어 → 레일(68px) → 펼침(208px)으로 전환됩니다. 정확한 폭은 바로가기 버튼으로 이동할 수 있어요.
손잡이를 좌우로 드래그하면 md(768)·xl(1280) 경계를 넘을 때 LNB가 드로어 → 레일(68px) → 펼침(208px)으로 전환돼요. 박스 안에서 폭 비율만 대략적으로 보여주는 프리뷰입니다.
단일 출처
Tailwind CSS 4의 기본 브레이크포인트 프리픽스를 그대로 사용합니다. @theme에서 재정의하지 않습니다.
sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 (Tailwind 기본값)@theme 오버라이드는 현재 없습니다 — 유지하세요. (금지 규칙은 상단 「규칙 (강제)」 접이 섹션.)
활성 전환선은 딱 2개
3영역(모바일 / 태블릿 / PC)만 구분하며, 실제로 쓰는 전환선은 md와 xl 두 개입니다.
| 영역 | 폭 | 프리픽스 경계 | LNB 상태 |
|---|---|---|---|
| 모바일 | 0 – 767 | md 미만 | 오프캔버스 드로어 (기본 숨김, 햄버거로 열기) |
| 태블릿 ~ 소형 노트북 | 768 – 1279 | md ↑ | 강제 collapsed 아이콘 레일 (68px) |
| PC | 1280 ~ | xl ↑ | 펼침 (208px), 사용자 토글 상태 복원 |
- 768(
md) = 모바일 ↔ 태블릿 - 1280(
xl) = 소형 ↔ PC(LNB 펼침)
왜 PC 경계가 1024(lg)가 아니라 1280(xl)인가
처음엔 lg(1024)였으나 1280(xl)으로 상향했습니다(2026-07-09). 1024에서 LNB를 208px 펼치면 직원 테이블 마지막 컬럼이 잘립니다(콘텐츠 폭 816px 부족). 콘텐츠가 편해지는 실제 지점은 ~1200이지만, 1200은 Tailwind 기본값이 아니라 드리프트이므로 표준값 1280을 채택했습니다. 768~1279 구간은 68px 레일을 유지하므로 1024~1200에서도 표가 잘리지 않습니다.
sm(640) ·2xl(1536)은 주 기준점이 아니며, 카드 열 수 조정 등 부수적으로만 사용합니다.
전환의 축은 LNB 하나
반응형에서 실제로 상태가 바뀌는 축은 좌측 네비 .ds-lnb 하나입니다. 세 가지 상태로 전환됩니다.
- 펼침 208px (
--ds-spacing-208) - 접힘 레일 68px (
--ds-spacing-68) - 드로어 fixed · 기본 숨김 · dim
--ds-dim-40
구현은 apps/admin/src/views/dashboard.html의 syncLnbViewport()가 innerWidth 기준 3분기 + resize 리스너로 처리하며, 경계 상수는 768 / 1280입니다. PC(≥1280)에서 사용자가 고른 펼침/접힘 복원 상태는 lnbPrefCollapsed에 보관됩니다.
모바일 헤더 주의
햄버거 버튼은 native 헤더(dashboard.html)와 embed 헤더(tabs/embed.html) 양쪽 모두에 두어야 합니다. embed 탭은 자체 헤더를 렌더하므로 빠지기 쉽습니다. (강제 규칙으로 상단 「규칙 (강제)」 접이 섹션에도 있음.)