brandvm/webflow-audit

Webflow 감사: 라이브 사이트를 작은 검증된 단계로 변경하기

라이브 사이트에는 방문자, 순위, 그리고 다른 사람의 미완성 작업이 있습니다. 여기서 새로 만드는 것은 없습니다. 모든 변경은 측정에서 시작하여 단독으로 진행되며 되돌릴 수 있습니다.

공유 규칙이 적용됩니다(webflow-build › rules.md: 명시적 OK 없이 커밋, 푸시, 릴리스 또는 DNS 변경 금지; 채팅에 자격 증명 금지; Designer 우선; 스크립트는 저장소에 보관). 해당 체크 스크립트(pnpm wf:*)가 측정을 수행하며; webflow-build.config.json의 stagingUrl을 스테이징 도메인으로 설정하고, 방문자가 보는 항목에는 --live를 사용하세요.

태그: [Claude] Claude가 수행 · [Claude checks] Claude가 확인 및 보고 · [Person] 사람이 수행; Claude는 추적만 하고, 수행을 주장하지 않음.

다른 모든 규칙보다 우선하는 두 가지 규칙:

• 게시는 사이트 전체에 적용됩니다. 게시는 사이트에 보류 중인 모든 항목(다른 사람의 미완성 편집 포함)을 내보냅니다. 해당 배치에 대해 사람이 publish라는 단어를 입력할 때까지 라이브 도메인에 게시하지 마십시오. 하나의 "publish"는 하나의 배치만을 다루며, 다음 배치를 다루지 않습니다.
• 쓰기 전에 읽으십시오. 감사는 Webflow에 아무것도 쓰지 않습니다.

문서

저장소의 docs/handoff/에 작업이 진행됨에 따라 최신 상태로 유지:

파일	보관 내용
AUDIT.md	감사 보고서: 측정된 항목, 숫자 및 날짜 포함
STATUS.md	추적기: 모든 요청, 클라이언트의 자체 표현, 상태 포함
DECISIONS.md	각 결정, 결정한 사람, 시기 및 의미
ROLLBACK.md	롤백 지점 및 있는 그대로의 모든 커스텀 코드(단어 그대로)
MANUAL-TODO.md	Designer에서 사람만 수행할 수 있는 단계

1. 읽기 전용 감사

이 단계에서는 Webflow에 아무것도 기록되지 않습니다. 다음 순서로 실행하십시오: 처음 두 항목은 건너뛰거나 나중에 보충할 수 없는 항목으로, 변경 전 사이트를 설명합니다.

• [Claude] 시각적 기준, 노이즈 플로어 포함. 모든 주요 페이지에서 pnpm wf:baseline save --live를 네 가지 너비로 실행한 후, 변경 없이 즉시 compare를 실행합니다. 두 번의 변경되지 않은 실행 간 차이(비디오 프레임, 슬라이더, 지연 로딩 이미지)가 노이즈 플로어입니다. 페이지별로 기록하십시오. 기준 이미지는 git에 보관하지 마십시오(크기가 큼): .webflow-build/는 이 이유로 무시됩니다.
• [Claude] 모든 주요 페이지의 제목 개요(pnpm wf:outline --live), AUDIT.md에 저장.
• [Claude] 속도: pnpm wf:perf --live, 모바일 및 데스크톱, 모든 주요 페이지에 대해 5회 실행의 중간값과 범위(홈페이지만이 아님).
• [Claude] 접근성: pnpm wf:a11y --live --all-widths.
• [Claude] 링크 및 리디렉션: pnpm wf:links --live --external; 사이트 설정의 리디렉션 목록(CSV로 내보내기); 사이트맵. Search Console에서 찾을 수 없다고 보고하는 URL로 pnpm wf:redirects test --live --file <export> 실행: 어떤 이전 URL이 404, 루프, 체인 또는 홈페이지로 연결되는지 확인.
• [Claude] 게시된 HTML: pnpm wf:html --live(기본 필드 이름, 버튼 대신 링크, 스타일시트에 없는 클래스).
• [Claude] SEO 및 스키마: pnpm wf:seo --live --canonical: 페이지별 제목, 설명, 표준 URL, Open Graph 이미지, 색인 상태 및 JSON-LD(파싱 여부; CMS 필드의 따옴표가 깨뜨리는지); 사이트 전체의 중복 제목 및 설명, 404 페이지, robots.txt. 제목 개요는 webflow-launch › headings.md와 비교.
• [Claude] 추적: pnpm wf:tracking --live: 어떤 태그가 어디에 로드되는지, 페이지 뷰가 두 번 계산되는지, 쿠키 선택 전후와 거부 후에 실행되는 것, gclid 및 UTM이 리디렉션을 통과하는지. 데이터 요청은 차단되므로 감사는 클라이언트 계정으로 아무것도 보내지 않습니다.
• [Claude] 도메인: pnpm wf:domain: 인증서, 도메인 갱신 날짜, 등록 기관 및 DNS 호스트, http 및 www 리디렉션.
• [Claude] 인벤토리, 커넥터를 통해 읽기: 페이지 및 폴더; 필드 유형 및 항목 수를 포함한 CMS 컬렉션; 구성 요소; 글꼴 및 로드 방식; 모든 커스텀 코드(사이트 헤드 및 푸터, 각 페이지의 코드, 모든 Embed) 및 모든 타사 스크립트, 각각의 용도 설명(wf:tracking은 페이지가 로드하는 서비스를 나열); 인터랙션 및 이에 의존하는 페이지; 양식 및 제출 위치.
• [Claude] AUDIT.md 보고서: 숫자가 포함된 짧은 포인트로 결과를 제시하며, 각각 측정됨 또는 코드에서 읽음으로 표시하고, 얻을 수 있는 이점과 깨뜨릴 수 있는 사항으로 정렬. 측정되지 않은 주장은 명시합니다. 게이트: 사람이 보고서를 보유.

2. 첫날의 추적기

• [Claude] 브리핑 및 클라이언트 자체 체크리스트, 자체 표현으로 STATUS.md를 작성합니다. 요청당 한 행: 요청, 상태(시작 안 함, 진행 중, 스테이징에 있음, 라이브, 중단 및 이유), 배치, 날짜. 이전 사이트에서는 추적기가 늦게 작성되고 클라이언트 목록과 다른 단어로 작성되어 요청이 손실되었습니다.
• [Person] 누락된 항목이 없는지 확인합니다. 게이트.
• [Claude] 이후 모든 보고서는 추적기를 업데이트하고 개수를 제공: "14개 중 9개 라이브, 2개 스테이징, 3개 결정 대기 중".

3. 결정, 한 번에 하나씩

• [Claude] 한 번에 하나의 결정을 묻고, 각각이 방문자에게 무엇을 변경하는지, 비용, 잘못될 수 있는 사항 및 권장 사항을 일반 용어로 설명합니다.
• [Claude] 결정이 내려질 때마다 DECISIONS.md에 기록합니다.
• 새로운 고객 대상 콘텐츠(복사, 이미지, 변경된 레이아웃)만 고객 승인을 받습니다. 배관(스크립트 로드 방식, CSS 위치)은 팀의 결정 사항입니다.

4. 첫 번째 쓰기 전 롤백 지점

• [Claude] 라이브 상태와 일치하는 커밋에 git 태그.
• [Claude] ROLLBACK.md에는 현재 있는 그대로의 모든 커스텀 코드 조각(사이트 헤드 및 푸터 코드, 각 페이지 코드, 각 Embed)이 단어 그대로 보관됩니다.
• [Person] 날짜로 명명된 Webflow 백업(사이트 설정 › 백업); 및 저장소 기본 브랜치의 브랜치 보호.
• [Claude checks] 롤백 단계가 작성되고 각 단계가 가능한지 확인: 코드 블록 복원, 로더를 이전 릴리스로 다시 가리키기, 백업 복원. 게이트: 사람이 확인.

5. 패리티 릴리스(배관 변경 시)

사이트를 템플릿으로 이동하면 코드 전달 방식이 변경됩니다. 이 변경은 방문자가 볼 수 있는 것은 없이 단독으로 먼저 수행됩니다.

• [Claude] 기존 동작을 있는 그대로 포팅합니다. 이 단계에서 재작성 또는 개선은 없습니다: 이들은 각각 측정되는 이후 배치입니다.
• [Claude checks] 네 가지 너비에서 모든 주요 페이지의 패리티: 기준에 대한 계산된 스타일 및 형상(pnpm wf:baseline compare, 노이즈 플로어 내 차이만 허용).
• [Claude checks] 로드 시간 패리티도 확인(pnpm wf:film): 안정된 페이지는 일치할 수 있지만 첫 1초는 차이가 있을 수 있습니다. 최종 상태뿐만 아니라 로드 자체를 비교합니다.
• 그런 다음 아래 배치 단계를 다른 배치처럼 진행합니다.

6. 가장 낮은 위험부터 배치

가장 안전하고 확실한 이점이 먼저 오도록 작업을 정렬하고, 각 배치가 독립적으로 평가될 수 있도록 합니다. 하나의 배치 = 사람이 한 문장으로 설명할 수 있는 하나의 변경. 각각:

1. 준비 저장소에서(pnpm check && pnpm build && pnpm test); Webflow에서 무엇이 변경되고 방문자가 무엇을 알아차릴지 말합니다.
2. 적용 승인 후 Webflow에서 수행합니다. 그런 다음 "Designer를 새로고침"하고 게시되지 않은 것은 무엇인지 말합니다.
3. 스테이징에만 게시합니다.
4. 스테이징에서 확인: 배치 자체 확인, 더하기 baseline compare, html 및 해당 페이지의 콘솔을 네 가지 너비에서 확인.
5. 또 무엇이 라이브로 갈지 묻습니다. [Person] 사이트에서 다른 보류 중인 변경 사항(자신 또는 동료의)을 확인합니다. Claude는 누가 무엇을 변경했는지 볼 수 없습니다. 이를 말하고 기다립니다.
6. 사람이 "publish"를 입력합니다. 그런 다음 라이브 도메인에 게시합니다.
7. 프로덕션 확인 --live로: 동일한 확인, 그리고 배치의 숫자(속도, 오류, 링크)를 다시 측정합니다.
8. 추적기 및 클라이언트 체크리스트 표시; 결과를 AUDIT.md의 결과 옆에 기록합니다.

• CMS 항목 편집(오타, 새 항목)은 바로 라이브로 갈 수 있습니다: 항목 게시는 사이트를 게시하지 않습니다. 페이지 및 사이트 변경은 항상 8단계를 거칩니다.
• Webflow는 사이트 게시 빈도를 제한합니다: 배치가 스테이징 게시 한 번과 라이브 게시 한 번이 필요하도록 확인을 그룹화합니다.

7. 측정된 개선만 유지

• [Claude checks] 전후 모두 동일한 실행 횟수의 중간값입니다. 범위 내 차이는 노이즈입니다.
• [Claude] 숫자를 이동시키지 않거나 다른 숫자를 잘못된 방향으로 이동시키는 변경은 되돌려지며, 추적기에 명시합니다. 해야 했을 것이라는 힘에 의존하는 변경은 유지되지 않습니다.

8. 종료

• [Claude] 전후 보고서: 추적기의 각 요청에 대한 숫자 결과; 중단된 사항과 이유; 남은 사항.
• [Claude] ROLLBACK.md를 새 상태로 업데이트; 이전 태그는 유지.
• [Claude] 템플릿에 제공된 교훈(webflow-build › rules.md › 기여).

소규모 작업(라이브 사이트의 일회성 수정)

깨진 링크, 멈추는 캐러셀, 전송되지 않는 양식. 동일한 주의를 기울여 5단계로:

1. 재현 라이브 사이트에서, 정확히 발생 시점(페이지, 너비, 브라우저, 단계)을 말합니다.
2. 수정 가능한 가장 작은 위치에서 수정합니다. 먼저 GOTCHAS.md와 교훈을 읽으십시오: 일반적으로 이전에 발생한 적이 있습니다.
3. 회귀 테스트 저장소에 해당 영역에 대한 테스트가 있는 경우, 눈에 띄지 않게 다시 발생하지 않도록 합니다.
4. 스테이징, 데스크톱 및 휴대폰 너비에서; pnpm wf:html 및 해당 페이지의 콘솔.
5. 멈춤. 무엇이 잘못되었는지, 무엇이 변경되었는지, 어떻게 확인되었는지 보고하고, 푸시, 태그 또는 게시 전에 승인을 기다립니다. 로더가 다시 가리킬 수 있도록 이전 릴리스 태그를 유지합니다. 라이브 게시는 여전히 사람이 보류 중인 다른 사항을 확인한 후 "publish"라는 단어가 필요합니다.