aiskillstore/marketplace

랜딩 페이지 디자인

개요

전환과 매력을 동시에 잡는 랜딩 페이지를 구축하세요. 이 스킬은 전환에 최적화된 구조와 차별화된 시각적 디자인을 결합하여 AI로 가득한 세상에서 돋보이는 페이지를 만듭니다. 목표는 $50-100의 가치가 있으며 판매해도 자랑스러워할 만한 페이지를 만드는 것입니다.

필수: 분위기 발견 (이것부터 먼저)

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

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

---

Vibe Discovery 프로세스

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

단계 1: 맥락 수집 (다음을 질문하세요)

Q1: 이 브랜드를 실제 세계의 장소나 사물로 표현한다면 무엇인가요?

'무슨 업종'이 아니라 구체적인 실제 사물이어야 합니다. 새벽 2시의 도쿄 편의점. 할머니의 부엌. 브루탈리스트 주차장. 산호초. 747 조종석. 마라케시의 벼룩시장. 1970년대 녹음실.

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

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

Q3: 충돌시킬 예상치 못한 두 가지 영향은 무엇인가요?

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

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

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

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

답변을 바탕으로 다음을 결정하여 독특한 분위기를 창조하세요:

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

• Q1의 실제 장소/사물에 존재하는 색상은 무엇인가요?
• 해당 참조에 진정성 있는 3-4가지 색상을 추출하세요
• 이전 프로젝트의 코드를 재사용하지 말고 새로운 특정 헥스 코드를 고안하세요
• 팔레트에 "Midnight Bodega" 또는 "Rust Belt Morning"과 같은 evocative한 이름을 지어주세요

타이포그래피 창조 (목소리를 충돌과 일치시키세요)

• 그 장소에서 텍스트는 어떻게 들릴까요?
• Q3의 충돌을 구현하는 디스플레이 폰트를 찾으세요
• 평소 사용하는 선택지에 의존하지 말고 Google Fonts를 새로운 시선으로 둘러보세요
• 두께, 너비, 대비, 특이성을 고려하세요

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

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

모션 창조 (감정과 일치시키세요)

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

단계 3: 분위기 사양 작성

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

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

색상:
- 기본: [hex] - [이 색상인 이유]
- 보조: [hex] - [이유]
- 배경: [hex] - [이유]
- 강조: [hex] - [이유]
- 팔레트 이름: [evocative한 이름]

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

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

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

와일드카드:
- '일치'하지는 않지만 기억에 남게 만드는 예상치 못한 디테일 하나

단계 4: 신선도 확인

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

• 마지막 3개 프로젝트의 헥스 코드를 재사용하지 않았음
• '편안한' 폰트를 기본값으로 사용하지 않았음 (확인: Inter? Nunito? Space Grotesk? 사용 중이라면 다른 것을 찾으세요)
• Q3의 충돌이 내 선택에 실제로 드러남
• 누군가 이 페이지를 이전 랜딩 페이지와 혼동할 수 없음
• 나조차도 놀랄 만한 와일드카드를 포함시켰음

---

Vibe Discovery 예시

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

Q2 - 감정: "자신감"

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

Q4 - 절대 오해받지 않을 것: "명상 앱, 엉뚱한 것, 스타트업 브로 기술"

생성된 분위기 사양:

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

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

타이포그래피:
- 디스플레이: Darker Grotesque - 자신감, 약간 좁은, 유럽적인 느낌
- 본문: Noto Sans JP - 깔끔한 유용성, 교통 표지판에서 영감
- 특징: 권위적이지만 차갑지 않음. 명확함. 방향 제시.

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

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

와일드카드:
- 한 요소에 직물 같은 질감 오버레이 사용 - 오트 쿠튀르의 충돌

---

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

공간: 방콕의 야시장 | 문 닫는 텅 빈 박물관 | 새벽 4시의 공항 라운지 | 빈티지 레코드 가게 | 병원 대기실 | 카지노 바닥 | 겨울 온실 | 지하철 플랫폼 | 천문대 돔 | 버려진 공장 | 럭셔리 요트 내부 | 24시간 세탁소 | 도서관 희귀본 방 | 자동차 차체 공장 | 우주 정거장 모듈

사물: 1980년대 신디사이저 | 수술 도구 | 빈티지 여행 가방 | 경주용 오토바이 | 골동품 나침반 | 산업용 베틀 | 네온사인 | 타자기 | 과학 유리 제품 | 가죽 제본 책 | 회로 기판 | 도자기 그릇

시대/운동: 소비트 콘스트럭티비즘 | 멤피스 디자인 | 스위스 인터내셔널 | 아르누보 | 바우하우스 | 데 스틸 | 구기 건축 | 스트림라인 모더른 | 브루탈리즘 | 일본 메타볼리즘 | 스칸디나비아 모더니즘 | 이탈리아 퓨처리즘

---

안티-수렴 규칙

1. 헥스 코드 기억 금지 - 참조에서 신선하게 색상을 생성하고 "내 평소 파란색"을 기억하지 마세요
2. 폰트 순환 필수 - 연속된 프로젝트에서 동일한 디스플레이 폰트를 사용할 수 없습니다
3. 충돌이 드러나야 함 - Q3의 두 영향력을 모두 볼 수 없다면 더 강하게 밀어붙이세요
4. 와일드카드는 필수 - 모든 분위기에는 '어울리지' 않지만 독특하게 만드는 요소가 하나 있어야 합니다
5. 이름을 지어라 - 이름 없는 분위기는 평범해집니다. 이름 있는 분위기는 정체성을 가집니다.

---

빠른 맥락 질문 (최소 버전)

사용자가 맥락 없이 "랜딩 페이지 만들어 줘"라고만 말한다면 다음을 물어보세요:

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

그런 다음 세 가지 답변에서 분위기를 종합하세요.

---

50% 규칙

시간의 50%를 히어로 섹션에 투자하세요. 그것은 소셜 미디어의 커버 이미지이자, 첫인상이며, 훅입니다. 히어로를 제대로 만드는 것에서 다른 모든 것이 흘러나옵니다.

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

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

성패를 가르는 요소. 다음을 포함해야 합니다:

• 헤드라인: 날카롭고, 혜택 중심의 훅 (참고: H1 Gallery)
• 서브헤드라인: 뒷받침하는 맥락, 최대 1-2문장
• CTA 버튼: 주요 액션 + 선택적 보조
• 사회적 증거: 로고 마키, 사용 후기, 또는 신뢰 배지
• 시각적 요소: 제품 사진, 일러스트레이션 또는 애니메이션 배경

히어로 변형:

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

2. 기능/혜택 섹션

제품이 하는 일을 보여주세요. 옵션:

• Bento 그리드: 비대칭 레이아웃의 카드 (Apple이 대중화)
• 교대 행: 이미지 + 텍스트, 좌우 번갈아
• 아이콘 그리드: 간단한 아이콘과 짧은 설명
• 인터랙티브 카드: 호버 상태, 마이크로 애니메이션

3. 사회적 증거 섹션

다음을 통해 신뢰 구축:

• 로고 캐러셀 (마키 애니메이션)
• 사진이 있는 사용 후기 카드
• 애니메이션 카운터가 있는 통계/지표
• 사례 연구 스니펫

4. 작동 방식 섹션

단계별 설명:

• 번호가 매겨진 단계 (01, 02, 03 패턴은 정교함을 더함)
• 점진적 공개가 있는 스크롤 고정
• 타임라인 또는 순서도 시각화

5. 가격 섹션 (해당되는 경우)

• 2-3 단계 비교
• 강조된 "추천" 단계
• 기능 비교 표
• 아래에 FAQ 아코디언

6. CTA 섹션

마지막 전환 푸시:

• 가치 제안 반복
• 강력한 헤드라인
• 하나의 집중된 액션
• 긴박감 요소 (진정성 있을 경우)

7. 푸터

• 탐색 링크
• 소셜 아이콘
• 법적 링크
• 선택적 뉴스레터 가입

AI-슬롭 방지 원칙

아이콘: Lucide 피하기 (과도하게 사용됨)

대신 사용:

• Iconify Solar: 다양한 스타일 (outline, broken, duotone)
• 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단계: 조사 및 수집

1. 와이어프레임으로 사용할 히어로 스크린샷 5-10개 수집
2. 필요한 섹션 패턴 식별
3. 아이콘 세트 및 폰트 조합 선택
4. 색상 팔레트 정의

2단계: 히어로 개발

1. 가장 좋은 참조 스크린샷에서 히어로 생성
2. 반복: 색상, 폰트, 레이아웃 변경
3. 애니메이션 추가 (beam, fade-in 등)
4. 장식 요소 추가 (noodles, grids, numbers)
5. 차별화될 때까지 개선

3단계: 섹션 구축

1. 한 번에 하나씩 섹션 추가 (한꺼번에 모두 추가하지 않음)
2. 섹션별로 특정 컴포넌트/스크린샷 참조
3. 히어로의 색상/폰트 일관성 유지
4. 섹션별 애니메이션 추가

4단계: 다듬기

1. 반응형 중단점 수정 (모바일, 태블릿, 데스크톱)
2. 플레이스홀더 이미지를 실제/고품질 에셋으로 교체
3. 성능을 위해 애니메이션 최적화
4. 모든 상호작용 요소 테스트

5단계: 프레젠테이션

1. 무한 캔버스 레이아웃으로 커버 스크린샷 생성
2. 히어로를 눈에 띄게 표시
3. 모바일 및 데스크톱 뷰 포함
4. 미묘한 배경 추가 (흐릿한 그라데이션, 패턴)

프롬프트 패턴

히어로 생성

[제품 유형]에 대한 히어로 섹션을 만드세요.
텍스트, 이름, 숫자를 [브랜드]에 맞게 변경하세요.
Iconify Solar 아이콘(duotone 스타일)을 사용하세요.
헤드라인에는 [폰트]를 사용하세요.
컨테이너 크기 기반의 수직 그리드 선을 추가하세요.
정교함을 위해 01, 02, 03 단계 표시기를 추가하세요.
주 색상으로 [색상]을 사용하고 다크 모드로 설정하세요.

섹션 추가

새로운 [섹션 유형] 섹션을 적용하세요.
히어로의 색 구성표와 타이포그래피를 일치시키세요.
로고에는 마키 애니메이션을 사용하세요.
fade-in blur-in 진입 애니메이션을 추가하세요.
히어로는 정확히 그대로 유지하세요.

애니메이션 향상

기본 버튼 테두리에 beam 애니메이션을 추가하세요.
beam은 1px이어야 하며, 알약 모양 주위를 계속 이동해야 합니다.
기능 카드에 미묘한 hover-lift 효과를 추가하세요.

네거티브 프롬프트 (변경하지 말아야 할 것)

히어로 섹션을 변경하지 마세요.
내비게이션 바를 정확히 그대로 유지하세요.
기존 애니메이션을 수정하지 마세요.

품질 체크리스트

시각적 차별성

• 일반적인 보라색 그라데이션 없음
• 기본이 아닌 아이콘 세트 (Lucide 아님)
• 차별화된 폰트 조합
• 적어도 하나의 "기억에 남는" 요소
• CSS 변수를 통한 일관된 색상 시스템

기술적 품질