한 줄 프롬프트로
홈페이지 첫 화면을 만드는 법

한 문장 결론: 좋은 홈페이지 프롬프트는 디자인 취향만 나열하는 문장이 아니라, 대상 독자와 목표 행동과 실제 버튼 경로를 순서대로 적는 작업 지시서에 가깝습니다.

누구에게 맞는가

처음으로 홈페이지 시안을 만들어 보거나, Claude·ChatGPT·웹빌더에 넣을 첫 프롬프트를 정리하고 싶은 사람에게 맞습니다. 코딩 경험이 없어도 읽을 수 있도록 준비물, 입력 예시, 검수 순서를 함께 설명합니다.

준비물

1. 대상 독자: 누가 이 페이지를 보는지 한 문장으로 적기
2. 목표 행동: 문의, 구매, 뉴스레터 구독, 비교 글 읽기 중 하나 정하기
3. 필수 섹션: 헤더, 첫 화면, 신뢰 정보, CTA, 푸터처럼 꼭 들어갈 화면
4. 실제 경로: 버튼이 이동할 실제 페이지나 외부 링크
5. 제약 조건: 모바일 글자 크기, 금지할 표현, 꼭 지킬 브랜드 톤

사용할 프롬프트

어느 사이트에서 어떻게 쓰나

1. ChatGPT: 대화창에 붙여 넣고 “HTML 구조로 먼저 제안해줘” 또는 “카피 구조만 먼저 써줘”처럼 결과 형식을 추가합니다.
2. Claude: 같은 프롬프트를 넣고 “모바일 가독성과 CTA 우선순위를 더 엄격히 지켜줘”처럼 피드백을 덧붙입니다.
3. 웹빌더: 프롬프트 입력창에 넣을 때는 실제 경로와 필수 섹션을 짧게 줄여 넣고, 생성 후 사람이 다시 링크와 문구를 확인합니다.

실제 입력 예시

따라 하는 순서

1. 독자와 목표를 먼저 적기: “누가 보고 무엇을 눌러야 하는가”를 먼저 정합니다.
2. 실제 경로 넣기: CTA가 이동할 주소를 프롬프트에 포함합니다.
3. 도구에 붙여 넣기: ChatGPT, Claude, 웹빌더 중 하나에 입력합니다.
4. 2차 수정 요청: 제목 길이, 카드 수, 모바일 간격, 버튼 우선순위를 구체적으로 다시 지시합니다.
5. 공개 전 검수: 링크, 글자 크기, 사실성, 이미지 권리, 제휴 고지를 확인합니다.

결과를 확인하는 법

1. 390px 화면: 제목과 버튼이 잘리지 않고 읽히는지 봅니다.
2. 모든 CTA: 실제 경로가 연결돼 있는지 클릭합니다.
3. 본문 대비: 회색 글자가 너무 연하지 않은지 확인합니다.
4. 사실성: 가격, 후기, 고객 수, 파트너 로고가 근거 없이 생기지 않았는지 봅니다.
5. 다음 행동: 방문자가 무엇을 눌러야 하는지 첫 화면에서 바로 보이는지 확인합니다.

자주 생기는 오류

• “멋있게”처럼 판단할 수 없는 표현만 쓰기
• 모바일 화면과 실제 버튼 경로를 프롬프트에 넣지 않기
• AI가 만든 숫자·후기·고객 로고를 그대로 믿기
• 외부 이미지를 넣고 출처와 사용 권한을 확인하지 않기

비용·제한·주의사항

도구마다 무료·유료 플랜에서 가능한 기능이 다릅니다. 이미지 생성, 파일 업로드, 긴 컨텍스트, 고급 모델 접근이 중요한 작업이라면 결제 전에 각 서비스의 공식 가격 페이지와 도움말을 확인해 두는 편이 안전합니다. 결과물이 그럴듯해 보여도 실제 링크, 모바일 레이아웃, 키보드 접근성, 이미지 라이선스는 사람이 확인해야 합니다.

출처와 확인일

관련 MODEL ATLAS 글

다음 행동

이 프롬프트로 첫 화면 시안을 만든 뒤에는 바로 상세 사용 예시를 열어 프롬프트를 더 구체화하세요. 결제 고민이 있으면 ChatGPT 가격 가이드나 Claude 가격 가이드를 읽고 어떤 플랜으로 작업할지 먼저 정하는 편이 낭비를 줄입니다.