웹사이트 빌더은(는) 무엇을 하나요?
이 스킬은 모든 비즈니스에 대해 작동합니다: 치과의사, 법률 회사, 계약자, 코치, 소프트웨어 회사, 제과점, 교회, 강좌 제작자. 업종, 장소, 페이지 유형을 가정하지 마세요. 모든 구체적인 내용은 인터뷰와 리서치를 통해 결정됩니다. 이 파일에 있는 예시는 단순한 예시일 뿐입니다.
사용자는 아마 기술에 능숙하지 않을 것입니다. 그들은 질문에 답하고, 여러분이 설명하는 버튼을 클릭하며, 여러분이 보여주는 것을 승인합니다. 여러분은 그 외의 모든 것을 수행합니다.
작업 방식 선택 (시작할 때 한 번 질문)
사용자의 요청에 이미 명확히 드러나지 않는 한, AskUserQuestion 도구를 사용하여 질문하세요 (해당 도구를 사용할 수 없는 경우 일반 언어로 질문). 질문: "어떻게 작업하시겠습니까?" 두 가지 옵션:
- 일반 인터뷰. "제가 단계별로 안내해 드리겠습니다: 페이지에서 무엇을 제공할지, 키워드 연구, 계약과 점검을 포함한 전체 사이트, Cloudflare에 무료로 게시."
- 자유 형식. "원하는 것을 말씀해 주시면, 선택한 설정이나 호스트에서 원하는 방식으로 구축해 드립니다. 좋은 카피라이팅, 전환, SEO 및 AI 검색 습관을 여전히 사용하지만, 제가 반대하거나 특정 경로를 강요하지는 않습니다."
답변을 content/notes.md (또는 프로젝트 노트 파일)에 저장하여 다시 묻지 않도록 하세요. 사용자는 언제든지 전환 의사를 밝힘으로써 방식을 바꿀 수 있습니다.
자유 형식 모드
references/any-stack.md를 따르세요. 요약:
- 사용자의 말이 결정합니다. 그들이 요청한 것을, 요청한 순서대로, 그들이 지정하거나 이미 보유한 스택, 플랫폼 및 호스트에 구축하세요. 아무 것도 지정하지 않으면, 작업에 적합한 것을 선택하고 선택 사항을 한 문장으로 말하세요. 인터뷰를 진행하지 말고, 계약이나 아카이브를 요구하지 말며, 레이아웃이나 디자인 선택에 대해 논쟁하지 마세요.
- 규칙은 기본값이지, 강제 사항이 아닙니다.
references/copywriting.md(AI 표현 제거 포함)에 따라 카피를 작성하고,references/conversion.md로 페이지를 구성하며,references/technical-seo.md,references/geo-aeo.md및references/indexing.md를 적절한 곳에 적용하세요. 요청이 명백히 자체 목표에 반하는 경우 (예: 경쟁하는 두 개의 버튼, 차단된 AI 크롤러, 검색에서 숨겨진 페이지), 한 번, 한 문장으로 언급한 후, 사용자의 방식대로 진행하세요. - Lead Desk는 자유 형식에서도 작동합니다. 모든 호스트의 모든 사이트에 대해 양식은 Lead Desk에 게시되고 하나의 스크립트 태그가 사이트 푸터에 추가됩니다 (
references/lead-desk.md). - 리드 마그넷도 자유 형식에서 동일하게 작동합니다. "리드 마그넷 만들어 줘"는 바로
references/lead-magnets.md와scripts/build-magnet.mjs로 연결되며, 사이트 유무에 관계없이 작동합니다. - 도움이 될 때 다른 참고 자료를 사용하세요 (키워드 연구, 아카이브, 성공 페이지, 계약). 사용자가 요청하거나 요청한 내용을 명백히 지원할 때만 사용하세요.
- 점검은 가능한 곳에서 여전히 실행됩니다:
scripts/check-site.mjs --freeform을 사이트의 빌드된 HTML 폴더에 지정하거나, 먼저scripts/fetch-site.mjs로 라이브 사이트를 가져온 후 실행하세요. 자유 형식에서 레이아웃 규칙은 오류가 아닌 제안으로 표시됩니다. - 여전히 항상: 아래 "사용자와 협업하는 방법" 규칙, 허구적 사실 금지, 비밀번호나 키 미처리, 비용이 발생하거나 도메인을 변경하거나 무언가를 삭제하기 전에 질문.
"작업 선택"부터는 일반 인터뷰입니다. 자유 형식에서는 해당 섹션을 참고 자료로만 사용하세요.
목표: 액션 전환
모든 랜딩 페이지는 하나의 액션(예약, 양식 제출, 다운로드, 등록, 구매)을 유도하기 위해 존재합니다. 검색, AI 답변, 소셜 게시물 및 광고는 사람들을 페이지로 데려올 뿐입니다. 페이지는 그들이 액션을 취할 때 작동합니다. 순위를 높이지만 전환율을 낮추는 선택이 있을 때는 전환이 우선입니다. 페이지를 디자인하거나 작성하기 전에 references/conversion.md를 읽고, 모든 페이지를 전환율로 측정하세요.
사이트의 기본 아이디어 (이 단어로 설명)
당신의 웹사이트는 랜딩 페이지 모음입니다. 각 랜딩 페이지는 하나의 것을 원하는 한 유형의 방문자를 위해 만들어졌으며, 그들에게 한 가지(전화 예약, 견적 받기, 가이드 다운로드, 좌석 확보, 구매)를 요청합니다. 그들이 결정하는 데 필요한 모든 것은 첫 화면에 있으며, 주의를 분산시키는 메뉴는 없습니다. 액션을 취한 후에는 그들이 요청한 것을 제공하고 하나의 다음 단계를 제안하는 성공 페이지에 도착합니다.
같은 종류의 랜딩 페이지는 아카이브로 그룹화되며, 이는 모든 페이지를 나열하는 간단한 페이지입니다. 아카이브는 제공하거나 판매하는 것에 따라 달라집니다. 서비스 지역, 서비스, 대상 고객, 무료 가이드, 이벤트 또는 완전히 다른 것일 수 있습니다. 모든 페이지 하단의 푸터는 모든 아카이브에 연결됩니다. 둘러보고 싶은 방문자는 스크롤하여 모든 것을 찾을 수 있으며, Google 및 AI 어시스턴트는 이러한 푸터 링크를 따라 모든 페이지를 발견합니다.
사이트는 메뉴 항목을 추가하지 않고 랜딩 페이지를 추가함으로써 성장합니다. 모든 페이지는 계약(필요한 사실과 규칙의 체크리스트)을 따르므로, 새 페이지를 빠르게 추가할 수 있으며 항상 표준을 충족합니다.
사용자와 협업하는 방법 (항상)
- 셀프 서비스: 스스로 생각하고 선택할 수 있는 구체적인 옵션의 짧은 메뉴(AskUserQuestion)를 권장 사항을 먼저 제시하여 제공하세요. 사용자만 알 수 있는 사실에 대해서만 개방형 질문을 하세요.
- 한 번에 한 단계씩. 쉬운 말로. 다음 단계로 넘어가기 전에 "완료"를 기다리세요.
- 사용자가 무언가를 클릭해야 할 때, 버튼에 적힌 정확한 텍스트와 화면상의 위치를 말하세요.
- 비밀번호, API 키 또는 토큰을 절대 처리하지 마세요. 채팅에서 요청하지 말고, 파일이나 컴퓨터에서 읽지 마세요. 로그인이 필요한 서비스는 사용자가 직접 연결합니다: Cloudflare는 브라우저 로그인을 통해, 다른 도구는 자체 Claude 커넥터 또는 CSV 내보내기를 통해. Lead Desk 비밀번호와 웹훅 링크는 사용자가 자신의 Lead Desk 페이지에 직접 입력하며, 절대 채팅에 입력하지 않습니다.
- 비용이 발생하거나, 도메인을 변경하거나, 무언가를 삭제하기 전에 질문하세요.
- 각 단계 후, 수행한 작업을 한 문장으로 말하세요. 전문 용어를 사용하지 마세요.
- 보여주고, 설명하지 마세요: 볼 것이 있을 때마다 로컬 미리보기를 시작하고 링크를 제공하세요.
- 사실을 절대 지어내지 마세요: 숫자, 리뷰, 장소, 자격 증명 또는 검색량을 만들어내지 마세요. 사실이 누락된 경우 질문하세요.
작업 선택 (일반 인터뷰)
- 새 사이트 구축. 모든 단계를 순서대로.
- 리드 마그넷 만들기 (원하는 경우 랜딩 페이지, 성공 페이지, 게시물, 광고 및 이메일 포함).
references/lead-magnets.md를 따르세요. - 기존 아카이브에 모든 종류의 랜딩 페이지 추가.
references/contracts.md의 "페이지 추가"를 따르세요. - 새 아카이브 추가 (새로운 종류의 랜딩 페이지).
references/contracts.md의 "아카이브 추가"를 따르세요. - 키워드 및 장소 찾고 새 페이지 계획 수립. 4단계를 수행한 후 페이지 계획을 전달하세요.
- 기존 사이트 점검, 수정 및 색인 생성. 8, 9, 10단계.
- Lead Desk 설정, 비즈니스 자체 리드 수신함(관리자 로그인, 결과 및 알림 포함)을 Cloudflare 계정에 설정합니다.
references/lead-desk.md를 따르세요. 모든 웹사이트와 함께 작동합니다. - 일정에 따라 페이지를 추가하는 루틴 설정.
references/contracts.md의 "루틴"을 참조하세요.
1단계: 무엇을 만들어 드릴까요? (인터뷰에서 항상 먼저)
references/offers-and-archives.md를 따르세요. 셀프 서비스로 유지하세요: 스스로 생각하고 선택할 수 있는 메뉴를 제공하세요.
- 그들이 무엇을 판매하는지 묻고, 그런 다음 "어떤 리드 마그넷을 만들어 드릴까요?" 라고 묻고, 그들의 비즈니스를 위해 3-4가지 아이디어를 구체화하여 제시하세요 (
references/lead-magnets.md). 그런 다음 어떤 페이지를 만들지 결정하세요. - 그들의 선택을 기반으로 제품 인벤토리를 구축하세요: 사이트가 제공하거나 제공할 모든 것, 그리고 각각이 요청하는 하나의 액션.
- 비즈니스 모델, 고객 유입 경로 및 소셜 미디어 계획을 파악하세요. 무언가를 약속하는 모든 소셜 게시물에는 이를 제공하는 랜딩 페이지가 필요합니다.
- 위치 페이지가 전혀 필요한지 결정하세요. 많은 비즈니스에는 위치 페이지가 없습니다.
- 템플릿에서 아카이브를 선택하세요. 비즈니스 자체 용어로 이름을 지정하고 사용자의 승인을 받으세요.
2단계: 사실 수집
about.md와 voice.md가 있으면 먼저 읽고, 이미 답변된 내용은 건너뛰세요. 그런 다음 선택한 아카이브에 필요한 것에 대해서만 한 번에 하나씩 질문하세요:
- 증거: 업력, 서비스한 고객 수, 자격증 또는 면허증, 보증, 수상 내역, 평점 및 리뷰 수, 이름, 장소(해당되는 경우) 및 구체적인 결과가 포함된 3개 이상의 사용 후기.
- 게시할 의향이 있는 가격 또는 범위, 그리고 소요 시간.
- 각 제품에 대해, 해당 페이지에 필요한 구체적인 사실 (계약 필드가 알려줍니다).
- 리드가 어디로 가는지. 메뉴 제공: 자체 Lead Desk (권장: 무료, Cloudflare 계정에서, 모든 리드 출처와 고객 전환을 보여줌;
references/lead-desk.md), 이미 사용 중인 CRM 또는 이메일 도구 (Lead Desk가 리드를 전달할 수 있음), 또는 통화 예약 도구. - 브랜드: 로고, 색상, 작업 및 직원의 실제 사진.
- 이름, 주소 (공개된 경우) 및 전화번호를 Google 비즈니스 프로필에 정확히 표시된 대로, 모든 공식 프로필 링크와 함께.
- 도메인을 소유하고 있는지, 어디서 구매했는지.
모든 내용을 content/business.yaml, content/offers.md 및 content/notes.md에 저장하여 두 번 묻지 않도록 하세요.
3단계: Cloudflare 설정 및 연결
references/cloudflare-setup.md를 따르세요: Node (없는 경우), 무료 Cloudflare 계정, 고정 버전으로 사이트에 Wrangler 설치, npm run cf:login, 그런 다음 npm run cf:whoami로 확인.
4단계: 키워드 연구, 장소 발견 및 페이지 계획
references/keyword-research.md를 따르세요:
- 제품 인벤토리, 고객의 용어 및 (장소가 중요한 경우에만) 적절한 수준에서 발견된 장소를 기반으로 후보를 구축하세요.
- 명명된 소스에서 실제 수요를 확인하고 실제 검색 결과에서 실제 경쟁을 확인하세요.
- 검색 결과를 공유하는 키워드를 하나의 페이지로 그룹화하고, 각 페이지를 게이트를 통과시키세요.
research/keywords.csv,research/places.csv(장소가 중요한 경우) 및research/page-plan.md를 저장하세요. 평이한 언어로 계획을 사용자에게 보여주고 승인을 받으세요.
5단계: 계약 설정
references/contracts.md를 따르세요:
assets/contracts/archive-templates/에서 선택한 각 아카이브에 대해contracts/archives/<id>.json을 만들고, 비즈니스 자체 ID, 레이블, 경로 및 목표를 포함하세요.- 사이트에 필요한 성공 계약을
assets/contracts/success/에서 복사하세요. scripts/contracts.mjs,scripts/new-page.mjs,scripts/check-site.mjs및scripts/build-magnet.mjs를 사이트의scripts/폴더에 복사하세요.- 계획된 모든 페이지를
node scripts/new-page.mjs로 스캐폴딩하세요.
6단계: 사이트 구축
references/site-structure.md를 따르세요. 스택은 정적 출력이 있는 Astro + Tailwind입니다. 콘텐츠 컬렉션은 계약에서 생성되므로, 빌드는 계약을 위반하는 모든 페이지를 거부합니다.
가장 중요한 규칙:
- 랜딩 페이지당 하나의 전환 목표. 모든 버튼과 양식은 동일한 액션으로 이어지며,
data-cta="<goal>"및data-success="/thanks/<goal>/"로 표시됩니다. 두 번째 제안은 자체 페이지를 가져야 합니다. - 첫 화면에 중요한 모든 것: 로고, 문제를 명명하고 페이지의 주요 키워드를 포함하는 헤드라인, 최대 두 줄의 부제목, 하나의 전환 및 신뢰 요소 (뱃지 + 2-3개의 짧은 사용 후기). 페이지가 스크롤될 수는 있지만, 아무도 그럴 필요가 없어야 합니다.
- 상단 탐색 메뉴 없음. 헤더에는 로고와 콜 투 액션만 있습니다.
- 아카이브는 해당 종류의 모든 랜딩 페이지를 나열합니다. 모든 페이지의 푸터는 모든 아카이브에 연결됩니다.
- 각 아카이브에는 역할이 있습니다.
search아카이브는 순위를 매기고 AI가 인용하도록 구축됩니다 (키워드 게이트, 전체 SEO/AEO/GEO).resource아카이브는 콘텐츠, 소셜 게시물 및 이메일에서 링크된 항목을 보관합니다. 해당 페이지는 방문자가 얻는 것을 정확히 보여주는 데 초점을 맞추고 (미리보기 필요) 키워드 게이트를 건너뜁니다.both는 게이트도 통과한 리소스를 의미합니다. - 성공 페이지는 성공 계약을 따릅니다: 약속한 것을 전달하고, 하나의 다음 단계를 제안하며, 절대 색인되지 않습니다.
6b단계: 리드 마그넷 만들기
주문한 각 리드 마그넷에 대해 references/lead-magnets.md를 따르세요: lead-magnets/<slug>/magnet.md를 작성하고, node scripts/build-magnet.mjs lead-magnets/<slug> --site public을 실행하고, PDF와 커버를 보여주고, 커버를 랜딩 페이지 미리보기로 사용하세요. 원하는 경우 promo.md (게시물, 댓글-다이렉트 메시지 흐름, 광고 및 후속 이메일)를 작성하세요.
7단계: 카피 작성
references/copywriting.md 및 references/conversion.md를 따르세요: 문제 인식, 솔루션 중심, 페이지 키워드를 중심으로 구성, 짧고 평이한 문장, 형용사 대신 사실. 각 페이지를 보여주기 전에 AI 표현 검사를 실행하세요.
8단계: 점검
references/geo-aeo.md: 전체 AI 검색 체크리스트. 모두 적용하세요.references/technical-seo.md: 메타데이터, 구조화된 데이터, 사이트맵, robots.txt, llms.txt, 속도.package.json에"check": "node scripts/contracts.mjs check && astro build && node scripts/check-site.mjs dist"를 추가하고 모든 변경 후npm run check를 실행하세요. FAIL 라인과 함께 절대 게시하지 마세요. 명시적인 이유가 없는 한 경고를 수정하고, 수정하지 않은 경고와 그 이유를 사용자에게 알리세요.
8b단계: Lead Desk
Lead Desk를 선택한 경우, 게시 전에 references/lead-desk.md로 설정하세요: 데이터베이스, 주소 (도메인이 Cloudflare에 있는 경우 하위 도메인), 소유자 초대, 양식이 각 페이지의 성공 페이지로 _success가 설정된 상태로 Lead Desk에 게시되도록, 모든 페이지에 도우미 스크립트, 그리고 최소 하나의 알림. 로컬 미리보기에서 테스트 리드를 보내고 도착하는지 확인하세요.
9단계: 게시
- 로컬 미리보기를 보여주고 사용자의 승인을 기다리세요.
npm run deploy(먼저 점검을 실행합니다; 처음에는 설정 가이드에 따라 프로젝트를 생성하세요).- 라이브 링크를 제공한 다음, 각 아카이브, 하나의 랜딩 페이지와 해당 성공 페이지,
/sitemap-index.xml및/llms.txt를 엽니다. - 자체 도메인 연결을 제안하세요 (설정 가이드, 5부). 색인 생성을 위해 최종 도메인이 필요하므로, 원하는 경우 10단계 전에 이 작업을 수행하세요.
- 게시 후
references/technical-seo.md의 라이브 속도 점검을 실행하세요.
10단계: 색인 생성
references/indexing.md를 따르세요: 사전 점검, Google Search Console, Bing Webmaster Tools, IndexNow, 지도 등록 및 .pages.dev 사본을 검색에서 제외. 3일, 7일 및 14일 후에 사용자와 진행 상황을 확인하세요.