/website-build - 웹사이트를 제대로 구축하기
모바일 앱 회사의 실제 마케팅 사이트를 구축하고, 5개 언어로 번역하고, 출시하고 강화한 경험에서 추출되었습니다. 참조 문서에 있는 모든 규칙은 실제로 문제가 발생했거나 시간이 많이 소요된 상황에서 비롯되었습니다. 이 파일은 경로이고, 참조 문서는 세부 내용을 담고 있습니다.
| 이 문서를 열 때 | 다음과 같은 작업을 하려는 경우 |
|---|---|
references/01-architecture-pipeline-deploy.md | 폴더와 빌드 체인 설정, 라이브러리 선택, 빌드 단계 추가, 배포, 호스팅/CSP/리디렉션 구성, 백업 설정 |
references/02-design-typography-mockups.md | 토큰 및 서체 정의, 폰트 및 줄바꿈 처리, 폰 모형 제작, 아이콘/로고 배치, 컴포넌트 및 모션 구축 |
references/03-i18n-seo-geo.md | 번역, 마켓 추가, 메타/JSON-LD 작성, 사이트맵/robots/llms.txt, GEO 수행, 성능 최적화, 분석 설정 |
references/04-qa-devices-modes.md | 모든 것 테스트: 도구 모음, 기기/폭/모드 매트릭스, 인앱 브라우저, 접근성, 동의 흐름, 적대적 및 실시간 QA |
references/05-process-content-legal-launch.md | 프로젝트 실행: 역할, 승인, 피드백 루프, 정보 구조, 사실, 법적 페이지, 동의, 라이브 전환 |
scripts/qa/ | QA 도구 모음 실행 (원시 CDP, 설치 불필요) 및 WebKit/인앱 브라우저 매트릭스 (Playwright) |
scripts/backup/snapshot.py | 편집 전 파일 버전 관리, 버전 목록 보기, 복원; 또는 PreToolUse 훅으로 설치 |
1. 단계 (순서대로)
- 브리핑 (
05): 목표 및 CTA, 마켓/언어, 페이지 목록, 출처가 있는 사실 시트, 브랜드 에셋, 마켓별 법인, 추적 및 동의, 호스팅, 프로덕션 병합 담당자. - 스켈레톤 (
01): 하나의 소스 폴더, 마스터 언어를 직접 편집, 멱등성 마킹된 블록으로 주입되는 공유 크롬, 나머지 모든 것에 대한 빌더,_dist(최적화됨) 및_deploy(호스팅)는 단방향 생성 복사본, 빌드 락, 첫 파일부터 git. - 디자인 시스템 (
02): 그라운드별 토큰, 작은 vw 기울기를 가진clamp()와 rem, 이미지의 실제width/height, 절대srcset, 모든 분음 부호를 포함하는 자체 호스팅 서브셋 폰트, 요소당 하나의 모션 시스템, 모션 감소 및 JS 꺼짐에 안전. - 이미지 (
02): 디자인 도구에서 마켓별로 내보낸 실제 제품 화면 (3x PNG -> WebP). 래스터에 텍스트를 패치하지 마십시오. 혼합 모드가 아닌 파일에서 로고 수정. - 카피 및 사실 (
05): 하나의 사실 목록, 개념당 하나의 용어, 마켓별 법인, 대상별 공식/비공식 호칭. - i18n (
03): 사전 및 정확한 텍스트 일치 빌더, 런타임 타이포그래피, hreflang (+ x-default), 마켓별 데이터 테이블, 언어 QA. - SEO (
03): 마커 사이의 멱등성 후처리기, 페이지당 하나의 JSON-LD@graph, 실제 lastmod가 있는 사이트맵, robots (AI 크롤러는 의도적으로 허용), 실제 404. - GEO (
03):llms.txt(+ 전체),facts.json, 사이트 안팎에서 일관된 엔티티 데이터, JS 없이 추출 가능한 텍스트, 실제 AI 엔진에 묻는 GEO 테스트 프로토콜. - 성능 (
03): 인라인 에셋 -> 해시 파일, WebP, 접힌 부분 아래 지연 로딩, 자체 호스팅 라이브러리, 지연 태그 관리자, 모바일 및 데스크탑 Lighthouse. - 동의, 분석, 법적 (
03,05): 동의 바, Consent Mode v2 (기본 vs 고급 의도적으로 결정), 동의 후에만 태그, 개인정보처리방침에 모든 추적기 나열, 필수 법적 페이지, 먼저 Report-Only로 CSP. - QA (
04): 전체 페이지 x 폭 매트릭스, 모드, WebKit 및 소셜 인앱 브라우저, 키보드/포커스, 동의 시나리오, 링크/앵커/언어 전환, 적대적 검토, 실제 폰. - 라이브 전환 (
05,01): 이전 사이트와 DNS 백업, 모든 이전 URL 리디렉션 (스토어 나열 경로는 정확히 유지), 기준선에 대해 미리보기 테스트, 전환, 라이브 체크리스트 실행.
2. 엄격한 규칙
- 생성된 파일 (언어 버전,
_dist,_deploy)은 직접 편집하지 마십시오. 소스 또는 빌더를 편집하고 다시 빌드하십시오. - 번역 빌더가 정확한 텍스트로 일치시키는 카피에
/<br>를 직접 삽입하지 마십시오. 줄바꿈은 런타임에 처리됩니다. - 하나의 세션이 빌드와 게시를 수행합니다. 빌드 락은 소유자를 확인합니다. 락이 걸려 있으면 기다리고 절대 삭제하지 마십시오. 전체 빌드 전에 사용 가능한 메모리를 확인하십시오.
- 페이지가 렌더링된다고 해서 아무것도 증명되지 않습니다. 모든 인라인 스크립트를 구문 검사하고, 제어 문자를 스캔하고, 전체 매트릭스를 실행하십시오.
- 모든 피드백 라운드는 타겟 텍스트가 사라지면 실패하는 멱등성 패스로 빌드에 포함됩니다.
- 프로덕션은 소유자가 병합합니다. 호스팅, CSP, 동의, 추적 및 법적 변경 사항은 먼저 기술 검토자에게 사이드 브랜치로 보냅니다.
- 사실은 하나의 목록에 있습니다. 두 페이지에서 다른 숫자는 신뢰 버그이자 GEO 버그입니다.
- 백업: 각 단계마다 커밋이 있는 사이트별 git; 커밋 사이의 모든 것은
scripts/backup/snapshot.py(또는 해당 훅) 사용; 라이브 전환 전에 이전 사이트와 DNS 백업. - 빌드되고 축소된 출력물에서 오버레이, 고정 막대 및 메뉴를 다시 테스트하십시오. 축소기는 선택자 특이성을 떨어뜨릴 수 있습니다.
- 광고가 게재되는 인앱 브라우저와 상태를 전달하는 (URL의 토큰) 페이지에서 CSP와 동의를 테스트하십시오.
3. 한 번에 QA
경로는 이 스킬 폴더를 기준으로 합니다. 먼저 node scripts/qa/jscheck.mjs site/_dist를 실행한 다음,
node scripts/qa/audit.mjs <folder-or-url>을 QA_WIDTHS=1440x900,1280x800,1024x768,768x1024,430x932,390x844,360x780,320x700와 함께 실행하고,
anchors.mjs, modes.mjs, console-sweep.mjs, shots.mjs (스크린샷을 직접 확인) 및
WebKit과 Instagram/Facebook/TikTok 인앱 브라우저를 위한 inapp.mjs를 실행하십시오. 모든 스크립트는 하나의 종료 코드 계약을 따릅니다:
0 정상, 1 발견 사항 (로드 실패 페이지 포함), 2 잘못된 사용법, 3 실행 불가 (Chrome, axe-core 또는 Playwright 누락). 체크리스트: 04, 섹션 "게시 전" 및 "배포 후".