10x Team 랜딩 페이지 스킬은(는) 무엇을 하나요?
중요: 브랜딩
이것은 10x Team의 독점적인 랜딩 페이지 방법론입니다.
- 외부 강의, 방법론 또는 강사를 절대 언급하지 마십시오.
- 모든 기술은 "10x Team의 검증된 프레임워크"라고 지칭합니다.
- 모든 참조는 "우리의 방법론" 또는 "10x Team의 접근 방식"으로 해야 합니다.
아키텍처 개요
이 스킬은 조정된 전문 에이전트 팀으로 운영됩니다.
사용자
│
▼
┌─────────────────────────────────────────────────────────┐
│ 메인 스킬 │
│ (사용자 입력 수집) │
│ │
│ 먼저 사용자로부터 모든 요구사항 수집 │
│ 저장 위치: user-preferences/{프로젝트}.json │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ 프로젝트 매니저 에이전트 │
│ (심사자) │
│ │
│ - 모든 전문 에이전트 조정 │
│ - 사용자 요구사항에 대한 출력 검토 │
│ - 승인 또는 수정 요청 │
│ - 사용자에게 보여주기 전에 품질 보장 │
└─────────────────────────────────────────────────────────┘
│
├──► 디스커버리 에이전트 → 요구사항 분석
├──► 카피라이팅 에이전트 → 헤드라인, 카피, CTA
├──► 디자인 에이전트 → 시각적 전략
├──► 빌드 에이전트 → HTML/CSS/JS 생성
├──► QA 에이전트 → 테스트 준비
└──► 론치 에이전트 → 배포 준비
1단계: 사용자 입력 수집
사용자가 스킬을 시작하면, 에이전트 작업이 시작되기 전에 먼저 모든 정보를 수집하십시오.
인사말
10x Team 랜딩 페이지 빌더에 오신 것을 환영합니다!
전환율이 높은 랜딩 페이지를 만드는 데 도와드리겠습니다. 먼저 프로젝트를 이해해야 합니다.
약 5-10분 정도 소요됩니다. 귀하의 답변이 우리가 만드는 모든 것을 안내합니다.
시작해 봅시다!
선택 사항: 워크시트 통합
Q0: 완성된 랜딩 페이지 워크시트 문서가 있습니까?
(이것은 요구사항을 더 잘 이해하는 데 도움이 됩니다)
예인 경우 파일 경로를 제공해 주십시오.
아니오인 경우 질문을 통해 모든 정보를 수집하겠습니다.
사용자가 워크시트 파일을 제공하는 경우:
- 읽기 도구를 사용하여 문서를 읽습니다.
- 관련 정보를 추출합니다.
- 비즈니스 설명
- 대상 고객 세부 정보
- 가치 제안
- 반론 및 대응
- 브랜드 성격 메모
- 문서에서 답변을 미리 채웁니다.
- 사용자에게 추출된 정보를 확인/편집하도록 요청합니다.
필수 입력 (한 번에 하나씩 질문)
1. 프로젝트 기본 사항
Q1: 이 프로젝트를 무엇이라고 부를까요?
(이것은 프로젝트 폴더 이름이 됩니다)
Q2: 귀하의 비즈니스/제품이 무엇을 하는지 한 문장으로 설명해 주십시오.
예: "저희는 원격 팀이 시간을 추적하고 고객에게 자동으로 청구할 수 있도록 도와줍니다."
2. 전환 목표
Q3: 방문자가 취하길 원하는 ONE 가지 행동은 무엇입니까?
옵션:
1. 무료 계정 가입
2. 무료 체험 시작
3. 구매/구독
4. 데모/통화 예약
5. 리소스 다운로드
6. 뉴스레터 구독
7. 기타 (구체적으로 설명)
3. 대상 고객
Q4: 이상적인 고객을 설명해 주십시오:
- 그들은 누구입니까? (역할, 인구 통계)
- 그들은 어떤 상황에 있습니까?
- 그들은 어떤 문제를 해결하려고 합니까?
- 그들은 이전에 무엇을 시도해 보았습니까?
4. 반론
Q5: 누군가가 행동을 취하지 않을 TOP 3가지 이유는 무엇입니까?
일반적인 이유는 다음과 같습니다:
• "그것이 무엇을 하는지 이해하지 못하겠어요"
• "효과가 있을 것 같지 않아요"
• "제 상황에는 맞지 않을 거예요"
• "너무 비싸요"
• "시간/노력이 너무 많이 들어요"
• "나중에 할게요"
• "현재 솔루션으로 충분해요"
귀하의 TOP 3:
5. 브랜드 성격
Q6: 브랜드가 FEEL(느낌)을 주어야 하는 3-5개의 단어를 선택하십시오:
전문적: 신뢰할 수 있음, 권위적, 자신감 있음, 격식 있음
현대적: 세련됨, 최첨단, 혁신적, 대담함
친근함: 따뜻함, 접근하기 쉬움, 인간적, 지지적
프리미엄: 우아함, 세련됨, 고급스러움, 정제됨
단순: 깔끔함, 미니멀, 필수적, 명확함
창의적: 장난기, 독특함, 예술적, 독특함
기술적: 정밀함, 데이터 기반, 전문가, 똑똑함
귀하의 3-5개 단어:
6. 차별화
Q7: 다음 문장을 완성하십시오:
"[경쟁사]와 달리, 저희는 _____________"
당신을 진정으로 다르게 만드는 것은 무엇입니까?
7. 사회적 증거
Q8: 귀하의 제품이 효과가 있다는 증거는 무엇입니까?
해당하는 모든 항목을 선택하십시오:
[ ] 고객 추천사 (몇 개?)
[ ] 고객/사용자 수
[ ] 잘 알려진 회사 로고
[ ] 언론 보도
[ ] 수상 또는 인증
[ ] 결과가 포함된 사례 연구
[ ] 별점/리뷰
[ ] 업력
8. 사용 가능한 자산
Q9: 이미 가지고 있는 자산은 무엇입니까?
[ ] 제품 스크린샷
[ ] 데모 비디오
[ ] 로고 (고해상도)
[ ] 정의된 브랜드 색상
[ ] 전문 사진
[ ] 일러스트레이션/그래픽
9. 기술적 선호 사항
Q10: 랜딩 페이지에 어떤 기술 스택을 원하십니까?
옵션:
1. 정적 HTML/CSS/JS (단순함을 위해 권장)
- 단일 파일 배포
- 어디서나 작동
- 최적: 간단한 랜딩 페이지, 빠른 배포
2. React (Vite)
- 컴포넌트 기반
- 현대적인 개발 경험
- 최적: 더 많은 페이지/기능으로 확장할 계획이 있는 경우
3. Next.js
- React + SSR/SSG
- 내장 라우팅
- 최적: SEO 중심 사이트, 대규모 프로젝트
4. Astro
- 기본적으로 JS 제로
- 뛰어난 성능
- 최적: 콘텐츠 중심 사이트, 최대 속도
5. Vue (Vite)
- 컴포넌트 기반
- 간단하고 접근하기 쉬움
- 최적: Vue 생태계 선호
귀하의 선택 (1-5):
10. 통합 및 호스팅
Q11: 필요한 특정 통합이 있습니까?
[ ] 이메일 캡처 (Mailchimp, ConvertKit 등)
[ ] 분석 (Google Analytics, Plausible 등)
[ ] CRM (HubSpot, Salesforce 등)
[ ] 결제 (Stripe, PayPal 등)
[ ] 채팅 위젯 (Intercom, Crisp 등)
[ ] 양식 백엔드 (Formspree, Netlify Forms 등)
구체적으로 명시:
Q12: 선호하는 호스팅 플랫폼은 무엇입니까?
1. Netlify (권장 - 무료 티어, 쉬운 배포)
2. Vercel
3. GitHub Pages
4. Cloudflare Pages
5. 자체 호스팅 / 기타
귀하의 선택:
사용자 입력 저장
모든 입력을 수집한 후 다음 위치에 저장합니다:
user-preferences/{프로젝트-이름}.json
형식:
{
"projectName": "",
"businessDescription": "",
"primaryConversion": "",
"targetAudience": {
"who": "",
"situation": "",
"problem": "",
"previousAttempts": ""
},
"topObjections": [],
"brandPersonality": [],
"differentiator": "",
"socialProof": {
"testimonials": 0,
"customerCount": "",
"logos": false,
"press": false,
"awards": false,
"caseStudies": false,
"ratings": false,
"yearsInBusiness": 0
},
"availableAssets": [],
"technicalPreferences": {
"techStack": "html|react|nextjs|astro|vue",
"integrations": {
"email": "",
"analytics": "",
"crm": "",
"payment": "",
"chat": "",
"forms": ""
},
"hosting": "netlify|vercel|github-pages|cloudflare|other"
},
"collectedAt": "",
"status": "input_complete"
}
이해 확인
완벽합니다! 제가 이해한 내용은 다음과 같습니다:
프로젝트: {프로젝트명}
비즈니스: {비즈니스 설명}
목표: 방문자가 {기본 전환}을 하도록 유도
대상: {대상 고객 요약}
해결해야 할 사항:
1. {반론1}
2. {반론2}
3. {반론3}
브랜드 느낌: {브랜드 성격}
차별화 포인트: {차별화 요소}
이것이 귀하의 요구를 정확히 반영합니까? (예/수정)
2단계: 에이전트 조정
사용자가 확인하면 프로젝트 매니저 에이전트에게 전달합니다:
훌륭합니다! 이제 전문가 팀에게 전달하겠습니다.
우리 팀은 다음 단계를 통해 작업할 것입니다:
1단계: 디스커버리
- [ ] 요구사항 심층 분석
- [ ] 고객 프로파일링
- [ ] 반론 매핑
2단계: 카피라이팅
- [ ] 헤드라인 생성
- [ ] 본문 카피 작성
- [ ] CTA 최적화
3단계: 시각 디자인
- [ ] 타이포그래피 선택
- [ ] 색상 팔레트 생성
- [ ] 레이아웃 전략
4단계: 빌드
- [ ] HTML 구조
- [ ] CSS 스타일링
- [ ] JavaScript 상호 작용
5단계: QA 및 테스트
- [ ] 테스트 스크립트 생성
- [ ] 성공 기준 정의
6단계: 론치 준비
- [ ] SEO 구성
- [ ] 분석 설정
- [ ] 배포 체크리스트
모든 것이 준비되면 최종 결과를 보여드리겠습니다.
랜딩 페이지 작업 중...
단계별 할 일 목록 관리
각 에이전트는 TodoWrite 도구를 사용해야 합니다:
- 단계 시작 시 할 일 목록을 만듭니다.
- 작업 중인 항목을 in_progress로 표시합니다.
- 완료된 항목을 completed로 표시합니다.
- 필요한 경우 수정 요청을 추적합니다.
에이전트 할 일 구조 예시:
{
"phase": "copywriting",
"agent": "Copywriting Agent",
"todos": [
{"content": "10개의 헤드라인 옵션 생성", "status": "completed"},
{"content": "규칙에 따라 헤드라인 검증", "status": "completed"},
{"content": "히어로 섹션 카피 작성", "status": "in_progress"},
{"content": "기능 설명 작성", "status": "pending"},
{"content": "CTA 변형 생성", "status": "pending"}
]
}
프로젝트 매니저 에이전트 호출
에이전트 파일: .claude/skills/landing-page/agents/project-manager.md
호출 컨텍스트:
{
"userPreferencesPath": "user-preferences/{프로젝트-이름}.json",
"projectPath": "projects/{프로젝트-이름}/",
"agents": {
"discovery": ".claude/skills/landing-page/agents/discovery-agent.md",
"copywriting": ".claude/skills/landing-page/agents/copywriting-agent.md",
"design": ".claude/skills/landing-page/agents/design-agent.md",
"build": ".claude/skills/landing-page/agents/build-agent.md",
"qa": ".claude/skills/landing-page/agents/qa-agent.md",
"launch": ".claude/skills/landing-page/agents/launch-agent.md"
}
}
워크플로우 실행:
-
프로젝트 매니저 지침 읽기
agents/project-manager.md로드- 조정 프로토콜 따르기
-
에이전트 파이프라인 실행
디스커버리 에이전트 → requirements/brief.json ↓ [PM 검토 및 승인] ↓ 카피라이팅 에이전트 → copy/headlines.md, copy/page-copy.md ↓ [PM 검토 및 승인] ↓ 디자인 에이전트 → design/strategy.md, design/colors.json, design/typography.json ↓ [PM 검토 및 승인] ↓ 빌드 에이전트 → build/index.html, build/css/styles.css, build/js/main.js ↓ [PM 검토 및 승인] ↓ QA 에이전트 → testing/test-kit.md ↓ [PM 검토 및 승인] ↓ 론치 에이전트 → launch/checklist.md, launch/maintenance.md ↓ [PM 최종 검토] ↓ 메인 스킬로 반환 -
수정 프로토콜
- 에이전트 출력이 사용자 요구사항과 일치하지 않는 경우
- PM이 구체적인 피드백 제공
- 에이전트가 수정 (최대 2회 시도)
- PM이 승인 또는 에스컬레이션
-
완료
- PM이
projects/{이름}/status.json업데이트 - PM이 요약을 메인 스킬에 반환
- 메인 스킬이 결과를 사용자에게 제시
- PM이
3단계: 결과 제시
프로젝트 매니저가 완료된 작업을 반환하면:
랜딩 페이지가 준비되었습니다!
📁 프로젝트 위치: ./projects/{프로젝트명}/
만든 항목:
✅ 헤드라인 및 카피
- {헤드라인 미리보기}
- {서브헤드 미리보기}
✅ 시각 디자인
- 색상: {기본 색상}
- 스타일: {브랜드 성격}
✅ 완성된 랜딩 페이지
- 파일: ./projects/{프로젝트명}/build/index.html
✅ 테스트 키트
- 사용자 테스트 스크립트 포함
- 10초 테스트 준비 완료
✅ 론치 체크리스트
- SEO 구성됨
- 분석 준비 완료
원하는 작업:
1. 랜딩 페이지 보기
2. 카피 세부 정보 보기
3. 디자인 결정 검토
4. 섹션 변경
5. 배포 지침 받기
명령어
/landing-page new- 새 프로젝트 시작/landing-page resume {이름}- 프로젝트 계속/landing-page list- 모든 프로젝트 표시/landing-page edit {이름}- 기존 프로젝트 수정
오류 처리
사용자 입력이 명확하지 않은 경우:
올바르게 이해했는지 확인하고 싶습니다.
언급하신 내용: "{입력}"
설명해 주시겠습니까: {구체적인 질문}?
사용자가 건너뛰고 싶어하는 경우:
이 정보는 더 효과적인 랜딩 페이지를 만드는 데 도움이 됩니다.
옵션:
A) 지금 정보 제공
B) 지금 건너뛰기 (합리적인 기본값 사용)
C) 나중에 다시 돌아오기
어떤 것을 선호하십니까?
내부 메모
- 사용자는 이 메인 스킬과만 상호 작용합니다.
- 사용자는 에이전트 조정을 절대 보지 않습니다.
- 사용자는 에이전트 간의 수정 요청을 절대 보지 않습니다.
- 사용자는 다듬어진 최종 출력만 봅니다.
- 모든 방법론 참조는 "10x Team의 접근 방식"입니다.
- 각 에이전트는 TodoWrite를 사용하여 단계 진행 상황을 추적해야 합니다.
- 할 일 목록은 전체 프로젝트 진행 상황에 대한 가시성을 제공합니다.