랜딩 페이지 빌더

랜딩 페이지 빌더은(는) 무엇을 하나요?

공식: 당사의 구조 × 경쟁사의 모범 사례, 참조 표준에 따라 구축.

모든 페이지는 틈새 시장에 고유합니다. 처음부터 디자인은 주제와 경쟁사(2~3단계)에서 비롯되며, 이전 페이지나 템플릿에서 가져오지 않습니다. 페이지 간에 이어지는 것은 품질 수준이지 외관이 아닙니다:

• 모든 블록의 명확한 계층 구조: 눈썹 → 헤드라인 → 리드 → 실제 미디어 → 마이크로카피가 포함된 CTA;
• 적절한 프레임 안에 실제 제품 미디어가 있어야 하며, 누락된 부분은 레이블이 있는 빈 프레임으로 표시;
• 틈새 시장에 맞게 선택된 한 쌍의 서체와 하나의 악센트;
• 리듬을 위한 하나의 대비 섹션;
• 결과를 하나씩 캡션;
• 가격 전 요약;
• 사실에 기반한 FAQ 및 마무리 CTA;
• 스크린샷 QA.

승인된 Vidpeak 재설계(references/examples.md §D)는 그 수준을 보여줍니다. 마감은 일치시키되 디자인은 일치시키지 마십시오.

• 당사의 구조는 페이지가 수행해야 할 작업과 그 비율을 결정합니다(5개 블록, 가중치, 기본 규칙). 모든 틈새 시장에서 동일합니다.
• 경쟁사는 이 틈새 시장에서 각 작업을 수행하는 방법을 결정합니다: 히어로 공식, 증명 유형, 제품 표시 방식, 가격 형식, 반론, 시각 시스템. 이는 틈새 시장마다 다릅니다.
• 갭 — 경쟁사가 말하거나 잘 보여주지 못하는 것 — 이 우리의 차별화 포인트가 됩니다.
• 참조 표준(references/reference-standard.md)은 품질 기준을 설정합니다: 소유자가 선정한 4개의 랜딩 페이지입니다. 이들의 블록 패턴, 카피 제작 및 시각 제작이 "잘 만들어진"의 의미입니다. 틈새 시장이 외관을 결정하고 참조가 품질 수준을 결정합니다.

프레임워크만으로 구축(일반 페이지)하거나 경쟁사 하나를 복제(미투 페이지)하지 마십시오.

두 가지 모드 — 먼저 하나 선택

모드	시기	워크플로우
A. 처음부터 구축	페이지가 아직 없거나 소유자가 새 페이지를 원할 때	아래 (1~6단계)
B. 디자인 개선	페이지가 이미 존재하고(URL/저장소 파일/스크린샷) 소유자가 더 나은 디자인과 기능을 원할 때	references/redesign.md

B 모드의 신호: "더 좋게 / 예쁘게", "재설계", "디자인 개선", "여기 내 랜딩 페이지가 있습니다", 라이브 페이지 링크. 불명확하면 한 가지 질문: "새 페이지인가요, 아니면 이 페이지의 디자인을 개선할까요?" 두 모드 모두 동일한 하우스 구조, 기본 규칙 및 참조 표준을 사용합니다.

워크플로우 — 모드 A (처음부터)

순서대로 따르십시오. 2~3단계는 이 스킬의 핵심이므로 시간을 절약하기 위해 건너뛰지 마십시오.

#	단계	출력	참조
1	브리핑 — 제품, 아바타, 혜택, CTA 유형, 가격, 언어, 에셋	10줄 안의 브리핑	references/brief.md
2	경쟁사 조사 — 경쟁사 3~5곳 찾기, 랜딩 페이지 열기, 모든 섹션 캡처	research/ 스크린샷 + 원시 노트	references/competitor-research.md
3	분해 및 합성 — 블록별 패턴, 시장 기준선, 모범 사례, 갭, 시각적 고정	research/teardown.md	references/competitor-research.md
4	페이지 계획 — 우리의 5개 블록, 각각 선택한 관행 + 참조 표준의 패턴 + 당사 콘텐츠로 채움	계획 표 → 소유자와 체크포인트	references/framework.md, references/reference-standard.md
5	구축 — 스택, 카피, 미디어, CTA, 이 틈새 시장에 고유한 시각 시스템	페이지	references/build.md, references/visual-system.md
6	QA — 브라우저에서 데스크탑 + 모바일로 계획, 경쟁사 및 참조 표준과 비교	수정된 페이지 + 인계	references/build.md §QA
7	SEO 및 GEO — 페이지가 라이브되기 전(또는 요청 시): 하나의 주소, robots/sitemap/llms.txt, 메타 및 og, JSON-LD, 속도, AI 봇 접근, Search Console	색인 가능하고 AI 검색이 인용할 수 있는 라이브 페이지	references/seo-geo.md

체크포인트(4단계 후). 소유자에게 간략히 보여줍니다: 시장 기준선, 채택할 3~5가지 관행, 공격할 갭, 시각적 고정, 계획 표. "ok"를 받은 후 구축합니다. 소유자가 속도를 요청했다면 동시에 계획을 설명하고 구축하십시오.

지체하지 마십시오. 무언가 누락된 경우(제품 URL, 스크린샷, 가격) TODO를 표시하고 계속 진행하십시오. CTA 유형이나 언어를 막는 것만 물어보십시오.

하우스 구조(항상)

다섯 가지 작업. 하나의 작업이 여러 섹션에 걸쳐 있을 수 있습니다(예: 오퍼 = 요약 + 가격 + FAQ + 최종 CTA). 가중치는 페이지 길이/관심도의 비율입니다 — 목표 형태이지 법칙은 아닙니다.

#	작업	가중치	반드시 달성해야 할 사항
1	첫 화면	5%	그것이 무엇인지 또는 이점, 대상, 하나의 기본 CTA(사전 제품인 경우 없음)
2	문제점 및 상황	15%	경쟁사가 문제점 블록을 사용하는 경우에만. 그렇다면: 문제를 실제 사실로만 날카롭게 제시. 그렇지 않으면 건너뛰기 — 그 비중은 혜택 + 제품으로 이동
3	혜택 (преимущества)	20%	독자가 얻는 것, 각 이점을 시각 또는 증명으로 뒷받침
4	제품	40%	그것이 무엇인지 + 작동 방식, 한 화면에서 이해 가능
5	오퍼 및 CTA	20%	혜택 요약, 클릭 후 일어나는 일, 가격 + 위험 제거, 반론, CTA

혜택 + 제품 ≈ 페이지의 60%. 라이브 LP가 이미 존재하는 경우 섹션 순서를 유지하고 작업을 매핑하십시오.

경쟁사와 우리 구조의 결합 방식

1. 각 경쟁사 섹션을 우리의 5개 작업 중 하나에 매핑(사용 후기 → 혜택 증명, FAQ → 오퍼 반론, 로고 바 → 첫 화면 증명, 통합 → 제품…). 이를 통해 시장에 대한 작업별 관점을 얻습니다.
2. 시장 기준선 = 대부분의 경쟁사가 사용하는 패턴. 구매자가 기대하는 것입니다 — 포함시키십시오(로고 바, 무료 체험, 비교 표, 전후… 이 틈새 시장에서 표준으로 취급되는 모든 것).
3. 모범 사례 = (a) 카테고리 리더 또는 2명 이상의 경쟁사가 사용하거나 유료 광고를 게재하는 페이지에서 사용하며, (b) 해당 블록의 작업을 수행하는 패턴. 우리의 언어로 채택하십시오.
4. 갭 = 아무도 답하지 않는 반론, 아무도 증명하지 않는 혜택, 아무도 명명하지 않는 세그먼트, 아무도 사용하지 않는 형식(예: 실제 출력을 보여주지 않음). 1~2개를 선두로 제시하십시오 — 그것이 포지셔닝입니다.
5. 충돌. 하우스 규칙이 기본적으로 우선합니다. 체크포인트에서 충돌을 표시하고 소유자가 결정하도록 하십시오. 일반적인 예: 경쟁사가 리드/퀴즈 양식을 사용 → 우리는 하나의 기본 작업을 유지합니다(기본 규칙 참조).
6. 시각 시스템은 경쟁사 세트(일반적으로 리더)에서 가져옵니다: 팔레트 역할, 서체, 밀도, 미디어 형식, CTA 모양. 시스템을 복사하되, 그들의 카피, 숫자, 로고 또는 에셋은 복사하지 마십시오.

기본 규칙(모든 틈새 시장)

1. 강력한 첫 화면: 깔끔한 설명 또는 후크 혜택과 아바타.
2. 모든 CTA는 구체적인 혜택과 쌍을 이루고 다음에 일어날 일을 말합니다.
3. 실제 인터페이스로 제품 작동 방식을 보여줍니다 — 모든 작동 방식 단계를 해당 단계의 실제 스크린샷/녹화와 쌍으로 제시하거나, 경쟁사가 그렇게 한다면 사용하게 하십시오. 준비된 것이 없으면 → 올바른 크기의 빈 프레임을 남기고 무엇이 들어갈지 레이블을 붙이십시오. 인터페이스를 텍스트 목록, 아이콘 또는 가짜 UI로 대체하지 마십시오.
4. 하나의 기본 작업, 두 가지 CTA 유형만: 제품으로(시작 / 사용해보기 / 다운로드 / 가입) 또는 통화 예약(이상적으로는 내장 스케줄러). 페이지에 리드 또는 퀴즈 양식이 없어야 합니다. 허용됨: 경쟁사가 사용자가 사용해보도록 하는 방식인 경우 제품 입력(링크 붙여넣기, 파일 업로드, 주소 입력)을 통해 제품 사용을 시작할 수 있습니다.
5. 증명, 가격, 통계, 사용 후기 또는 로고를 절대 만들어내지 마십시오. 빈 슬롯 → 눈에 띄는 TODO.
6. 실제 제품 미디어만 — 제품 미디어가 있어야 할 자리에 가짜 UI나 스톡 이미지 사용 금지.
7. 시장 관행이 불명확하거나 위험할 때는 추측하지 말고 소유자에게 문의하십시오.

파일 목록

• references/reference-standard.md — 4개의 참조 랜딩 페이지: 품질 기준, 작업별 패턴 라이브러리, 카피 제작 및 시각 제작. 두 모드 모두에서 읽으십시오.
• references/redesign.md — 모드 B: 기존 페이지를 감사하고 디자인을 향상시킵니다.
• references/brief.md — 카드 우선 브리핑, 카드 행 → 블록 매핑, 언어, CTA 유형.
• references/competitor-research.md — 경쟁사 찾기, 어떤 페이지, 캡처, 분해 템플릿, 합성 규칙. 스킬의 핵심.
• references/framework.md — 5개 작업 상세, 블록별 규칙, 시장 성숙도, 계획 표.
• references/visual-system.md — 경쟁사(모든 틈새 시장)로부터 시각 시스템을 도출하고 고정합니다.
• references/build.md — 스택, 카피, 미디어, CTA 연결, 오퍼/가격, QA, 인계.
• references/seo-geo.md — 라이브 전: SEO 및 GEO(AI 검색) 기술 체크리스트, 도메인에서 Search Console까지.
• references/examples.md — 실제 예제(다양한 틈새 시장). 규칙이 아닌 예제입니다.
• scripts/capture.mjs — 경쟁사 URL에 대한 스크린샷 + 구조/시각 정보 추출.
• templates/teardown.md — 작성할 분해 파일.