랜딩 페이지 디자인

개요

전환을 일으키면서도 매혹적인 랜딩 페이지를 구축하세요. 이 스킬은 전환 중심의 구조와 독창적인 시각 디자인을 결합하여 AI가 범람하는 세상에서 눈에 띄는 페이지를 만듭니다. 목표: 판매해도 자랑스러울 만한, 50~100달러 가치의 페이지.

필수: 바이브 디스커버리 (먼저 하세요)

코드를 작성하기 전에 반드시 바이브 디스커버리 프로세스를 실행해야 합니다. 이것은 조회 테이블이 아닙니다. 매번 독특한 미적 방향을 생성하는 창의적인 프롬프트입니다.

목표: 비슷한 제품이라도 두 랜딩 페이지가 서로 비슷해 보이지 않아야 합니다.

바이브 디스커버리 프로세스

사용자에게 다음 질문을 하고, 고유한 방향을 종합하세요. 답변을 단순히 사전 설정에 매핑하지 마십시오.

1단계: 맥락 수집 (질문하기)

Q1: 이 브랜드에 어울리는 현실 세계의 장소나 사물은 무엇인가요?

'어떤 업종'이 아닌, 실제 구체적인 것입니다. 새벽 2시의 도쿄 편의점. 할머니의 부엌. 브루탈리스트 주차장. 산호초. 747 조종석. 마라케시 벼룩시장. 1970년대 녹음 스튜디오.

Q2: 첫 3초 안에 느껴야 할 단 하나의 감정은 무엇인가요?

하나를 고르세요: 평온함. 활기참. 호기심. 신뢰. 기쁨. 감명. 반항. 향수. 영감. 즐거움. 세련됨. 환영받음. 흥미로움. 자신감.

Q3: 충돌시킬 예상치 못한 두 가지 영향을 고르세요:

예시: "의료용 포장 + 스케이트보드 그래픽", "스프레드시트 + 스트리트 아트", "럭셔리 호텔 + 펑크 진", "NASA 관제 센터 + 유치원", "일본 편의점 + 빅토리아 시대 도서관"

Q4: 이 페이지가 절대 오해받아서는 안 되는 것은 무엇인가요?

적극적으로 피해야 할 2~3가지 구체적인 것을 말씀해주세요. "암호화폐 프로젝트", "웰니스 앱", "은행이 만든 것", "보라색 그라데이션이 있는 모든 것"

2단계: 미학 창조하기 (찾지 말고 - 창조하세요)

답변을 바탕으로 다음을 결정하여 고유한 바이브를 창조하세요:

색상 창조 (암기된 팔레트 사용 금지 - 장소/사물에서 파생)

Q1의 현실 장소/사물에는 어떤 색상이 존재하나요?
해당 참조에 진정성 있게 느껴지는 3~4가지 색상을 추출하세요.
이전 프로젝트의 코드를 재사용하지 말고 새로운 특정 16진수 코드를 발명하세요.
팔레트에 연상시키는 이름을 붙이세요 ("파란색과 주황색"이 아닌 "자정의 포장마차"나 "녹슨 벨트 아침")

타이포그래피 창조 (목소리를 충돌에 맞추세요)

그 장소에서 텍스트는 어떤 소리를 낼까요?
Q3의 충돌을 구현하는 디스플레이 폰트를 찾으세요.
평소 사용하는 선택지에 의존하지 마세요 - 새로운 시각으로 Google Fonts를 둘러보세요.
고려 사항: 굵기, 너비, 대비, 기이한 점.

레이아웃 창조 (물리적 공간에서 파생)

Q1의 장소에서는 공간이 어떻게 구성되어 있나요?
비좁습니까, 광활합니까? 격자형입니까, 유기적입니까? 수직입니까, 수평입니까?
Q3의 충돌을 구현할 예상치 못한 레이아웃 선택은 무엇인가요?

모션 창조 (감정에 맞추세요)

Q2의 감정은 어떻게 움직이나요?
평온함 = 거의 인지 불가. 활기참 = 운동감. 세련됨 = 느리고 신중함.
이 페이지를 정의하는 하나의 시그니처 모션은 무엇인가요?

3단계: 바이브 명세서 작성하기

코딩 전에 이것을 명시적으로 작성하세요:

바이브 이름: [2~3단어 이름 발명]
참조: [Q1의 장소/사물]
감정: [Q2에서]
충돌: [Q3에서]
안티 패턴: [Q4에서]

색상:
- 주 색상: [16진수] - [이 색상인 이유]
- 보조 색상: [16진수] - [이유]
- 배경 색상: [16진수] - [이유]
- 강조 색상: [16진수] - [이유]
- 팔레트 이름: [연상시키는 이름]

타이포그래피:
- 디스플레이: [특정 폰트 이름] - [어울리는 이유]
- 본문: [특정 폰트 이름] - [이유]
- 성격: [목소리 설명]

레이아웃:
- 밀도: [드묾/균형 잡힘/빽빽함]
- 형태: [날카로움/둥글림/유기적/혼합]
- 시그니처 요소: [하나의 독특한 레이아웃 선택]

모션:
- 수준: [정적/미세/보통/역동적/혼란스러움]
- 시그니처 애니메이션: [이 페이지를 정의하는 하나의 특정 애니메이션]

와일드카드:
- "어울리지" 않지만 기억에 남게 만드는 예상치 못한 세부 사항 하나

4단계: 신선도 확인

진행하기 전에 확인하세요:

지난 3개 프로젝트의 16진수 코드를 재사용하지 않았습니다.
"편안한" 폰트로 기본 설정하지 않았습니다 (확인: Inter, Nunito, Space Grotesk를 사용하고 있나요? 그렇다면 다른 것을 찾으세요).
Q3의 충돌이 내 선택에 실제로 보입니다.
누군가 이 페이지를 이전 랜딩 페이지와 혼동할 수 없습니다.
나조차도 놀라게 하는 와일드카드를 포함시켰습니다.

바이브 디스커버리 예시

Q1 - 장소/사물: "러시아워의 일본 기차역"

Q2 - 감정: "자신감"

Q3 - 충돌: "교통 표지판 + 오트 쿠튀르"

Q4 - 절대 오해 금지: "명상 앱, 엉뚱한 것, 스타트업 브로 테크"

생성된 바이브 명세:

바이브 이름: 신주쿠 런웨이
참조: 러시아워의 일본 기차역
감정: 자신감
충돌: 교통 표지판 + 오트 쿠튀르
안티 패턴: 부드러운 그라데이션 없음, 장난기 있는 일러스트레이션 없음, 둥글고 친근한 형태 없음

색상:
- 주 색상: #1a1a1a - 기차 문의 검은색
- 보조 색상: #f5f5f0 - 매끄럽게 닳은 플랫폼 콘크리트
- 배경 색상: #fafaf8 - 형광등 아래 흰색
- 강조 색상: #e60012 - JR 선 빨간색, 주목을 끄는 색
- 팔레트 이름: "플랫폼 가장자리"

타이포그래피:
- 디스플레이: Darker Grotesque - 자신감, 약간 좁은, 유럽적 엣지
- 본문: Noto Sans JP - 깔끔한 유틸리티, 교통에서 영감 받음
- 성격: 권위적이지만 차갑지 않음. 명확함. 방향 제시적.

레이아웃:
- 밀도: 풍부하지만 체계적 - 역 지도처럼
- 형태: 날카로움, 의도적인 둥근 예외 있음(기차 창문처럼)
- 시그니처 요소: 기차 시간표처럼 섹션을 나누는 강한 수평 띠

모션:
- 수준: 미세하지만 정밀함
- 시그니처 애니메이션: 도착하는 기차처럼 측면에서 요소가 슬라이드 인 - 수평, 부드러움, 정확한 타이밍

와일드카드:
- 한 요소가 직물 같은 텍스처 오버레이를 사용함 - 오트 쿠튀르 충돌

영감 스타터 (Q1이 막힐 때)

안티-컨버전스 규칙

16진수 코드 암기 금지 - 참조에서 색상을 새로 생성하고, "내 평소 파란색"을 떠올리지 마세요.
폰트 교체 필수 - 연속된 프로젝트에서 동일한 디스플레이 폰트를 사용할 수 없습니다.
충돌이 보여야 함 - 누군가 Q3의 두 영향력을 모두 볼 수 없다면 더 강하게 밀어붙이세요.
와일드카드는 필수 - 모든 바이브에는 "어울리지" 않지만 독특하게 만드는 요소가 하나 있어야 합니다.
이름을 붙이세요 - 이름 없는 바이브는 평범해집니다. 이름 있는 바이브는 정체성을 갖습니다.

빠른 컨텍스트 질문 (최소 버전)

사용자가 컨텍스트 없이 "랜딩 페이지 만들어 줘"라고만 말하면 다음과 같이 질문하세요:

"이 브랜드의 에너지를 포착하는 한 가지 장소나 사물은 무엇인가요?"
"어떤 감정이 지배적이어야 하나요?"
"이것이 절대 닮아서는 안 되는 것은 무엇인가요?"

그런 다음 세 가지 답변에서 바이브를 종합하세요.

필수: 카피 전략 (바이브 디스커버리와 함께 하세요)

바이브 디스커버리와 병렬로 실행하세요. 바이브 디스커버리는 모양을 제공합니다. 카피 전략은 단어를 제공합니다. 코드 작성 전에 둘 다 완료되어야 합니다.

전환 방정식

모든 카피 결정은 이것에서 비롯됩니다:

구매율 = 욕구 - (노동 + 혼란)

욕구 증가 → 가치를 명확하고 구체적으로 전달
노동 감소 → 간결함, 스캔 가능한 구조, 명백한 다음 행동
혼란 감소 → 그것이 정확히 무엇인지 말하고, 버튼을 놓칠 수 없게 만드세요.

카피 결정이 막히면 "이것이 욕구를 증가시키나요, 아니면 노동/혼란을 감소시키나요?"라고 물어보세요.

1단계: 반대 의견 발견

헤드라인을 하나라도 작성하기 전에 구매 반대 의견을 식별하세요. 사용자에게 물어보세요:

"무엇이 고객이 구매하는 것을 거의 막았습니까?" "비고객은 아직 왜 구매하지 않았습니까?"

일반적인 반대 의견 범주:

"이것을 할 기술/시간이 없어요"
"이것은 내 특정 상황에 맞지 않을 거예요"
"받는 것에 비해 너무 비싸요"
"아직 충분히 신뢰가 가지 않아요"
"이게 실제로 뭘 하는지 이해가 안 돼요"

상위 3가지 반대 의견을 적어두세요. 이것들이 헤드라인 훅, 기능 카피, CTA 구성에 영향을 미칩니다.

2단계: 헤드라인 공식

모든 히어로 헤드라인은 다음을 따릅니다: 가치 제안 + 훅

가치 제안은 다음 리트머스 테스트를 통과해야 합니다:

방문자가 헤드라인만 보고 다른 것은 아무것도 보지 못한다면, 당신이 무엇을 파는지 정확히 알 수 있습니까?

❌ "워크플로우를 개선하세요" (기업용 빈말 - 무엇을 위한 워크플로우?) ❌ "생산성의 미래" (구체적인 것을 말하지 않음) ✅ "1시간 내 식료품 배달" (구체적, 명확) ✅ "웹사이트를 시각적으로 디자인하세요 - 코드 불필요" (무엇을 하는지 + 주요 반대 의견 처리)

훅은 두 가지 유형 중 하나입니다:

유형 A — 대담하고 구체적인 주장 (호기심 유발):

"배포 시간을 4시간에서 12분으로 단축"
"지난달 10,000개 팀이 더 빠르게 출시"

유형 B — 반대 의견 해결 (1위 구매 장벽 제거):

"신용카드 필요 없음" (신뢰 반대 의견 처리)
"기존 도구와 함께 작동" (전환 비용 반대 의견 처리)
"5분 안에 설정" (노력 반대 의견 처리)

1단계의 최상위 반대 의견을 사용하여 훅 유형을 선택하세요.

3단계: 서브헤드라인 규칙

서브헤드라인은 정확히 두 가지 작업을 합니다:

제품이 무엇인지 설명합니다 (헤드라인이 혜택 중심인 경우)
대담한 주장이 어떻게 가능한지 설명합니다 (헤드라인이 주장을 한 경우)

최대: 1-2문장. 가볍게 유지하세요. 세 문장이 필요하다면 헤드라인이 충분한 역할을 하고 있지 않은 것입니다.

4단계: 기능 카피 구조

각 기능에는 정확히 세 가지 요소가 있습니다:

요소	규칙
기능 헤더	짧은 가치 제안만. 직설적으로 말하세요. ❌ "팀에 힘을 실어주세요" ✅ "실시간 협업"
기능 문단	간결한 설명 + 하나의 중요한 반대 의견을 다룹니다. 필요한 경우 세부 정보 링크 - 텍스트 벽은 안 됩니다.
기능 이미지	제품을 작동 중인 모습을 보여주세요. 소프트웨어의 경우: GIF > 스크린샷 > 추상 미술. 물리적 상품의 경우: 사용 사례 + 빌드 품질 클로즈업.

모든 기능은 히어로의 지배적인 가치 제안과 연결되어야 합니다. 기능은 무작위가 아닙니다. 접힌 부분 위에서 한 주장에 대한 증거입니다.

5단계: CTA 카피

CTA는 히어로의 내러티브를 이어가야 하며, 일반적이어서는 안 됩니다.

❌ "시작하기" / "데모 요청" / "가입하기" (게으르고, 맥락 없음) ✅ "내 주변 음식 찾기" (배달 내러티브를 이어감) ✅ "디자인 시작하기" (디자인 도구 내러티브를 이어감) ✅ "저축액 확인하기" (금융 내러티브를 이어감)

CTA 버튼 텍스트는 헤드라인을 읽은 후 자연스러운 다음 문장처럼 느껴져야 합니다.

6단계: 사회적 증거 전략

주목할 만한 고객/언론이 있는 경우:

마키(marquee)에 로고 표시 - FOMO 생성 ("모두가 이미 이걸 알고 있음")
인상적인 지표 강조 (고객 수, 처리된 수익 등)

주목할 만한 사회적 증거가 없는 경우 (콜드 스타트):

인지도 있는 3~5개 회사에 무료 액세스를 제공한 후 로고 표시
실제 이름과 사진이 포함된 구체적인 사용후기 사용 (베타 사용자로부터라도)
집계 통계 표시 ("500개 이상의 팀이 사용"은 빈 로고 바보다 나음)
언론 보도, 팟캐스트 또는 뉴스레터가 있다면 "As seen in" 고려

가짜로 꾸미지 마세요. 빈 사회적 증거 섹션은 아예 없는 것보다 더 나쁩니다.

7단계: 다중 대상 그룹 라우팅

제품이 별개의 페르소나(예: 개인 대 팀, 개발자 대 디자이너)를 대상으로 하는 경우:

페이지 상단 근처에 방문자를 관련 섹션으로 안내하는 "자신의 모험을 선택하세요" 요소를 추가하세요. 예시:

토글 탭: "개발자용" / "디자이너용"
분할 히어로: "저는 [역할 A]입니다" / "저는 [역할 B]입니다"
히어로에서 연결된 세분화된 랜딩 페이지

요구 사항이 다른 모든 사람을 동일한 퍼널로 강제하지 마세요.

카피 전략 명세서

바이브 명세서와 함께 이것을 작성하세요:

상위 3가지 반대 의견:
1. [반대 의견] → [헤드라인/기능/CTA]에서 다룸
2. [반대 의견] → [헤드라인/기능/CTA]에서 다룸
3. [반대 의견] → [헤드라인/기능/CTA]에서 다룸

헤드라인:
- 가치 제안: [당신이 파는 것, 구체적으로]
- 훅 유형: [대담한 주장 / 반대 의견 해결]
- 전체 헤드라인: [실제 텍스트]
- 리트머스 테스트: 이것만으로 누군가가 우리가 무엇을 파는지 알 수 있습니까? [예/아니요]

서브헤드라인: [1-2문장 - 그것이 무엇인지 + 주장이 작동하는 방식]

CTA 텍스트: [헤드라인의 내러티브 연속]

대상: [단일 / 다중 페르소나]
- 다중인 경우: [라우팅 방식]

50% 법칙

시간의 50%를 히어로 섹션에 투자하세요. 그것은 소셜 미디어의 커버 이미지, 첫인상, 훅입니다. 다른 모든 것은 히어로를 올바르게 만드는 것에서 비롯됩니다.

섹션 구성 (위에서 아래로)

1. 히어로 섹션 (1차 집중)

성패를 결정짓는 요소. 반드시 포함해야 할 것:

헤드라인: 카피 전략 명세서의 가치 제안 + 훅 (위 참조). 리트머스 테스트를 통과해야 함 — 누군가 이것만 본다면 당신이 무엇을 파는지 알 수 있습니까?
서브헤드라인: 그것이 무엇인지 + 주장이 어떻게 작동하는지 설명. 최대 1-2문장, 가볍게 유지.
CTA 버튼: 헤드라인의 내러티브 연속 ("시작하기" 아님 — 위의 CTA 카피 규칙 참조). 선택적 보조 CTA.
사회적 증거: 로고 마키, 사용후기 또는 신뢰 배지. 콜드 스타트 중이라면 위의 사회적 증거 전략 참조.
시각적 요소: 제품 샷, 일러스트레이션 또는 애니메이션 배경

히어로 변형:

분할 레이아웃 (텍스트 왼쪽, 시각 오른쪽)
플로팅 요소가 있는 중앙 정렬
전체 배경 이미지에 오버레이 텍스트
장식 요소가 있는 비대칭

2. 기능/혜택 섹션

제품이 무엇을 하는지 보여줍니다. 각 기능에는 세 가지 요소가 필요합니다: 헤더 (짧은 가치 제안, "역량 강화/혁신" 금지)

[추후 내용 생략]

랜딩 페이지 디자인 스킬