Claude Code 랜딩 페이지 구현: 신뢰, 폼, 추적, 테스트까지

랜딩 페이지는 예쁜 화면이 아니라 검증 가능한 전환 경로다

Claude Code에게 “랜딩 페이지를 만들어줘”라고 말하면 Hero, 기능 카드, 가격, FAQ, CTA가 빠르게 나옵니다. 하지만 수익화와 상담 전환을 목표로 한다면 그 정도로는 부족합니다. 좋은 랜딩 페이지는 특정 독자가 하나의 제안을 이해하고, 믿을 이유를 확인하고, 다음 행동을 선택하며, 그 행동이 데이터로 남도록 만들어야 합니다.

전환은 결제만 뜻하지 않습니다. 상담 예약, 체크리스트 다운로드, 템플릿 구매, 교육 문의, 무료 체험 시작처럼 사업적으로 의미 있는 행동을 모두 포함합니다. CTA는 Call To Action, 즉 “무료 리뷰 예약”, “체크리스트 받기”처럼 다음 행동을 안내하는 버튼이나 링크입니다. 신뢰 블록은 실제 구현 과정, 검토 기준, 실패 후 수정한 내용, 작성자 경험처럼 주장에 근거를 주는 영역입니다.

ClaudeCodeLab의 목표는 “전환율을 반드시 올린다”는 보장이 아닙니다. Claude Code 컨설팅, 템플릿, 팀 교육을 명확하고 측정 가능하며 접근성 있고 빠른 페이지로 연결하는 것입니다. 기준이 되는 공식 문서는 Claude Code docs, Astro Pages, Tailwind CSS docs, React forms, GA4 events, Playwright docs를 확인하세요.

세 가지 사용 사례에서 역산하기

디자인보다 먼저 독자와 제안을 정합니다. Claude Code는 구체적인 상황이 있을 때 일반적인 SaaS 문구를 덜 만들어냅니다.

사용 사례	독자의 상태	적절한 제안	측정할 행동
개인 개발자 템플릿 판매	Claude Code로 LP를 만들고 싶지만 카피 구조가 약함	Astro LP 템플릿과 전환 카피 프롬프트	제품 CTA 클릭, 결제 시작
SaaS 또는 에이전시 상담	트래픽은 있지만 리드 품질이 불안정함	90분 랜딩 페이지 진단과 구현 리뷰	폼 제출, 일정 예약
팀 교육	팀 전체의 Claude Code 사용법을 맞추고 싶음	LP 제작, 리뷰, 분석, 테스트 워크숍	교육 문의, 자료 다운로드

독자는 보통 세 질문을 합니다. “나를 위한 것인가?”, “믿을 수 있는가?”, “클릭하면 무엇이 일어나는가?” 페이지 순서는 이 질문에 답해야 합니다.

flowchart TD
  A["검색, 글, 광고, 소셜 유입"] --> B["첫 화면에서 대상, 제안, CTA 설명"]
  B --> C["신뢰 블록으로 작업 방식과 검토 기준 제시"]
  C --> D["사용 사례로 독자의 상황에 연결"]
  D --> E["가격 또는 무료 자료로 다음 행동 부담 완화"]
  E --> F["폼 제출, 제품 클릭, 교육 문의"]
  F --> G["이벤트와 A/B 테스트로 다음 개선"]

Claude Code에 전달할 구현 프롬프트

한 줄 요청 대신 목표, 제약, 계측, 검증 조건을 함께 전달합니다.

Astro + React + Tailwind CSS로 "Claude Code Landing Page Sprint" 랜딩 페이지를 구현하세요.

목표:
- 상담 예약, 템플릿 구매, 팀 교육 문의로 연결한다.
- 대상은 개인 개발자, SaaS 운영자, 에이전시, 개발 조직 리더다.
- 전환율 개선을 보장한다는 표현은 쓰지 않는다.

필수 섹션:
- 첫 화면: 대상 독자, 제안, 주요 CTA, 보조 CTA.
- 신뢰 블록: Masa의 구현 경험, 리뷰 프로세스, 출시 전 체크리스트.
- 세 가지 구체적 사용 사례.
- 가격 또는 무료 리드 마그넷.
- 폼: name, email, company, goal, budget, consent.
- 이벤트: lp_view, cta_click, lead_submit, product_click.
- A/B 테스트: CTA 문구 두 가지 비교.
- Playwright 모바일 점검: CTA 표시, 폼 라벨, 가로 스크롤 없음.

제약:
- 복사해 실행 가능한 TypeScript를 작성한다.
- label, focus, 키보드 조작, 색 대비를 고려한다.
- LCP를 악화시키는 무거운 배경 영상은 쓰지 않는다.
- 이벤트에 개인정보를 보내지 않는다.

Astro로 첫 화면 구현하기

첫 화면은 대상, 제안, 다음 행동이 즉시 보여야 합니다. 아래 컴포넌트는 CTA를 두 개로 제한하고, variant 기반 문구로 A/B 테스트에 대비합니다.

---
// src/components/LandingHero.astro
export interface Props {
  variant: "control" | "lead_magnet";
}

const { variant } = Astro.props;

const copy = {
  control: {
    eyebrow: "Claude Code 랜딩 페이지 스프린트",
    headline: "폼과 이벤트 추적까지 갖춘 Claude Code 랜딩 페이지를 만든다",
    body: "첫 화면, 신뢰 블록, 가격, 리드 폼, 분석 이벤트, 모바일 QA를 출시 가능한 구현으로 정리합니다.",
    primary: "무료 리뷰 예약",
    secondary: "템플릿 보기",
  },
  lead_magnet: {
    eyebrow: "무료 체크리스트 포함",
    headline: "UI를 만들기 전에 랜딩 페이지 이탈 지점을 찾는다",
    body: "제안, CTA, 가격, 폼, 속도, 접근성, 이벤트 명명 규칙을 출시 전에 점검합니다.",
    primary: "체크리스트 받기",
    secondary: "교육 내용 보기",
  },
}[variant];
---

<section class="bg-slate-950 px-4 py-16 text-white sm:py-20">
  <div class="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
    <div>
      <p class="text-sm font-semibold uppercase tracking-wide text-cyan-300">{copy.eyebrow}</p>
      <h1 class="mt-4 max-w-3xl text-4xl font-bold leading-tight sm:text-5xl">{copy.headline}</h1>
      <p class="mt-5 max-w-2xl text-lg leading-8 text-slate-200">{copy.body}</p>
      <div class="mt-8 flex flex-col gap-3 sm:flex-row">
        <a data-cta-id="hero-primary" href="#lead-form" class="inline-flex min-h-12 items-center justify-center rounded-md bg-cyan-300 px-6 font-semibold text-slate-950 hover:bg-cyan-200 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">
          {copy.primary}
        </a>
        <a data-cta-id="hero-secondary" href="/products" class="inline-flex min-h-12 items-center justify-center rounded-md border border-slate-500 px-6 font-semibold text-white hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-cyan-200 focus:ring-offset-2 focus:ring-offset-slate-950">
          {copy.secondary}
        </a>
      </div>
      <p class="mt-4 text-sm text-slate-400">성과 보장이 아니라, 명확한 구현과 검증 가능한 개선 경로를 제공합니다.</p>
    </div>
    <div class="rounded-lg border border-slate-700 bg-slate-900 p-6">
      <h2 class="text-lg font-semibold">출시 전 확인 항목</h2>
      <ul class="mt-4 space-y-3 text-sm leading-6 text-slate-200">
        <li>첫 화면에서 대상, 제안, 다음 행동이 보이는가?</li>
        <li>신뢰 블록이 리뷰 과정과 실제 경험을 설명하는가?</li>
        <li>폼 제출, 제품 클릭, 교육 문의를 따로 측정하는가?</li>
        <li>모바일에서 CTA와 폼이 가려지지 않는가?</li>
      </ul>
    </div>
  </div>
</section>

data-cta-id는 분석을 위한 계약입니다. 이 속성이 없으면 출시 후 어떤 버튼이 눌렸는지 추적하기 위해 DOM과 이벤트 이름을 다시 정리해야 합니다.

신뢰, 증거, 가격, 리드 마그넷 배치

중간 섹션은 기능 나열보다 불안 해소가 중요합니다.

블록	넣을 내용	피할 표현
신뢰	리뷰 체크리스트, 구현 화면, 작성자 정보, QA 과정	근거 없는 “AI가 전부 해결”
증거	Masa가 테스트한 것, 실패한 것, 수정한 것	가짜 후기와 검증 불가능한 수치
가격	템플릿, 상담, 교육의 차이	모든 가격을 폼 뒤에 숨기기
리드 마그넷	체크리스트, 감사 시트, 카피 프롬프트	이메일 수집용 얇은 PDF

ClaudeCodeLab에서는 자가 실행 독자에게는 products, 팀 표준화가 필요한 독자에게는 training, 리뷰가 필요한 독자에게는 폼을 제안하는 흐름이 자연스럽습니다.

폼 Schema와 Astro API

Schema는 폼이 어떤 데이터를 어떤 형식으로 받을지 정한 약속입니다. 아래 API는 추가 의존성 없이 동작합니다.

// src/pages/api/lead.ts
import type { APIRoute } from "astro";

type LeadInput = {
  name: string;
  email: string;
  company: string;
  goal: string;
  budget: "template" | "consulting" | "training" | "undecided";
  consent: boolean;
};

function validateLead(form: FormData): { ok: true; data: LeadInput } | { ok: false; errors: string[] } {
  const data: LeadInput = {
    name: String(form.get("name") ?? "").trim().slice(0, 80),
    email: String(form.get("email") ?? "").trim().slice(0, 120),
    company: String(form.get("company") ?? "").trim().slice(0, 120),
    goal: String(form.get("goal") ?? "").trim().slice(0, 1000),
    budget: String(form.get("budget") ?? "undecided") as LeadInput["budget"],
    consent: form.get("consent") === "on",
  };

  const errors: string[] = [];
  if (!data.name) errors.push("Name is required.");
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) errors.push("A valid email is required.");
  if (data.goal.length < 20) errors.push("Please describe the goal in at least 20 characters.");
  if (!["template", "consulting", "training", "undecided"].includes(data.budget)) errors.push("Budget is invalid.");
  if (!data.consent) errors.push("Consent is required.");

  return errors.length ? { ok: false, errors } : { ok: true, data };
}

export const POST: APIRoute = async ({ request }) => {
  const result = validateLead(await request.formData());

  if (!result.ok) {
    return new Response(JSON.stringify({ ok: false, errors: result.errors }), {
      status: 400,
      headers: { "content-type": "application/json" },
    });
  }

  console.info("new_lp_lead", {
    emailDomain: result.data.email.split("@")[1],
    budget: result.data.budget,
    goalLength: result.data.goal.length,
  });

  return new Response(JSON.stringify({ ok: true }), {
    status: 200,
    headers: { "content-type": "application/json" },
  });
};

분석 이벤트에는 이름, 이메일, 회사명, 자유 입력 내용을 보내지 않습니다. 분류값만 보내야 나중에 동의와 개인정보 문제를 줄일 수 있습니다.

// src/components/LeadForm.tsx
import { useState } from "react";
import { trackLpEvent } from "../lib/lp-events";

export function LeadForm() {
  const [message, setMessage] = useState("");
  const [sending, setSending] = useState(false);

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSending(true);

    const response = await fetch("/api/lead", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });

    setSending(false);
    if (!response.ok) {
      const body = await response.json();
      setMessage(body.errors?.join(" ") ?? "폼을 확인해 주세요.");
      return;
    }

    trackLpEvent({ eventName: "lead_submit", ctaId: "lead-form", value: "consulting" });
    setMessage("전송했습니다. 다음 안내 메일을 확인해 주세요.");
    event.currentTarget.reset();
  }

  return (
    <form id="lead-form" onSubmit={onSubmit} className="space-y-5 rounded-lg border border-slate-200 p-6">
      <label className="block text-sm font-medium">이름<input name="name" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">이메일<input name="email" type="email" required className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">개선하고 싶은 랜딩 페이지 목표<textarea name="goal" required minLength={20} rows={5} className="mt-1 w-full rounded-md border px-3 py-2" /></label>
      <label className="block text-sm font-medium">지원 유형
        <select name="budget" className="mt-1 w-full rounded-md border px-3 py-2">
          <option value="template">템플릿</option>
          <option value="consulting">상담</option>
          <option value="training">팀 교육</option>
          <option value="undecided">아직 미정</option>
        </select>
      </label>
      <label className="flex gap-2 text-sm"><input name="consent" type="checkbox" required />문의 대응을 위해 연락받는 것에 동의합니다.</label>
      <button disabled={sending} className="min-h-11 w-full rounded-md bg-slate-950 px-5 font-semibold text-white disabled:opacity-60">{sending ? "전송 중..." : "문의 보내기"}</button>
      <p role="status" aria-live="polite" className="text-sm">{message}</p>
    </form>
  );
}

이벤트 명명은 출시 전에 고정한다

최소한 lp_view, cta_click, lead_submit, product_click은 먼저 정합니다.

// src/lib/lp-events.ts
type LpEventName = "lp_view" | "cta_click" | "lead_submit" | "product_click";

type LpEvent = {
  eventName: LpEventName;
  ctaId?: string;
  variant?: "control" | "lead_magnet";
  value?: "template" | "consulting" | "training";
};

declare global {
  interface Window {
    dataLayer?: Array<Record<string, unknown>>;
    gtag?: (command: "event", name: string, params: Record<string, unknown>) => void;
  }
}

export function trackLpEvent(event: LpEvent) {
  if (typeof window === "undefined") return;

  const params = {
    page_slug: "claude-code-landing-page",
    cta_id: event.ctaId,
    variant: event.variant,
    value_type: event.value,
  };

  window.dataLayer?.push({ event: event.eventName, ...params });
  window.gtag?.("event", event.eventName, params);
}

성능도 계측 대상입니다. Core Web Vitals의 LCP는 주요 콘텐츠가 보이는 시간을 뜻합니다. 무거운 Hero 이미지, 늦게 로드되는 후기 블록, 마케팅 스크립트가 흔한 문제입니다.

A/B 테스트는 보장처럼 쓰지 않는다

A/B 테스트는 두 문구를 통제된 방식으로 비교하는 일입니다. 트래픽이 적으면 방향성만 볼 수 있습니다. 먼저 가설, 주 지표, 보호 지표, 중단 조건을 정하세요.

// src/lib/landing-ab.ts
export type LandingVariant = "control" | "lead_magnet";

export function chooseLandingVariant(visitorId: string): LandingVariant {
  let hash = 2166136261;
  for (let index = 0; index < visitorId.length; index += 1) {
    hash ^= visitorId.charCodeAt(index);
    hash = Math.imul(hash, 16777619);
  }
  return Math.abs(hash) % 2 === 0 ? "control" : "lead_magnet";
}

---
// src/pages/lp.astro
import LandingHero from "../components/LandingHero.astro";
import { chooseLandingVariant } from "../lib/landing-ab";

const visitorId = Astro.cookies.get("lp_visitor")?.value ?? crypto.randomUUID();
Astro.cookies.set("lp_visitor", visitorId, {
  path: "/",
  sameSite: "lax",
  secure: import.meta.env.PROD,
  maxAge: 60 * 60 * 24 * 30,
});

const variant = chooseLandingVariant(visitorId);
---

<LandingHero variant={variant} />
<script define:vars={{ variant }}>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "lp_view", page_slug: "claude-code-landing-page", variant });
</script>

localStorage만으로 variant를 정하면 첫 화면에서 문구가 깜박일 수 있고, 실제 노출과 기록이 어긋날 수 있습니다.

Playwright로 모바일을 확인한다

모바일 검사는 CTA 가시성, 가로 스크롤, 폼 라벨, 동의 체크를 확인해야 합니다.

// tests/landing-page.spec.ts
import { test, expect, devices } from "@playwright/test";

test.use({ ...devices["iPhone 13"] });

test("mobile LP keeps CTA visible and avoids horizontal overflow", async ({ page }) => {
  await page.goto("/lp");

  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
  await expect(page.locator('[data-cta-id="hero-primary"]')).toBeVisible();

  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
  const viewportWidth = page.viewportSize()?.width ?? 390;
  expect(scrollWidth).toBeLessThanOrEqual(viewportWidth + 1);
});

test("lead form requires consent", async ({ page }) => {
  await page.goto("/lp");
  await page.getByLabel("이름").fill("Masa");
  await page.getByLabel("이메일").fill("masa@example.com");
  await page.getByLabel("개선하고 싶은 랜딩 페이지 목표").fill("Claude Code 상담 랜딩 페이지의 문의 품질을 개선하고 싶습니다.");
  await page.getByRole("button", { name: "문의 보내기" }).click();

  await expect(page.getByLabel("문의 대응을 위해 연락받는 것에 동의합니다.")).toBeFocused();
});

자주 생기는 실패

첫째, 제안이 모호합니다. “AI로 업무 개선”보다 “Claude Code 제안용 LP, 폼, 이벤트, 모바일 QA를 구현한다”가 훨씬 판단하기 쉽습니다.

둘째, 증거가 약합니다. 가짜 후기나 보장 수치 대신 실제 체크리스트, 실패한 부분, Masa가 고친 내용을 보여 주세요.

셋째, 모든 행동을 폼 하나로 몰아넣습니다. 템플릿 구매, 상담, 교육 문의, 자료 다운로드는 서로 다른 의도입니다.

넷째, 접근성을 마지막 장식으로 봅니다. 라벨 없는 폼, 낮은 대비, 키보드로 누르기 어려운 CTA는 전환 손실입니다.

다섯째, 이벤트를 나중에 붙입니다. 이름이 섞이면 어떤 CTA와 variant가 의미 있었는지 알 수 없습니다.

ClaudeCodeLab CTA로 연결하기

자기 주도형 독자는 products, 팀 도입을 원하는 독자는 training, 현재 LP 리뷰가 필요한 독자는 폼으로 연결합니다. 관련 구현은 Claude Code 분석 구현, Claude Code A/B 테스트, Claude Code Playwright 테스트, Claude Code SEO 최적화을 함께 보면 좋습니다.

실제로 적용해 본 결과

Masa가 이 흐름으로 작은 검증 LP를 만들었을 때 가장 도움이 된 것은 디자인 자체보다 CTA id, 폼 schema, 모바일 테스트가 먼저 고정된 점이었습니다. 어떤 버튼이 눌렸는지, 모바일 폼이 쓸 수 있는지, 어떤 variant가 노출됐는지 확인할 수 있었습니다. 매출을 보장하지는 않지만, “보기만 좋은 페이지”에서 “학습 가능한 페이지”로 바꾸는 기반으로는 충분히 실용적이었습니다.