랜딩 페이지

랜딩 페이지은(는) 무엇을 하나요?

하나의 자체 포함된 HTML 파일을 생성하세요. 생성된 느낌이 아닌, 예술 감독의 손길이 닿은 듯한 느낌이어야 합니다. examples/ 디렉토리의 예제(pulse-landing.html)가 품질 기준입니다. 예제가 보여주는 수준의 구체성, 즉 실제 같은 카피, 세심한 간격, 하나의 강조 색상을 일치시키세요.

빌드 전 준비

다음 다섯 가지 입력값을 수집하거나 명확하게 추론하고 일관성을 유지하세요.

1. 제품을 한 문장으로: 그것이 무엇이고 무엇을 하는가.
2. 대상: '모든 사람'이 아닌, 한 명의 특정 사람.
3. 단일 주요 행동: 가입, 구매, 다운로드, 대기자 명단 참여.
4. 하나의 증거 포인트: 숫자, 인용문, 또는 구체적인 결과. 사용자에게 제공할 것이 없다면 제품의 메커니즘을 대신 사용하세요. (예: "오프라인 작동", "계정 불필요") — 절대 가짜 사용후기나 통계를 만들어내지 마세요.
5. 톤: 하나를 선택하세요 — 조용함/고급스러움, 대담함/시끄러움, 따뜻함/인간적임, 기술적임/정확함.

사용자가 제품과 대상을 제공했다면 더 이상 질문하지 마세요. 합리적인 선택을 하고 마지막에 한 줄로 메모하세요.

디자인 토큰 (기본 시스템 — "잉크 앤 시트러스")

사용자가 브랜드 색상을 제공하지 않는 한 이 설정을 사용하세요. 모든 값은 :root 블록에서 한 번에 변경하세요.

:root{
  --bg:#0F1013;        /* 페이지 배경 */
  --panel:#17181D;     /* 표면을 띄운 영역 */
  --line:#26272E;      /* 가는 선, 테두리 */
  --ink:#F4F2EA;       /* 기본 텍스트 */
  --muted:#9BA0A6;     /* 보조 텍스트 */
  --accent:#D9F24F;    /* 하나의 강조 색상 — 버튼, 하이라이트 */
  --radius:14px;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
}

디자인처럼 보이게 만드는 규칙:

• 하나의 강조 색상. 클릭 가능하거나 중요한 모든 것은 이 색상을 사용하며, 다른 색상은 경쟁하지 않습니다. 무지개 그라데이션이나 보라색-파란색 "AI 그라데이션"은 없습니다.
• 타이포그래피가 역할을 합니다. 헤드라인은 56–72px, 두께 800, 자간 약간 음수(-0.02em). 본문은 17–18px, 줄 간격 1.6. 헤드라인 위에는 작은 대문자 레이블(12px, 자간 0.12em, 대문자, 음영 처리).
• 여백은 8의 배수로. 섹션 패딩은 데스크탑에서 위아래 96px. 간격이 임의적으로 보이면 생성된 것처럼 읽힙니다.
• 그림자보다 가는 선. 드롭 섀도우나 컬러 배경 위에 떠 있는 카드 대신, 섹션을 1px --line 테두리로 구분하세요.
• 숫자를 디자인 요소로. 큰 통계 숫자(48px+)는 강조 색상이나 잉크 색상으로, 작고 음영 처리된 레이블과 함께 사용하세요. 최대 세 개의 통계를 한 행으로.

페이지 레시피 (다음 순서로)

1. 상단 바 — 왼쪽에 워드마크, 두세 개의 일반 텍스트 링크, 하나의 강조 버튼(주요 행동). 얇은 하단 테두리.
2. 히어로 — 작은 대문자 레이블(카테고리), 헤드라인, 하나의 지원 문장(최대 22단어), 기본 버튼 + 하나의 조용한 보조 링크. 오른쪽 또는 아래: CSS로 만든 제품 비주얼(모의 창, 통계 카드 클러스터, 타이포그래피 구성). 절대 비어 있는 회색 플레이스홀더 상자는 안 됩니다.
3. 로고/증명 스트립 — 한 줄: "다음이 사용함…"과 텍스트 워드마크, 또는 증명 통계 행. 정직한 증거가 없다면 완전히 생략하세요.
4. 문제 → 전환 — 두 열: 기존 방식(취소선 느낌의 음영 처리) 대 제품의 방식. 짧은 줄, 3줄 이상의 단락은 없음.
5. 기능 — 정확히 세 개 또는 네 개. 각각: 작은 대문자 숫자(01–04), 제목, 두 줄 설명. 가는 선 구분선이 있는 그리드. 여섯 개의 동일한 아이콘 카드가 아닙니다.
6. 작동 방식 — 세 단계의 번호 단계, 각각 한 줄.
7. 가격 또는 오퍼 — 사용자가 가격을 제시한 경우: 하나의 강조된 요금제, 체크리스트로 포함된 내용, 주요 행동 버튼. 가격이 없는 경우: 대기자 명단/CTA 띠를 대신 사용하세요.
8. FAQ — 최대 네 개의 질문, 실제 반대 의견(가격, 노력, 전환, "이게 나를 위한 것인가")에 대해 작성.
9. 최종 CTA 띠 — 강조 색상 배경 블록, 잉크 색상 텍스트, 헤드라인은 다른 말로 주요 약속을 반복, 하나의 버튼.
10. 푸터 — 워드마크, 포지셔닝을 나타내는 한 줄, 작은 링크. 사이트맵 농장은 안 됩니다.

카피 규칙

• 헤드라인 공식: [구체적인 결과]를 위한 [구체적인 사람], 또는 제품이 뒷받침할 수 있는 구체적인 주장. "러너 여러분, 저녁을 되찾으세요" — "생산성의 미래에 오신 것을 환영합니다"가 아닙니다.
• 모든 섹션은 최소한 하나의 구체적인 명사와 하나의 숫자 또는 이름을 포함해야 합니다. 모호한 형용사("매끄러운", "강력한", "혁명적인", "최첨단", "차원이 다른")는 금지됩니다.
• 버튼은 무슨 일이 일어나는지 말합니다: "무료로 시작하기", "템플릿 받기", "대기자 명단 참여하기". 주요 행동으로 "자세히 알아보기"는 절대 안 됩니다.
• 제품 제작자처럼 글을 쓰세요. 1인칭 복수는 드물게 사용하고("우리가 이것을 만든 이유는…"), 기업의 "솔루션" 언어는 절대 사용하지 마세요.

안티패턴 ("AI 느낌" — 절대 하지 말아야 할 것)

• 보라색/파란색 그라데이션 히어로 배경 또는 그라데이션 텍스트.
• 원 안에 있는 이모지나 일반적인 SVG 아이콘이 있는 세 개의 동일한 카드.
• "🚀 당신의 워크플로우를 강화하세요" 스타일의 카피, 헤드라인의 느낌표.
• 로렘 입숨, "기능 1 / 기능 2", 스톡 사진 플레이스홀더.
• 모든 것을 가운데 정렬. 왼쪽 정렬 텍스트 블록과 오프셋 비주얼을 혼합하세요.
• 두 개 이상의 글꼴 두께 패밀리, 또는 하나 이상의 강조 색상.
• 가짜 사용후기, 가짜 로고, 발명된 통계. 절대.

기술 규칙

• 하나의 HTML 파일, CSS는 <style> 태그 안에, 외부 에셋은 Google Fonts 링크(Inter 또는 사용자의 브랜드 글꼴) 하나만 허용. JavaScript는 선택적인 FAQ 토글 외에는 필요하지 않습니다.
• 시맨틱 태그: header, main, section, footer. <h1>은 한 번만 사용.
• 반응형: 760px 미만에서 단일 컬럼, 히어로 비주얼은 카피 아래에, 터치 대상은 최소 44px.
• 파일을 약 700줄 미만으로 유지하세요. 더 필요하면 페이지가 너무 많은 것을 하고 있는 것입니다 — 섹션을 줄이세요.

QA 체크리스트 (전달 전 실행)

• 하나의 강조 색상, 일관되게 사용됨; 미묘한 동일 색조 배경 페이드를 제외한 그라데이션 없음.
• 헤드라인은 구체적인 결과물과 특정 대상 또는 메커니즘을 포함합니다.
• 페이지의 모든 숫자는 사용자 또는 제품의 실제 메커니즘에서 비롯되었습니다.
• 금지된 단어 없음: 매끄러운, 강화하다, 혁명화하다, 최첨단, 차원이 다른, 잠재력을 발휘하다.
• 390px 너비에서 수평 스크롤 없이 올바르게 읽힙니다.
• 주요 행동이 최소 세 번 나타납니다 (상단 바, 히어로, 최종 띠).