버전 히스토리

이 문서는 SLUR UX/UI System의 버전별 변경 이력을 기록합니다.

---

미배포 — 2026-10-26

전역 토큰 블록의 표시 형식 통일

• 변경 이유: 기본 토큰을 여러 :root와 긴 한 줄로 나누면 이름과 값을 찾고 수정하기 어려웠다.
• global.css의 조건 없는 기본 토큰은 상단 :root 하나에 모으고 공백 4칸·한 줄에 토큰 하나로 펼친다. 일반 클래스 스타일의 한 줄 작성 규칙과 구분하며 테마·미디어 조건부 재정의는 유지한다.
• 방법론 문서·토큰 예제·배포 스킬 지침·체크리스트와 CSS 생성/구조 검사에 같은 기준을 반영했다. 토큰 저작 원본의 분리는 유지하며 생성본을 직접 편집하지 않는다.
• 검증: 전체 빌드와 사전 CSS·테마·인증 셸 검사를 통과했다. 생성본의 기본 :root 9개를 1개로 합친 전후 토큰 선언 128개의 이름·값·순서와 나머지 CSS 구조가 동일했다. 미디어쿼리 안의 :root 및 조건부 테마 선택자를 분리 유지하는 임시 입력도 확인했다.
• 두 배포 스킬의 형식 검사와 압축 패키지의 지침·생성 CSS 원본 일치를 확인했다. CSS 의미 보존을 파서로 확인한 형식 변경이며 이번에는 브라우저 화면·동작을 재검증하지 않았다.

---

미배포 — 2026-10-23

수정자·실행 상태·data-* 역할 정합성

• 변경 이유: 수정자 문서의 “상태를 m_로 표현” 설명이 data-* 상태 구현 지침과 충돌했다. 작업에서 모든 사용처에 항상 붙는 변경자도 제거 시 스타일이 달라진다는 이유만으로 유지하는 문제가 확인됐다.
• 정적 변형은 m_, 실행 상태는 data-* 또는 네이티브·ARIA 정본으로 통일했다. 변경자는 실제 기본형/변형을 소유 구조별로 판단하며 가상의 기본형은 만들지 않는다. 라이브러리의 문서화된 지원 옵션은 프로젝트 단일 사용과 구분한다.
• data-js(고정 대상), data-action(액션), 설정 정보, data-state/data-theme(실행 상태)를 구분했다. 기존 slur.js·ID·네이티브·ARIA 계약을 유지하며 동일 상태를 중복 저장하지 않는다.
• 방법론·참조표·체크리스트·slur-guidelines·slur-design 설명을 함께 수정했다. 실행 자산은 변경하지 않았다. 프로젝트별 폴더 구조·CSS 구성·폰트 제공 방식·커밋 규칙은 시스템 전역 규칙으로 변경하지 않았다.
• 검증: 문서 빌드와 사전 구조 검사, 두 스킬의 형식 검사 및 diff 공백 검사를 통과했다. 공개 문구의 내부 경로·특정 프로젝트 사례를 검토하고 예시를 일반화했다. 실행 자산 변경이 없어 UI 동작·브라우저 시각 검사는 시행하지 않았다.

---

v1.14.0 — 2026-10-24

CSS 구조 전환 후 브라우저 검증 — 2026-10-24

• 변경 이유: 구조 검사·빌드만으로 확인하지 못한 기존 화면과 동작의 유지 여부를 브라우저에서 추가 검증했다. 비교 기준은 전환 전 v1.13.3과 CSS 전환 커밋이다.
• Chromium 1440px·390px에서 컴포넌트 데모·화면 목차·화면 예제 8개를 비교했다. 각 실제 뷰포트 폭과 글꼴 로드를 확인하고 모션 감소 상태에서 본문 요소의 위치·크기·display·색상·배경·글꼴 크기·행간·여백을 대조했다. 화면 예제 8개는 전체 요소 차이 0건이며 가로 넘침은 모든 화면에서 없었다.
• 데모와 목차는 페이지 루트 각각 1개만 좌표·배경·여백이 달랐다. body의 배경·여백을 페이지 루트로 이동한 의도된 차이이며 모든 자식의 비교값은 동일했다. 데모의 두 화면 폭 스크린샷도 확인했다.
• 두 화면 폭의 전환 전후에서 데모 로딩/성공·정렬·모달 열림/닫힘·토스트·테마, 대시보드 상태 전환, 상세 편집, 고객 목록 전체 선택, 로그인/비밀번호 재설정의 비밀번호 표시·빈 폼 오류, 설정 테마, 가입 전체 동의·폼 오류를 확인했다. 온보딩 고객 모달과 드로어 열림/닫힘도 같았다. 관련 회귀 문제를 발견하지 않아 실행 코드 수정은 없었다.
• 한계: 대부분의 기능은 DOM click/requestSubmit으로 실행해 상태 결과를 비교했으며 실제 포인터 조작성 전체를 검증한 것은 아니다. 테마 버튼은 브라우저 클릭으로 추가 확인했다. 모든 성공 제출 흐름·전체 키보드 탐색·Safari·모바일 실기기 검증은 미실시다. 뷰포트 에뮬레이션은 실기기 검증을 대체하지 않는다.

CSS 세 파일 구조 적용

• 변경 이유: 세 파일 구조는 작성자가 실제 작업에서 가장 효율적이라고 확인한 방식이다. CSS 파일의 과도한 분산으로 중요한 적용 순서와 덮어쓰기 관계를 바로 파악하기 어려워진 문제를 해결한다. 전체 기준 → 공통 요소 → 화면 전용 스타일의 흐름과 수정 위치를 한눈에 읽고 작업할 수 있게 하는 것이 목적이다. 현재의 원본 분리·자동 생성 방식에는 작성 구조의 복잡성이 남아 있다.
• global.css → common.css → page.css를 프로젝트 로드 기준으로 확정했다. global은 리셋·토큰·문서 기본값·접근성, common은 공통 레이아웃·재사용 컴포넌트, page는 화면 전용 스타일을 담당한다.
• 데모·목차의 페이지 CSS에 남아 있던 body 스타일을 각각 .page_demo·.page_index로 옮겼다. 페이지 선택자 범위와 CSS 로드 순서를 검사해 책임 분리 누락을 방지한다.
• 4상태 슬롯 전환은 common.css로 옮겼다. 각 파일의 반응형 규칙은 해당 파일에서 관리한다.
• 토큰·컴포넌트 저작 원본을 유지하고 생성 스크립트로 global·common을 묶는다. 컴포넌트 데모 1개와 화면 예제 9개(목차 포함)에 세 파일 링크를 적용하고 페이지 스타일을 분리했다.
• 문서·스킬·로드 예제와 배포 복사 절차를 함께 갱신했다. 과거 버전의 common.css 금지 규칙은 이 버전부터 대체한다.
• 검증: 별도 복사본에서 전체 빌드 및 CSS·대비·외형·레이아웃·기기 프리뷰·인증 셸 검사를 통과했다. 10개 화면의 CSS 로드 순서와 343개 페이지 범위 규칙, 생성 파일 재현성 및 배포 압축파일 경로를 확인했다. 화면 예제 8개의 페이지 CSS 선언 순서는 기존과 동일하며 데모·목차 2개는 body 스타일의 페이지 루트 이관에 따른 배치 조정을 포함한다. 브라우저 시각 비교와 실기기 검증은 미실시다.

---

v1.13.3 — 2026-10-24

모바일 헤더 UX 기준 추가

• 모바일 헤더 기준에 사용 맥락별 고정 여부, 스크롤 숨김·재노출, 상호작용 중 표시 유지와 검증 항목을 기록했다.
• 초기 기본값으로 헤더 56px(필요 시 64px까지), 로고 권장 24px·최대 min(헤더 높이 − 24px, 32px), 버튼 터치 영역 최소 48 × 48px를 정했다. 상단 안전 영역은 별도로 확보한다.
• 문서 탐색 메뉴와 slur-guidelines 참조에도 같은 기준을 연결했다.
• 검증: 이 변경만 분리한 문서 빌드와 사전 검사 통과. 문서·스킬 참조·탐색 경로를 확인했다. 동작 구현 변경은 없으며 실제 기기 동작 검증은 수행하지 않았다.

---

v1.13.2 — 2026.09

인증 셸의 선택 슬롯과 중앙 정렬 독립

• layout_auth가 justify-content: center로 존재하는 슬롯 전체를 가운데 정렬하고, l_brand·l_foot의 여백은 요소 사이 간격만 담당하도록 바꿨다. 이제 l_foot이 없는 인증 화면도 아래로 밀리지 않는다.
• l_main은 필수, l_brand·l_foot은 선택 슬롯으로 문서화했다. 고정 높이를 쓰지 않아 콘텐츠가 뷰포트보다 길면 셸이 늘어나 상단부터 스크롤되는 계약도 함께 명시했다.
• scripts/check-auth-shell.mjs를 사전 빌드 검사에 연결해 컨테이너 중앙 정렬, 선택 슬롯의 비자동 여백, 필수·선택 슬롯 문서화를 자동으로 확인한다.

---

v1.13.1 — 2026.09

대표 적용 방식 두 가지로 정리

• SLUR UI Guidelines — 기존 디자인과 토큰은 유지하고 구조·네이밍·상태·접근성 등 UI 구현 규칙만 적용하는 방식으로 명확히 설명했다.
• SLUR Design System — UI Guidelines와 토큰을 포함하고, 현재 프로젝트를 먼저 조사한 뒤 실제 사용하는 컴포넌트와 패턴만 적용하도록 명확히 했다. 사용하지 않는 모달 등의 소스는 자동으로 추가하지 않는다.
• 기존 tokens-only는 세 번째 대표 모드에서 제외했다. 사용자가 기존 컴포넌트를 유지하면서 색·타이포·간격만 슬러로 바꾸겠다고 명시할 때 사용하는 제한 옵션으로 남겼다.

---

v1.13.0 — 2026.08

SLUR 보고서 디자인 기준 추가

• 브랜드와 강조색 분리 — SLUR 로고는 원본 블랙을 유지하고, 블루는 제목·구분선·정보 강조에만 사용한다. 테마색으로 로고를 다시 칠하지 않는다.
• 블루 권장안 확정 — 넓은 면은 흰색·연회색으로 두고 블루 계열로 정보 구조를 만든다. 빨간색은 실제 위험을 알리는 작은 표시에만 제한한다.
• 요약본 일반어 우선 — 비개발자가 먼저 보는 요약본은 기술 용어 대신 일상적인 표현을 사용하고, 정확한 측정값·기술 설명·확인 근거는 상세 보고서에서 제공한다.
• PDF 생성·검수 절차 기록 — 벡터 PDF를 직접 생성한 뒤 페이지 이미지로 렌더링해 글자 잘림, 겹침, 로고 색, 경고색 비중을 확인한다.

---

v1.12.0 — 2026.08

WCAG AA 색 대비를 배포 기준으로 확정

• 예외 없는 실제 조합 기준 — 일반 텍스트는 4.5:1, 입력·버튼·체크·스위치 경계와 포커스 표시·차트 표식은 3:1 이상으로 확정했다. 작은 메타·자리 표시자·상태 문구도 일반 텍스트 기준을 적용하고 라이트·다크·호버·솔리드·연한 면의 최종 합성색을 각각 판정한다.
• 토큰 재조정 — 라이트 muted, 다크 secondary/muted, 기본·강한 보더, 브랜드 기본색과 다크 브랜드 텍스트를 조정했다. 반투명 포커스 링은 불투명 border-focus 색으로 바꿨다. 상태 전경과 솔리드 면을 --color-*-solid로 분리하고, 토스트 반전 면에는 --color-*-on-inverse를 추가해 성공 솔리드의 기존 3.3:1 예외를 제거했다.
• 컴포넌트·차트 보정 — 솔리드 배지·위험 버튼·온보딩 완료 아이콘은 solid 토큰을 사용하고, 연한 브랜드 면의 아이콘은 text-brand를 사용한다. 입력 자리 표시자를 명시하고, 스위치의 꺼짐/켜짐 노브 색을 분리했다. 차트 다섯 슬롯은 두 테마의 카드 면에서 모두 3:1 이상이며 도넛 조각 사이에 카드 면 구분선을 넣었다.
• 배포 차단 자동 검사 — scripts/check-color-contrast.mjs가 정의된 140개 조합을 검사한다. prebuild에 연결해 실패하면 빌드·배포를 중단한다. 현재 최소값은 일반 텍스트 4.53:1, UI·포커스·차트 3.07:1이다.

---

v1.11.5 — 2026.08

페이지 콘텐츠 기본 좌우 거터 16px

• 기존에는 레이아웃 구조 간격을 px로 직접 쓴다는 단위 규칙만 있고 페이지 좌우 거터의 기준값과 근거가 없었다. 앱 셸의 헤더·본문 콘텐츠 좌우 거터를 16px로 통일했다. 4px 그리드 정합성, 좁은 화면의 유효 폭, 화면 간 시작선 일관성이 근거다. 카드 내부 패딩·섹션 간격은 적용 대상이 아니다. 디자인 토큰·패턴 문서, 레시피, 스킬 체크리스트에도 같은 기준을 기록했다.
• Cloudflare Pages가 Astro 7을 지원하지 않는 Node 20으로 빌드하지 않도록 .node-version을 22.23.0으로 고정했다. 로컬·GitHub Actions·Pages가 같은 Node 22 계열을 사용한다.

---

v1.11.4 — 2026.08

품질 검증 방법론 추가

구현 규칙을 실제 사용 가능 여부와 연결하는 공개 검증 기준을 추가했습니다.

• 자동 측정·실제 브라우저 검증·사람 판단의 세 층을 분리
• 모바일·태블릿·데스크톱·320px 공통 화면 기준 명문화
• 키보드, 실패·복구, 동적 콘텐츠의 실제 흐름 검증 절차 추가
• 총점으로 상쇄하지 않는 출시 차단 조건 정리
• 배포·인계 전 완료 검증 체크리스트 신설
• 고객별 점수·증거·실행 데이터는 공개 UX/UI 문서와 분리

v1.11.3 — 2026.08

설치본 버전 표기 · iOS 글자 자동 확대 방지

• VERSION 파일 — 스킬을 복사해 간 프로젝트가 “이게 몇 버전이지?“를 알 길이 없었다(탭 ④ P2-24). scripts/sync-assets.mjs가 빌드 때 package.json의 버전(= 이 changelog의 정본 버전)을 slur-guidelines/VERSION·slur-design/VERSION과 /skill/VERSION에 써 넣고, slur-skills.tar.gz에도 두 파일이 들어간다. install.sh는 설치 뒤 버전을 출력한다. 저장소 원본(skill/)에는 없는 파일 — 버전을 올려도 원본 23개 CSS는 바뀌지 않는다. AI 퀵스타트·개요·SKILL.md×2·README에 한 줄
• global.css에 html { text-size-adjust: 100% } — iOS Safari가 가로 회전 때 글자만 멋대로 키우는 것(text autosizing)을 막는다(P2-25 중 룩 무관·하위호환인 한 줄만; keep-all·img max-width는 줄바꿈·레이아웃을 바꾸므로 보류). 사용자의 핀치 확대·글자 크기 설정은 그대로 존중된다. 공통 레이어 목록 갱신, slur.js 1.11.3

v1.11.2 — 2026.08

로딩 기본형 정리 · 새 부품 WebKit 재검증 · 데모 P2 마무리

• 로딩 기본 = 스피너 + 읽힐 문장 — 문법 예시(ux-states.md)는 처음부터 spinner + 「불러오는 중…」이었는데, 같은 문서의 규칙 문장과 레시피·사이트는 “스켈레톤이 기본”이라고 적혀 서로 달랐다. 기본을 예시 쪽으로 통일한다: 문장이 마크업에 내장돼 a11y_hidden을 빠뜨릴 일이 없고, 지어낼 게 없다. skeleton은 표·카드 목록처럼 모양이 정해진 넓은 영역의 선택지로 내린다(클래스·변형은 그대로 — 조립본 list·detail이 그 예). ux-states.md·화면 상태 설계·레시피 4절·컴포넌트·state.css 머리말·데모 State 절(스피너 기본, 스켈레톤은 별도 「선택지」 절) 갱신
• 메뉴·툴팁 CSS 결함 — menu.css의 .menu_action { display: flex }가 브라우저의 닫힘 숨김([popover]:not(:popover-open) { display: none })을 덮어써, 닫힌 메뉴가 투명한 채 남아 그 자리의 클릭을 가로챘다(Safari는 클릭이 버튼에 포커스를 주지 않아 Esc 뒤 포커스가 숨은 항목에 남기도 했다). display를 :popover-open에만 두고(tooltip.css도 같게) — 이제 display … allow-discrete 전환이 실제로 동작한다. slur.js menu는 Esc 뒤 트리거로 포커스를 보강한다(닫기 자체는 네이티브 그대로 — Safari에서 마우스로 연 경우 복귀할 곳이 없어 body로 가던 것, APG Menu Button). 레시피 6절·js.md·동작 층에 한 줄
• 표 래퍼 가로 넘침 — 표 머리의 a11y_hidden(absolute)이 table_wrap 안에 positioned 조상이 없어 모바일 폭에서 문서가 가로로 밀렸다(데모 480·대시보드 456·목록 729px). .table_wrap { position: relative }
• WebKit 재검증 — 메뉴·툴팁·페이지네이션·앱 셸 드로어·탭 방향키·모달·토스트·테마·reduced-motion 61항목을 Playwright WebKit 26.5와 Chromium 151에서 같은 대본으로 실행해 위 두 결함을 찾았고, 수정 후 둘 다 61/61 통과. WebKit 26.5는 anchor positioning·popover="hint"를 지원하지만 이전 Safari가 남아 있는 동안 정책(slur.js 위치 계산·popover="manual")은 유지 — 브라우저 지원 기준 문구 보정
• 데모 P2 마무리 — modal.css 커스텀 오버레이 .i_wrap의 무의미한 z-index 제거, 데모 PC-first 미디어쿼리 이유 주석, demoIndet(indeterminate는 JS로만) 주석. slur.js 1.11.2

v1.11.1 — 2026.08

스킬 설치 — tar.gz 한 덩어리로

v1.11.0의 install.sh는 manifest.txt 목록대로 파일을 하나씩 받았다. 배포 후 실도메인에서 받아 보니 조립본 HTML 여덟 장이 원본과 달랐다 — Cloudflare의 이메일 난독화(Email Address Obfuscation)가 HTML 응답 속 주소(demo@slur.co.kr 등)를 [email protected] + 디코드 스크립트로 바꿔 내보내기 때문(CSS·JS·MD는 그대로). 브라우저에서는 스크립트가 복원하므로 사이트의 프레임은 문제없지만, 복사해서 시작하는 조립본 파일이 훼손된다.

• scripts/sync-assets.mjs가 두 스킬 폴더를 **public/skill/slur-skills.tar.gz**로 묶는다(의존성 없는 ustar 작성기 + zlib gzip). 바이너리 응답은 손대지 않으므로 원본 그대로 온다
• install.sh는 그 tar.gz 하나를 받아 푼다(curl | tar -xzf - -C $DEST) — 요청 1번, 52파일 원본과 동일함을 로컬·실도메인에서 확인. manifest.txt는 파일 목록(참고용)으로 유지
• 개요·AI 퀵스타트·README·system/README.md 문구 갱신, slur.js 1.11.1

v1.11.0 — 2026.08

사이트 「디자인시스템」 섹션 · AI 퀵스타트 · 스킬 배포 경로

지금까지 스킬 폴더(skill/)에만 있던 디자인시스템 — 토큰·컴포넌트 15개·패턴·화면 조립본 여덟 장 — 을 문서 사이트에서 볼 수 있게 했다. 사이트는 여전히 문법이 본문이고, 디자인시스템은 그 위의 한 섹션이다(별도 사이트를 만들지 않음 — 양이 작고 읽는 사람이 같다). 저장소가 비공개라 사이트가 두 스킬의 공개 배포 경로가 됐다.

사이트

• 사이드바 「디자인시스템」 그룹 신설 — 개요(네 층·호칭·로드 순서·핵심 규칙·가져오기) / 디자인 토큰(두 층, 실제 이름·값 전부, 단위 기준, 운영 원칙) / 컴포넌트(색인 표 — 블록·변형·상태의 정본, 라이브 데모, 4상태·토스트·모달 마크업) / 패턴 · 화면 조립본(앱 셸·인증 셸, 여덟 장 프레임, 공통 규칙, 복사해서 시작) / AI 퀵스타트(설치, 호칭 세 가지와 예시 프롬프트, 결과 점검, 스택별 메모)
• 조립본·데모를 사이트 안에서 바로 본다 — ScreenFrame.astro(블록 preview_frame: iframe, 「모바일 폭 375」 토글 data-state="desktop|mobile", 새 탭 열기, 사이트 다크 모드를 같은 출처 프레임 문서의 data-theme로 전파)
• 토큰 문서의 색·그림자 칸은 사이트에 배선된 실제 토큰을 그린다 — TokenSwatch.astro(token_swatch, --swatch 변수 하나). 토큰 값이 바뀌어도 문서가 따라오고, 테마를 바꾸면 칸도 바뀐다
• scripts/sync-assets.mjs — dev·build 시작 때(astro.config.mjs의 통합 훅 astro:config:setup — 빌드 명령이 무엇이든 같이 돈다) skill/ 전체와 system/demo.html을 public/으로 복사해 같은 경로로 서빙(/skill/..., /system/demo.html). 조립본이 ../../../../slur-guidelines/... 상대경로로 두 스킬을 넘나드므로 트리를 그대로 옮긴다. 복사본은 gitignore — 원본은 한 곳
• 스킬 설치 스크립트 https://docs.slur.co.kr/skill/install.sh — manifest.txt(빌드 시 생성)의 파일 목록을 같은 경로로 내려받아 .claude/skills/에 두 스킬을 둔다(SLUR_SKILLS_DIR로 위치 변경). 하는 일은 curl뿐
• 첫 화면에 「디자인시스템 · 화면 조립본」 버튼과 카드, 「문서 읽는 방법」에 섹션 안내, README에 항목 추가
• 표 셀에 word-break: keep-all — 한국어는 글자 사이 어디서나 줄이 바뀌어 좁은 열이 한 글자씩 세로로 쌓이던 것(색인 표의 「컴포넌트」 열). Starlight 표는 overflow: auto라 넓어지면 가로 스크롤
• slur-theme.css에 motion 토큰 import — custom.css가 --duration-fast·--ease-standard를 참조하고 있었으나 정의가 없어 전환이 무시되던 것

스킬

• slur-design/SKILL.md·slur-guidelines/SKILL.md에 사이트·설치 경로 한 줄, system/README.md에 「사이트에서 보기」, slur.js 버전 1.11.0. 규칙 변경 없음

검증

• npm run build Complete(dist/skill/·dist/system/ 포함). Chrome에서 다섯 페이지 렌더, 프레임 로드·모바일 폭 토글·다크 전파, 토큰 칸 테마 전환 확인

v1.10.0 — 2026.08

화면 조립본 — 회원가입 · 비밀번호 재설정 · 상세/편집 · 온보딩

v1.9.0의 네 장에 이어 조립본 네 장을 추가해 여덟 장이 됐다. 인증 흐름(가입·재설정)과 앱 안의 두 축(한 건의 상세/편집, 빈 워크스페이스의 첫 화면)을 채워, 바이브 코딩으로 앱을 시작할 때 빠지는 화면이 거의 없게 했다. 전부 슬러 디자인 + slur.js만으로 동작하며(Tailwind·shadcn·헤드리스 라이브러리 없음), 화면끼리 실제 흐름대로 연결돼 있다(로그인 ↔ 가입·재설정, 목록 행 메뉴 → 상세).

디자인시스템 (slur-design)

• patterns/screens/ 네 장 추가 — 그대로 열리는 HTML(마크업 + 페이지 CSS + JS, 상대경로), 목차 index.html에 카드 추가
  • 회원가입 signup.html (layout_auth) — 이름·이메일·비밀번호·확인, 비밀번호 강도 막대(장식 — 읽히는 문장은 i_help) + 규칙 체크리스트(li[data-state=pass] + 숨은 “충족/미충족”), 약관 fieldset.field(전체 동의 ↔ 개별, indeterminate, 필수 미동의는 i_help 오류), 중복 이메일은 폼 상단 alert, 성공 → page_signup[data-state="sent"] 인증 메일 안내(empty_state, 제목으로 포커스, 재전송 60초 잠금)
  • 비밀번호 재설정 reset.html (layout_auth) — 네 단계를 한 파일에(page_reset[data-state="request|sent|new|done"]), 단계가 바뀌면 새 단계의 h1(tabindex=-1)로 포커스. 요청(계정 유무를 노출하지 않음) → 메일 확인(재전송 잠금) → 새 비밀번호(규칙 체크리스트, 이전 비밀번호 재사용은 상단 alert) → 완료(다른 기기 로그아웃 안내)
  • 고객 상세/편집 detail.html (layout_app) — 정체 헤더(아바타·이름·상태/플랜 badge·메타 + 편집·mailto:·더보기 menu_action), tab_menu 기본형 탭(개요/청구서/활동), 보기↔편집 전환 page_detail[data-state="view|edit"](같은 카드에서 p_dl ↔ p_fields 교대, 편집 중엔 헤더 동작 숨김·저장 바만 출구), 변경 추적 + 변경 버리기 확인 <dialog>(초기 포커스 “계속 편집”), 저장 → dl·헤더·브레드크럼 갱신 → 토스트, 청구서 탭 4상태 loading→success, 활동 타임라인, 휴면 처리(되돌릴 수 있어 확인 없음) vs 삭제(확인)
  • 온보딩 onboarding.html (layout_app) — 빈 워크스페이스 첫 화면. 히어로 = empty_state(페이지 스코프에서 크기만), 진행 체크리스트(네이티브 <progress> 룩만 입힘 + aria-label, li[data-state=done], 전부 끝나면 p_checklist[data-state=done]), 첫 고객·팀원 초대 <dialog> 폼 → 단계 완료·사이드바 카운트·히어로 내려감(data-state="started"), 4상태 활동 블록 empty → success, 둘러보기 card.m_list 링크 행
• login.html의 “비밀번호를 잊으셨나요?”·“회원가입” 링크와 list.html 행 메뉴의 “상세 보기”(a.i_item[role=menuitem])를 새 화면으로 연결
• references/recipes.md 15절 표에 네 장 추가 + 공통 규칙 세 개 보강: 화면(단계·모드)이 바뀌면 포커스를 옮긴다(제목 또는 첫 입력, 나갈 때는 들어온 버튼), 확인 대화상자는 되돌릴 수 없는 것에만, 색만으로 상태를 전하지 않는다(장식은 aria-hidden + 읽히는 문장, 진행률은 <progress> + aria-label)
• SKILL.md 트리·색인·「프로젝트에 넣는 법」, system/README.md, slur.js 버전 1.10.0

공통 레이어 (global.css) · 컴포넌트 — 조립본을 만들며 드러난 빈칸

• fieldset 리셋 — min-width: 0; border: 0;(UA의 groove 테두리와 min-width: min-content가 그리드 안에서 넘치던 것). 묶음의 테두리가 필요하면 페이지가 그린다(signup.html의 약관 상자처럼)
• .btn을 <a>에도 안전하게 — text-decoration: none; color: inherit; 추가(a.btn이 밑줄·링크색으로 보이던 것. mailto:·“전체 보기”·“로그인으로” 같은 링크 버튼)

검증

• Chrome(1280·375)에서 네 장 모두 콘솔 오류 0. 가입 검증·강도·약관·인증 메일 전환, 재설정 4단계 전환·포커스, 상세 보기↔편집·버리기 확인·저장 반영·탭 4상태, 온보딩 첫 고객→체크리스트·활동 전환 동작 확인. Safari는 Slur 수동 확인 대상

v1.9.0 — 2026.08

화면 조립본 — 로그인 · 목록 · 설정

대시보드 한 장(v1.8.0)에 이어, 바이브 코딩으로 앱을 만들 때 바로 복사해 시작할 수 있는 화면 조립본 세 장을 추가했다. 전부 슬러 디자인 + slur.js만으로 동작하며(Tailwind·shadcn·헤드리스 라이브러리 없음), 위젯 동작은 slur.js에 위임돼 페이지 스크립트는 그 화면의 데이터 흐름만 담는다.

디자인시스템 (slur-design)

• patterns/screens/ 신설 — dashboard.html(기존 system/demo-dashboard.html을 이동), login.html, list.html, settings.html. 그대로 열리는 HTML(마크업 + 페이지 CSS + JS, 상대경로)
  • 로그인 — layout_auth 틀, 이메일·비밀번호(보기 토글), 인라인 오류(field[data-state=error] + i_help + aria-invalid, 포커스는 첫 오류 필드), 폼 상단 실패 alert.m_inline(role=alert), 로딩 버튼(스피너), 소셜 로그인·가입 링크
  • 목록(고객) — 제목+카운트, 상태 탭이 4상태(로딩→정상/빈)를 전환, 검색·셀렉트, 선택 바(page_list[data-state="selected"], 전체 선택 indeterminate), 정렬(aria-sort), 행 메뉴 → 삭제 확인 <dialog>(초기 포커스 취소) → 모달 닫힌 뒤 토스트, 좁은 화면 가로 스크롤
  • 설정 — 구역 내비(aria-current + scroll-margin-top), 카드 섹션(프로필·알림·보안·위험 구역), 라벨/컨트롤 2열 행, role="switch" + aria-checked, 변경 추적 저장 바(취소 = 초기값 복원), 비밀번호 규칙 오류, 위험 구역은 이름 입력 게이트로 삭제 확인
• patterns/auth-shell.css 신설 — layout_auth(l_brand · l_main > l_card · l_foot): 로그인·가입·재설정 같은 단일 과업 화면의 틀
• 컴포넌트 소폭 확장 — input_wrap .i_action(컨트롤 안 오른쪽 액션 버튼: 비밀번호 보기·지우기) + input_text.m_icon_right; table_wrap .i_body/.i_scroll에 overflow-x: auto(좁은 화면 가로 스크롤); switch는 role="switch" + aria-checked="true"를 정본으로 인정(표준 ARIA 상태 규칙, 기존 data-state="on"도 유지)
• references/recipes.md에 「15. 화면 조립본」 — 네 장의 내용 표 + 새 화면도 같게 지키는 공통 규칙(페이지 블록 조합·상태 정본·파괴적 확인·인라인 오류·컨트롤 이름) + React 이관 메모
• assets/brand/ 신설 — 사이트의 SLUR 로고(logo.svg 라이트 · logo-white.svg 다크)와 favicon.svg를 디자인시스템 자산으로 동봉. 화면 조립본·데모의 사이드바·인증 셸에 로고(l_logo, 테마별 img 전환)와 파비콘 적용. screens/index.html 목차 페이지 추가(서버 없이 파일로 열림)
• layout_auth는 로고·카드·하단 링크를 한 묶음으로 세로 가운데 정렬(auto 마진 — 내용이 길어지면 위에서부터 흐름)
• SKILL.md 트리·색인·「프로젝트에 넣는 법」에 auth-shell·screens/ 반영(“화면을 새로 짤 때는 조립본을 복사해 시작”), system/README.md 갱신, slur.js 버전 1.9.0

검증

• Chrome(1280·375)에서 네 장 모두 콘솔 오류 0. 로그인 유효성·실패·성공 흐름, 목록 선택 바·4상태 전환·행 메뉴→삭제 확인→토스트, 설정 변경 추적·취소 복원·저장·삭제 게이트 동작 확인. Safari는 Slur 수동 확인 대상

v1.8.0 — 2026.08

동작 층 신설 + 대시보드 어휘

v1.7.0(어휘 보충)과 같은 날 별도 작업선에서 만든 것을 합쳤다. 겹친 결정은 접근성 근거가 있는 v1.7.0 것(i_status 상자·success 값·모달 중 토스트 금지)을 따르고, 룩·토큰명·<dialog> 안 i_wrap 생략은 이쪽을 따랐다.

슬러가 “규칙 + 모양”에서 동작까지 갖춘다. 동작의 출처는 네이티브 → slur.js → 위임 3단 우선순위로 고정하고, 어떤 JS 라이브러리에도 의존하지 않는다. 대시보드 한 장을 슬러만으로 끝까지 만들 수 있도록 빠진 어휘를 채웠다(shadcn/ui 대비 분석의 결론 — 엔진을 빌리는 대신 빈칸만 채운다).

방법론 확장

• 「동작 층 (slur.js)」 페이지 신설(JavaScript 및 상태 관리) — 동작의 출처를 네이티브(<dialog>·popover·<details>·네이티브 input) → 동봉 slur.js → 위임(복잡 위젯만) 으로 정의. 브라우저가 해 주면 만들지 않고, 작으면 직접 만들고, 크면 빌린다
• 네이티브 상태 속성 규칙 확장 — :popover-open과 표준 ARIA 상태(aria-sort·aria-current·aria-selected)도 정본으로 인정, data-state 중복 금지
• 4상태 스위치(global.css)와 슬롯 룩의 결합 — v1.7.0의 i_status(role="status") 상자·success 값 위에 슬롯 룩(empty_state·skeleton·spinner)을 얹는다. i_loading에는 읽힐 문장을 하나 둔다(스켈레톤만이면 보조 기술에 읽히지 않음). 화면 상태 설계·공통 레이어 페이지에 반영
• 팝업/모달 패턴에 「비모달 레이어 — 드롭다운·팝오버·툴팁」 절 추가(popover="auto", role="menu"는 앱 동작 메뉴에만), 피드백 원칙에 토스트 컨테이너 선존재 + slur.toast, 키보드 내비게이션·외부 라이브러리 연동에 동작 층 연결

공통 레이어 (global.css) · 동작 층 (slur.js) — slur-guidelines

• slur.js 신설(바닐라, 의존성 0, ~250줄) — tabs(방향키·Home/End·roving tabindex·자동 활성화), menu(popover 메뉴의 트리거 기준 위치·첫 항목 포커스·방향키·Tab 닫기), tooltip(호버+포커스·Esc·툴팁 위 유지), toast(선존재 컨테이너에 큐·자동 소멸·닫기, slur.toast(text, { level }) — 모달이 열려 있으면 큐에 두었다가 닫힌 뒤 표시), drawer(열린 동안 형제 inert·첫 포커스·Esc·포커스 복귀), theme(data-theme 전환·저장). 클래스가 아니라 역할·속성(role·popover·data-action)에 document 위임 바인딩, 후처리는 slur:* 커스텀 이벤트
• SKILL.md에 「동봉 파일 — slur.js」 절과 모듈 표, js.md에 「동작은 어디서 오나」(3단 표 + API), accessibility.md 5장에 구현 순서·F(위임) 문장 갱신·ARIA 정본 확장, component.md 탭 예시를 i_list/i_tab/i_panel 구조로(+slur.js 안내), ux-states.md에 토글 CSS·토스트 API, checklist에 동작 순서·4상태·토스트 항목

디자인시스템 (slur-design)

• 새 컴포넌트 — toast_message(toast.css: 어두운 필, 하단 중앙, m_top, status/alert 컨테이너 분리, 숨김은 opacity·visibility로 라이브 영역 선존재 유지), empty_state·skeleton·spinner(state.css, 4상태 슬롯 기본형 포함), menu_action(menu.css, 네이티브 popover), tooltip_help(tooltip.css, popover="manual"), pagination(pagination.css, aria-current="page" 정본)
• 확장 — card.m_stat(통계 카드, 증감은 badge 조합), table_data 정렬 헤더(th.m_sort > .i_sort, aria-sort 정본), nav_side .i_item[aria-current="page"] 인정
• 모달 CSS를 <dialog> 1순위로 재작성 — dialog.modal_dialog([open] 정본, ::backdrop, @starting-style 모션), 커스텀 오버레이는 div.modal_dialog + data-state로 유지(1.6.0 규칙의 CSS 반영). 마크업 변경: 기존 div.modal_dialog > .i_wrap 구조는 그대로 동작하고, <dialog>로 옮기면 .i_wrap 없이 i_head/i_body/i_foot을 직접 둔다
• 탭 마크업 변경 — tab_menu가 i_list[role=tablist] > i_tab[role=tab] + i_panel[role=tabpanel]을 감싸는 구조로(가이드라인 정본과 일치, 패널까지 한 세트). 기존 tab_menu > .i_tab 직계 마크업은 i_list로 한 번 감싸야 한다
• 토큰 — 차트 범주형 5슬롯 --color-chart-1~5(라이트·다크 각각 dataviz 6항목 검증 통과, 순서 고정·상태색 재사용 금지, 라이트 3·4·5는 직접 라벨 필요), --color-surface-overlay(모달 backdrop·드로어 딤, 라이트·다크 — v1.7.0의 --color-overlay를 이 이름으로 통일)
• patterns 층 첫 파일 — patterns/app-shell.css(layout_app: l_side/l_panel/l_dim · l_head · l_main, 데스크톱 2열·1024 미만 드로어, 내부는 l_ 자족, 현재 페이지 aria-current)
• references/recipes.md 신설 — 대시보드 레시피 14절(앱 셸·페이지 뼈대·통계 카드·4상태·토스트·행 메뉴·툴팁·표 정렬/페이지·차트 색 주입·다크 토글·모달·필터·위임·React에서 slur.js)
• SKILL.md에 「동작은 어디서 오나 — 3단 우선순위」, 블록→파일 색인 확장, 로드 순서에 patterns·slur.js, 점검표 3항목 추가. “하지 말 것”의 Radix 문장을 3순위 위임으로 정정
• 토스트 위치는 한 곳(하단 중앙) — status/alert 같은 자리, 강도는 role과 자동 소멸로만 구분. m_top은 하단이 탭바·푸터·FAB로 막힐 때 두 컨테이너를 함께 옮기는 레이아웃 변형으로 한정(데모·레시피에서 alert의 m_top 제거)
• global.css에 dialog { margin: auto } — 전체 리셋(* { margin: 0 })이 지운 UA 기본값 복원(showModal() 가운데 정렬)
• 데모 — demo.html에 State(i_status 상자·success)·Toast·Tooltip·통계 카드·차트 토큰·정렬/메뉴/페이지네이션·<dialog> 모달 추가(위젯 동작은 전부 slur.js 위임, 페이지 스크립트는 데이터 흐름만), demo-dashboard.html 신설(앱 셸 한 장). Chrome에서 탭 키보드·메뉴·툴팁·토스트·드로어 inert·다크 전환 검증

보류

• CSS anchor positioning(Safari 26 지원)으로 메뉴·툴팁 위치를 CSS로 옮기는 것 — popover 트리거의 암묵적 앵커 지원이 Safari에서 확인되면 재평가. 그때까지 위치는 slur.js
• 콤보박스·범위 달력 위임 예시는 실제 프로젝트에서 요구가 생길 때 추가

---

v1.7.0 — 2026.08

문법이 요구하는 어휘 보충 (검토 피드백 P0-4)

방법론 확장

• 4상태 값 확정 — data-state="loading | empty | error | success". 정상 상태의 이름이 없던 빈칸을 success로 채움(버튼·입력의 기존 success와 같은 어휘, 데이터 로딩 상태의 통용 이름)
• 4상태 안내문은 항상 렌더되는 i_status(role="status") 상자 안에 — 상자가 미리 있어야 상태 전환이 보조 기술에 읽힌다(라이브 영역 선존재 원칙). 지금 상태가 아닌 안내문은 display:none으로 접근성 트리에서도 숨긴다
• 모달이 열려 있는 동안 토스트 금지 — 모달 안 상태 변화는 모달 안에서(버튼 글자 변화·alert.m_inline·인라인 오류). 근거: 정의상 모순 + 네이티브 <dialog> 바깥 inert로 최상위 레이어의 토스트도 닫기·키보드·보조 기술 불가(결정 기록 docs-internal/2026-08-dialog-adoption.md)

스킬 (slur-guidelines)

• global.css에 4상태 스위치 동봉 — [data-state] > .i_status > .i_* 노출 전환(룩 없음). i_를 블록 대신 [data-state]로 스코프하는 유일한 예외로 명시
• ux-states.md·accessibility.md(D)에 모달 중 토스트 금지 규칙, css.md 스코프 규칙에 4상태 예외 명문화, SKILL.md 동봉 목록 갱신

스킬 (slur-design)

• components/state.css 신설 — 4상태 안내문 모양(여백·색) + i_loading 자동 스피너 + .btn[data-state="loading"] 스피너(기존 opacity만 → 스피너). 스켈레톤은 대시보드 어휘 때
• components/toast.css 신설 — toast_message 단일 토스트(모바일 하단 전체폭 → 640px 이상 우하단), m_success/m_warning/m_danger(alert와 같은 이름), 숨김은 display:none이 아니라 opacity·visibility(라이브 영역 컨테이너 선존재), role="status"/"alert" 컨테이너 분리
• components/modal.css → 네이티브 <dialog> 이관 — [open] 정본·::backdrop·@starting-style 모션. 문법(v1.6.0 1순위)과 어휘의 드리프트 해소. 토큰 --color-overlay 신설(라이트/다크)
• demo.html — State·Toast 섹션 추가, 모달을 <dialog> + showModal()로, JS를 data-action 위임 패턴으로 정리
• card.css의 .card.m_link:focus-visible 재선언 제거 — global의 a:focus-visible과 중복(자기 규칙 정리)
• 사이트: 화면 상태 설계·ARIA 최소 사용·global 레이어·피드백·팝업/모달 페이지를 같은 문장으로 갱신

---

v1.6.0 — 2026.08

복합 위젯 접근성 기준

방법론 확장

• 복합 위젯(포커스·방향키·알림)의 동작 기준 신설 — 근거는 표준으로만 병기(W3C APG · WCAG 2.2 · KWCAG 2.2), 목표 기준 WCAG 2.2 AA · KWCAG 2.2 선언(접근성 설계 철학)
• 모달 1순위 구현을 네이티브 <dialog> + showModal()로 전환 — 배경 inert·Esc 닫기·포커스 복귀를 브라우저가 제공. 커스텀 div[role=dialog]는 대안으로 유지(배경 inert + Tab 순환 + 포커스 복귀 직접 구현). 채택 근거·검증 기록은 docs-internal/2026-08-dialog-adoption.md
• 네이티브 상태 속성 규칙 신설 — dialog[open]·details[open]처럼 네이티브가 자기 상태를 속성으로 갖는 요소는 그 속성이 상태의 정본이며 data-state를 중복해 붙이지 않는다
• 방향키 위젯(탭·메뉴·라디오 그룹) 규칙 — Tab은 위젯 사이·방향키는 위젯 안(roving tabindex), 탭 활성화 기본값 = 자동, 사이트 내비게이션에 role="menu" 금지 명문화
• 라이브 영역 규칙 — 토스트 기본 role="status"(자동 소멸 허용), 긴급·비소멸만 role="alert", 컨테이너 선존재, 알림은 포커스를 옮기지 않음. 토스트 마크업의 role 불일치(alert/status 혼용) 통일
• 떠 있는 레이어 닫기 규칙(Esc · 비모달은 바깥 클릭 · 겹침 시 맨 위 하나 · 포커스 가림 금지), 툴팁 규칙, 복잡 위젯(셀렉트·콤보박스·날짜선택기) 위임 원칙
• 배치: 새 페이지 없이 기존 페이지 확장(키보드 내비게이션 · ARIA 최소 사용 원칙 · 팝업/모달 패턴 · 피드백 원칙)

스킬 (slur-guidelines)

• accessibility.md에 「복합 위젯: 포커스·방향키·알림」 섹션(판정 + A~F + 보류 목록) — 규칙마다 WCAG·KWCAG 번호 병기
• 모달 예시 <dialog> 전환(html.md·js.md) + 커스텀 오버레이 대안 코드, 탭 예시 완전형(패널·tabindex·방향키 핸들러), 토스트 role="status" 통일(component.md·ux-states.md), 드로어 포커스 관리 명시
• 체크리스트 접근성 항목 5개 추가(테스트 문장 + WCAG·KWCAG 번호 형식)

브라우저 지원 기준 신설

방법론 확장

• 「브라우저 지원 기준」 페이지 신설(핵심 개념) — 검증은 Chrome(크로미움 계열)·Safari 두 곳으로 고정, Firefox는 검증·판단 대상에서 제외(차단이 아니라, 표준 기반 코드는 검증하지 않는 브라우저에서도 동작한다는 전제)
• 네이티브 웹 기능 채택의 리트머스를 Safari 지원 여부 하나로 정의 — Firefox 미지원·지연은 무시(예: @starting-style 채택), Safari 미지원 기능은 제외 또는 향상 전용(2026-08 기준: closedby="any", popover="hint", appearance: base-select)이며 Safari 지원 시 재평가
• 기준의 배경 서사를 문서에 포함 — 웹의 보편성 철학(팀 버너스리), IE6·IE7 시절 크로스 브라우징이 “오차 보정 노동”이었던 이유(조건부 주석·CSS 핵·hasLayout), 에버그린·IE 종료·엔진 수렴 이후 “지원 범위 결정”으로 성격이 바뀐 과정
• 보편성 공감을 SLUR의 공식 입장으로 명시 — 표준·시맨틱·접근성을 문법의 일부로 두는 것이 그 실천임을 문서에 기록하고, 「설계 철학」 방향성에도 항목 추가

스킬 (slur-guidelines)

• SKILL.md에 「브라우저 지원 기준」 절 추가 — 문서와 동일한 규칙 요약
• 체크리스트 최종 확인에 Chrome·Safari 검증 및 Safari 리트머스 항목 추가

---

v1.5.0 — 2026.08

층 분리·이름 정리 + 스킬 개명 (slur-ux → slur-guidelines)

업계에서 굳은 층 이름(Carbon·Primer·Polaris·W3C DTCG)에 slur-를 붙여 구조를 정리했다. 규칙 내용은 바뀌지 않는다(하위호환).

구조

• SLUR을 네 층으로 정의 — guidelines(규칙 + 동봉 global.css) / tokens / components / patterns(후순위). 스킬(입구)은 그대로 2개: slur-guidelines(= 슬러 시스템), slur-design(= 슬러 디자인, tokens + components)
• 스킬 slur-ux → slur-guidelines 개명. 호출어 “슬러 시스템”·“슬러 규칙”은 그대로, “슬러 가이드라인” 추가. ~/.claude/skills 심볼릭 링크도 갱신
• CSS 원본을 스킬 폴더에 동봉 — system/global.css → skill/slur-guidelines/assets/global.css, system/tokens/·system/components/ → skill/slur-design/assets/. 스킬만 있으면 어느 프로젝트에서도 파일을 찾을 수 있다(절대경로·“복사하라” 의존 제거). system/에는 demo.html·README.md만 남김
• 로드 순서를 global.css → tokens → components → 프로젝트 CSS로 통일. 파일명 관례는 global.css 유지, common.css 같은 “공통 통”은 만들지 않는다(공통처럼 보이면 layout_* 또는 컴포넌트)
• slur-design 스킬에 모드(full / tokens-only), 프로젝트에 넣는 법, 하지 말 것(Tailwind·shadcn 혼용, 새 hex, 인라인 style, 토큰 재정의, 포커스 재선언, !important·id 선택자), 블록→파일 색인, 디자인 층 점검표 추가

공통 레이어 (global.css)

• 포커스 링 범위를 폼 컨트롤에서 a·summary·[tabindex]까지 확장 — 링크 키보드 포커스가 보이지 않던 문제 해결
• prefers-reduced-motion 대응 추가
• 토큰을 var(--x, 폴백)으로 참조 — 토큰 없는 프로젝트(규칙만 적용)에서도 단독 동작
• .a11y_hidden에 clip 폴백 추가(스킬 문서와 일치)

디자인시스템 (skill/slur-design/assets/)

• 자기 규칙 위반 일소 — 스위치 노브 리터럴 #fff → --color-on-brand, .btn.m_danger의 포커스 링 재선언 제거(global이 담당), 데모의 CSS id 선택자·인라인 style= 전부 클래스로 이동
• .btn.m_icon 정사각 아이콘 버튼 변형 추가(기본 40, m_small 32, m_large 48)
• 문서의 웹폰트 표기 Pretendard → Noto Sans KR(v1.4.1 전환분 반영), README의 존재하지 않는 fonts 토큰 항목 삭제

---

v1.4.1 — 2026.07

본문 폰트 전환 (Pretendard → Noto Sans KR)

사이트 (docs)

• 본문 폰트를 Noto Sans KR로 전환 — 소형 크기에서 힌팅·획 렌더링이 더 또렷해 장문 가독성이 개선됨
• --font-sans 토큰 선두 교체(사이트 전역 반영), Google Fonts 로드(400/500/600/700) + preconnect 적용
• system/demo.html 폰트 링크도 동일하게 정렬
• 「타이포그래피 선정 기록」 참고 문서 신설 — 동일 조건(텍스트·크기·행간·스무딩·테마) 비교 도구를 임베드해 폰트 선정 근거를 문서로 남김

---

v1.4.0 — 2026.07

시맨틱 마크업 · 제목 구조 신설 + CSS 구성 규칙 보강

방법론 확장

• 「시맨틱 마크업」 페이지 신설(core) — 콘텐츠 의미에 맞는 태그 사용, 목록·반복 항목은 ul/li로 묶기, 버튼(button)과 링크(a) 구분, 최소 마크업 원칙 정리
• 「제목 구조」 페이지 신설(a11y) — 페이지당 h1 하나 + 논리적 제목 구조, title과 h1의 역할 구분, 로고를 h1으로 쓰지 않기, 보이는 제목이 없어도 a11y_hidden으로 남기기, 레벨 건너뛰기 금지
• CSS 파일 구성 순서 규칙 명문화 — global → 레이아웃 → 컴포넌트 → 페이지 → 반응형(큰 구조 → 작은 구조, 페이지가 마지막이라 오버라이드 안전)
• 레이아웃 블록은 컴포넌트를 두지 않고 l_로 자족 — 수정 영향을 레이아웃 안으로 국소화, 컴포넌트 조합은 페이지가 담당
• 내부 요소 선택자는 가장 가까운 블록 밑으로 스코프 규칙을 page_·layout_까지 확장(단독 금지·중간 요소 스킵)
• 종속(내부 요소)이 기본인 이유 를 수정·관리 비용 관점으로 명시

디자인시스템 (system/)

• .a11y_hidden 유틸리티 신설 — 시각적으로 숨기되 보조 기술에는 노출(숨긴 제목·오프스크린 라벨용). display:none/visibility:hidden 금지 명시

---

v1.3.0 — 2026.07

기능 절제 원칙 신설

방법론 확장

• 「기능 절제 원칙」 페이지 신설 — 기능은 기본적으로 붙이지 않고 근거가 있을 때만 추가한다는 판단 기준 정립
• 플랫폼이 이미 제공하는 기능(예: 수동 새로고침 버튼)은 특수한 근거가 없으면 두지 않는다 — 중복 컨트롤 제거
• 비용 근거 명시 — 기능 대부분은 거의 쓰이지 않고(Standish 64%·Pendo 80%), 유지보수는 수명주기 비용의 60~80%
• 「설계 철학」 방향성에 “기능도 절제한다” 링크 연결

---

v1.2.0 — 2026.07

반응형 규칙 명문화 + 아이콘 버튼 정리

방법론 확장

• 「반응형 규칙」 페이지 신설 — Mobile-first 우선 고려(모바일 트래픽 60~64%, 리소스·비용 근거)와 분기점 최소화(기본 하나)(콘텐츠 기준 + 유지보수·비용 근거) 원칙 정립
• 스킬(slur-ux) 반응형 섹션에 동일 원칙 반영 — 기본 예시를 Mobile-first로 전환
• 재사용 단위 기준 블록 경계 규칙 신설 — 개별 요소가 항상 집합으로만 쓰이면 집합을 블록으로, 개별을 내부 요소(i_)로 둔다(예: ref_grid > i_card)

디자인시스템 (system/)

• 햄버거(메뉴) 버튼 .btn_menu 신설 — 터치 타깃 48×48 고정(모바일 최소 권장 Material 48·Apple 44 충족), 범용 .btn.m_icon 대체
• 데모 다크 모드 토글을 아이콘 버튼(달/해)로 변경

---

v1.1.0 — 2026.07

CSS 방법론 확장 + 디자인시스템 도입

방법론과 실물 디자인시스템이 함께 갖춰진 버전입니다.

방법론 확장

• 공통 레이어(global.css) 규칙 신설 — 리셋, 폼 컨트롤 상속, 포커스 링의 단일 선언
• 단위 기준 정립 — rem(정보 전달 값) / px(시각·구조 값) / em(텍스트 동반 아이콘) 판정 기준
• 토큰 운영 기준 — 실사용 기준 토큰화, 눈금 토큰 값 불변, 계층별 “사용” 정의, z-index 예외
• @import는 저작 구조 — 브라우저 도달 금지(번들 경유 또는 개별 link)

디자인시스템 (system/)

• 토큰 8종(colors·typography·spacing·radius·shadows·motion·breakpoints·z-index) + global.css
• 컴포넌트 10종: Button, Input, Select, Selection, Badge, Card, Alert, Modal, Navigation, Table
• 상태색 면 위 텍스트 on-토큰(--color-on-danger 등) — 다크 모드 대비 결함 수정
• 전 컴포넌트 데모(system/demo.html, 라이트/다크)

스킬 체계

• slur-ux(문법) / slur-design(어휘) 분리, 적용 범위 명문화 — 문법은 룩을 바꾸지 않는다

문서

• 「공통 레이어 (global.css)」 페이지 신설, 「토큰 및 변수 전략」 대폭 확장
• 중복 문서 병합 — 「구조 계층」→「UI 구조 모델」, 「지양하는 패턴」→「권장 / 비권장 사례」
• 문서 사이트에 SLUR 토큰 테마 적용

---

v1.0.0

초기 공개 버전

SLUR UX/UI System의 첫 번째 공식 버전입니다.

정립된 내용

• UI 구조 단위 구분
  • 레이아웃(layout_)
  • 페이지(page_)
  • 컴포넌트(접두사 없음)
• 내부 요소(i_) / 수정자(m_) 규칙 정립
• 구조 중첩 금지 원칙 명문화
• 클래스는 구조, 상태는 data-*로 분리하는 기준 정립
• Reference 문서 구조 확립
  • 클래스 네이밍 예제
  • 권장 / 비권장 사례
  • 체크리스트
  • FAQ