패턴 · 화면 조립본

패턴 층은 컴포넌트를 화면으로 조합하는 법입니다. 틀 두 개(앱 셸·인증 셸)와, 그 틀 위에 컴포넌트를 얹어 완성한 화면 조립본 여덟 장이 있습니다. 조립본은 그대로 열리는 HTML(마크업 + 페이지 CSS + 페이지 JS)이며, 새 화면은 처음부터 짜지 않고 조립본을 복사해 시작합니다.

전부 슬러 토큰·컴포넌트·slur.js만으로 동작합니다 — 유틸리티 클래스·컴포넌트 라이브러리·헤드리스 라이브러리 없이. 위젯 동작은 slur.js에 위임돼 있어 페이지 스크립트는 그 화면의 데이터 흐름만 담고, 화면끼리는 실제 흐름대로 연결돼 있습니다(로그인 ↔ 가입·재설정, 목록 행 메뉴 → 상세).

틀 — 앱 셸 · 인증 셸

앱 셸 layout_app (patterns/app-shell.css) — l_side(사이드바: l_logo l_nav l_group l_item l_count l_user) · l_head(상단 바: l_menu l_title l_actions) · l_main(본문). 1024px 미만에서 l_side는 드로어가 됩니다 — data-state="open", 배경 inert·Esc·포커스 복귀는 slur.js.
인증 셸 layout_auth (patterns/auth-shell.css) — l_brand(로고) · l_main > l_card(가운데 카드) · l_foot(하단 링크). 로고·카드·링크를 한 묶음으로 세로 가운데 정렬합니다.

틀은 레이아웃 블록 규칙대로 l_로 자족합니다 — 공유 컴포넌트를 틀 안에 직접 두지 않고, 컴포넌트는 l_main·l_card 안의 page_* 블록이 조합합니다. 현재 페이지의 정본은 aria-current="page", 구조 간격은 px입니다. 앱 셸의 헤더와 본문 콘텐츠는 기본 좌우 거터를 16px로 맞춥니다. 4px 그리드 정합성, 좁은 화면의 유효 폭, 화면 간 시작선 일관성을 위한 값이며 카드 내부 패딩·섹션 간격은 별도입니다.

화면 조립본 여덟 장

목차 한 장: screens/index.html. 각 프레임의 「모바일 폭 375」로 좁은 화면을, 「새 탭에서 열기」로 전체 화면을 봅니다. 프레임은 이 사이트의 테마를 따릅니다.

대시보드 — `dashboard.html`

layout_app. 기간 탭·필터 툴바, 통계 카드 card.m_stat 네 개, 차트 색 토큰, 4상태 표(i_status), 행 메뉴, 페이지네이션, 새 청구서 <dialog>, 토스트.

대시보드 — dashboard.html

새 탭에서 열기 ↗

로그인 — `login.html`

layout_auth. 이메일·비밀번호(보기 토글 input_wrap .i_action), 인라인 오류(field[data-state=error] + i_help + aria-invalid, 포커스는 첫 오류 필드), 폼 상단 실패 alert.m_inline(role=alert), 로딩 버튼(스피너), 소셜 로그인, 가입·재설정 링크.

로그인 — login.html

새 탭에서 열기 ↗

고객 목록 — `list.html`

layout_app. 제목 + 카운트 배지, 상태 탭이 4상태(로딩 → 정상/빈)를 전환, 검색·셀렉트, 선택 바(page_list[data-state="selected"], 전체 선택 indeterminate), 정렬(aria-sort), 행 메뉴 → 삭제 확인 <dialog>(초기 포커스 취소) → 모달이 닫힌 뒤 토스트, 좁은 화면 가로 스크롤.

고객 목록 — list.html

새 탭에서 열기 ↗

설정 — `settings.html`

layout_app. 구역 내비(aria-current + scroll-margin-top), 카드 섹션(프로필·알림·보안·위험 구역), 라벨/컨트롤 2열 행, role="switch" + aria-checked, 변경 추적 저장 바(취소 = 초기값 복원), 비밀번호 규칙 오류, 위험 구역은 이름 입력 게이트로 삭제 확인.

설정 — settings.html

새 탭에서 열기 ↗

회원가입 — `signup.html`

layout_auth. 비밀번호 강도 막대(장식 — 읽히는 문장은 i_help) + 규칙 체크리스트(li[data-state=pass] + 숨은 “충족/미충족”), 약관 fieldset.field(전체 동의 ↔ 개별, indeterminate), 중복 이메일은 폼 상단 alert, 성공 → data-state="sent" 인증 메일 안내(제목으로 포커스, 재전송 60초 잠금).

회원가입 — signup.html

새 탭에서 열기 ↗

비밀번호 재설정 — `reset.html`

layout_auth. 네 단계가 한 파일(page_reset[data-state="request|sent|new|done"]) — 단계가 바뀌면 새 단계의 h1(tabindex=-1)로 포커스. 요청(계정 유무를 노출하지 않음) → 메일 확인(재전송 잠금) → 새 비밀번호(규칙 체크리스트) → 완료(다른 기기 로그아웃 안내).

비밀번호 재설정 — reset.html

새 탭에서 열기 ↗

고객 상세 / 편집 — `detail.html`

layout_app. 정체 헤더(아바타·이름·배지·메타 + 편집·mailto:·더보기 menu_action), 탭(개요/청구서/활동 — 방향키는 slur.js), 보기 ↔ 편집 전환 page_detail[data-state="view|edit"](같은 카드 안에서 정의 목록 ↔ 폼 교대), 변경 추적 + 변경 버리기 확인 <dialog>(초기 포커스 “계속 편집”), 저장 → 헤더·브레드크럼 갱신 → 토스트, 청구서 탭 4상태, 활동 타임라인, 휴면 처리(되돌릴 수 있어 확인 없음) vs 삭제(확인).

고객 상세 / 편집 — detail.html

새 탭에서 열기 ↗

시작하기(온보딩) — `onboarding.html`

layout_app. 빈 워크스페이스 첫 화면 — 히어로 = empty_state, 진행 체크리스트(네이티브 <progress> + aria-label, li[data-state=done]), 첫 고객·팀원 초대 <dialog> 폼 → 단계 완료·히어로 내려감(data-state="started"), 4상태 활동 블록 empty → success.

시작하기(온보딩) — onboarding.html

새 탭에서 열기 ↗

조립본이 지키는 공통 규칙 — 새 화면도 같게

페이지 블록 하나(page_*)가 컴포넌트를 조합하고, 틀은 l_로 자족합니다. 페이지 CSS는 .page_x .p_*로만 — 컴포넌트 내부를 덮을 땐 페이지 스코프에서(.page_list .table_data { min-width: 760px; }).
상태는 data-state(선택 바·저장 바·4상태). 네이티브·ARIA 상태가 있으면 그 속성이 정본([open] :popover-open aria-sort aria-current aria-checked aria-invalid).
파괴적 확인은 <dialog> + 초기 포커스는 안전한 쪽(취소, 또는 이름 입력 게이트). 성공 알림은 모달이 닫힌 뒤 토스트 — slur.toast()가 순서를 보장합니다.
인라인 오류는 그 자리(field + i_help + aria-invalid), 폼 전체 실패는 폼 상단 alert.m_inline(role="alert"), 포커스는 첫 오류 필드로.
컨트롤 이름: 아이콘만 있는 버튼은 aria-label, 스위치는 aria-labelledby로 행 라벨과 연결, 검색·셀렉트의 숨은 라벨은 a11y_hidden.
한 페이지 안에서 화면(단계·모드)이 바뀌면 포커스를 옮깁니다 — 새 단계의 제목(h1[tabindex=-1])이나 편집의 첫 입력으로, 나갈 때는 들어온 버튼으로. 모달·팝오버는 네이티브가 복귀시키므로 손대지 않습니다.
확인 대화상자는 되돌릴 수 없는 것에만 — 되돌릴 수 있는 변경은 바로 적용하고 결과만 토스트.
색만으로 상태를 전하지 않습니다 — 장식(강도 막대·체크 아이콘)은 aria-hidden, 읽히는 문장(i_help·숨은 “충족/완료”)을 함께. 진행률은 네이티브 <progress> + aria-label.

복사해서 시작하기

화면 성격에 맞는 조립본 한 장을 프로젝트로 복사합니다. <head>의 상대경로 <link>를 프로젝트 경로로 바꿉니다 — 로드 순서는 그대로.
page_* 블록 이름과 p_* 내부 요소를 화면에 맞게 바꾸고, 데모 데이터를 실제 데이터 흐름으로 교체합니다. 위젯 동작(탭·메뉴·툴팁·토스트·드로어)은 slur.js가 그대로 합니다.
React/Next로 옮길 때는 페이지 CSS를 CSS Module(같은 클래스명)로, 페이지 JS의 data-action 분기를 핸들러로 옮기고, slur.js는 <Script>로 그대로 로드합니다 — AI 퀵스타트의 스택 메모.