랜딩 페이지 디자인

개요

전환율을 높이면서도 강렬한 인상을 남기는 랜딩 페이지를 제작합니다. 이 스킬은 전환에 특화된 구조와 독특한 비주얼 디자인을 결합하여 AI로 가득한 세상에서 돋보이는 페이지를 만듭니다. 목표: 50~100달러 가치의, 자랑스럽게 팔 수 있는 페이지.

필수: 분위기 발견 (이것부터 하세요)

코드를 작성하기 전에, 반드시 분위기 발견 프로세스를 실행해야 합니다. 이는 단순한 조회 테이블이 아닙니다. 매번 고유한 미적 방향을 생성하는 창의적인 프롬프트입니다.

목표: 비슷한 제품이라도 두 개의 랜딩 페이지가 동일해 보여서는 안 됩니다.

분위기 발견 프로세스

사용자에게 다음 질문을 하고, 고유한 방향을 종합하세요. 답변을 미리 정의된 설정에 단순 매핑하지 마세요.

1단계: 컨텍스트 수집 (질문 목록)

Q1: 이 브랜드가 실제 세계의 어떤 장소나 사물이 될까요?

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

Q2: 처음 3초 안에 사용자가 느껴야 할 단 하나의 감정은 무엇인가요?

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

Q3: 충돌시킬 예상치 못한 두 가지 영향을 골라보세요:

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

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

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

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

답변을 바탕으로 다음을 결정하여 고유한 분위기를 만드세요:

색상 창조 (암기한 팔레트를 사용하지 마세요. Q1의 장소/사물에서 파생하세요.)

Q1의 실제 장소/사물에는 어떤 색상이 존재하나요?
그 참조점에 진정성 있는 3-4가지 색상을 추출하세요.
새로운 프로젝트의 코드를 재사용하지 말고, 참조점에서 직접 특정 16진수 코드를 만들어내세요.
팔레트에 "파란색과 주황색"이 아닌 "자정의 상점"이나 "녹슨 벨트의 아침" 같은 evocative한 이름을 붙이세요.

타이포그래피 창조 (Q3의 충돌에 음성을 매치하세요.)

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

레이아웃 창조 (Q1의 물리적 공간에서 파생하세요.)

Q1의 공간은 어떻게 구성되어 있나요?
비좁거나 넓나요? 격자 모양인가요 유기적인가요? 수직인가요 수평인가요?
Q3의 충돌을 구현할 예상치 못한 레이아웃 선택은 무엇인가요?

모션 창조 (감정에 매치하세요.)

Q2의 감정은 어떻게 움직이나요?
차분함 = 거의 인지할 수 없음. 활기참 = 역동적. 세련됨 = 느리고 신중함.
이 페이지를 정의하는 하나의 시그니처 모션은 무엇인가요?

3단계: 분위기 사양 작성

코딩 전에, 이것을 명시적으로 적어두세요:

분위기 이름: [2-3단어 이름 창조]
참조: [Q1의 장소/사물]
감정: [Q2에서]
충돌: [Q3에서]
안티 패턴: [Q4에서]

색상:
- 기본: [16진수] - [이 색상을 선택한 이유]
- 보조: [16진수] - [이유]
- 배경: [16진수] - [이유]
- 강조: [16진수] - [이유]
- 팔레트 이름: [evocative한 이름]

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

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

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

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

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분 안에 설정" (노력 반대 의견 처리)

가장 큰 반대 의견을 사용하여 후크 유형을 선택하세요.

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

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

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

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

4단계: 기능 카피 구조

각 기능은 정확히 세 가지 요소를 가집니다:

요소	규칙
기능 헤더	짧은 가치 제안만. 직설적으로. ❌ "팀 역량 강화" ✅ "실시간 협업"
기능 단락	간결한 설명 + 하나의 중요한 반대 의견 처리. 필요한 경우 세부 정보 링크 — 긴 텍스트 블록 금지.
기능 이미지	제품이 작동하는 모습을 보여주세요. 소프트웨어: GIF > 스크린샷 > 추상 예술. 물리적 제품: 사용 사례 + 빌드 품질 클로즈업.

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

5단계: CTA 카피

CTA는 히어로의 스토리를 이어가야 하며, 일반적이어서는 안 됩니다.

❌ "시작하기" / "데모 요청" / "가입하기" (게으르고 맥락이 없음) ✅ "내 근처 음식 찾기" (배달 스토리 이어감) ✅ "디자인 시작하기" (디자인 도구 스토리 이어감) ✅ "절약된 금액 확인" (재정적 스토리 이어감)

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

6단계: 사회적 증거 전략

유명 고객/언론이 있다면:

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

유명한 사회적 증거가 없다면 (콜드 스타트):

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

가짜를 만들지 마세요. 빈 사회적 증거 섹션은 아예 없는 것보다 나쁩니다.

7단계: 다중 사용자 라우팅

제품이 여러 사용자(예: 개인 대 팀, 개발자 대 디자이너)를 대상으로 한다면:

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

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

모든 사람을 같은 퍼널로 강제하지 마세요.

카피 전략 사양

분위기 사양과 함께 이것을 작성하세요:

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

헤드라인:
- 가치 제안: [파는 것, 구체적으로]
- 후크 유형: [대담한 주장 / 반대 의견 처리]
- 전체 헤드라인: [실제 텍스트]
- 리트머스 테스트: 이것만 보고도 우리가 무엇을 파는지 알 수 있습니까? [예/아니오]

서브헤드라인: [1-2문장 - 무엇인지 + 주장이 어떻게 작동하는지]

CTA 텍스트: [헤드라인의 스토리 이어가기]

사용자: [단일 / 다중 사용자]
- 다중인 경우: [라우팅 방법]

50% 규칙

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

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

1. 히어로 섹션 (주요 초점)

성패를 좌우하는 요소. 다음을 포함해야 합니다:

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

히어로 변형:

분할 레이아웃 (텍스트 왼쪽, 시각적 오른쪽)
떠 있는 요소와 함께 중앙 정렬
전체 너비 배경에 오버레이 텍스트
장식 요소가 있는 비대칭

2. 기능/혜택 섹션

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

...

[번역을 위해 잘림]

랜딩 디자인 — Vibe Discovery + 반 AI 슬롭