bear2u/my-skills

랜딩 페이지 가이드 V2

개요

이 스킬은 차별화된 고전환율 랜딩 페이지 생성을 가능하게 합니다. 다음 요소들을 결합합니다:

• 검증된 전환 프레임워크: DESIGNNAS의 높은 전환율을 위한 11가지 필수 요소
• 탁월한 디자인 품질: 잊을 수 없는 브랜드 경험을 창출하는 대담한 미학적 선택
• 프로덕션 레디 코드: Next.js 14+와 ShadCN UI, TypeScript, 성능 최적화

철학: 랜딩 페이지는 방문자를 전환시키고 브랜드를 기억하게 해야 합니다. 일반적인 템플릿 페이지는 둘 다 실패합니다. 이 스킬은 랜딩 페이지가 기능적으로 효과적이고 시각적으로 뛰어나도록 보장합니다.

이 스킬을 사용해야 할 때

사용자가 다음을 요청할 때 이 스킬을 사용하세요:

• 랜딩 페이지, 마케팅 페이지 또는 제품 페이지 생성
• Next.js 또는 React 기반 프로모션 웹사이트
• 방문자를 고객으로 전환하고 시각적으로 돋보여야 하는 페이지
• 뛰어난 디자인 품질을 갖춘 전문 마케팅 페이지
• 일반적인 "템플릿" 미학을 피하는 랜딩 페이지
• 전환 최적화와 기억에 남는 경험을 모두 제공하는 브랜드 경험

디자인 사고: 코드 작성 전에

랜딩 페이지를 구현하기 전에 브랜드와 제품에 맞는 대담한 미학적 방향을 설정하세요:

1. 맥락 이해

• 목적: 이 제품은 어떤 문제를 해결하나요? 타겟 대상은 누구인가요?
• 브랜드 성격: 이 브랜드는 장난기 있는가, 전문적인가, 고급스러운가, 미니멀한가, 대담한가, 기술적인가?
• 산업: 이 산업은 어떤 시각적 언어를 기대하나요 (혹은 깨뜨려야 하나요)?
• 차별점: 이 브랜드를 잊을 수 없게 만드는 것은 무엇인가요? 방문자가 기억할 '딱 한 가지'는 무엇인가요?

2. 미학적 방향 선택

극단적인 방향을 선택하고 완전히 집중하세요. 예시:

미니멀 & 정제됨

• 극도로 깔끔한 레이아웃, 넉넉한 여백
• 큰 규모 대비를 활용한 세련된 타이포그래피
• 단색 또는 제한된 색상 팔레트 (최대 2-3색)
• 미묘한 마이크로 인터랙션, 우아한 전환
• 예: 럭셔리 제품, 전문 서비스, 프리미엄 SaaS

대담 & 맥시멀리스트

• 풍부하고 복잡한 시각적 레이어
• 역동적인 애니메이션 및 스크롤 효과
• 그라데이션 메시, 텍스처, 겹치는 요소
• 높은 대비의 생생한 색상 팔레트
• 예: 크리에이티브 에이전시, 엔터테인먼트, 젊은 브랜드

레트로-퓨처리즘

• 현대적 실행과 결합된 향수 어린 요소
• 기하학적 패턴, 네온 악센트
• 글리치 효과, 스캔라인, 그레인 텍스처
• 개성 있는 모노스페이스 또는 디스플레이 폰트
• 예: 게임, 기술 스타트업, 크리에이티브 도구

오가닉 & 내추럴

• 부드럽고 흐르는 듯한 형태와 그라데이션
• 자연에서 영감을 받은 색상 (어스 톤, 파스텔)
• 자연스러운 움직임을 모방한 부드러운 애니메이션
• 둥근 모서리, 부드러운 그림자
• 예: 웰니스, 지속 가능성, 식품

에디토리얼 & 매거진

• 강력한 타이포그래피 계층
• 그리드를 깨는 비대칭 레이아웃
• 크고 임팩트 있는 이미지
• 여백과 네거티브 공간의 대담한 사용
• 예: 콘텐츠 플랫폼, 미디어, 교육

브루탈리스트 & 로우

• 틀에 박히지 않은 레이아웃, 의도적인 "추함"
• 시스템 폰트 또는 의도적으로 기본적인 타이포그래피
• 높은 대비, 제한된 색상
• 최소 또는 애니메이션 없음
• 예: 예술, 패션, 반체제 브랜드

중요: 하나의 명확한 방향을 선택하세요. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 효과적입니다. 핵심은 강도가 아닌 의도성입니다. 선택한 방향을 11가지 요소 전체에 걸쳐 정밀함과 일관성 있게 실행하세요.

3. 디자인 시스템 정의

코딩 전에 다음 핵심 결정을 내리세요:

타이포그래피 선택

• 디스플레이 폰트: 독특하고 기억에 남는 것을 선택하세요 (Inter, Roboto, Arial 또는 시스템 폰트 사용 금지)
  • 고려: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  • 또는 Google Fonts를 현명하게 사용: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  • 절대 일반적인 선택으로 수렴하지 마세요 - 프로젝트마다 폰트를 다양하게 사용하세요
• 본문 폰트: 디스플레이 폰트를 보완하는 정제되고 가독성 좋은 선택
  • 고려: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
• 스케일: 명확한 계층 설정 (예: H1: 4rem → H2: 3rem → H3: 2rem → 본문: 1rem)

색상 팔레트

• 주색: 기본 브랜드 색상 (60% 사용)
• 강조색: CTA용 고대비 색상 (10% 사용)
• 중성 팔레트: 회색 또는 어스 톤 (30% 사용)
• 배경 전략: 단색, 그라데이션, 텍스처 또는 패턴?
• 일관성을 위해 CSS 변수로 정의

모션 전략

• 페이지 로드: 히어로 요소에 animation-delay를 사용한 계단식 나타나기
• 스크롤 인터랙션: 페이드 업, 패럴랙스 또는 스크롤 트리거 애니메이션?
• 호버 상태: 미묘한 스케일, 색상 변경 또는 극적인 변형?
• CTA 애니메이션: 버튼이 성가시지 않으면서 어떻게 주목을 끌까요?

공간 접근 방식

• 레이아웃 스타일: 중앙 정렬 및 대칭? 비대칭 및 역동적? 그리드 파괴?
• 간격 시스템: 좁고 밀집됨? 넉넉하고 통풍이 잘됨?
• 섹션 흐름: 전통적인 적층? 대각선? 겹침?

11가지 필수 요소 프레임워크

모든 효과적인 랜딩 페이지는 다음 11가지 필수 요소를 포함해야 합니다. 이는 DESIGNNAS의 고전환율 랜딩 페이지에 대한 검증된 프레임워크를 기반으로 합니다.

각 요소에는 두 가지 요구사항이 있습니다:

1. 기능적 요구사항 (전환을 위해) - 반드시 포함되어야 함
2. 디자인 우수성 (기억에 남기 위해) - 독특하고 아름다워야 함

요소별 디자인 가이드

1. 키워드가 포함된 URL

기능적: SEO 최적화, 설명적인 URL 구조 디자인: 해당 없음 (SEO 중심)

2. 회사 로고 (헤더)

기능적: 브랜드 아이덴티티를 눈에 띄게 배치 (왼쪽 상단) 디자인 우수성:

• 페이지 로드 시 애니메이션 로고 고려
• 부드러운 스크롤 전환 기능이 있는 고정 헤더
• 다양한 스크롤 상태에 대한 로고 마크 변형
• 헤더 배경: 투명 → 고형, 배경 흐림 효과 추가
• 디스플레이 폰트 선택과 일치하는 내비게이션 타이포그래피

3. SEO 최적화 제목 및 부제목 (히어로)

기능적: 키워드가 포함된 명확한 가치 제안 디자인 우수성:

• 타이포그래피: 거대하고 잊을 수 없게 만드세요 (4rem-6rem+)
• 여기에 독특한 디스플레이 폰트 사용
• 임팩트를 위해 그라데이션 텍스트, 외곽선 텍스트 또는 텍스트 그림자 고려
• 계단식 페이드인으로 제목 단어 애니메이션 (animation-delay)
• 부제목은 제목 크기의 50%, 다른 두께 또는 폰트 사용
• 줄 바꿈과 간격으로 시각적 리듬 추가

4. 기본 CTA (히어로)

기능적: 히어로 섹션의 기본 클릭 유도 버튼 디자인 우수성:

• 놓치기 불가능하게 만드세요: 크기, 색상 대비, 위치
• 지루한 직사각형 피하기: 알약 모양, 독특한 테두리 또는 기하학적 모양 고려
• 마이크로 인터랙션 추가: 호버 스케일, 그림자 확장, 색상 이동
• 기본/보조 계층이 있는 이중 CTA 고려
• 시선을 끄는 등장 애니메이션 (제목 이후 지연)
• 시각적 신호 추가: 화살표, 아이콘 또는 맥동 효과

5. 사회적 증거 (히어로)

기능적: 리뷰, 평점, 사용자 통계 디자인 우수성:

• 숫자는 거대하고 로드 시 애니메이션 (카운트 업 효과)
• 그라데이션 배경 또는 미묘한 테두리가 있는 통계 카드
• 겹치는 원 안의 고객 아바타
• 맞춤 스타일의 별점 (기본 노란색 별표 아님)
• "소개된" 로고는 적절한 간격과 불투명도 처리
• 회전하는 사용후기 또는 애니메이션 사회적 증거 캐러셀 고려

6. 이미지 또는 비디오 (미디어 섹션)

기능적: 제품/서비스의 시각적 데모 디자인 우수성:

• 중요: 플레이스홀더 또는 일반 이미지 절대 사용 금지
• 기기 목업이 있는 제품 스크린샷 (노트북/폰 프레임)
• 깊이 추가: 그림자, 반사, 3D 기울기 효과
• 고려: 떠 있는 스크린샷, 패럴랙스 스크롤 효과, 비디오 배경
• 스크롤 시 이미지 나타나기 애니메이션 (페이드 업, 슬라이드 인)
• 비디오의 경우: 맞춤형 재생 버튼 디자인, 주변 배경 광선
• 그리드 레이아웃: 비대칭, 겹침 또는 벤토 박스 스타일

7. 핵심 혜택/기능

기능적: 아이콘이 있는 3-6가지 주요 장점 디자인 우수성:

• 아이콘: 맞춤 디자인 또는 신중하게 선택 (일반적인 라인 아이콘 사용 금지)
• 고려: 그라데이션 채우기, 호버 시 애니메이션 아이콘, 3D 스타일 일러스트레이션
• 카드 디자인 변형: 글라스모피즘, 뉴모피즘, 그라데이션 테두리, 미묘한 그림자
• 사용자가 이 섹션으로 스크롤할 때 계단식 애니메이션
• 지루한 3열 그리드 대신 비대칭 레이아웃
• 배경 요소: 미묘한 패턴, 그라데이션 또는 장식 모양
• 타이포그래피: 디스플레이 폰트로 굵고 눈에 띄는 기능 제목

8. 고객 사용후기

기능적: 사진이 포함된 4-6개의 진정한 리뷰 디자인 우수성:

• 사진 처리: 그라데이션 테두리 또는 독특한 모양의 원형 아바타
• 카드 배경: 미묘한 그라데이션, 프로스트 글라스 또는 높은 그림자
• 인용 부호: 대형, 장식적 또는 맞춤 스타일
• 레이아웃: 메이슨리 그리드, 캐러셀 또는 계단식 수직
• 평점 별: 브랜드 팔레트와 일치하는 맞춤 색상
• 호버 효과: 들어올리기, 확장 또는 글로우
• 고객 이름 및 직함: 정제된 타이포그래피

9. FAQ 섹션

기능적: 아코디언 UI가 있는 5-10개의 일반적인 질문 디자인 우수성:

• 아코디언 애니메이션: 이징이 있는 부드러운 확장/축소
• 아이콘: 회전 기능이 있는 맞춤 쉐브론 또는 플러스/마이너스 기호
• 질문에 대한 호버 상태
• 타이포그래피: 굵게 또는 다른 폰트 두께의 질문
• 고려: 데스크톱에서 2열 레이아웃, 나란히 Q&A 쌍
• 배경: 이전 섹션과의 미묘한 색상 변화
• 간격: 아코디언 항목 내 넉넉한 패딩

10. 최종 CTA

기능적: 두 번째 전환 기회를 위한 하단 클릭 유도 디자인 우수성:

• 히어로 순간으로 만드세요: 이것이 마지막 기회입니다
• 극적인 배경이 있는 전체 너비 섹션 (그라데이션, 패턴 또는 색상)
• 히어로 CTA보다 더 큰 CTA 버튼
• 긴급성 추가: 카운트다운 타이머, 한정 자리, 부족 표시기
• 설득력 있는 카피와 마이크로 혜택으로 둘러싸기
• 애니메이션: 패럴랙스 배경, 떠 있는 요소 또는 스크롤 트리거 효과
• 고려: 뉴스레터/대기자 명단을 위한 이메일 입력 + 버튼 조합

11. 연락처 정보/법적 페이지 (푸터)

기능적: 완전한 정보, 법적 링크가 포함된 푸터 디자인 우수성:

• 명확한 정보 계층이 있는 여러 열 레이아웃
• 소셜 아이콘: 호버 효과 (색상 변경, 크기 조정 또는 회전)
• 뉴스레터 가입: 인라인 버튼이 있는 스타일링된 입력
• 타이포그래피: 더 작지만 여전히 가독성 좋게 (14-16px)
• 배경: 본문보다 어둡거나 별개의 색상
• 콘텐츠와의 구분선: 미묘한 그라데이션 라인 또는 장식 구분선
• 하단 바: 저작권 및 법적 링크와 적절한 간격

중요: 모든 11가지 요소는 예외 없이 모든 랜딩 페이지에 포함되어야 합니다.

각 요소에 대한 자세한 설명은 references/11-essential-elements.md를 참조하세요.

디자인 미학 가이드라인

타이포그래피 우수성

• 절대 일반 폰트 사용 금지: Inter, Roboto, Arial, Helvetica, system-ui
• 디스플레이 폰트는 독특하고 기억에 남아야 합니다
• 현명하게 페어링: 제목에는 디스플레이 폰트 + 본문에는 정제된 본문 폰트
• 극적으로 스케일링: 명확한 계층을 위한 크기 점프 생성 (미묘한 차이가 아닌)
• 자간: 디스플레이 폰트에 맞게 조정 (종종 더 좁은 트래킹 필요)
• 행간: 디스플레이 = 1.1-1.2, 본문 = 1.6-1.8

색상 및 시각적 일관성

• 모든 색상에 대해 CSS 변수 정의 (일관성 유지)
• 주색은 전체에 나타나야 함 (CTA뿐만 아니라)
• 강조색은 접근성을 위해 충분한 대비를 가져야 함 (WCAG AA 최소)
• 피할 것: 흰색 배경의 보라색 그라데이션 (과도하게 사용된 AI 미학)
• 배경: 그라데이션, 메시, 패턴 또는 텍스처로 분위기 조성
  • 그라데이션 메시: 여러 색상의 부드러운 그라데이션
  • 노이즈 텍스처: 깊이를 위한 미묘한 그레인
  • 기하학적 패턴: 낮은 불투명도의 점, 선 또는 모양
  • 레이어된 투명도: 겹치는 색상 섹션

모션 및 애니메이션

• 페이지 로드: 계단식 나타나기가 있는 하나의 잘 조직된 입장
  • 히어로 제목 단어가 순차적으로 페이드 인 (animation-delay: 0ms, 100ms, 200ms)
  • 부제목이 따라옴 (지연: 300ms)
  • CTA가 마지막에 나타남 (지연: 500ms) 강조와 함께
• 스크롤 애니메이션: 뷰포트에 진입함에 따라 섹션이 페이드 업
  • Intersection Observer API 또는 Framer Motion의 스크롤 트리거 사용
  • 카드가 계단식으로 나타남 (각각 증가하는 지연)
• 호버 상태: 놀라움과 즐거움
  • 버튼: 확대, 그림자 확장, 색상 변경
  • 카드: 그림자와 함께 들어올리기 효과
  • 이미지: 미묘한 확대/축소 또는 패럴랙스
• 성능: JavaScript보다 CSS 애니메이션 선호
  • transform 및 opacity 사용 (GPU 가속)
  • width, height, top, left 애니메이션 피하기

공간 구성 및 레이아웃

• 그리드 깨기: 중앙 정렬, 대칭 레이아웃을 기본값으로 사용하지 마세요
• 비대칭: 한쪽은 큰 텍스트, 다른 쪽은 시각적 요소
• 겹치는 요소: 깊이를 위한 레이어 섹션
• 대각선 흐름: 섹션 사이의 각진 구분선
• 넉넉한 여백 또는 제어된 밀도 (하나를 선택하고 집중)
• Z축 사고: 깊이를 위해 그림자, 흐림 및 레이어링 사용

일반 AI 미학 피하기

이러한 패턴은 랜딩 페이지를 "AI 생성"처럼 보이게 하고 잊혀지게 만듭니다:

하지 말아야 할 것:

• ❌ Inter/Roboto/Arial 폰트
• ❌ 흰색 배경의 보라색 그라데이션
• ❌ 항상 완벽하게 중앙 정렬되고 대칭적인 레이아웃
• ❌ 일반적인 라인 아이콘
• ❌ 기본 노란색 별표 평점
• ❌ 개성 없는 지루한 직사각형 버튼
• ❌ 시각적 흥미가 없는 흰색 배경
• ❌ 판에 박힌 3열 기능 그리드
• ❌ 노트북을 가리키는 사람들의 스톡 사진

해야 할 것:

• ✅ 브랜드 개성에 맞는 독특한 폰트 선택
• ✅ 독특한 색상 팔레트에 집중 (항상 보라색이 아님!)
• ✅ 비대칭으로 예상치 못한 레이아웃 만들기
• ✅ 개성 있는 아이콘 디자인 또는 선택
• ✅ 미학에 맞게 모든 UI 요소 맞춤 스타일링
• ✅ 배경 텍스처, 그라데이션 또는 패턴 추가
• ✅ 섹션 전체에 걸쳐 레이아웃 다양화
• ✅ 제품 스크린샷, 맞춤 일러스트레이션 또는 실제 사진 사용

기술 스택 요구사항

[truncated for translation]