홈페이지 방문자를 문의와 구매 고객으로 전환하기 위한 7단계 실전 프롬프트입니다. 고객 분석부터 CRO 설계, 세일즈 카피, 디자인, 개발, QA, 리디자인, 실제 배포와 GA4 추적까지 각 단계별 프롬프트를 그대로 복사해 사용할 수 있습니다.
방문자를 고객으로 바꾸는 홈페이지 제작 7단계 프롬프트
아래 프롬프트는 순서대로 사용하는 방식이 좋습니다. 먼저 고객과 전환 구조를 분석한 뒤 카피, 디자인, 개발, QA, 리디자인, 배포 순으로 진행하세요.
1단계. 홈페이지 전환 구조 설계 프롬프트
첫 단계에서는 바로 디자인하거나 코딩하지 않습니다. 고객이 홈페이지에서 어떤 순서로 판단하는지 먼저 설계합니다.
너는 CRO 전략가이자 UX 설계자다.
아래 정보를 기준으로 방문자를 문의 또는 구매 고객으로 전환시키는 홈페이지 전체 구조를 설계해라.
[서비스 정보]
서비스명:
주요 서비스:
가격:
주요 강점:
차별점:
주요 고객:
고객이 가진 문제:
고객의 구매 동기:
고객이 느끼는 불안:
경쟁 서비스:
신뢰 요소:
현재 홈페이지:
홈페이지 목표:
다음 순서로 분석해라.
1. 핵심 고객 분석
2. 고객이 해결하려는 문제
3. 구매를 결정하는 이유
4. 구매를 망설이는 이유
5. 경쟁 대안
6. 우리 서비스의 차별점
7. 고객에게 보여줘야 할 신뢰 요소
8. 고객의 의사결정 과정
9. 홈페이지 전체 정보 구조
홈페이지는 다음 흐름을 기본으로 검토해라.
문제 인식 → 관심 → 해결 방법 → 신뢰 → 비교 → 가격 → 반론 해소 → 문의 또는 결제
다음 섹션을 필요한 순서로 배치해라.
Hero
문제 정의
해결 방법
서비스 소개
진행 과정
사례
가격
차별점
반론 해소
FAQ
최종 CTA
각 섹션마다 반드시 아래 4가지를 작성해라.
- 섹션 목적
- 핵심 메시지
- 반드시 들어갈 정보
- 다음 섹션으로 연결하는 이유
불필요한 섹션은 제거해라.
정보가 부족하면 임의로 만들지 말고 "정보 부족"이라고 표시해라.
확인되지 않은 고객 수치, 매출, 후기, 성공률은 만들지 마라.
마지막에는 홈페이지 전체 전환 흐름을 한눈에 볼 수 있도록 정리해라.
2단계. 홈페이지 세일즈 카피 작성 프롬프트
1단계에서 만든 구조를 활용해 실제 홈페이지에 넣을 문구를 만듭니다.
너는 다이렉트 리스폰스 카피라이터이자 브랜드 카피라이터다.
앞서 설계한 홈페이지 정보 구조를 기준으로 실제 홈페이지에 사용할 전체 카피를 작성해라.
[서비스 정보]
서비스명:
서비스 내용:
핵심 고객:
핵심 문제:
핵심 결과:
가격:
차별점:
신뢰 요소:
다음 내용을 빠짐없이 작성해라.
1. Hero 메인 헤드라인
2. Hero 서브카피
3. Hero CTA
4. 문제 제기
5. 문제에 대한 공감
6. 해결 방법
7. 서비스 소개
8. 서비스별 핵심 혜택
9. 차별점
10. 진행 과정
11. 사례 소개
12. 가격 설명
13. 가격별 제공 내용
14. 구매 전 반론 처리
15. FAQ
16. 최종 CTA
Hero 영역은 처음 방문한 사람이 짧은 시간 안에 다음 내용을 이해하도록 작성해라.
- 누구를 위한 서비스인가
- 어떤 문제를 해결하는가
- 어떤 결과를 기대할 수 있는가
- 다음에 무엇을 해야 하는가
추상적인 광고 문구는 줄여라.
"최고", "혁신", "완벽", "최상의 서비스"처럼 근거 없는 표현은 사용하지 마라.
실제 확인되지 않은 사례나 성과 수치를 만들지 마라.
각 문장은 짧게 작성해라.
모바일에서 읽기 쉽도록 긴 문단을 피하고 문단을 짧게 나눠라.
실제 웹페이지에 바로 붙여 넣을 수 있는 완성형 카피로 작성해라.
3단계. 홈페이지 디자인 시스템 설계 프롬프트
카피가 완성되면 브랜드 이미지와 사용자 경험에 맞는 디자인 시스템을 만듭니다.
너는 프리미엄 브랜드 디자이너이자 UI 시스템 디자이너다.
앞서 분석한 고객과 홈페이지 구조를 기준으로 실제 개발에 사용할 수 있는 디자인 시스템을 설계해라.
[브랜드 정보]
브랜드명:
업종:
주요 고객:
서비스 가격대:
브랜드 포지셔닝:
원하는 이미지:
피하고 싶은 이미지:
기존 브랜드 컬러:
경쟁 브랜드:
다음 항목을 구체적인 수치와 규칙으로 정해라.
1. 메인 컬러와 HEX
2. 보조 컬러와 HEX
3. 배경 컬러
4. 본문 컬러
5. 강조 컬러
6. 폰트 조합
7. H1 크기
8. H2 크기
9. H3 크기
10. 본문 크기
11. 버튼 크기
12. 섹션 간격
13. 카드 여백
14. Border Radius
15. 그림자
16. 이미지 스타일
17. 아이콘 스타일
18. CTA 디자인
19. 가격표 디자인
20. FAQ 디자인
21. 모바일 레이아웃
PC와 모바일을 각각 구분해라.
모바일에서는 여러 카드가 한 줄에 나란히 배치되지 않도록 설계해라.
콘텐츠 박스는 화면 폭을 충분히 사용하도록 설계해라.
흔한 AI 템플릿처럼 보이지 않도록 브랜드를 기억하게 만드는 시각적 특징 3개를 제안해라.
각 디자인 선택이 고객에게 어떤 인상을 주는지도 설명해라.
마지막에는 프론트엔드 개발자가 그대로 구현할 수 있는 UI Design Spec 형태로 정리해라.
4단계. 홈페이지 전체 코드 구현 프롬프트
이제 실제 홈페이지를 개발합니다. 앞 단계 결과를 모두 입력하면 완성도가 높아집니다.
너는 시니어 프론트엔드 엔지니어다.
앞서 작성한 홈페이지 전략, 정보 구조, 세일즈 카피, 디자인 시스템을 모두 기준으로 실제 실행 가능한 홈페이지를 개발해라.
[기술 선택]
HTML/CSS/JS 또는 React/Next.js 중 프로젝트에 가장 적합한 기술을 선택해라.
선택한 이유도 간단하게 설명해라.
다음 조건을 모두 충족해라.
1. 완전한 반응형 레이아웃
2. 모바일 최적화
3. 모바일 메뉴
4. Hero
5. 문제 정의
6. 해결 방법
7. 서비스 소개
8. 진행 과정
9. 사례
10. 가격표
11. 차별점
12. FAQ
13. 문의 폼
14. CTA 버튼
15. 기본 인터랙션
16. SEO 메타 태그
17. Open Graph
18. favicon 위치
19. 접근성 기본 구조
20. 이미지 최적화 구조
코드는 예제 수준으로 작성하지 마라.
복사해서 실행할 수 있는 전체 코드로 작성해라.
파일 구조를 먼저 보여줘라.
각 파일의 전체 코드를 빠짐없이 작성해라.
작동하지 않는 버튼을 만들지 마라.
실제 연결 정보가 없는 기능은 [교체 필요]라고 명확하게 표시해라.
존재하지 않는 이미지 URL이나 가짜 API 주소를 만들지 마라.
문의 폼은 실제 연결 방식에 맞춰 구현할 수 있도록 구조를 작성해라.
코드 작성 후 실행 오류가 발생할 가능성이 있는 부분을 스스로 검토하고 수정해라.
5단계. 홈페이지 기술 QA 프롬프트
개발이 끝나면 실제 공개를 가정하고 코드를 다시 검사합니다.
너는 시니어 QA 엔지니어이자 웹 퍼포먼스 전문가다.
방금 작성한 홈페이지 전체 코드를 실제 고객에게 공개한다고 가정하고 전수 검수해라.
다음 항목을 모두 검사해라.
1. PC 레이아웃
2. 모바일 레이아웃
3. 태블릿 레이아웃
4. 화면 폭별 깨짐
5. 가로 스크롤 발생 여부
6. 메뉴 동작
7. CTA 동작
8. 링크 오류
9. 문의 폼
10. 입력 오류
11. 접근성
12. 키보드 탐색
13. 이미지 alt
14. 이미지 크기
15. 페이지 로딩 속도
16. SEO
17. 메타 태그
18. heading 구조
19. 코드 중복
20. JavaScript 오류 가능성
21. 브라우저 호환성
22. 보안상 주의할 부분
23. Core Web Vitals 관련 문제
24. 모바일 사용성
발견한 문제를 다음 등급으로 분류해라.
치명적
중요
개선 권장
각 문제마다 다음 내용을 작성해라.
문제:
원인:
영향:
수정 방법:
설명만 하지 마라.
발견한 문제는 실제 코드에 직접 수정해라.
수정 후 전체 코드를 다시 제공해라.
수정하지 않은 문제가 있다면 이유를 명확하게 설명해라.
확인되지 않은 성능 수치는 임의로 작성하지 마라.
6단계. 전환율 중심 최종 리디자인 프롬프트
QA가 끝나면 이번에는 잠재 고객의 시선으로 페이지를 다시 봅니다.
너는 CRO 컨설턴트이자 웹 아트디렉터다.
완성된 홈페이지를 처음 방문한 잠재 고객의 입장에서 다시 검토해라.
다음 항목을 집중적으로 분석해라.
1. 첫 화면 메시지
2. 짧은 시간 안에 서비스 이해 가능 여부
3. 시선 흐름
4. 정보 밀도
5. 섹션 길이
6. CTA 위치
7. CTA 반복 횟수
8. 신뢰 요소
9. 가격표
10. 사례 배치
11. FAQ
12. 모바일 사용성
13. 구매 불안
14. 문의 과정
15. 이탈 가능성이 높은 지점
각 문제마다 다음 내용을 작성해라.
왜 전환을 방해하는가?
어떻게 수정할 것인가?
수정하면 어떤 효과를 기대할 수 있는가?
단, 전환율 상승을 숫자로 보장하지 마라.
불필요한 요소는 제거해라.
부족한 정보는 추가해라.
메시지가 약한 부분은 다시 작성해라.
시각적으로 복잡한 부분은 단순하게 만들어라.
모바일에서 읽기 어려운 요소는 수정해라.
최종적으로 분석만 하지 말고 실제 홈페이지 코드에 모든 변경사항을 반영해라.
수정된 전체 배포용 코드를 다시 제공해라.
실제 확인되지 않은 고객 후기, 매출, 전환율, 성공률은 추가하지 마라.
7단계. 실제 도메인 배포와 방문자 추적 프롬프트
마지막 단계에서는 실제 인터넷에 홈페이지를 공개하고 방문자 행동을 측정할 환경을 만듭니다.
너는 웹 배포 엔지니어이자 기술 PM이다.
완성된 홈페이지 프로젝트를 실제 인터넷에 공개할 수 있도록 처음부터 끝까지 배포 절차를 설계해라.
먼저 프로젝트 구조를 분석하고 Vercel, Netlify, GitHub Pages 중 가장 적합한 방식을 선택해라.
선택 이유를 설명해라.
다음 순서로 초보자도 따라 할 수 있게 설명해라.
1. 프로젝트 폴더 확인
2. GitHub 저장소 생성
3. GitHub에 코드 업로드
4. 배포 서비스 연결
5. 빌드 설정
6. 환경변수 설정
7. 첫 배포
8. 배포 URL 확인
9. 커스텀 도메인 연결
10. DNS 설정
11. HTTPS 확인
12. 문의 폼 연결
13. Google Analytics 4 연결
14. Search Console 연결
15. sitemap.xml 등록
16. robots.txt 확인
17. 기본 SEO 설정
18. CTA 클릭 이벤트 설정
19. 문의 완료 이벤트 설정
20. 전환 데이터 확인 방법
각 단계마다 다음 내용을 제공해라.
- 어디를 클릭하는가
- 무엇을 입력하는가
- 어떤 값을 넣는가
- 저장 후 무엇을 확인하는가
- 오류가 발생하면 어떻게 해결하는가
초보자가 그대로 따라 할 수 있도록 실제 화면에서 사용하는 메뉴명을 기준으로 설명해라.
확인되지 않은 메뉴명이나 기능은 추측하지 마라.
현재 공식 문서와 실제 서비스 정책이 필요한 부분은 최신 공식 자료를 확인한 뒤 작성해라.
도메인과 API 키 같은 보안 정보는 코드에 직접 넣지 마라.
마지막에는 다음 항목을 최종 체크리스트로 제공해라.
[ ] 홈페이지 접속
[ ] 모바일 정상 표시
[ ] HTTPS
[ ] 커스텀 도메인
[ ] 문의 폼
[ ] Google Analytics
[ ] Search Console
[ ] sitemap
[ ] robots.txt
[ ] CTA 이벤트
[ ] 문의 전환 이벤트
7단계 전체 작업 순서
처음 홈페이지를 만든다면 아래 순서대로 진행하는 편이 좋습니다.
1단계 → 고객 분석과 전환 구조
2단계 → 실제 홈페이지 카피
3단계 → 디자인 시스템
4단계 → 전체 코드 구현
5단계 → 기술 QA와 오류 수정
6단계 → CRO와 최종 리디자인
7단계 → 실제 배포와 GA4, Search Console 연결
주의: 실제 고객 후기, 매출, 방문자 수, 전환율, 인증, 수상 경력 등을 확인하지 않고 추가하면 안 됩니다. 자료가 없다면 [자료 입력] 또는 [확인 필요]로 표시해야 합니다.
핵심은 4단계에서 끝내지 않는 점입니다. 홈페이지를 만든 뒤 QA하고 고객 관점에서 다시 수정해야 합니다. 이후 실제 방문자 데이터를 확인하면서 계속 개선하는 방식이 좋습니다.
포스팅으로 매장이나 제품 홍보 원하시는 분은 ejm11@naver.com로 문의 주세요, 1만원으로 정보성 광고 포스팅 해드립니다.
