boyang-hu/website-rebuild-skill

Website Rebuild (수상 경력 웹사이트 1:1 복제)

수상 경력이 있는 창의적인 웹사이트(WebGL / 스크롤 내러티브 / 포트폴리오 사이트)를 증거 기반 방식으로 독립적으로 실행 가능하고 재현성을 검증할 수 있는 프로젝트로 복제합니다. "비슷해 보이는" 모조품이 아닙니다. 즉, 원본 사이트 번들을 유일한 사양서로 삼고, 정량적 검수 기준으로 완성도를 측정하는 행 단위 포팅입니다.

이 방법론은 6개의 연속적인 실제 프로젝트(작업 기간이 6.5주에서 1일로 단축됨)에서 정제되었으며, 이후 22개의 완전한 복제 + 5개의 폐쇄된 사이트 보존 복구로 지속적으로 보강되었고, 43개 사이트의 경계 탐색 테스트를 통해 적용 범위가 보정되었습니다(목록은 저장소 README의 '검증된 웹사이트' 참조).

사용 전제 및 권한 ⛔ 필독

본 스킬은 학습 및 연구 목적의 충실한 복제를 위한 것으로, 수상 경력이 있는 창의적인 사이트의 구현 기법을 연구하는 데 사용됩니다. 적용 대상은 귀하가 소유하고 있거나, 사용이 허가되었거나, 공개적으로 접근 가능하고 학습 및 모방이 허용된 웹사이트입니다. 보호된 콘텐츠를 무단 수집하거나, 접근 제어를 우회하거나, 타인의 저작물을 상업적으로 도용하는 도구가 아닙니다.

실행 시 다음 경계를 준수해야 합니다.

• 대상 사이트 규칙 존중: robots.txt, 서비스 약관 및 저작권을 준수합니다. 크롤링은 저빈도, 단일 세션으로 유지하며 대상 사이트에 비정상적인 부하를 가하지 않습니다. ⛔ robots.txt는 전체 사이트 스위치가 아닌 경로별 허가 선언입니다. 각 URL별로 판단합니다(선택 그룹 → 최장 일치 → 불일치 시 허용). Disallow 행이 하나라도 있다고 해서 '전체 사이트 금지'라고 판단해서는 안 됩니다 (거의 모든 상업 사이트에는 /cart, /checkout, /admin에 대한 Disallow가 있습니다). 금지는 행동 범주별로 분류해야 하며, '크롤링'에 대한 금지만이 미러링 범위에 영향을 미칩니다. 거래에 대한 금지는 '결제를 클릭하지 마라'는 의미일 뿐입니다. ⭐ "이해할 수 없음/확실하지 않음"은 "금지"와 같지 않습니다. 제출을 진행하고, 중단하거나 크롤링 범위를 임의로 축소하지 마십시오. 해석 방법은 references/legal-and-deploy.md §0.3을 참조하십시오.
• 보호된 경계 침범 금지: 로그인, 유료 벽 또는 권한이 필요한 콘텐츠는 수집하지 않습니다. 본 스킬은 익명으로 공개 접근 가능한 리소스만 처리합니다. 대상 사이트가 명시적으로 이러한 복제를 금지하는 경우 중단하고 사용자에게 알립니다. '명시적 금지'의 기준은 legal-and-deploy.md §0.3.6에 하드코딩된 4가지 임계값이며, 그 외의 모든 불확실성은 중단이 아닌 제출로 처리합니다.
• 산출물은 기본적으로 비공개: 기본값은 noindex이며 공개 배포하지 않습니다. 공개 전에 반드시 자산별 저작권 증거를 확보하고 "비공식 복제"임과 원저작자 정보를 명확히 표시해야 합니다 (references/legal-and-deploy.md 참조).

⛔ 법적 판단은 사용자의 몫이며, 스킬은 증거 수집과 제시만 수행합니다 (세 가지, 전체 과정에 적용).

1. 결정권은 사용자에게 있습니다: 스킬은 사실을 수집하고(자산별 귀속, 라이선스 상태, 제3자 권리자, 원본 사이트 운영 여부, 산출물 내 제3자 식별자), 옵션과 각 옵션의 위험 경계를 나열하며, 제안과 이유를 제공합니다. "공개/배포/재배포/외부 전시가 가능한지"에 대한 사항은 반드시 아래 'User Input Tools'를 사용하여 사용자에게 명시적으로 회부해야 하며, 에이전트가 스스로 법적 결론을 내리고 계속 진행해서는 안 됩니다.
2. 사용자의 명확한 결정을 받기 전까지는 안전한 기본값을 실행합니다: 비공개 저장소 + noindex + 공개 배포 금지 + 재배포 금지. 사용자에게 이것이 기본 동작임을 설명하고 ("여러분이 결정하기 전까지는 외부로 보내지 않습니다"), 에이전트가 내린 법적 결론이 아님을 명시합니다. 두 경우의 책임 소재는 완전히 다릅니다. 에이전트는 보수적인 방향으로만 기본값을 실행할 수 있으며, 공개적인 방향으로 나아가려면 사용자의 명확한 결정이 필요합니다.
3. ⛔ 법적 고려 사항으로 인해 미러 무결성이나 게이트의 적용 범위가 축소되어서는 안 됩니다: 미러는 증거 기반이며, 무결성은 기술적 불변량입니다 (4회 반복, 폐쇄 게이트, GAP=0이 모두 이 위에 구축됨). 캡처하지 않는 데는 기술적 이유만 있을 수 있습니다 (파일/서버가 제공하지 않음, 권한 또는 로그인 필요, 원본 사이트의 명시적 금지). 모든 사항은 반드시 기록해야 합니다. '어차피 공개하지 않을 거니까', '더 저장해서 뭐 하냐'와 같은 법적 이유로 구멍을 남겨서는 안 됩니다. 실제 사례: 한 프로젝트에서 "산출물은 절대 공개되지 않는다"는 이유로 한 유형의 자산을 "기록만 하고 재수집하지 않음"으로 처리하여, 약 60%의 자산이 누락되었지만 5개 게이트는 항상 초록불이었으며, 4개의 주요 이정표가 숨겨졌습니다 [objectarchive]. 법적 결정은 산출물이 어떻게 사용되는지에 영향을 미칠 뿐, 증거 기반의 완전성에는 영향을 미치지 않습니다.

적용 범위 ⛔ 필독

주 적용 분야 (A 클래스): 콘텐츠가 정적으로 호스팅되고, 모든 동작(애니메이션/상호작용)이 클라이언트 측 정적 자산에 저장된 사이트입니다. 명령형 WebGL/Canvas 장면, GSAP 타임라인, 베이킹된 데이터 파일(GLB/.buf/.riv), 축소되거나 난독화되지 않은 번들입니다. 대부분의 Awwwards 스타일 크리에이티브 사이트가 여기에 속합니다.

조건부 지원 (B 클래스): 파이프라인은 성립하지만 추가적인 시나리오 처리가 필요한 경우입니다(Shopify 플랫폼 계층 분리, 타사 스토리지 버킷 자산, 런타임 API 스냅샷, SSG 페이로드 확장). 현재 버전의 가이드는 대부분의 B 클래스 시나리오를 다루지만, 다루지 않는 경우 사용자에게 위험을 명시해야 합니다.

명시적 거부 (C/D 클래스):

• C1 (v0.3부터 가능: 재구성형 리버스 엔지니어링): 서버 측 컴포넌트 소스는 실제로 전송되지 않지만, 그 완전한 출력(flight 스트림)이 각 페이지 HTML에 인라인으로 포함되어 있어 대조 가능한 사양서 역할을 합니다. 경로: flight-decode로 좌표계 구축 → 재구성 가능한 Next 프로젝트 재구성 (클라이언트 측 컴포넌트는 C2 방식으로 문자 그대로 번역, 서버 측 컴포넌트는 flight 트리에서 추론하여 명시적으로 등록된 추론물로 역추론) → verify-flight 의미 게이트로 수렴 (모듈 ID 전역 전단사). 실제 테스트 rauchg.com(Next 16/Turbopack): 18/18 라우트 의미 일치, 블라인드 리버스 엔지니어링 정답 구조 ≈95%/동작 ≈98%. ⚠ C1의 L2/L3 병합: 첫 번째 산출물은 '사람이 작성한 소스 코드 + 게이트가 증명하는 동등성'입니다. 전체 프로세스는 references/rsc-reconstruction.md 참조.
• C2 (가능, A 클래스로 실행): ⭐ 작성 방식은 선언적이지만 소스 코드가 전송됨 (R3F / Theatre / Vue SFC 컴파일 결과물). 실제 R3F 사이트 테스트: useFrame 콜백 내부는 MathUtils.damp(x, y, 7, t)와 같은 일반적인 명령형 코드였으며, 18개 모듈을 문자 그대로 슬라이스하여 페이지에 교체한 결과 CLEAN, 8개 canvas 모두 존재, 교차 측정 99.5%. 슬라이서는 패러다임을 신경 쓰지 않습니다. 바이트를 자를 뿐입니다. 렌더러는 플랫폼 레이어로 미러에서 제공합니다. ⛔ 판별자는 라이브러리 이름이 아니라 '클라이언트가 동작 소스를 보유하고 있는지'입니다 (scope-and-fingerprint.md §4.0.1).
• D: 동작의 주체가 서버에 있는 경우(CMS 콘텐츠 사이트, 전자상거래 장바구니/재고, A/B 실험 버킷, 개인화 주입) – 클라이언트에 이식 가능한 대상이 없으며 결정론적 검수 기준이 없습니다.

X 클래스 (복구 가능): 원본 사이트가 사라진 경우(도메인 변경/플랫폼 회수/경로 제거/대체)이지만 Internet Archive에 캡처가 있는 경우가 많습니다. scripts/wayback-mirror.mjs는 CDX 인덱스에서 앵커 포인트 + 시간 창을 기준으로 일관된 시점을 선택하고 id_ 원본 바이트를 가져와 표준 미러로 만듭니다 (하위 게이트가 정상 작동). 구멍은 기정사실로 wayback-holes.txt에 등록됩니다 (읽기 방법 및 프로세스는 references/archival-rescue.md 참조). ⭐ 복구 산출물은 표준 미러입니다. X 클래스는 L3 전체 과정을 완료할 수 있습니다 (실제 첫 실행 테스트: 전략 A 셸 + 값 게이트 9,856개 샘플 모두 일치 + 픽셀 대역폭 내 + 자체 포함 게이트, 의미를 변경해야 하는 게이트 없음). ⛔ 'CDX에 없어야 진짜 불가능'은 사이트 단위가 아닌 자산 레이어 단위로 읽어야 합니다: IA 크롤러는 JS를 실행하지 않으므로, 매니페스트/조립 기반 사이트는 코드 레이어 100% 커버리지가 가능하지만 화면 레이어 커버리지는 0일 수 있습니다 (실제 사례: 157/160 자산이 어떤 연도에도 캡처 없음, 인터넷 끊기면 흰 화면) – Step 0에서 먼저 레이어별 커버리지 정찰(추론 + CDX 접두사 쿼리)을 수행하여 복구 깊이를 예측합니다 (archival-rescue.md §1.4 참조). 역대 수상 사이트의 실제 실종률은 약 29%입니다. 이것이 "가능한 한 빨리 미러링하는 것"이 이 스킬의 제1 규율인 이유이기도 합니다.

등급 판정은 Step 0의 핑거프린트 정찰에 의해 결정됩니다. 전체 판정 트리는 references/scope-and-fingerprint.md를 참조하십시오. 거부 시에는 이유와 해당 사이트가 어떤 클래스에 속하는지 설명해야 하며, 무리하게 실행해서는 안 됩니다.

User Input Tools

사용자에게 질문해야 하는 경우 (범위 확인, 법적 결정, 외부 의존성 결정): 우선 현재 런타임의 내장 질문 도구(예: AskUserQuestion)를 사용합니다. 없으면 번호가 매겨진 질문 목록을 출력하여 사용자가 번호로 답변하게 합니다. 여러 질문을 한 번에 병합하여 질문할 수 있습니다. 법적 질문은 legal-and-deploy.md §0.1의 5단계 형식으로 작성합니다: 사실 / 확인 불가능한 사항 / 옵션 / 각 옵션의 위험 경계 / 제안 및 현재 기본 동작.

헌법 (6가지 규율, 전체 과정에 적용)

다음 6가지 규율은 6개의 원본 프로젝트에서 '헌법적'이라고 불렸으며, 위반 시 이후 단계에서 버그 형태로 대가를 치르게 됩니다.

1. 미러는 불가침: mirror/ 디스크 파일은 절대 수정하지 않습니다. 모든 로컬라이제이션 적응(CDN 재작성, 외부 링크 stub)은 서비스 계층 응답 시 동적으로 완료됩니다.
2. 원본 사이트 코드가 유일한 판결 기준이며, 시각적으로 수정하지 않습니다: 모든 수정 사항은 번들/CSS/미러 HTML에서 해당 행 번호를 찾은 후에만 적용합니다. 시각, 모션, 상호작용을 눈으로 조정하지 마십시오.
3. 원본에 있는 것은 모두 있어야 하고, 원본에 없는 것은 만들지 않습니다: 보상용 CSS/JS를 자체 제작하지 않습니다. 안 닮아도 괜찮으니 규칙을 새로 만들지 마십시오. 자체 제작 패치는 메커니즘 정렬 후에 버그로 역전됩니다.
4. 버그 / 죽은 코드 / 이상한 작성 방식도 그대로 복사하고 수정하지 않습니다: 압축된 코드의 모든 이상한 작성 방식은 동작 자체일 수 있습니다. "선의의 수정"이 전환을 망가뜨린 실제 사례가 있습니다 (porting-discipline.md 참조).
5. 의도적인 차이는 반드시 등록해야 합니다: "원본이 어떻게 했는지 / 우리가 어떻게 했는지 / 이유 / 어떤 조건에서 재고할 것인지"를 명확히 기록합니다. 등록되지 않은 차이는 모두 버그로 간주합니다.
6. 코드와 문서는 동일한 커밋으로: 각 이정표는 쌍으로 커밋합니다 (Port xxx + Update rebuild plan: xxx). 로그에는 반드시 산출물 / 검수 / 교훈 / 다음 중단점 (행 번호 포함)이 포함되어야 합니다.

⭐ 규율 3과 M(n+1)의 경계: src/는 명시적으로 등록된 파생물이며, 원본에 대한 단정이 아닙니다. 따라서 src/에서 이름을 바꾸거나 모듈을 분할하거나 주석을 추가하는 것은 '창작'이 아닙니다. 규율 3이 제한하는 것은 '비슷해 보이게 하기 위해 동작을 자체 창작하는 것'이지, '이미 동등함이 증명된 코드를 읽기 쉽게 만드는 것'이 아닙니다. 그러나 두 가지 경계는 넘을 수 없습니다: ① 구조적 재작성은 기본적으로 금지됨 (중복 병합, 공용 함수 추출, 알고리즘 변경 – 이는 동등성을 판정 불가능하게 만듦); ② 주석의 추측은 반드시 추측으로 표시해야 함, 리버스 엔지니어링 노트의 추측을 진술문으로 작성해서는 안 됩니다. port/와 mirror/는 여전히 단 1바이트도 수정할 수 없습니다. 자세한 내용은 references/readable-source.md §3.4 및 §5를 참조하십시오.

Workflow

Progress Checklist

[ ] Step 0  핑거프린트 정찰 및 범위 게이트 ⛔ (클래스 A/B/C/D/X 판정; C/D/X는 거부 또는 안내, 다음 단계로 진행 금지)
[ ] Step 1  착공 평가 (아키텍처 반증, 항목별 난이도 별점, 작업 기간 추정, 사용자와 범위 + 종착점 L1/L2/L3 확인)
[ ] M0      미러 증거 수집 ⛔ (BFS 크롤러 + CDP 보충 기록 + manifest 장부; GAP=0)
[ ] M0.5    미러 오프라인 실행 ⛔ (0 404 / 0 콘솔 오류 / 0 외부 링크; serve.mjs 서빙) ← L1 미러 아카이브 종착점
[ ] M1      리버스 엔지니어링 좌표계 구축 ⛔ (_pretty 버전 고정 및 확장; engine-notes는 모든 코드보다 먼저; 기술 스택 고정; REBUILD_PLAN 수립)
[ ] M2+     엄격한 소스 추적 포팅 (의존성 순서에 따른 이정표 진행; 먼저 엔드투엔드 연결 경로 하나를 세로로 절단; 각 이정표 콜드 스타트 테스트 + CLEAN 게이트)
[ ] M(n-1)  대조 검수 (verification-gates.md 의사 결정 트리에 따라 게이트 유형 선택; 근본 원인 수정, 파라미터 튜닝으로 얼버무리지 않음)
[ ] M(n)    마감 ⛔ (콜드 헤드 리뷰 / 모듈 목록 대조; 저작권 증거 수집 + 사용자에게 제출하여 결정 – 공개 배포 전에 반드시 완료) ← L2 엔지니어링 복제 종착점
[ ] M(n+1)  소스 코드화 (port/ → src/: 모듈 분할, 디난독화 및 이름 변경, 주석 추가, 자체 포함) ← L3 소스 코드화 종착점

⛔ = 차단 게이트: 검수 기준을 충족하지 못하면 다음 단계로 진행할 수 없습니다.

Flow

Step 0 — 핑거프린트 정찰 및 범위 게이트. references/scope-and-fingerprint.md를 로드하고, 사용자가 제공한 URL에 대해 탐지 프로토콜을 실행합니다 (경로 수준까지 GET, 최종 URL 동일성, 이중 캡처 diff, 종/연대 확인, 번들 초기 검사). 판정 등급과 근거를 출력합니다. A/B 클래스는 계속 진행합니다. C/D/X 클래스는 사용자에게 설명 후 중단하거나 안내합니다.

Step 1 — 착공 평가. references/recon-and-rating.md를 로드합니다. 먼저 아키텍처 가설을 반증합니다 (의존성 테이블은 거짓말을 할 수 있음). 항목별 난이도에 별점을 부여합니다 (자료/3D/스크롤 편곡/비공개 형식/플랫폼 레이어). 사용자에게 복제 범위 (전체 사이트 또는 특정 페이지)와 기대치를 확인합니다.

⭐ 같은 질문에서 사용자가 종착점을 선택하게 합니다 (3단계 사다리, 판정 등급 결론과 등급별 비용 추정치를 포함하여 질문하고, 건조하게 옵션만 나열하지 마십시오):

종착점	답변하는 질문	종료 시점	일반적인 용도
L1 미러 아카이브	어떻게 생겼는가	M0.5	아카이브, 오프라인 감상 (수상 사이트 연간 실종률 약 29%)
L2 엔지니어링 복제	무엇을 하는가	M(n)	배포 가능하고 검증 가능한 1:1 (저작권 증거 수집 및 배포 평가 포함)
L3 소스 코드화	어떻게 작동하는가	M(n+1)	구현 기법 연구 및 학습

사다리는 단조롭습니다. 낮은 단계를 선택해도 손해는 아닙니다: 각 단계는 다음 단계의 접두사이며, 미러 규율은 시간에 민감한 부분이 항상 가장 먼저 완료되도록 보장합니다. 오늘 L1을 선택해도 나중에 업그레이드하려면 언제든지 계속 실행할 수 있습니다 (이 점을 사용자에게 설명합니다). "이걸 내 프로젝트로 만드는 것" (스캐폴딩)은 본 스킬의 단계가 아닙니다. 사용자가 물으면 references/beyond-the-rebuild.md로 안내하여 인계합니다. 그건 사용자의 엔지니어링이며, 스킬은 "사람이 읽을 수 있을 정도의 진실"까지만 다룹니다.

M0 / M0.5 — 미러 증거 수집. references/mirroring.md를 로드합니다. scripts/mirror-site.mjs BFS 크롤링과 scripts/netcapture.mjs 실제 브라우저를 통한 보충 기록을 사용합니다. manifest는 파일별로 sha256을 기록합니다. redirect: manual 규율을 따르며, 외부 의존성은 항목별로 결정합니다. scripts/verify-mirror.mjs는 미러 자체의 게이트입니다 (5가지 단언, 오프라인 게이트보다 먼저 실행 – 하위 게이트는 모두 "렌더링이 가능한가"를 묻지만, 잘못된 미러에서는 모두 초록불이 될 수 있습니다. HTTP 200이 '해당 리소스를 가져왔음'을 증명하는 것은 아닙니다.). scripts/serve.mjs는 미러를 서빙하고 오프라인 검수를 수행합니다. 이 단계는 항상 가장 먼저 수행합니다. 원본 사이트는 언제든지 사라지거나 변경될 수 있으며, 미러는 전체 프로젝트의 유일한 증거 기준이자 이후 모든 대조 작업의 참조 서버입니다.

M1 — 리버스 엔지니어링 좌표계 구축. references/reverse-engineering.md를 로드합니다. ⛔ 첫 번째 동작은 번들 형태를 판정하는 것입니다 (플랫 병합 / 모듈식 번들링 / 다중 청크). 그런 다음 도구를 선택합니다. 계층 테이블은 최상위 선언문을 스캔하는 반면, webpack 번들 결과물의 최상위 선언문 수는 0개이며, 경계와 의존성 가장자리는 번들러에 의해 결정됩니다 (실제 사례: 24,378행 → 569개의 기존 모듈, scripts/module-map.mjs 사용). 컨테이너를 인식하지 못하면 FATAL이며, 계층 테이블로 대체하는 것은 금지됩니다 (§0.5). scripts/beautify-bundle.mjs (js-beautify 1.15.1 고정)를 사용하여 번들을 _pretty/로 확장합니다. 이후 행 번호는 전체 프로젝트의 유일한 소스 추적 좌표계가 됩니다. 어떤 코드보다 먼저 docs/engine-notes.md를 작성합니다 (템플릿: assets/templates/engine-notes.md). 기술 스택은 번들 증거를 통해 정확한 버전을 확정합니다. 데이터 기반 애니메이션은 먼저 값 장부를 덤프합니다. REBUILD_PLAN.md를 수립합니다 (템플릿: assets/templates/rebuild-plan.md).

M2+ — 엄격한 소스 추적 포팅. references/porting-discipline.md를 로드하고, 분기 라우팅 테이블에 따라 해당 시나리오 가이드를 로드합니다. 각 포팅 파일의 헤더에는 원본 행 번호 범위를 명시합니다. GLSL/매직 넘버/데이터는 문자 그대로 추출합니다. 데이터 자산 스크립트는 추출하여 저장하며, 수동으로 필사하지 않습니다.

M(n-1) — 대조 검수. references/verification-gates.md 및 references/determinism.md를 로드합니다. 전체 사이트 렌더링의 범위는 scripts/sweep-routes.mjs를 사용합니다 (모든 라우트를 하나의 브라우저로, 라우트별 0 오류/0 실패/0 외부 링크 + 상호작용 훅 및 라우트별 수집). 단일 라우트의 깊이에만 probe.mjs를 사용합니다. ⛔ 라우트별로 Chrome을 수동으로 시작하는 루프를 만들지 마십시오. 비용은 브라우저 시작 횟수로 계산되며, 동시 프로브는 서로의 고아 프로세스를 수집할 수 있습니다. ⚠ 잔차를 귀인하기 전에 먼저 자체 비교 대역폭을 구축하십시오 (pixelcompare --self, 측면당 ≥4회, 교차 실행) – 대역폭이 없는 잔차는 모두 UNCLASSIFIED이며, UNCLASSIFIED는 통과가 아닌 실패입니다. 게이트 유형 선택: SSR/정적 HTML 산출물이 있으면 먼저 바이트 게이트를 구축합니다. DOM 정적 장면은 엔트로피 소스를 고정한 후 byte-equal을 사용합니다. 라이브 장면 (WebGL/비디오/랜덤 위상)은 정량적 지표로 축소하고 노이즈를 분류합니다. 데이터 기반 애니메이션은 값 프로브 게이트를 보충합니다. CLEAN 게이트가 전체 과정을 보장합니다. 타이밍 버그를 판정하기 전에 프로브를 먼저 보정합니다 (references/environment-traps.md 참조).

M(n) — 마감. 콜드 헤드 리뷰: 번들 최상위 클래스/모듈 목록을 하나씩 대조하여 적용 지점을 확인합니다 (기능 테스트로는 전체 누락을 감지할 수 없으며, 목록식 대조만 가능합니다). references/legal-and-deploy.md를 로드하여 저작권 증거 수집을 완료하고 결정을 사용자에게 제출합니다. 사용자가 결정하기 전까지는 안전한 기본값을 실행합니다 (비공개 + noindex + 배포 금지). 공개 전에는 반드시 자산별로 증거를 수집하고 비공식 복제임을 명확히 표시해야 합니다.

M(n+1) — 소스 코드화. references/readable-source.md를 로드합니다. M(n)까지의 산출물은 정확함이 입증되었지만 사람이 읽을 수 없습니다 (실제 사례: 14,271행이 하나의 파일에 몰려 있고, e가 2962번 나타나며, 주석은 0.2%에 불과함). 이 단계에서는 port/를 src/로 재작성합니다: 모듈 분할 → 스코프 안전하게 디난독화 및 이름 변경 → 구간별 주석 추가 → 자산을 복사하여 자체 포함 상태로 만듭니다. ⛔ 분할 세분성은 자유롭게 선택할 수 없습니다. 플랫 스크립트의 선언 순서는 평가 순서와 동일합니다. 세분성은 세 가지 하드 제약 조건 (상호 참조 / 평가 순서 / import 바인딩 재할당 불가)에 의해 결정됩니다. 먼저 분할 계획을 수립하여 사람이 검토하게 한 후에 자릅니다. 거대 모듈을 만나면 먼저 '소수의 마지막 싱글톤에 대한 지연 바인딩'의 이점 곡선을 측정한 후 결정합니다 (실제 사례: 6개의 바인딩으로 11,246행에서 1,013행으로 줄었지만, 모듈 시스템을 교체하려면 동일한 세분성을 얻기 위해 전체 도구 체인을 희생해야 함). ⭐ '이 작업은 불가능하다'는 판단은 매우 신뢰할 수 없습니다. 실제로 두 번의 '구조적으로 불가능' 판정이 있었고, 두 번 모두 원인은 자신의 도구에 있는 한 줄짜리 버그였습니다. 먼저 측정 도구를 의심하고, 그 다음에 대상을 의심하십시오 (readable-source.md §3.1–3.1.3). ⛔ 전제 조건은 협상 불가: 모든 게이트가 먼저 초록불이어야 합니다. 판정자 없는 리팩토링은 맹목적인 수정입니다. meanAbsDiff 0.00의 판정자가 있으면 모든 단계가 확실하게 증명될 수 있습니다. 이것이 리팩토리가 가질 수 있는 최상의 조건이며, 또한 가장 마지막에 수행되어야 하는 이유입니다. 기존 게이트는 모두 원래대로 재사용됩니다 (대상은 src/ 빌드 산출물로 변경되며, 허용 오차는 완화할 수 없음). 추가로 심볼 매핑 게이트와 자체 포함 게이트를 추가합니다. ⛔ 구조적 재작성 (중복 병합, 공용 함수 추출, 알고리즘 변경)은 기본적으로 금지됩니다. 이렇게 하면 게이트가 '동등성을 증명하는 것'에서 '동등하지 않음을 발견하지 못한 것'으로 퇴보하기 때문입니다. ⭐ 규율 4는 이 단계에서도 유효합니다: 이제 코드를 읽을 수 있게 되었으며, "이건 분명히 버그다"라는 충동이 그 어느 때보다 강해지겠지만, 여전히 동작 자체일 수 있습니다.

⭐ 컨테이너가 없는 스코프 호이스팅 산출물 (Vite/esbuild, 문자 그대로 계층별로 제공되는 사이트)은 다른 경로를 따릅니다: 재작성하지 말고, 자르십시오. 연결식 분해 (scripts/census-bundles.mjs로 청크 그래프 및 좌표 생성 → scripts/slice-esm.mjs로 선언 단위로 잘라 의미론적으로 명명된 부품으로 만들고, 순서대로 연결하면 바이트 단위로 원본과 동일 → scripts/verify-reassembly.mjs로 한 번에 확정, 바이트 동등이 성립하면 모든 런타임 게이트의 판정이 무료로 이전됨). 실행 측은 변경되지 않으며, 브라우저는 계속 원래 청크를 실행합니다. 자세한 내용은 readable-source.md §3.0.6을 참조하십시오.

분기 라우팅 테이블

Step 1 정찰 결과에 따라 로드할 시나리오 가이드가 결정됩니다 (필요에 따라 로드하며, 전체를 한 번에 로드하지 마십시오):

정찰 발견 사항	로드
Next.js App Router / RSC (self.__next_f flight 스트림) – C1 재구성형 리버스 엔지니어링	references/rsc-reconstruction.md
WebGL / Canvas 장면 (three.js, 자체 엔진, GLSL)	references/webgl-scenes.md
GSAP / 베이킹된 애니메이션 데이터 / CSS 변수 애니메이션 / 자체 입력 상태 머신	references/animation-recovery.md
비공개 바이너리 형식 (.buf / .sog / VAT / GLB 타임라인 / .riv)	references/binary-formats.md
Shopify 스토어 (핑거프린트: cdn/shop, Shopify.theme, cdn.shopify.com)	references/shopify-platform.md
Sanity CMS (핑거프린트: cdn.sanity.io/images/<projectId>/, *.api.sanity.io, 페이로드 내 _key/_type/_ref 덩어리) – ⛔ 등급 판정은 콘텐츠 베이킹 시점을 기준으로 하며 라이브러리 이름이 아니며, auto=format 자산은 Accept 헤더에 따라 다른 바이트를 협상함	references/sanity-platform.md
DOM 계층 전략 선택 (모든 사이트에 필수; Webflow 내보내기 / 정적 단일 페이지 / 프레임워크 SSR 분기 상이, 추가로 'DOM이 3D 엔진에 의해 좌표 소스로 읽히는' 직교 제약 조건 있음)	references/dom-shell-strategies.md
대용량 자산 (수백 MB 미디어 / 라이선스 폰트)	references/asset-management.md
헤드리스 탐지 행동 이상 / 환경 문제 의심	references/environment-traps.md

Step Summary

단계	주요 동작	차단 게이트 검수	산출물
Step 0	핑거프린트 탐지 및 등급 판정	등급 명확 및 사용자에게 통보 완료	등급 결론 및 근거
Step 1	반증 + 평가 + 범위 확인	사용자 확인	난이도 평가표, 범위 합의
M0/M0.5	미러링 + 장부 + 오프라인 실행	verify-mirror 5항목 모두 초록불; GAP=0; 0 404/0 오류/0 외부 링크	mirror/ (읽기 전용), manifest, serve.mjs 참조 서버
M1	번들 확장, 리버스 엔지니어링 노트, 스택 확정	engine-notes 완료; 버전 확정표 완료	_pretty/, docs/engine-notes.md, REBUILD_PLAN.md
M2+	소스 추적 포팅, 이정표 쌍 커밋	각 이정표 콜드 스타트 테스트 + CLEAN 게이트 초록불	행 번호 주석이 포함된 소스 코드, 3개 등록표 업데이트
M(n-1)	대조 검수	선택한 게이트 유형 모두 초록불 또는 모든 차이점 등록	검증 스크립트 + 대조 산출물 저장 (docs/compare/)
M(n)	콜드 헤드 리뷰 + 저작권 증거 수집 + 사용자 제출	목록 대조 결과 누락 없음; 사용자가 배포 결정 완료 (미결정 시 안전 기본값 유지)	감사 기록, DEPLOY.md
M(n+1)	모듈 분할 + 디난독화 + 주석 + 자체 포함	기존 게이트 모두 초록불 및 허용 오차 완화 없음; 심볼 게이트 양방향 전단사 및 고아 없음; 자체 포함 게이트 (복사, 오프라인, 빌드) 통과	src/ (읽기 가능한 프로젝트), docs/rename-map.json, src/README.md

Script Directory

Node 22+, 경로는 본 스킬 디렉토리 기준입니다. 사용법 및 성숙도는 scripts/README.md를 참조하십시오.

⭐⭐ 의존성 규율은 디렉토리가 아닌 단계별로 적용됩니다. 소스 코드화 이전에는 전체 파이프라인이 의존성이 없습니다.

Step 0 → M(n) 전체 과정에서 아무것도 설치하지 않습니다. 복제 프로젝트는 M(n+1)이 되어야 devDependencies를 얻습니다 (스코프 안전한 이름 변경에는 실제 파서가 필요함). scripts/ (의존성 없음)와 tools/ (devDeps 허용)는 이 단계 경계를 디렉토리에 투영한 것에 불과합니다. scripts/는 단계 경계의 판단 기준이고, 소스 코드화 단계의 리팩토러는 tools/에 위치합니다.

⛔ 어떤 게이트도 어떤 도구도 import 해서는 안 됩니다 (verification-gates.md §2.1.2) – 검사자는 생산자가 될 수 없습니다.

⭐ 앞 단계에서 실제 파서가 필요하면 어떻게 해야 합니까? 외부에서 실행하고 import 하지 마십시오. beautify-bundle.mjs (js-beautify)와 module-map.mjs (acorn)은 모두 버전이 고정된 npx를 spawn합니다. 스크립트 자체는 여전히 의존성이 없으며 독립적으로 검토할 수 있습니다. ⛔ 직접 어휘 분석기를 작성하지 마십시오. 본 스킬에서 시도해 보았으나, 따옴표가 포함된 정규식 리터럴에 의해 16,177행이 잘못 해석되었습니다 (F27). 토큰 스트림의 괄호 일치는 정확하지만, 텍스트 기반 괄호 일치는 문자열/정규식/주석에 대한 추측에 불과합니다.

⚠ 이 규율은 위반된 이후에야 발견되었습니다. module-map.mjs가 @babel/*에 의존하고 있었지만, scripts/ 안에 무려 8개 버전 동안 존재했습니다. 그리고 동일한 규율의 원문이 바로 그 위 3줄에 적혀 있었습니다. 문서에만 적혀 있고 아무것도 확인하지 않는 규칙은 조용히失效합니다.

스크립트	용도	사용 단계
scripts/fingerprint.mjs	Step 0의 6단계 탐지 프로토콜에 대한 크로스 플랫폼 동등 구현 (GET 생존 + 리다이렉트 체인 및 종점 도메인 동일성, 이중 캡처 diff, 종/연대, HTML 기술 핑거프린트, 번들 초기 검사; 등장 횟수 카운트 및 <1KB Referer 재시도 내장; Sanity CMS 증거 수집 – projectId/dataset/API 호스트/auto=format/_key, 세 가지 철자 정규화, 발견 시 sanity-platform.md 안내). 증거만 수집하고 등급은 판정하지 않음 – 등급 판정은 여전히 scope-and-fingerprint.md §3 판정 트리 사용	Step 0 (POSIX 도구 체인이 없을 때)
scripts/mirror-site.mjs	BFS 크롤러 미러링 (자산 화이트리스트 + 고정점까지 반복; redirect:manual + 세 가지 장부, 파일별 sha256 포함; ⭐ redirects.tsv는 manifest와 마찬가지로 실행 간 누적됨 – --scope로 페이지를 추가할 때 헤더만 남도록 잘리는 경우가 있었으며, 페이로드 게이트가 /work에서 404를 발견함). --scope <접두사>는 페이지 큐를 대상 경로로 제한합니다 (마이크로사이트가 기업 CMS 도메인에 걸려 있을 때 필수; ⛔ 페이지만 제한하고 자산은 제한하지 않음). 장부 누적 (--seeds로 누락분을 보충할 때 이전 라운드의 행을 자르지 않음) + 오프호스트 전수 조사 (따르지 않는 호스트를 개별 카운트하고 경고 – 무음 버림으로 인해 827개의 미디어 참조가 사라졌지만 보고서에는 "57 files saved"라고 기록됨)	M0 1차
scripts/netcapture.mjs	실제 브라우저 CDP 패킷 캡처 대조 및 런타임 리소스 보충 기록 (CDN 사이트는 반드시 --hosts 전달, 그렇지 않으면 동일 출처 트래픽만 관찰하여 거짓 GAP=0 보고)	M0 2차
scripts/verify-mirror.mjs	미러 자체의 게이트, 오프라인 게이트보다 먼저 실행. 5가지 단언: 매핑 단사성 / 장부와 디스크 sha256 / 진위성 (챌린지 페이지 본문 + 선언 유형과 매직 넘버 비교 – 200 응답이 '해당 리소스를 가져왔음'을 증명하는 것은 아님) / 폐쇄성 / 선택적 샘플링 출처 확인. 하위 게이트는 모두 "렌더링이 가능한가"를 묻지만, 잘못된 미러에서는 모두 초록불이 될 수 있음	M0 장부 마감 전, 미러 재캡처 시마다
scripts/gapfill-video.mjs	HLS/DASH 스트리밍 미디어 계층별 보충 기록 (master → rendition → 세그먼트), 정적 크롤러의 구조적 사각지대	M0 (스트리밍 미디어가 있을 때)
scripts/reconcile-gaps.mjs	런타임 갭 대조기: netcapture가 기록한 GAP 행과 바이트 기반의 전체 집합 목록 (예: next/image의 srcset 전체 계층 열거 – 실제 사례 1,078개 vs 브라우저가 만난 217개)을 미러에 하나씩 보충. ⭐ 요청 헤더 사다리 (표준 프로필 4xx → 베어 프로필 재시도: 동일한 403에 대해 두 가지 상반된 치료법, landonorris는 Referer 필요, video.twimg는 Referer 싫어함) + URL별 오류 허용 + 배치별 기록 (한 번의 충돌로 장부 외부 파일이 남지 않음). ⛔ 이미지 URL의 표준 프로필은 브라우저와 동일한 이미지 Accept 헤더 전송 (lib/negotiate.mjs) – auto=format 계열 CDN은 Accept 헤더에 따라 형식을 협상하며, */*는 폴백 바이트를 받음 (실제 사례: 391개 변형이 모두 폴백되었지만 게이트는 모두 초록불); 장부는 profile+vary 기록	M0 (런타임 리소스가 많은 사이트)
scripts/flight-decode.mjs	C1의 좌표계: 각 페이지의 self.__next_f.push 스트림을 모듈 참조 테이블 (I 행 내보내기 이름 = 무료로 제공되는 tier-1 명명 증거), HL 사전 로드, 역참조된 요소 트리 + JSX 스타일 개요로 디코딩. T 행은 선언 바이트 수를 기준으로 처리. :HL 빈 id 행은 체인을 끊을 수 없음	M1 (C1)
scripts/verify-flight.mjs	C1 의미 게이트: 빌드 산출물 flight 트리 ≟ 미러 flight 트리. 자체 파서 포함 (⛔ flight-decode를 import하지 않음 – 검사자는 생산자가 될 수 없음). 정규화는 '행동을 수반하지 않음'을 증명하는 빌드 해시 네임스페이스만 수용 (청크 이름/css-module 클래스/미디어 해시/승격 가능한 리소스 마운트 포인트/인코딩 자유도). 모듈 ID는 전역 전단사여야 함 (일대다이면 적색). 사이트 등록 항목은 --normalize-props (ISR 에포크 필드) 및 --normalize-class (라이브러리 렌더링 하위 트리) 사용. 그 외의 모든 차이는 적색	M(n-1) (C1)
scripts/serve.mjs	의존성 없는 정적 서버 (MIME/Range/서비스 계층 재작성/리다이렉트 재생), 원본 사이트 참조 서버 겸용. --rewrite FROM::TO는 등록된 리터럴 치환으로, 로컬라이제이션으로는 닿을 수 없는 한 가지 유형을 위한 것입니다. 원본 프로그램이 자체 도메인 이름으로 분기하는 경우 (location.hostname=="x.com" && (CDN=...), 미러는 해당 도메인에 없으므로 전체

…

[번역 생략]