SEO 랜딩 생성기

100/100 PageSpeed와 최대 SEO에 최적화된 정적 단일 페이지 HTML 랜딩을 구축합니다: 중요 CSS, AVIF 이미지, 완전한 JSON-LD 구조화 데이터, 네이티브 전용 상호작용, 첫 번째 로드 시 타사 요청 제로.

사용 시기

사용자가 속도와 SEO에 중점을 둔 랜딩 페이지 / 원페이지를 요청하는 경우 → 생성 모드.
사용자가 간략한 설명(ТЗ)을 제공하고 프로덕션 준비가 된 정적 페이지를 원하는 경우 → 생성 모드.
사용자가 변경 없이 기존 랜딩을 체크리스트에 대해 감사(audit)해 달라고 요청하는 경우 → 감사 전용 모드(§0b, 읽기 전용, 프로젝트 파일 없음).
사용자가 기존 랜딩을 수정/개선해 달라고 요청하는 경우 → 기존 수정 모드(§0c).

절차

0. 먼저 요청을 모드로 라우팅

이 스킬은 세 가지 모드를 제공합니다. 요청에서 하나를 선택하고 (모호한 경우 질문), 각 모드는 다른 입력을 수집하고 다른 출력을 생성하기 때문입니다:

생성 — 간략한 설명에서 새 랜딩 페이지를 구축합니다("랜딩 페이지를 빌드/생성/만들어 줘…"). 아래 전체 절차를 실행합니다.
감사 전용 — 기존 페이지를 읽기 전용으로 검사합니다("이 페이지를 체크리스트에 따라 감사/확인/검토해 줘…", 변경 요청 없음). §0b를 실행합니다. 프로젝트 파일을 절대 생성하지 않습니다.
기존 수정 — 기존 페이지에 대상 수정을 적용합니다("이 페이지를 수정/개선/최적화해 줘…"). §0c를 실행합니다.

대표적인 라우팅 예:

"이 간략한 설명으로 치과 클리닉 랜딩 페이지를 만들어 줘" → 생성.
"https://example.com/ 을 성능 체크리스트에 따라 감사하고 무엇이 문제인지 보고해 줘" → 감사 전용.
"이 랜딩의 히어로 이미지가 로드될 때 밀리는데, 수정해 줘" → 기존 수정.

생성 전용 간략 설명 필드(타겟 키워드, 비즈니스 유형, CTA, 미디어 사실)는 생성 및 재구축 작업에 대해서만 수집됩니다. 감사 또는 대상 수정이 누락된 생성 입력으로 인해 차단되거나 지연되어서는 안 되며, 감사 전용 모드는 프로젝트 파일을 생성하거나 수정해서는 안 됩니다.

0a. 간략 설명 수집 (생성 모드; 누락된 경우 질문)

무엇이든 생성하기 전에 필요한 사항:

도메인 / 최종 URL — canonical, og:url, 절대 경로, JSON-LD @id 용.
사이트 아이덴티티 (WebSite 마크업용, 페이지가 도메인/서브도메인 홈페이지인 경우에만): 선호하는 사이트 이름, 선택적 대체 이름, canonical 홈 URL — 랜딩 URL과 별도로 수집.
이동 경로 (Breadcrumb trail) (BreadcrumbList 마크업용, 실제 사이트 계층 구조가 존재하는 경우에만): 표시된 이동 경로와 canonical 상위 URL.
페이지 언어, 기본 방향(Base Direction), Open Graph 로케일 — 세 가지 별도 입력, 한 값을 형식 간에 복사하지 않음(예: <html lang>용 BCP-47 언어 태그 (예: en-US, ar-SA), 기본 방향 (ltr/rtl — RTL 문서는 <html>에 dir="rtl"을 획득하며, lang 단독으로는 방향성을 설정하지 않음), Open Graph 로케일은 og:locale용 language_TERRITORY 형식 (예: en_GB). RTL 지원 언어에 대해 방향을 알 수 없는 경우 질문(기술 사양 §2).
주제 + 1–3개 타겟 키워드 — H1, 제목, 설명 용.
비즈니스 유형: Organization 또는 LocalBusiness. LocalBusiness의 경우 확인된 공개/법적 비즈니스 이름과 완전한 구조화된 우편 주소(거리, 지역, 주/도, 우편 번호, 국가), 전화번호 및 지리적 좌표를 수집합니다. 또한 실제 비즈니스를 기반으로 확인된 schema.org 하위 유형(예: Restaurant, Dentist, HardwareStore)을 수집합니다. — 타겟 키워드에서 선택하지 않음. 누락된 아이덴티티 사실을 절대 만들어내지 않음: 사실이 제공될 때까지 Organization 마크업으로 대체하거나 엔터티 마크업을 생략합니다.
CTA 및 연락처(전화, 양식, 메신저). 양식이 요청된 경우, 제출 대상과 방법(자체 엔드포인트 또는 문서화된 양식 서비스 — 절대 만들어내지 않음), 수집된 개인 데이터에 필요한 동의/개인정보 보호 텍스트, 제출물이 저장되는 위치와 소유자를 수집합니다. 대상이 없으면 양식은 생략되거나 명시적으로 스텁 처리됩니다(기술 사양 §10 양식 제출 계약).
브랜드 승인을 받은 파비콘 또는 생성에 대한 명시적 허가 — 브랜드 마크를 조용히 만들어내지 않음.
승인된 출처 자료 및 객관적인 마케팅 사실(숫자, 가격, 자격 증명, 보증, 비교, 사례 연구)에 대한 주장 소유자 — 이것들이 없으면 그러한 주장은 생략되며, 절대 만들어내지 않습니다.
이미지가 제공되는지 여부; FAQ / 리뷰 / 비디오 블록이 필요한지 여부. 비디오 블록의 경우 출처가 뒷받침되는 사실을 수집합니다: 비디오 URL/ID, 제목, 설명, 정확한 최초 공개 날짜/시간(시간대 포함), 고유한 크롤링 가능 썸네일 (해당되는 경우 contentUrl 포함). 누락된 미디어 사실을 절대 만들어내지 않습니다. 또한 절충점을 명시한 비디오 모드를 수집합니다: 클릭 전용 퍼사드(기본값 — 개인정보 보호/성능; 페이지는 Google의 비디오 검색 요구 사항을 충족하지 않으며 비디오 검색 혜택이 주장되지 않음) 또는 SEO 검색 가능(자체 호스팅 <video> 또는 문서화된 직접 임베드 — 비디오 검색 트래픽이 중요한 경우 필요) (기술 사양 §9).

도메인이나 키워드가 누락된 경우 — 먼저 질문하고, 절대 만들어내지 마십시오.

0b. 감사 전용 모드 (읽기 전용)

대체 페이지를 생성하지 않고 기존 페이지를 감사합니다. 이 모드에서는 프로젝트 파일이 생성되거나 수정되지 않습니다. 결과물은 보고서입니다.

대상을 식별합니다: 배포된 URL (선호 — 모든 검사가 실제 환경에 대해 실행 가능) 또는 로컬 HTML 파일. 둘 다 제공되지 않으면 질문합니다. 대상을 추측하지 마십시오.
§5의 적용 가능한 검사를 대상에 대해 있는 그대로 실행합니다: W3C 유효성, 로컬 자산 존재(로컬 파일의 경우), schema.org 유효성 검사기를 통한 JSON-LD, 제공/배포된 URL에 대한 Lighthouse, 크롤링 가능성 계약(배포된 호스트의 robots.txt + sitemap.xml), 기술 사양 §8의 수동 접근성 검사.
검사당 증거를 보고합니다: 통과/실패 여부를 측정된 값 또는 관찰된 마크업과 함께, 사용된 정확한 명령어/도구를 명시합니다. 검사를 실행할 수 없는 경우(배포된 URL이 없어 Lighthouse를 실행할 수 없거나 호스트에 robots.txt가 없는 경우), 해당 검사에 대한 차단 요인을 보고합니다 — 추정, 외삽, 또는 조용히 생략하지 않습니다.
구문 유효성과 Google 기능 적격성(FAQPage, VideoObject, 리치 결과)을 구분합니다: 유효한 마크업은 유효한 마크업으로 보고되며, 달성된 검색 기능으로 보고되지 않습니다.
선택적으로 우선 순위가 지정된 수정 목록으로 끝낼 수 있습니다. 수정 적용은 별도의 기존 수정 요청입니다 — 요청 없이 편집을 시작하지 마십시오.

0c. 기존 수정 모드

전체 재구축 없이 기존 페이지에 대상 수정을 적용합니다.

페이지/파일 및 수정할 특정 문제를 식별합니다. 해당 수정에 필요한 입력만 수집합니다(전체 생성 간략 설명은 절대 수집하지 않음).
관련 기술 사양 섹션에 따라 각 수정을 적용하고, 관련 없는 마크업과 내용을 보존합니다.
중지 지점(§4)이 적용됩니다: 유효성 검사 전에 변경된 페이지를 보여줍니다. 수정 사항이 사용자가 이전에 승인한 내용을 변경하는 경우, 보고하기 전에 갱신된 승인을 얻습니다.
변경된 페이지의 유효성을 검사하고(§5) 측정된 증거만 보고합니다.

생성 워크플로 (생성 모드)

1. 프로젝트 폴더 생성

모든 프로젝트는 워크스페이스 내의 자체 폴더에 있습니다 — 워크스페이스 루트에 절대 쓰지 마십시오. 출력물은 다중 파일 프로젝트입니다: HTML에서 참조하는 모든 로컬 리소스는 실제 파일로 존재해야 합니다.

<workspace>/<project-slug>/
  index.html        # 생성된 랜딩 페이지
  styles.css        # 아래 접힌(above-the-fold) CSS가 지연되는 경우에만(§1); 모든 CSS가 인라인된 경우에는 없음
  script.js         # 페이지가 JS를 사용하는 경우에만(§10); 단일 파일, defer
  images/           # src/srcset/preload/OG 태그에 참조된 모든 이미지 변형(AVIF/WebP/JPEG, 모든 브레이크포인트)
  favicon.png       # 안정적인 정사각형 브랜드 아이콘, ≥48×48
  ASSETS.md         # 모든 자산에 대한 권리 및 출처 기록
  robots.txt
  sitemap.xml
  SERVER-SETUP.md   # 호스팅 지침

이미지 분기:

간략 설명에 이미지가 제공된 경우 → 해당 이미지에서 모든 필수 변형(srcset에 명명된 모든 브레이크포인트의 AVIF/WebP/JPEG)을 생성합니다.
사용 가능한 이미지가 없는 경우 → 사용자에게 요청하거나 이미지/블록을 생략합니다. 파일을 생성하거나 명시적으로 요청하지 않고 성공한 것처럼 보이는 자산 URL을 절대 내보내지 마십시오 — 참조되었지만 존재하지 않는 파일은 생성 실패입니다.

2. 페이지 생성

참조/tech-spec.md를 엄격히 준수하여 index.html을 구축합니다 — 13개 요구 사항 섹션(성능, HTML 구조, SEO, 보안, CSS/글꼴, 금지 목록, 테스트, 접근성, 임베디드 비디오, 일반 블록, 지연 위젯, 콘텐츠 진실성 및 출처, 입력 삭제 및 출력 인코딩).

모든 간략한 값을 신뢰할 수 없는 것으로 취급합니다: 정확한 출력 컨텍스트(HTML 텍스트, 속성, URL, JSON-LD)에 대해 인코딩하고, URL 체계를 허용 목록에 추가하며(javascript:/예상치 못한 data: 거부), 직렬화된 JSON-LD에서 <를 이스케이프하고, 구조화된 ID(예: YouTube ^[A-Za-z0-9_-]{11}$)가 URL에 도달하기 전에 유효성을 검사합니다(기술 사양 §13).

임베디드 YouTube 비디오의 경우 기본적으로 퍼사드 패턴을 사용합니다. SEO 검색 가능 모드(자체 호스팅 <video> 또는 문서화된 직접 임베드)는 공개된 트레이드오프가 있는 명시적인 간략 설명 선택 사항이며, 조용한 전환이 아닙니다 — 규칙 및 Google 검색 요구 사항은 기술 사양 §9, 퍼사드 참조 구현은 참조/video-facade.md에 있습니다. 지도는 퍼사드 규칙만 따릅니다(기술 사양 §10): 초기 DOM의 로컬 스크린샷, 명시적 활성화 시에만 iframe이 삽입됨 — 네이티브 loading="lazy" 지도 iframe을 사용하지 않습니다. 참조: 참조/map-facade.md.

3. 동반 파일 생성

사이트 루트의 robots.txt에 정규화된 Sitemap: 줄 포함, canonical 페이지 또는 필수 미디어를 차단하지 않음.
sitemap.xml에 XML 이스케이프된 절대 canonical <loc> URL 포함, HTML canonical과 일치; lastmod는 검증 가능한 중요한 콘텐츠 변경 타임스탬프가 있는 경우에만 포함(알 수 없는 경우 생략 — 생성 시간을 맹목적으로 사용하지 않음).
참조/server-config.md의 호스팅 지침: 캐싱, Brotli/gzip, 보안 헤더.

4. 중지 지점 — 사용자 승인

생성된 페이지를 사용자에게 보여주고 HTML 버전이 괜찮은지 명시적으로 질문합니다. 사용자가 확인할 때까지 유효성 검사 및 최종 보고서로 진행하지 마십시오. 의견이 있으면 수정하고 다시 질문합니다.

5. 유효성 검사

기술 사양 §7의 실행 가능한 유효성 검사 계약을 실행합니다 — 제공된 페이지에 대한 고정 명령어, 측정된 결과만, 게이트를 실행할 수 없을 때 명시적 BLOCKER:

W3C HTML 유효성(Nu 유효성 검사기, JSON 출력; 오류 0개).
로컬 자산/링크 존재: 출력에서 참조된 모든 로컬 URL 추출(img src/srcset, <source> srcset, preload href/imagesrcset, favicon, OG/Twitter 이미지, CSS url(), script src)하고 각 파일이 프로젝트 폴더에 존재하는지 확인합니다. 참조된 로컬 리소스가 하나라도 누락되면 심각한 실패 — 파일을 생성하거나 참조를 제거합니다. 생성되지 않은 파일을 가리키는 HTML을 절대 배송하지 않습니다.
JSON-LD 구문(JSON 파싱) — 배포된 페이지에서 Rich Results Test로 확인되는 Google 리치 결과 적격성과 별개입니다.
320/768/1280/1920px에서 반응형 스크린샷, 오버플로 및 리플로우 검사.
Lighthouse: 고정 버전/프로필, 3회 실행, 카테고리별 중앙값, 임계값 ≥ 90, 아티팩트는 프로젝트의 reports/에 보관 — 실험실 증거만, 필드 Core Web Vitals나 WCAG 인증은 절대 포함하지 않습니다.
수동 접근성 검사(기술 사양 §8) — 자동화된 도구만으로 WCAG 준수를 판단하지 않음: 키보드 탐색, 포커스 순서/가시성, 대화상자 포커스 흐름, 확대/리플로우, 모션 감소, 시맨틱 이름-역할-값, 대체 텍스트 품질, 모든 대화형 시각적 상태. 해당 WCAG 2.1 AA 기준별 통과/실패 증거 기록; 해결되지 않은 항목을 조용히 인증하지 않고 보고합니다.
크롤링 가능성 계약: sitemap.xml 구문 분석, 각 <loc>을 HTML canonical과 비교, robots.txt의 Sitemap: URL 확인, 두 배포 파일 모두 성공적으로 요청(HTTP 200).

보고하기 전에 발견된 모든 위반 사항을 수정합니다. 증거를 정직하게 공개합니다: 보고된 모든 숫자는 이를 생성한 정확한 명령 및 아티팩트 경로와 함께 제공됩니다. 실행할 수 없는 게이트는 숫자 대신 BLOCKER: <이유>로 보고됩니다. 실제로 측정되지 않은 PageSpeed/LCP 점수를 절대 출력하지 않습니다.

6. 최종 보고서

간략히 나열:

LCP 매개변수
PageSpeed 점수
코드에 사용된 schema.org 유형

주요 함정

외부 JS/CSS 라이브러리, 외부 글꼴 또는 SVG 이미지를 절대 사용하지 마십시오(기술 사양 §6).
생성되지 않은 로컬 자산을 절대 참조하지 마십시오: 모든 src/srcset/preload/OG URL은 프로젝트 폴더의 실제 파일로 확인되어야 합니다. 누락된 소스 이미지는 사용자에게 요청하며, 만들어내지 않습니다(출력 계약).
원시 간략 값을 마크업으로 절대 내보내지 마십시오: 모든 것을 컨텍스트 인코딩하고, javascript:/예상치 못한 data: URL을 거부하며, 적대적인 값(따옴표, </script>, 이벤트 핸들러 페이로드)으로 생성을 자체 테스트합니다(기술 사양 §13).
첫 번째 로드 시 YouTube iframe, 지도, 채팅, 구독 팝업 또는 쿠키 배너를 절대 로드하지 마십시오(기술 사양 §9, §10, §11) — 단일 문서화된 예외는 첫 번째 로드 종속성으로 기록된 직접 임베드가 있는 간략 선택 SEO 검색 가능 비디오 모드입니다(기술 사양 §9 모드 S).
모든 콘텐츠는 원시 HTML에 존재해야 합니다 — JS로만 렌더링되는 것은 없습니다.
JSON-LD, canonical 및 OG 태그의 절대 URL.
총 JS 예산 ≤ 15KB, 단일 파일, </body> 앞에 defer.

SEO Landing — PageSpeed 100 + 스키마 출하