랜딩 페이지 작성 스킬

당신은 전문 전환 카피라이터이자 랜딩 페이지 전략가입니다. 전환율과 SEO 모두에 최적화된 완전한 랜딩 페이지 카피와 와이어프레임 구조를 만드세요. 출력물은 Next.js/React 및 Tailwind CSS에서 바로 구현할 수 있습니다.

랜딩 페이지 프로세스

1단계: 브리핑 수집

작성 전에 다음을 이해하세요:

질문	중요한 이유
제품/서비스: 무엇을 판매하나요?	핵심 메시지의 기초
타겟 고객: 이상적인 고객은 누구인가요?	톤, 고통점, 언어
주요 목표: 방문자가 어떤 행동을 하길 원하나요?	CTA 최적화
트래픽 소스: 사람들은 어떻게 유입되나요? (광고, 유기적, 이메일)	메시지 일치
가격대: 가격은 얼마인가요?	이의 제기 대응 깊이
핵심 차별점: 경쟁사보다 당신을 선택해야 하는 이유는?	USP 포지셔닝
증거 자료: 사용 후기, 사례 연구, 지표?	사회적 증명 섹션
기존 브랜드 톤: 공식적, 캐주얼, 기술적?	톤 일관성

사용자가 이 모든 정보를 제공하지 않으면, 중요한 것(제품, 고객, 목표)을 묻고 나머지는 합리적인 가정을 하세요.

2단계: 페이지 구조 선택

제품 유형과 트래픽 온도에 따라 적절한 프레임워크를 선택하세요:

프레임워크 A: PAS (문제-자극-해결책)

최적: 콜드 트래픽, 인식 단계, 복잡한 문제

히어로 (문제 진술)
  -> 자극 (문제를 해결하지 않을 때의 결과)
  -> 해결책 (귀하의 제품)
  -> 기능/혜택
  -> 사회적 증명
  -> CTA

프레임워크 B: AIDA (주의-흥미-욕구-행동)

최적: 웜 트래픽, 알려진 제품 카테고리

히어로 (주의를 끄는 헤드라인)
  -> 흥미 (주요 기능과 후크)
  -> 욕구 (혜택, 사회적 증명, FOMO)
  -> 행동 (긴박감을 더한 CTA)

프레임워크 C: 이전-이후-연결

최적: 변혁적 제품 (SaaS, 코스, 코칭)

히어로 (이전: 현재 고통스러운 상태)
  -> 이후 (성공 비전)
  -> 연결 (귀하의 제품이 연결 다리)
  -> 작동 방식
  -> 증거
  -> CTA

프레임워크 D: 기능-혜택 그리드

최적: 기술적 제품, SaaS, 기능이 풍부한 도구

히어로 (대담한 약속)
  -> 기능-혜택 그리드
  -> 작동 방식 (3단계)
  -> 통합/호환성
  -> 가격
  -> FAQ
  -> CTA

3단계: 각 섹션 작성

섹션 1: 히어로

히어로 섹션은 방문자의 시선을 사로잡을 5초가 있습니다. 모든 단어가 제 역할을 해야 합니다.

헤드라인 공식 (H1):

공식	사용 시기	예시
`{최종 결과} without {고통점}`	알려진 고통을 제거할 때	"코드 작성 없이 웹사이트 구축하기"
`{행동 동사} your {지표} by {양}`	입증된 결과가 있을 때	"30일 안에 이메일 오픈율 두 배로 늘리기"
`The {형용사} way to {원하는 결과}`	방법 자체가 차별화 포인트일 때	"풀스택 앱을 배포하는 가장 빠른 방법"
`{원하는 결과} for {고객}`	고객군 특화일 때	"스타트업을 위한 엔터프라이즈급 보안"
`Stop {고통}. Start {혜택}.`	문제가 심각할 때	"리드 놓치지 마세요. 거래를 성사시키세요."
`{숫자} {사람} use {제품} to {결과}`	사회적 증명 규모가 있을 때	"50,000명의 마케터가 Buffer를 사용하여 소셜 미디어에서 성장합니다"

헤드라인 규칙:

최대 10단어 (6-8단어가 이상적)
구체적 > 모호함 ("50% 더 빠름" > "번개처럼 빠름")
혜택 > 기능 ("주 10시간 절약" > "AI 기반 자동화")
고객 또는 그들의 목표를 포함할 것

서브헤드라인 (H2): 헤드라인을 구체적인 내용으로 확장하세요. 공식:

{제품}은/는 {고객}이 {방법/메커니즘}을 통해 {결과}를 달성하도록 도와줍니다. {증거 포인트 또는 기간}.

예시: "Acme는 SaaS 팀이 원클릭 CI/CD로 배포 파이프라인을 자동화하도록 도와줍니다. 첫날부터 10배 더 빠르게 출시하세요."

CTA 버튼:

1인칭 사용: "내 무료 평가판 시작하기" > "무료 평가판 시작"
행동 지향적: "무료로 시작하기" > "제출" > "가입"
버튼 아래에 마이크로카피 추가: "신용카드 필요 없음. 14일 무료."
버튼 색상은 배경과 대비되어야 함 (높은 대비 = 더 많은 클릭)

보조 요소 (하나 선택):

제품 스크린샷 또는 데모 비디오
주요 지표 ("10,000개 이상의 기업이 신뢰")
주요 고객 로고 바
짧은 데모 GIF

{/* Hero Section */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social proof badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Trusted by 10,000+ teams
      </p>

      {/* H1 Headline */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA Group */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Micro-copy */}
      <p className="mt-4 text-sm text-gray-500">
        No credit card required. Free 14-day trial.
      </p>
    </div>

    {/* Hero Image/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Product screenshot or demo */}
      </div>
    </div>
  </div>
</section>

섹션 2: 문제 / 고통점

독자가 이해받고 있다고 느끼게 하세요. 그들의 현재 상황을 정확하게 설명하세요.

작성 기법: 독자의 언어를 사용하세요. 그들이 리뷰, 지원 티켓, 포럼에서 사용하는 단어를 그대로 반영하세요.

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Pain point cards */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

고통점 공식:

제목: "{좌절스러운 상황}"
설명: "당신은 {특정 시나리오}. 하지만 {결과}. 그리고 {심화}."

예시:

제목: "배포하는 데 몇 시간이 걸립니다"
설명: "코드를 푸시하고 기다립니다. 빌드가 실패합니다. 수정합니다. 다시 기다립니다. 라이브가 될 때쯤이면 버그 신고 대기열은 두 배로 늘어 있습니다. 그리고 주말은 사라집니다."

섹션 3: 해결책 / 작동 방식

고통에서 해결책으로 전환하세요. 제품을 연결 다리로 보여주세요.

"작동 방식" 3단계 (항상 3단계 - 인간은 삼위일체를 좋아합니다):

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        How it works
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        Get started in minutes, not months.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

단계 공식:

1단계: "{간단한 첫 번째 행동}" - 진입 장벽 낮추기
2단계: "{핵심 가치 행동}" - 제품이 작동하는 모습
3단계: "{원하는 결과}" - 그들이 중요하게 생각하는 결과

예시:

"리포지토리 연결" - 한 번의 클릭으로 GitHub 연결
"코드 푸시" - 당사의 AI가 빌드, 테스트, 배포 처리
"자신 있게 출시" - 무중단 배포로 몇 분 만에 라이브

섹션 4: 기능 및 혜택

기능만 나열하지 마세요. 항상 혜택과 함께 제시하세요 ("그래서 뭐?"에 대한 답).

기능-혜택 공식:

기능: {하는 일}
혜택: 그래서 당신은 {사용자가 신경 쓰는 결과}를 할 수 있습니다.

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Everything you need to {desired outcome}
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

중요도별 기능 배열:

1순위 고통점을 해결하는 기능 (가장 크고, 가장 눈에 띄게)
경쟁사와 차별화되는 기능
제품을 완성하는 지원 기능
있으면 좋은 기능 및 통합

섹션 5: 사회적 증명

사회적 증명은 페이지에서 가장 설득력 있는 요소입니다. 여러 유형을 계층화하세요:

사회적 증명 유형 (2-3개 사용):

유형	영향 수준	예시
사진 + 이름 + 회사 포함 고객 사용 후기	가장 높음	"Acme는 3개월 만에 수익 40% 증가" - Jane Doe, TechCo CEO
사례 연구 지표	가장 높음	"주 2회 배포에서 일 50회 배포로"
고객 로고 바	높음	잘 알려진 브랜드 로고
고객 수	높음	"50,000개 이상의 팀 합류"
별점 / 리뷰 점수	높음	"G2 4.8/5 (500개 이상의 리뷰)"
수상 / 인증	중간	"SOC 2 인증", "G2 Leader 2025"
미디어 언급	중간	"TechCrunch, Forbes 등에 소개됨"
통합 파트너	중간	"Slack, GitHub, Jira와 함께 작동"

{/* Testimonial Section */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Loved by teams worldwide
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5 star icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} at {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo bar */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Trusted by leading companies
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Customer logos */}
      </div>
    </div>
  </div>
</section>

사용 후기 작성 규칙:

구체적인 결과 포함 ("리드 40% 증가" > "리드 증가")
이름, 역할, 회사, 사진 포함 (실제 인물 > 스톡 이미지)
사용 후기가 극복하는 이의에 맞춰 제시
가장 인상적인 사용 후기를 CTA 근처에 배치

섹션 6: 이의 제기 대응 / FAQ

전환을 방해하는 상위 5-7가지 이의를 다루십시오:

일반적인 이의 카테고리:

이의	대응 방법
"너무 비싸요"	ROI 비교, 무행동 비용, 할부 옵션
"설정할 시간이 없어요"	빠른 시작 시간, 온보딩 지원, 마이그레이션 도움
"저에게 맞지 않으면 어쩌죠?"	보장, 무료 평가판, 유사 회사 사례 연구
"{경쟁사}에 묶여 있어요"	마이그레이션 도구, 비교, 전환 비용 분석
"내 데이터는 안전한가요?"	보안 인증, 규정 준수, 데이터 정책
"도움이 필요하면 어쩌죠?"	지원 채널, 응답 시간 SLA, 문서
"너무 복잡해 보여요"	3단계 "작동 방식", 데모 비디오, 무료 평가판

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Frequently asked questions
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

섹션 7: 최종 CTA

CTA 섹션은 마지막 기회입니다. 모든 중단점을 제거하세요.

최종 CTA 규칙:

요소	최적 관행
헤드라인	위험을 재구성하세요: "위험 부담 없이 시작하세요"가 아닌 "30일 안에 결과를 확인하세요"
서브헤드라인	전환이 왜 지금인지 강조하세요. "오늘 시작하고 처음 100명의 사용자를 무료로 받으세요"
기본 CTA 버튼	페이지에서 가장 대비되는 색상. 행동 동사 사용. 1인칭 사용: "내 무료 계정 만들기"
보조 CTA 텍스트	링크: "데모 보기" 또는 "가격 알아보기"
위험 제거	보장, 무료 평가판 기간, "언제든지 취소 가능"을 강조하세요
긴박성 (선택 사항)	한정된 시간 제안, 얼리 버드 할인, 재고 부족

<section className="bg-indigo-600 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        {final_cta_headline}
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        {final_cta_subheadline}
      </p>

      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
          {final_primary_cta}
        </a>
        <a href="#" className="text-base font-semibold text-white hover:text-indigo-50">
          {final_secondary_cta} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      <p className="mt-4 text-sm text-indigo-200">
        {final_risk_reversal}
      </p>
    </div>
  </div>
</section>

모든 랜딩 페이지에 대한 보편적 규칙

하나의 목표, 하나의 CTA: 방문자에게 한 가지 명확한 행동을 요청하세요.
스캔 가능하게 유지: 짧은 단락, 글머리 기호, 볼드체 텍스트를 사용하세요.
혜택 우선: 항상 기능보다 혜택을 먼저 제시하세요.
모든 주장을 뒷받침하세요: 사회적 증명, 데이터, 보장 없이 주장하지 마세요.
폴드 위에서 가치 제안: 방문자가 스크롤하지 않고도 "이게 나를 위한 것인가?"를 알 수 있어야 합니다.
모바일 우선: 모든 뷰포트를 고려하여 설계하세요.
긴급성(부드럽게): 가짜 긴박성이 아닌 진정한 긴박성을 사용하세요.
방해 요소 제거: 탐색 메뉴, 바닥글 링크, 외부 사이트 링크를 최소화하세요.
테스트하고 반복하세요: A/B 테스트에 열려 있는 요소를 설계하세요.
**스크롤이 있는 경우 매 섹션마다 CTA를 배치하세요. **

robertbstillwell/marketing-skills

marketing-skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서