랜딩 페이지 디자인
개요
전환시키고 사로잡는 랜딩 페이지를 구축하세요. 이 스킬은 전환 중심 구조와 독특한 시각 디자인을 결합하여 AI로 가득한 세상에서 돋보이는 페이지를 만듭니다. 목표: 50~100달러 가치가 있으며 자랑스럽게 판매할 수 있는 페이지.
필수: Vibe Discovery (먼저 하세요)
코드를 작성하기 전에, 반드시 Vibe Discovery 프로세스를 실행해야 합니다. 이는 단순한 조회 테이블이 아닙니다. 매번 독특한 미적 방향을 생성하는 창의적인 프롬프트입니다.
목표: 유사한 제품이라도 두 개의 랜딩 페이지가 똑같이 보여서는 안 됩니다.
Vibe Discovery 프로세스
사용자에게 다음 질문을 하고, 고유한 방향으로 종합(SYNTHESIZE)하세요. 단순히 답변을 사전 설정에 매핑하지 마십시오.
1단계: 컨텍스트 수집 (질문하기)
Q1: 이 브랜드가 연상시키는 실제 장소나 사물은 무엇인가요?
'어떤 산업'이 아니라 실제 구체적인 것입니다. 새벽 2시의 도쿄 편의점. 할머니의 부엌. 브루탈리스트 주차장. 산호초. 747 조종석. 마라케시 벼룩시장. 1970년대 녹음 스튜디오.
Q2: 첫 3초 동안 누군가가 느껴야 할 단 하나의 감정은 무엇인가요?
하나를 고르세요: 평온함. 활기참. 호기심. 신뢰감. 기쁨. 감명받음. 반항심. 향수. 영감받음. 즐거움. 세련됨. 환영받음. 흥미로움. 자신감.
Q3: 예상치 못한 두 가지 영감을 충돌시키세요:
예시: "의료용 포장 + 스케이트보드 그래픽", "스프레드시트 + 거리 예술", "고급 호텔 + 펑크 잡지", "NASA 관제센터 + 유치원", "일본 편의점 + 빅토리아 시대 도서관"
Q4: 이 페이지가 절대 오해받아서는 안 되는 것은 무엇인가요?
적극적으로 피해야 할 2-3가지 구체적인 것을 말하세요. "암호화폐 프로젝트", "웰니스 앱", "은행이 만든 것", "보라색 그라데이션이 있는 모든 것"
2단계: 미학 창조 (찾지 말고 창조하세요)
답변을 바탕으로 다음을 결정하여 고유한 분위기를 창조(CREATE)하세요:
색상 창조 (암기된 팔레트를 사용하지 말고 장소/사물에서 파생)
- Q1의 실제 장소/사물에 어떤 색상이 존재하나요?
- 해당 참조에 진정성 있게 느껴지는 3-4가지 색상을 추출하세요.
- 이전 프로젝트의 코드를 재사용하지 말고 새로운 특정 헥스 코드를 발명하세요.
- 팔레트 이름을 연상시키는 이름으로 지으세요 ("파란색과 주황색"이 아닌 "미드나잇 포장마차" 또는 "러스트 벨트 아침").
타이포그래피 창조 (목소리를 충돌에 맞추기)
- 그 장소에서 텍스트는 어떻게 들릴까요?
- Q3의 충돌을 구현하는 디스플레이 폰트를 찾으세요.
- 평소 사용하는 선택지에 의존하지 말고, 새로운 시각으로 Google Fonts를 둘러보세요.
- 고려 사항: 두께, 너비, 대비, 특이함.
레이아웃 창조 (물리적 공간에서 파생)
- Q1의 장소에서 공간은 어떻게 구성되어 있나요?
- 비좁습니까, 광활합니까? 격자형입니까, 유기적입니까? 수직적입니까, 수평적입니까?
- Q3의 충돌을 구현하는 예상치 못한 레이아웃 선택은 무엇인가요?
모션 창조 (감정에 맞추기)
- Q2의 감정은 어떻게 움직이나요?
- 평온함 = 거의 감지되지 않음. 활기참 = 활동적임. 세련됨 = 느리고 신중함.
- 이 페이지를 정의하는 하나의 시그니처 모션은 무엇인가요?
3단계: Vibe Spec 작성하기
코딩하기 전에 이것을 명시적으로 작성하세요:
VIBE NAME: [2-3 단어 이름을 발명]
REFERENCE: [Q1의 장소/사물]
EMOTION: [Q2에서]
COLLISION: [Q3에서]
ANTI-PATTERNS: [Q4에서]
COLORS:
- Primary: [hex] - [이 색상인 이유]
- Secondary: [hex] - [이유]
- Background: [hex] - [이유]
- Accent: [hex] - [이유]
- Palette name: [연상시키는 이름]
TYPOGRAPHY:
- Display: [특정 폰트 이름] - [어울리는 이유]
- Body: [특정 폰트 이름] - [이유]
- Character: [목소리 설명]
LAYOUT:
- Density: [성김/균형/빽빽함]
- Shapes: [날카로움/둥글둥글함/유기적/혼합]
- Signature element: [하나의 특이한 레이아웃 선택]
MOTION:
- Level: [정적/미묘함/중간/역동적/혼란스러움]
- Signature animation: [이 페이지를 정의하는 하나의 특정 애니메이션]
WILDCARD:
- '일치'하지는 않지만 기억에 남게 만드는 예상치 못한 디테일 하나
4단계: 신선도 확인
진행하기 전에 확인하세요:
- 마지막 3개 프로젝트의 헥스 코드를 재사용하지 않았습니다.
- '편안한' 폰트를 기본값으로 사용하지 않았습니다 (확인: Inter? Nunito? Space Grotesk? 사용 중이면 다른 것을 찾으세요).
- Q3의 충돌이 내 선택에 실제로 보입니다.
- 누군가 이것을 이전 랜딩 페이지와 혼동할 수 없습니다.
- 나조차도 놀라게 하는 와일드카드를 포함했습니다.
Vibe Discovery 예시
Q1 - 장소/사물: "혼잡한 시간의 일본 기차역"
Q2 - 감정: "자신감"
Q3 - 충돌: "교통 표지판 + 오트 쿠튀르"
Q4 - 오해받지 않을 것: "명상 앱, 엉뚱한 것, 스타트업 형 테크"
생성된 Vibe Spec:
VIBE NAME: Shinjuku Runway
REFERENCE: 혼잡한 시간의 일본 기차역
EMOTION: 자신감
COLLISION: 교통 표지판 + 오트 쿠튀르
ANTI-PATTERNS: 부드러운 그라데이션 없음, 장난기 있는 일러스트 없음, 둥글둥글한 친근한 모양 없음
COLORS:
- Primary: #1a1a1a - 기차 문의 검은색
- Secondary: #f5f5f0 - 플랫폼 콘크리트, 닳아서 매끄러워짐
- Background: #fafaf8 - 형광등 아래 흰색
- Accent: #e60012 - JR 선 빨간색, 주의를 집중시킴
- Palette name: "Platform Edge"
TYPOGRAPHY:
- Display: Darker Grotesque - 자신감, 약간 좁음, 유럽적인 느낌
- Body: Noto Sans JP - 깔끔한 유틸리티, 교통 표지판에서 영감
- Character: 권위적이지만 차갑지 않음. 명확함. 방향 제시적.
LAYOUT:
- Density: 풍부하지만 체계적 - 역 지도처럼
- Shapes: 날카롭지만 의도적으로 둥근 예외가 있음 (기차 창문처럼)
- Signature element: 기차 시간표처럼 섹션을 나누는 강한 수평 밴드
MOTION:
- Level: 미묘하지만 정확함
- Signature animation: 요소가 도착하는 기차처럼 옆에서 슬라이드 인 - 수평, 부드럽고, 정확한 타이밍
WILDCARD:
- 하나의 요소는 직물 같은 텍스처 오버레이 사용 - 오트 쿠튀르 충돌
영감 스타터 (Q1이 막힐 때)
공간: 방콕의 야시장 | 폐관 시간의 빈 박물관 | 새벽 4시의 공항 라운지 | 빈티지 레코드 가게 | 병원 대기실 | 카지노 바닥 | 겨울의 온실 | 지하철 플랫폼 | 천문대 돔 | 버려진 공장 | 고급 요트 내부 | 24시간 빨래방 | 도서관 희귀 도서실 | 자동차 차체 공장 | 우주 정거장 모듈
사물: 1980년대 신시사이저 | 수술 기구 | 빈티지 여행 가방 | 경주용 오토바이 | 골동품 나침반 | 산업용 직기 | 네온 사인 | 타자기 | 과학 유리 기구 | 가죽 제본 책 | 회로 기판 | 도자기 접시
시대/운동: 소비에트 구성주의 | 멤피스 디자인 | 스위스 국제 양식 | 아르누보 | 바우하우스 | 데 스틸 | 구기 건축 | 스트림라인 모던 | 브루탈리즘 | 일본 메타볼리즘 | 스칸디나비아 모더니즘 | 이탈리아 미래주의
반-수렴 규칙
- 헥스 코드 암기 금지 - 참조에서 새롭게 색상을 생성하고, "내 평소 파란색"을 기억하지 마세요.
- 폰트 순환 필수 - 연속된 프로젝트에서 동일한 디스플레이 폰트를 사용할 수 없습니다.
- 충돌이 보여야 함 - 누군가 Q3의 두 영향력을 모두 볼 수 없다면 더 강하게 밀어붙이세요.
- 와일드카드는 필수 - 모든 분위기에는 '들어맞지' 않지만 고유하게 만드는 요소가 하나 필요합니다.
- 이름을 붙이세요 - 이름 없는 분위기는 평범해집니다. 이름이 있는 분위기는 정체성을 갖습니다.
빠른 컨텍스트 질문 (최소 버전)
사용자가 컨텍스트 없이 "랜딩 페이지 만들어 줘"라고만 말하면 물어보세요:
- "이 브랜드의 에너지를 포착하는 장소나 사물은 무엇인가요?"
- "어떤 감정이 지배적이어야 하나요?"
- "이것이 절대 닮지 말아야 할 것은 무엇인가요?"
그리고 세 가지 답변에서 분위기를 종합하세요.
50% 규칙
시간의 50%를 히어로 섹션에 투자하세요. 그것은 소셜 미디어의 표지 이미지, 첫인상, 갈고리입니다. 다른 모든 것은 히어로를 올바르게 만드는 것에서 비롯됩니다.
섹션 구성 (위에서 아래로)
1. 히어로 섹션 (주요 초점)
성패를 좌우하는 요소. 반드시 포함해야 할 것:
- 헤드라인: 날카롭고, 혜택 중심의 갈고리 (참고: H1 Gallery에서 영감)
- 서브헤드라인: 지원 컨텍스트, 최대 1-2문장
- CTA 버튼: 기본 동작 + 선택적 보조
- 사회적 증명: 로고 마키, 사용 후기, 또는 신뢰 배지
- 시각적 요소: 제품 사진, 일러스트, 또는 애니메이션 배경
히어로 변형:
- 분할 레이아웃 (텍스트 왼쪽, 시각물 오른쪽)
- 플로팅 요소가 있는 중앙 정렬
- 전체 채우기 배경에 오버레이 텍스트
- 장식 요소가 있는 비대칭
2. 기능/혜택 섹션
제품이 하는 일을 보여줍니다. 옵션:
- 벤토 그리드: 비대칭 레이아웃의 카드 (Apple이 대중화)
- 교대 행: 이미지 + 텍스트, 면을 번갈아 가며
- 아이콘 그리드: 짧은 설명이 있는 간단한 아이콘
- 인터랙티브 카드: 호버 상태, 마이크로 애니메이션
3. 사회적 증명 섹션
다음을 통해 신뢰 구축:
- 로고 캐러셀 (마키 애니메이션)
- 사진이 포함된 사용 후기 카드
- 애니메이션 카운터가 있는 통계/지표
- 사례 연구 발췌문
4. 사용 방법 섹션
단계별 설명:
- 번호가 매겨진 단계 (01, 02, 03 패턴은 세련미를 더함)
- 점진적 공개가 있는 고정 스크롤
- 타임라인 또는 순서도 시각화
5. 가격 섹션 (해당되는 경우)
- 2-3단계 비교
- 강조 표시된 "추천" 단계
- 기능 비교 표
- 아래에 FAQ 아코디언
6. CTA 섹션
최종 전환 추진:
- 가치 제안 반복
- 강력한 헤드라인
- 단일 초점 작업
- 긴박감 요소 (진정성 있는 경우)
7. 푸터
- 탐색 링크
- 소셜 아이콘
- 법적 링크
- 선택적 뉴스레터 가입
AI 슬롭 방지 원칙
아이콘: Lucide 피하기 (과도하게 사용됨)
대신 사용:
- Iconify Solar: 여러 스타일 (아웃라인, 브로큰, 듀오톤)
- Heroicons: Apple 같은 단순함이 필요할 때
- Phosphor: 유연한 두께 시스템
- 커스텀 SVG: 브랜드 차별화를 위해
폰트: Inter/Roboto 제거
독특한 대안:
- 디스플레이: Newsreader, Playfair Display, Space Grotesk, Clash Display
- 바디: Outfit, Plus Jakarta Sans, Manrope, Satoshi
- 모노: JetBrains Mono, IBM Plex Mono, Fira Code
색상: 보라색 그라데이션 없음
대담한 대안:
- 진한 네이비 + 전기 악센트
- 따뜻한 중성색 + 단일 포인트 색상
- 단색조에 깊이감
- 네온 악센트가 있는 다크 모드
- 흙빛/유기적인 팔레트
레이아웃: 그리드 깨기
- 요소 겹치기
- 대각선 섹션
- 비대칭 간격
- 컨테이너를 벗어나는 히어로 요소
- 디자인 요소로서의 여백
애니메이션 용어집
시작 애니메이션
fade-in: 단순한 불투명도 전환blur-in: 흐릿하게 시작했다가 선명해짐slide-in: 방향 기반 진입scale-in: 작은 크기에서 전체 크기로 성장stagger: 자식 요소의 순차적 공개
지속 애니메이션
marquee: 무한 수평 스크롤 (로고, 사용 후기)beam: 경로/테두리를 따라 이동하는 빛pulse: 미묘한 크기/불투명도 호흡float: 부드러운 위/아래 움직임rotate: 지속적인 회전 (아이콘, 장식)
상호작용 애니메이션
hover-lift: 미묘한 Y 이동 + 그림자hover-glow: 테두리/그림자 색상 변경hover-reveal: 숨겨진 요소가 나타남click-ripple: Material 스타일 피드백
장식 요소
- 수직 격자선 (컨테이너 크기 기반)
- 요소 간 국수/곡선 연결선
- 배경의 그라데이션 오브/블롭
- 그레인/노이즈 텍스처 오버레이
- 기하학적 모양 (원, 둥근 모서리의 직사각형)
디자인 리소스
히어로 영감
- Superhero (superhero.design): 엄선된 히어로 섹션
- Dribbble: "hero section", "landing page" 검색
- Awwwards: 수상 경력 디자인
섹션 패턴
- Mobin: 섹션 분석이 포함된 실제 웹사이트
- Bento Grids: 카드 레이아웃 영감
- CTA Gallery: 클릭 유도 문안 패턴
타이포그래피
- Google Fonts: 무료, AI 접근 가능 폰트
- Fontshare: 무료 고품질 폰트
- H1 Gallery: 헤드라인 영감
아이콘 및 로고
- Iconify: 통합 아이콘 API (Solar, Heroicons 등)
- Simple Icons: 브랜드 로고 (SVG)
- Heroicons: Tailwind의 아이콘 세트
구현 워크플로우
1단계: 조사 및 수집
- 히어로 와이어프레임 스크린샷 5-10개 수집
- 필요한 섹션 패턴 식별
- 아이콘 세트 및 폰트 쌍 선택
- 색상 팔레트 정의
2단계: 히어로 개발
- 최고의 참조 스크린샷에서 히어로 생성
- 반복: 색상, 폰트, 레이아웃 변경
- 애니메이션 추가 (beam, fade-in 등)
- 장식 요소 추가 (noodles, grids, numbers)
- 독특해질 때까지 개선
3단계: 섹션 구축
- 한 번에 하나씩 섹션 추가 (모두 한 번에 추가하지 않음)
- 섹션별로 특정 구성 요소/스크린샷 참조
- 히어로의 색상/폰트 일관성 유지
- 섹션별 애니메이션 추가
4단계: 다듬기
- 반응형 중단점 수정 (모바일, 태블릿, 데스크톱)
- 플레이스홀더 이미지를 실제/고품질 자산으로 교체
- 성능을 위해 애니메이션 최적화
- 모든 대화형 요소 테스트
5단계: 프레젠테이션
- 무한 캔버스 레이아웃으로 표지 스크린샷 생성
- 히어로를 눈에 띄게 표시
- 모바일 및 데스크톱 보기 포함
- 미묘한 배경 추가 (흐릿한 그라데이션, 패턴)
프롬프트 패턴
히어로 생성
[PRODUCT TYPE]을 위한 히어로 섹션을 만들어 주세요.
텍스트, 이름 및 숫자를 [BRAND]에 맞게 변경하세요.
Iconify Solar 아이콘(듀오톤 스타일)을 사용하세요.
헤드라인에는 [FONT]를 사용하세요.
컨테이너 크기의 수직 격자선을 추가하세요.
세련미를 위해 01, 02, 03 단계 표시기를 추가하세요.
[COLOR]를 기본 색상으로, 다크 모드를 사용하세요.
섹션 추가
새로운 [SECTION TYPE] 섹션을 적용하세요.
히어로의 색 구성표와 타이포그래피를 일치시키세요.
로고에는 마키 애니메이션을 사용하세요.
페이드 인 블러 인 시작 애니메이션을 추가하세요.
히어로는 그대로 유지하세요.
애니메이션 향상
기본 버튼 테두리에 빔 애니메이션을 추가하세요.
빔은 1px이고, 알약 모양 주위를 지속적으로 이동해야 합니다.
기능 카드에 미묘한 호버 리프트 효과를 추가하세요.
네거티브 프롬프트 (변경하지 말아야 할 것)
히어로 섹션을 변경하지 마세요.
내비게이션 바를 그대로 유지하세요.
기존 애니메이션을 수정하지 마세요.
품질 체크리스트
시각적 차별성
- 일반적인 보라색 그라데이션이 없습니다.
- 기본이 아닌 아이콘 세트 (Lucide 아님)
- 독특한 폰트 쌍
- 최소 하나의 "기억에 남는" 요소
- CSS 변수를 통한 일관된 색상 시스템
기술적 품질
- 유효한 HTML (의미론적 태그)
- main, section, nav, footer 사용
- 접근성 (alt 텍스트, aria 레이블)
- 반응형 중단점 (모바일, 태블릿, 데스크톱)
- 성능 (이미지 지연 로딩, 최소 CSS)
- 브라우저 간 호환성
전환 요소
- 명확하고 강력한 CTA
- 첫 접힌 부분 위에 사회적 증명
- 이탈 방지 장치
- 모바일 터치 최적화
- 읽기 쉬운 대비
일관성
- CSS 변수는 theme.css에 정의됨
- 일관된 간격 시스템
- 일치하는 둥근 모서리 반경
- 통합된 애니메이션 타이밍
- 균일한 그림자 스타일
예시 프롬프트
빠른 랜딩 페이지
랙돌 고양이를 위한 프리미엄 캣타워를 판매하는 SaaS 회사 'CatCloud'를 위한 랜딩 페이지를 만드세요. Vibe Discovery를 실행하고, 결과에 따라 전체 랜딩 페이지를 구축하세요.
섹션별 프롬프트
[설명]히어로 생성[/설명]
ProductHunt 출시를 위한 'TurboType' (AI 글쓰기 도구)의 랜딩 페이지 섹션을 설명하세요. (TBD, 실제로는 프롬프트가 아닌 스킬 설명)
AVOID: AI에게 무언가를 요청하는 일반적인 스킬과는 다릅니다. 이 스킬은 컨텍스트를 기반으로 랜딩 페이지를 구축하는 방법을 설명합니다.