gergobalogh/launch-check

출시 점검: 이 페이지가 준비되었나요?

출시 당일이 페이지 방문자의 대부분을 불러모으고, 2일차 수정은 그 대부분을 놓칩니다. 게시물이 나가기 전에 제대로 만드세요.

이 체크리스트는 모든 페이지에 적용됩니다. 페이지 이름과 페이지 데이터는 포함하지 마십시오: 여기에는 일반 규칙으로 새로운 교훈을 작성하고, 페이지와 그 숫자는 프로젝트 자체 노트에 보관하세요.

실행 방법

1. 페이지 이름을 지정하세요. 유형(기사 또는 스토리, 도구 또는 게임, 허브), 한 문장으로 된 역할, 그리고 단계: 도착 → 사용 가능 → 첫 사용 → 주요 동작 → 잘 작동함 → 다음 단계. 적용되지 않는 단계는 접으세요. 확인 항목을 충족시키기 위해 입력, 숫자 또는 동작을 추가하지 마세요.
2. 로컬 빌드를 제공하세요 (dist/ 또는 dev 서버) 애널리틱스를 차단한 상태로. 실제 페이지를 열지 마세요.
3. 아래 네 가지 화면에서 모든 확인 항목을 수행하세요. 각 항목에 통과, 실패, 미확인, 또는 해당 없음(N/A)을 표시하고 이유를 기재하세요. 판단이 필요한 확인 항목의 경우, 본인이 본 내용(다시 말한 문장, 본 스크린샷)을 적고 단순히 "통과"라고만 표시하지 마세요.
4. 차단: 수정하거나 사용자의 명시적 면제를 받고, 미확인인 경우 확인하세요. 권장: 보고하세요. 출시를 막지는 않습니다.
5. 결과를 프로젝트 노트 또는 작업 보드에 기록하세요. 총 29개 확인 항목을 모두 집계하여 기록하세요. 출시 점검: 25 통과, 1 실패, 1 미확인, 2 해당 없음; 차단: U1 실패; 권장: S3 미확인; 해당 없음: U2 (입력 없음), U3 (대기 없음).

화면: phone 390×844, tablet 820×1180, laptop 1366×768, large desktop 1920×1080. 각각을 확인하세요. 넓은 레이아웃은 좁은 레이아웃만큼이나 항목을 이동시킵니다. 레이아웃 실패는 스크린샷으로 확인하세요. 소스만으로는 확인할 수 없기 때문입니다.

브라우저: 헤드리스 Chromium(Playwright)이면 충분합니다. 로컬 빌드는 로그인이 필요 없기 때문입니다. 페이지를 로드하기 전에 해당 탭에서 애널리틱스 호스트를 차단하세요(page.route(/your-analytics-host/, r => r.abort())). 그래야 확인 항목이 방문으로 집계되지 않습니다.

페이지 유형별:

• 기사 또는 스토리: 계속 스크롤하는 것이 다음 단계이므로, U2는 해당 없음(N/A)이고, U3는 대기 중인 것이 없으면 해당 없음입니다.
• 도구 또는 게임: T2는 페이지에 있는 모든 텍스트를 다룹니다. 첫 사용은 실제 결과를 제공해야 합니다.
• 허브: 보상은 올바른 항목을 찾는 것이므로, T1은 각 링크가 약속한 대로 작동함을 의미합니다.

훅

• H1 · 차단. 모든 크기에서 첫 화면만 보고도 방문자가 얻을 수 있는 것을 한 문장으로 말할 수 있어야 합니다. 주제가 아니라 보상입니다. 그 문장을 적어보세요. 쓸 수 없거나 주제만 언급한다면 실패입니다.
• H2 · 권장. 첫 화면은 낯선 사람에게 계속 보도록 할 이유를 제공합니다: 구체적인 발견, 숫자, 결과 또는 질문이며, 사실이어야 합니다. 맥락 없이 게시물에서 들어온 사람에게도 여전히 유효해야 합니다.
• H3 · 권장. 링크 미리보기가 동일한 약속을 합니다. og:image, 제목 및 설명이 보상을 말합니다. 빌드에서 태그와 이미지를 확인하세요.
• H4 · 차단. 모든 크기에서 첫 번째 동작이 스크롤 없이 보여야 하며, 명확히 동작처럼 보여야 하고 충분한 대비가 있어야 합니다. 스크롤 스토리의 경우 첫 번째 동작은 스크롤입니다. 보이는 스크롤 신호가 있으면 통과입니다.

본문

• T1 · 차단. 본문이 훅이 약속한 내용을 전달하며, 초반에 전달해야 합니다. 보상이 끝까지 기다리게 하지 않습니다. 페이지가 긴 경우, 짧은 버전이 먼저 나오고 나머지는 방문자의 선택입니다.
• T2 · 차단. 처음부터 끝까지 잘 읽혀야 합니다. 낯선 사람이 읽는 것처럼 순서대로 모두 읽어보세요. 각 부분은 이전 부분에서 이어지고 새로운 내용을 추가하며, 채우기 내용이 없어야 하며, 전체를 한 문장으로 다시 말할 수 있어야 합니다.
• T3 · 권장. 화면당 하나의 주요 포인트 또는 숫자. 나머지는 표 또는 "더 보기" 뒤에 넣으세요. 페이지에 숫자나 발견 사항이 없으면 해당 없음(N/A)입니다.
• T4 · 차단. 모든 숫자와 주장에는 출처가 있고, 숨겨진 모든 것이 작동해야 합니다. 모든 서랍, 탭 및 아코디언을 열고 모든 출처 링크를 따라가세요. 닫힌 섹션도 페이지의 일부입니다.
• T5 · 권장. 카피가 작성자의 스타일 규칙과 AI 작성 여부 확인을 통과해야 하며, 플레이스홀더, 초안 또는 디버그 텍스트가 없어야 합니다. 페이지 카피는 사용자의 이름으로 나가므로, 문제를 보고하고 질문하세요. 혼자서 수정하지 마세요.

화면

• S1 · 차단. 모든 네 가지 화면과 모든 단계에서 올바르게 보여야 합니다. 각 단계 후 스크린샷을 찍고 각각을 확인하세요. 잘리거나, 겹치거나, 스타일이 적용되지 않거나(스크립트로 만들어진 요소는 범위가 지정된 CSS를 놓칠 수 있음), 가로 스크롤이 없어야 합니다. 지도를 이동시키는 검색 또는 선택 후에는 결과가 패널로 덮이지 않는 부분에 모든 크기에서 나타나는지 확인하세요.
• S2 · 차단. 모든 텍스트가 렌더링된 크기에서 읽을 수 있어야 합니다. 눈으로 판단하지 말고 측정하세요. 12px 이상을 목표로 하세요. SVG 차트의 경우: 글꼴 크기 × 렌더링된 너비 ÷ viewBox 너비.
• S3 · 권장. 휴대폰에서 2초 이내에 사용 가능해야 합니다. 사용 가능이란 첫 번째 동작이 작동하는 가장 빠른 시점을 의미합니다. 로딩이 시작될 때부터, 콜드 캐시와 명시된 휴대폰 CPU 및 네트워크 프로필로 시간을 측정하세요. 조절되지 않은 데스크톱 실행은 휴대폰 통과를 보여줄 수 없습니다.
• S4 · 차단. 느린 로딩과 실패한 로딩 모두 올바르게 보여야 합니다. 느린 네트워크(CDP Network.emulateNetworkConditions, 9 / 1.6 / 0.75 / 0.4 Mbps) 및 실패한 로드를 테스트하세요. CDN과 같이 압축하여 제공하세요. 압축되지 않은 로컬 서버는 모든 대기 시간을 과장합니다. 콜드 스타트부터 각 로딩 핸드오버 시 0.5초마다 스크린샷을 찍고 프레임을 확인하세요. 로딩 레이블과 함께 마지막 양호한 그림을 유지하세요. 폴백은 실패 시에만 사용합니다. 레이블은 로딩 중 및 실패 후에 정확해야 합니다. 늦게 로드되는 것이 없으면 해당 없음(N/A)입니다.

사용

• U1 · 차단. 각 단계 후, 다음 컨트롤이 모든 크기의 화면에, 페이지가 방문자를 놓는 위치에 있어야 합니다. 각 단계로 들어가는 각 경로(예시, 입력, 탭)를 개별적으로 테스트하세요. 모든 스크롤 대상, 고정 헤더 및 접힌 부분을 확인하세요.
• U2 · 권장. 자유 형식 입력 옆에 원탭 진입 방법(예시 또는 사전 설정)이 있고, 이벤트는 어느 것이 사용되었는지 알려야 합니다. 자유 형식 입력이 없으면 해당 없음(N/A)입니다.
• U3 · 차단. 2초 이상의 모든 대기는 진행 상황을 표시하고 명확한 결과 또는 명확한 오류로 끝나야 합니다. 지연된 응답과 실패한 응답을 로컬에서 구동하세요. 절대 끝나지 않는 스피너는 실패입니다. 대기 중인 동작이 없으면 해당 없음(N/A)입니다. 스크립트가 로드되기 전에 표시된 컨트롤(느린 맵의 폼)은 작동하거나 대기열에 있어야 합니다. 로딩 중 및 로드 실패 후에 사용하세요. 처리되지 않은 폼 제출은 페이지를 다시 로드합니다.

다음 단계

• N1 · 권장. 성공 시점에 하나의 명확한 다음 작업이 있어야 합니다: 관련 페이지, 다른 시도, 다시 플레이. 성공이 발생하는 위치에 배치하고, 푸터에 넣지 마세요.
• N2 · 권장. 발견 사항을 전송하는 공유 버튼: WhatsApp, Facebook, X 및 링크 복사. 각각은 발견 사항이 포함된 한 문장을 담고 있으며, 제목만 담지 않고, 결과가 표시되는 위치에 배치합니다. 해당 문장은 공개 카피이므로 사용자가 직접 작성하게 하세요: 질문하세요. 발견 사항이 없는 허브도 사용자의 문장이 필요합니다. 직접 만들거나 이것만 해당 없음(N/A)으로 표시하지 마세요. share 이벤트는 네트워크만 전송하고 텍스트나 URL은 전송하지 않습니다.

검색

Google의 AI 답변(AI 개요, AI 모드)은 일반 검색 색인의 페이지를 가져옵니다. 스니펫으로 순위가 매겨진 페이지는 인용될 수 있으며, AI 전용 파일이나 마크업이 필요하지 않습니다. 구조화된 데이터는 페이지에 표시되는 내용과 일치해야 합니다.

• F1 · 차단. 페이지를 색인할 수 있어야 합니다: 하나의 표준 주소, 잘못된 noindex 없음, 사이트맵에 나열됨. 순위를 매기기에는 너무 얇은 페이지(다른 곳으로만 링크되는 스텁, 빈 목록)는 대신 검색에서 제외합니다. noindex 및 사이트맵에서 제외하고, 다른 언어 버전이 해당 페이지를 가리키지 않아야 합니다.
• F2 · 권장. 제목은 페이지가 무엇을 담고 있는지 말해야 하며, 사이트 이름만 있으면 안 되고, 이름은 끝에 있어야 합니다. 설명은 페이지 고유의 것이며 다른 페이지에 나타나지 않아야 합니다.
• F3 · 권장. 누가, 언제 게시했는지, 데이터가 얼마나 새로운지 보여주는 눈에 띄는 줄이 있어야 하며, 구조화된 데이터에 동일한 게시 날짜가 있어야 합니다. 콘텐츠가 실제로 변경된 경우에만 수정된 날짜를 변경하세요. 허브의 경우 해당 없음(N/A)입니다.
• F4 · 차단. HTML의 모든 이미지에는 출처와 실제 대체 텍스트가 있어야 하며, JavaScript 없이만 표시되는 그림도 포함됩니다. 빈 <img>는 실패입니다.
• F5 · 권장. 데이터 기반 페이지는 데이터를 제공해야 합니다: 개인정보 확인 후 CSV(페이지에 이미 표시된 필드만), 다운로드 옆에 라이선스 줄, 및 Dataset 마크업. 동영상은 포스터와 함께 VideoObject 마크업을 받습니다. 페이지에 둘 다 없으면 해당 없음(N/A)입니다.

출시 후: Search Console에서 페이지 색인을 요청하고(사용자 계정이 필요하므로 질문), 프로젝트에 AI 답변 질문 목록이 있으면 페이지가 답변하는 질문을 추가하세요.

측정

이 검사는 개인정보 친화적인 이벤트 추적기(Umami, Plausible 또는 유사)와 사용자 정의 이벤트를 가정합니다.

• M1 · 차단. 이벤트가 출시되는 빌드에 있어야 합니다. 적용 가능한 단계당 하나의 이벤트, 동작당 하나, 성공은 클릭이 아니라 효과이며, *-leave 이벤트는 가장 먼 단계와 조회 시간을 제공합니다.
• M2 · 차단. 이벤트가 실제 추적기를 통해 발생해야 합니다. 스텁 처리된 추적기 함수는 손실된 이벤트를 숨길 수 있습니다. 프로덕션 호스트 이름에서 실제 추적기를 실행하고, context.route를 사용하여 로컬 빌드를 제공하고 추적기의 전송 엔드포인트를 가로채서 아무것도 머신을 떠나지 않도록 하세요. 모든 컨트롤, 점프 링크도 구동하세요: 각 이벤트는 해당 동작을 설명하고, 실패는 성공을 보내지 않으며, 콘텐츠를 건너뛰는 점프는 읽기 이벤트를 보내지 않습니다. 추적된 아웃바운드 링크를 같은 탭에서 따라가고 *-leave 이벤트가 여전히 도착하는지 확인하세요. 페이지가 언로드되는 동안 시작된 요청은 손실될 수 있으므로, 이러한 링크는 새 탭에서 열립니다.
• M3 · 차단. 이벤트는 출시 시간과 함께 프로젝트의 docs/analytics.md에 나열되어야 하며, 퍼널 사양이 docs/funnels/에 있어야 합니다(분석 도구에 저장하려면 사용자의 동의가 필요함).
• M4 · 차단. 방문자가 입력하거나 선택한 것이 애널리틱스로 전송되지 않아야 합니다: 페이지뷰에 해시 없음(해시 제외), 쿼리 텍스트 없음, 장소 없음. 고정된 레이블과 버킷만 허용됩니다.
• M5 · 차단. 목표는 출시 전에 기록되어야 합니다 (도달할 것으로 예상되는 단계당 숫자). 출시 후 검토에서 비교할 대상이 있어야 합니다.
• M6 · 차단. 에이전트는 실제 페이지에 머물지 않아야 합니다. 방문이 실제 트래픽으로 집계되기 때문입니다. 실제 페이지를 가리킬 수 있는 확인 스크립트는 자체적으로 애널리틱스를 차단해야 합니다.