release: v0.11.0

packages/skill/references/reference-method.md

@@ -6,27 +6,27 @@
 
 | 가져간다 (원리) | 안 가져간다 (표현) |
 |---|---|
-| 그리드 비율 (5:7 비대칭) | 섹션 배치 그대로 |
-| 타입 스케일 비율 (1.333) | 폰트 조합 그대로 |
-| 색의 역할 배분 (60/30/10) | 색상값 |
-| 여백 리듬 (섹션 120 / 요소 24) | 섹션 순서 |
+| 그리드의 비대칭 관계 (관찰 예: 5:7) | 섹션 배치 그대로 |
+| 타입 단계의 관계 (관찰 예: 1.333) | 폰트 조합 그대로 |
+| 색의 역할 배분 (관찰 예: 60/30/10) | 색상값 |
+| 여백의 상대 리듬 (관찰 예: 섹션 120 / 요소 24) | 섹션 순서 |
 | 모션의 의도 (스크롤=시선 유도) | 애니메이션 시퀀스 |
 
+표의 숫자는 특정 사례를 설명하는 관찰 예시일 뿐, 다른 프로젝트에 그대로 적용할 법칙이 아니다. 관계가 현재 콘텐츠·언어·과업·렌더에서도 작동하는지 확인한 뒤 값을 정한다.
+
 ---
 
-## 1. 3-소스 합성 규칙
+## 1. 레퍼런스 슬롯으로 해체하기
 
-레퍼런스 1개는 모방, 2개는 절충, **3개부터 합성**이다. 단 **층위를 나눠서** 고른다.
+R1·R2·R3은 구조·톤·디테일을 섞어 복제하지 않기 위한 **검토 슬롯**이다. 세 슬롯을 채웠다는 사실은 합성의 품질을 보장하지 않는다. 프로젝트에 필요한 슬롯만 채우고, 비운 슬롯은 이유와 대체 근거를 기록한다.
 
 | 슬롯 | 가져올 것 | 어디서 |
 |---|---|---|
 | **R1 · 구조** | 그리드, 섹션 순서, 정보 위계, 여백 리듬 | 같은 업종·같은 목적 |
-| **R2 · 톤** | 색 역할, 타입 페어링, 형태 언어, 질감 | **반드시 다른 업종** (또는 웹이 아닌 것) |
+| **R2 · 톤** | 색 역할, 타입 페어링, 형태 언어, 질감 | 다른 업종 또는 웹 이외 매체를 우선 검토 |
 | **R3 · 디테일** | 모션 1개, 호버 1개, 전환 1개 | Codrops / Eyecandy / Design Spells |
 
-**R2가 R1과 같은 업종이면 합성이 아니다.**
-SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭.
-SaaS 구조 + 독립 출판사 톤 = 차별화.
+R2가 R1과 같은 업종이어도 브리프가 요구하는 브랜드·시장·제작 조건에 맞으면 가능하다. 같은 업종의 평균을 무비판적으로 복제하지 않도록, 가져오는 원칙·관찰·결정·검증을 분리해 기록한다.
 
 ### 목표 시장은 네 번째 레퍼런스가 아니라 경계 조건이다
 
@@ -37,7 +37,7 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
 ```
 
 - R1은 같은 업종·목적에 더해 **같은 목표 시장을 우선**한다. 구조에 단위·용어·연락 방식이 묻어 있기 때문이다.
-- R2의 `다른 업종` 규칙은 유지한다. 목표 시장 감각이 중요하면 **같은 문화권의 다른 업종**을 먼저 찾는다.
+- R2는 다른 업종 또는 같은 문화권의 다른 매체를 먼저 검토하되, 같은 업종이 더 적합하면 그 조건과 이유를 기록한다.
 - 다른 문화권 R3는 기법만 가져온다. 카피·색·상징·사진 연출까지 번지면 경계 조건 위반이다.
 - 같은 시장 자료가 부족하면 빈칸을 숨기지 말고, 어떤 관습을 공식 문서·현지 서비스로 별도 검증했는지 적는다.
 
@@ -47,41 +47,38 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
 1. 가독성·접근성이 언제나 이긴다. R2의 톤이 대비를 깨면 톤을 조정한다.
 2. R1 구조가 R3 모션을 이긴다. 모션 때문에 구조를 바꾸지 않는다.
 3. 브리프가 모든 레퍼런스를 이긴다. 충돌하면 레퍼런스를 버린다.
-4. **한 축은 한 소스에서만.** 그리드는 R1에서만, 팔레트는 R2에서만. 섞으면 이유 없는 절충이 된다.
+4. 한 축에 여러 출처가 영향을 주면 출처별 관찰과 최종 결정을 분리한다. 출처가 섞였다는 사실이 실패는 아니며, 근거 없이 절충한 경우만 다시 검토한다.
 
 ---
 
 ## 2. 6축 해체 프레임워크
 
-각 레퍼런스를 6축으로 뜯는다. **형용사는 기록이 아니다. 숫자나 규칙으로 적는다.**
+각 레퍼런스를 6축으로 뜯는다. **형용사만으로 끝내지 않는다.** 실측값, 관찰 가능한 규칙, 적용 조건을 함께 적고 실제 렌더에서 결정이 맞는지 확인한다. 아래 숫자 범위는 보편 판정이 아니라 관찰을 시작할 때 쓸 수 있는 예시다.
 
 **R3 예외**: R3는 사이트가 아니라 기법이다. 축 5(모션 언어) 하나만 채우고 나머지는 비운다.
 대신 R3에는 **구현 제약**(브라우저 지원, 성능 비용, 보간 조건)을 반드시 적는다.
 
 ### 축 1 — 레이아웃 그리드
-컬럼 수·거터 / 콘텐츠 최대폭과 뷰포트 비 / 대칭·비대칭(비율) / 그리드를 깨는 요소 / 본문 한 줄 글자 수(영문 45–75, 국문 25–40)
+컬럼 수·거터 / 콘텐츠 최대폭과 뷰포트 비 / 대칭·비대칭(비율) / 그리드를 깨는 요소 / 실제 본문 줄 길이와 읽기 맥락
 → *"무엇을 정렬시키고 무엇을 일부러 어긋나게 했나?"*
 
 ### 축 2 — 타입 스케일
-실제 사용된 크기 목록 / 그 사이 비율(1.25 또는 1.333이 표준) / 단계 수(3–5가 건강, 8+ 는 통제 실패) / 패밀리 수(2개 표준) / 굵기 대비 / line-height / letter-spacing
-→ *"최대 글자와 본문의 비는 몇 배인가?"* (4배 미만이면 위계 약함)
+실제 사용된 크기 목록 / 그 사이 비율 / 단계 수 / 패밀리 수 / 굵기 대비 / line-height / letter-spacing
+→ *"최대 글자와 본문의 비는 몇 배이고, 이 화면의 과업·언어·읽기 폭에서 위계가 보이는가?"*
 
 ### 축 3 — 컬러 역할
-색상값이 아니라 **역할**로 적는다. surface 단계 수 / text 3단계 유무 / accent 면적 %(10% 이하가 정상) / border 존재 여부 / state 색 분리 여부
-→ *"강조색을 지우면 여전히 읽히는가?"* (읽혀야 정상)
+색상값이 아니라 **역할**로 적는다. surface 단계 수 / text 위계 / accent 면적과 역할 / border 존재 여부 / state 색 분리 여부
+→ *"강조색을 지워도 정보 위계와 조작 상태를 이해할 수 있는가?"*
 
 ### 축 4 — 여백 리듬
-기본 단위(4 또는 8px) / 섹션 간 수직 여백(80–160px) / 요소 간 : 섹션 간 비율(1:4~1:6) / 여백 값 종류 수(4–6종이 건강) / 좌우 패딩
+기본 단위 / 섹션 간 수직 여백 / 요소 간 : 섹션 간 비율 / 여백 값 종류 / 좌우 패딩
 → *"가장 큰 빈 공간은 어디이고 왜 거기인가?"*
 
 ### 축 5 — 모션 언어
 트리거(로드/스크롤/호버/커서) / duration / easing / 정보 전달인가 장식인가 / reduced-motion 대응
 → *"모션을 전부 끄면 작동하는가?"* (작동해야 정상)
 
-**어떤 CSS 속성을 애니메이션하는지 반드시 적어라.** 하드 게이트 #8은 `transform`·`opacity` 만 허용한다.
-`stroke-dashoffset`·`height`·`clip-path`·`filter` 로 만든 기법을 R3로 골라놓고 4단계에서 발견하면
-그때는 이미 늦다. **1단계에서 걸러라.** 그 기법이 좋다면 `motion.md` 의 우회법 표에서
-같은 인상을 `transform`/`opacity` 로 내는 방법을 찾은 뒤에 채택해라.
+**어떤 CSS 속성 또는 스크롤 로직을 쓰는지 반드시 적어라.** `transform`·`opacity`는 저비용 기본이지만 다른 선택은 금지가 아니다. `stroke-dashoffset`·`height`·`clip-path`·`filter` 같은 기법은 1단계부터 비용 측정, 입력 간섭, 감소 모션, 지원 범위와 예산을 함께 기록해 `motion.md`의 계약으로 검증한다.
 
 ### 축 6 — 시선 흐름
 첫 진입점 / 2·3번째 / 비즈니스 우선순위와 일치 여부 / Z·F·수직 낙하 중 무엇인가 / CTA가 경로 위에 있나
@@ -90,7 +87,7 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
 > 색을 전부 제거했을 때 가장 강한 덩어리는 ___, 두 번째는 ___, 세 번째는 ___.
 > 이 순서는 비즈니스 우선순위 [1위 ___ / 2위 ___ / 3위 ___]와 일치한다 / 하지 않는다.
 
-일치하지 않으면 크기·굵기·대비를 조정한다. **색으로 해결하지 마라.**
+일치하지 않으면 크기·굵기·대비·공간·순서를 검토한다. 색만으로 해결하지 않고, 필요한 경우 색 역할도 프로젝트 토큰 안에서 조정한다.
 
 ---
 
@@ -98,19 +95,19 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
 
 - [ ] **1. 브리프를 한 문장으로 압축한다.** `[대상]이 [행동]하게. 느낌은 [형용사 2개].` 이 문장 없이 수집을 시작하지 않는다.
 - [ ] **1-b. 목표 시장 경계 조건을 쓴다.** 국가/생활권·기기·단위/통화·행동 관습·금지할 외래 문법. R1이 같은 시장인지 표시한다.
-- [ ] **2. galleries.md 라우팅 표에서 R1/R2/R3 갤러리를 정한다.** R2가 R1과 다른 업종인지 확인한다.
-- [ ] **3. 각 갤러리에서 원본 사이트 URL을 1개씩 확보한다.** 하위 페이지가 필요하면 **인덱스에서 `href`를 뽑아라. slug를 추측하지 마라** — 추측한 URL은 404가 난다.
+- [ ] **2. galleries.md 라우팅 표에서 필요한 레퍼런스 슬롯을 정한다.** R2의 업종·매체 선택 조건을 기록한다.
+- [ ] **3. 사용한 각 슬롯에서 원본 사이트 URL을 확보한다.** 하위 페이지가 필요하면 **인덱스에서 `href`를 뽑아라. slug를 추측하지 마라** — 추측한 URL은 404가 난다.
 - [ ] **3-b. 그 URL이 정본인지 검증한다.** 사용자가 특정 제품·브랜드를 지목했고 후보 도메인이 여럿이면 필수다. **HTTP 200은 살아있다는 뜻이 아니다.**
   - `curl -sS -o /dev/null -w "%{url_effective} %{http_code} %{size_download}\n" -L <url>` 로 **최종 URL·본문 크기**를 본다. 본문이 **1KB 미만이면 파킹 도메인을 의심하라** — 전형적 파킹 페이지는 `/lander` 로 보내는 JS 한 줄뿐이다.
-  - 후보들의 본문이 **바이트 단위로 동일**하면 전부 같은 파킹 서비스다.
+  - 후보들의 본문이 **바이트 단위로 동일**하면 공통 응답일 수 있다. 파킹이라고 단정하지 말고 제목·본문 정체성·소유자·정본 링크를 확인한다.
   - 정본 판정 근거는 **콘텐츠 안에서** 찾아라: 저장소 링크, 설치 명령에 적힌 패키지·스킬 이름, 소유자 계정, 문서 제목이 로컬 파일과 일치하는지.
-- [ ] **4. 원본 사이트 3개를 §4 템플릿으로 WebFetch 한다.** 갤러리 페이지가 아니라 원본이다. → 축 6·정보 위계·카피 톤을 얻는다.
+- [ ] **4. 사용한 원본 사이트를 §4 템플릿으로 WebFetch 한다.** 갤러리 페이지가 아니라 원본이다. → 축 6·정보 위계·카피 톤을 얻는다.
 - [ ] **5. §5로 computed style을 추출한다.** → 축 1·2·3·4를 얻는다. **이 단계를 건너뛰면 6축의 4개가 빈칸으로 남는다.**
 - [ ] **6. 텍스트 소스로 폰트 이름·무료 대체를 확정한다.** (Typewolf / Happy Hues / Eyecandy — galleries.md §3)
-- [ ] **7. 6축 해체 시트를 작성한다.** 숫자로. 6축에 안 들어가는 관측은 `6축 밖의 관측`에 적는다.
-- [ ] **8. 합성한다.** 축마다 어느 소스에서 가져왔는지 명시.
-- [ ] **9. 의도적 변형을 각 레퍼런스마다 1개씩 넣고 이유를 적는다.**
-- [ ] **10. antipatterns.md를 훑고 걸린 항목이 없는지 확인한다.**
+- [ ] **7. 6축 해체 시트를 작성한다.** 실측값 또는 관찰 가능한 규칙과 적용 조건을 쓴다. 6축에 안 들어가는 관측은 `6축 밖의 관측`에 적는다.
+- [ ] **8. 결정한다.** 출처 ID → 원칙/조건 → 관찰 → 결정 → 검증 계획을 프로젝트 `design.md` 또는 evidence 기록에 남긴다.
+- [ ] **9. 필요한 변형과 이유를 적는다.** 변형 개수는 슬롯 수와 무관하다.
+- [ ] **10. antipatterns.md를 훑고 발견한 후보를 프로젝트 계약과 실제 렌더로 평가한다.**
 
 ---
 
@@ -123,7 +120,7 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
 > 2. h1의 정확한 문장, 그리고 h2 전체 목록.
 > 3. CTA 문구 전부와 각각이 페이지 어디에 있는지.
 > 4. 내비게이션 항목 목록.
-> 5. 이 페이지가 방문자에게 시키려는 단 하나의 행동.
+> 5. 이 페이지가 방문자에게 시키려는 우선 행동과, 있으면 보조 행동. 각각이 어디서 어떤 위계로 제시되는지.
 > 6. 카피의 톤 — 평균 문장 길이, 1인칭/2인칭 사용, 전문용어 밀도.
 > 7. 숫자나 지표가 사용된 위치와 그 값.
 > 추측하지 말고 페이지에 실제로 있는 것만 답해라. 없으면 "없음"이라고 써라.
@@ -199,12 +196,12 @@ WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·
 > **먼저 `url` 을 봐라. 열려고 한 사이트가 아니면 나머지 값은 전부 버려라.**
 > 페이지가 실행 중 이탈하거나 리다이렉트되면 스크립트는 **다른 사이트의 값을 조용히 반환한다.**
 > 실측에서 2회 연속 발생했다. 이건 실패가 아니라 **오염**이다 — 숫자가 6축 시트에 들어가고,
-> 3단계 토큰의 근거가 되고, `design.md` 에 남고, 어디서도 검출되지 않는다.
+> 3단계 토큰의 근거가 되고, `design.md` 또는 프로젝트 evidence 기록에 출처 ID → 원칙/조건 → 관찰 → 결정 → 검증으로 남는다. `evidence-ledger.md`는 기록 형식을 안내하는 정본이다.
 
-- `fontSizes` 상위 항목 = 타입 스케일. 최다 크기가 본문이다. 최대÷본문이 **4배 미만이면 위계가 약한 레퍼런스**다.
-- `textColors` 상위 3~4개 = 텍스트 위계 단계. 3단계 이상이면 잘 설계된 것.
-- `backgrounds` 최다값 = 지배 배경. 등장 횟수가 적은 채도 높은 색이 **강조색**이고, 그 횟수가 곧 면적 감각이다.
-- `radii` 종류 수 = 형태 어휘. 1~3개면 통제된 것, 그 이상이면 우연히 결정된 것.
+- `fontSizes` 상위 항목 = 타입 스케일 후보다. 실제 본문 요소와 화면 위계를 같이 확인한다.
+- `textColors` 상위 항목 = 텍스트 위계 후보다. 색 수가 아니라 역할·대비·실제 렌더를 본다.
+- `backgrounds` 최다값 = 지배 배경 후보다. 채도·등장 횟수만으로 강조 역할이나 면적을 단정하지 않는다.
+- `radii` 종류 수 = 형태 어휘를 살필 출발점이다. 수가 아니라 토큰 역할과 화면 밀도로 평가한다.
 - `widths` 최다값 = 컨테이너 폭. `body.widthPx` = 텍스트 컬럼 폭.
 
 브라우저 도구를 못 쓰는 환경이면 **6축 중 4개가 빈칸이라는 사실을 산출물에 명시**하고 넘어간다. 채운 척하지 마라.
@@ -236,22 +233,34 @@ WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·
 - 행동 관습:
 - 금지할 외래 문법:
 
-## R1 · 구조 — <이름> <원본 URL>
+## R1 · 구조 — <출처 ID> <이름> <원본 URL>
 - 가져올 축: 그리드, 여백 리듬
-- 그리드: 최대폭 1200 / 비대칭 7:5 / 거터 32
-- 여백: 8px 단위 / 섹션 간 120 / 요소 간 24 (1:5)
+- 원칙/조건:
+- 관찰:
+- 결정:
+- 검증 계획:
+- 그리드: 관찰한 최대폭 / 비대칭 또는 대칭 관계 / 거터
+- 여백: 관찰한 단위 / 섹션 간 / 요소 간 / 관계
 - 6축 밖의 관측: (있으면) 카피 규범, 증거 제시 방식, 반복 노출 규칙 등
 - 변형: 최대폭을 1120으로 축소 — 본문 한 줄이 국문 40자를 넘었기 때문
 
-## R2 · 톤 — <이름> <원본 URL>   [업종: R1과 다름 ✓]
+## R2 · 톤 — <출처 ID> <이름> <원본 URL>   [업종/매체 선택 조건:]
 - 가져올 축: 컬러 역할, 타입 스케일
-- 컬러: 배경 1단계 / 텍스트 3단계 / 강조 1색 면적 6%
-- 타입: 세리프 디스플레이 + 그로테스크 본문, 비율 1.333, 최대/본문 4.2배
+- 원칙/조건:
+- 관찰:
+- 결정:
+- 검증 계획:
+- 컬러: 관찰한 역할 단계와 면적 관계
+- 타입: 관찰한 서체 역할·단계 관계·최대/본문 비율
 - 6축 밖의 관측: (있으면) 신뢰를 만드는 방식, 제품을 보여주는 방식
 - 변형: 비율을 1.25로 조정 — 정보량이 많아 중간 단계가 필요
 
-## R3 · 디테일 — <이름> <출처 URL>
+## R3 · 디테일 — <출처 ID> <이름> <출처 URL>
 - 가져올 축: 모션 언어 (R3는 이 축만 채운다)
+- 원칙/조건:
+- 관찰:
+- 결정:
+- 검증 계획:
 - 모션: 스크롤 진입 시 8px 상승 + 페이드, 320ms, ease-out
 - 구현 제약: 브라우저 지원 / JS 비용 / 보간 조건
 - 변형: 280ms로 단축 — 페이지가 길어 반복 노출이 잦음
@@ -261,17 +270,17 @@ WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·
 비즈니스 우선순위 [1 ___ / 2 ___ / 3 ___]와 일치한다.
 
 ## 안 할 것
-- (antipatterns.md에서 이 브리프에 특히 위험한 항목 3개 이상 명시)
+- (antipatterns.md에서 이 브리프에 특히 위험한 후보와 그 이유)
 ```
 
-**검증 조건** — 하나라도 빠지면 되돌아간다.
-- R1/R2/R3 각각 **원본 사이트 URL**이 있다 (갤러리 URL 아님)
+**검증 조건** — 사용한 슬롯마다 다음을 채운다.
+- 사용한 슬롯은 **원본 사이트 URL**이 있다 (갤러리 URL 아님)
 - 목표 시장 경계 조건이 있고 R1의 시장 일치 여부가 적혀 있다
-- R2의 업종이 R1과 다르다
-- 각 슬롯에 **가져올 축**이 명시되어 있다
-- 각 슬롯에 **변형 1개와 그 이유**가 있다
-- 6축 값에 숫자가 들어 있다 — **§5를 실행했거나, 못 했다면 어느 축이 빈칸인지 명시했다**
-- R3에 **구현 제약**(지원 범위·JS 비용)이 적혀 있다
+- R2의 업종 또는 매체 선택 조건이 적혀 있다
+- 각 슬롯에 **가져올 축**, 출처 ID → 원칙/조건 → 관찰 → 결정 → 검증 계획이 명시되어 있다
+- 필요한 변형과 그 이유가 적혀 있다
+- 6축은 실측값 또는 관찰 가능한 규칙으로 채웠고, §5를 못 실행했다면 어느 축이 빈칸인지 명시했다
+- R3를 썼다면 **구현 제약**(지원 범위·JS 비용)이 적혀 있다
 - 회색조 위계가 비즈니스 우선순위와 일치한다
 
 > 근거: research/references/02-methodology.md (조사일 2026-08-20)