웹사이트처음 해봐요샘플·작성 예시

완성 프롬프트로 동네 카페 소개 사이트 만들기

메뉴와 영업시간을 보여주는 작은 가게 사이트를 만들어 봐요. 완성 프롬프트를 복사하고, 내 가게 정보로 바꾸고, 결과를 확인하는 순서를 안내합니다.

역시최근 수정 재현 확인 2026. 10. 14.
완성 프롬프트 보기 ↓
내 저장 목록
완성 프롬프트로 동네 카페 소개 사이트 만들기 완성 결과
결과 이미지 · 누르면 크게 볼 수 있어요

완성 결과

완성 프롬프트의 조건에 맞춰 만든 가상의 카페 소개 사이트입니다. 대표 메뉴·가격·영업시간을 확인하고 메뉴와 방문 안내 버튼으로 이동할 수 있어요. 예약·주문·결제는 이 예시에 포함하지 않았습니다.

결과 직접 보기

이 글은 작성 방법을 보여주는 예시예요. 실제 납품이나 제작 성과를 뜻하지 않아요.

완성 프롬프트

질문을 구체적인 작업 요청으로 정리한 내용이에요. 전체를 복사하고 내 정보에 맞게 바꿔 쓰세요.

너는 작은 가게의 소개 사이트를 만드는 웹 개발자이자 디자이너다.
아래 가게 정보와 요구사항으로 모바일에서도 편하게 볼 수 있는 카페 소개 사이트를 만들어라.
설명만 하지 말고, 실제로 열어 확인할 수 있는 화면과 코드를 완성해라.

## 1. 가게 정보

- 가게 이름: 모퉁이 카페
- 소개: 동네에서 잠깐 쉬어 갈 수 있는 작은 카페
- 소개 문구: 커피 한 잔의 여유, 우리 동네 모퉁이
- 대표 메뉴: 아메리카노 4,500원 / 카페라테 5,000원 / 바닐라라테 5,500원 / 크루아상 3,800원
- 영업시간: 오전 11시부터 오후 8시까지, 화요일 휴무
- 주소: 아직 입력하지 않음
- 연락처와 지도 링크: 아직 입력하지 않음
- 지금 만드는 것은 학습용 예시다. 가게 이름, 메뉴, 가격과 영업시간은 가상의 정보임을 표시해라.

다른 가게에 사용할 때에는 위 항목을 실제 정보로 바꿔라.
제공하지 않은 주소·연락처·후기·수상 경력은 만들어 넣지 마라.

## 2. 방문자가 할 수 있어야 하는 일

1. 첫 화면에서 어떤 가게인지 바로 이해한다.
2. 대표 메뉴와 가격을 확인한다.
3. 가게 소개와 영업시간을 읽는다.
4. 방문 안내를 확인한다.

회원가입이나 로그인 없이 소개 사이트를 볼 수 있게 해라.
예약·주문·결제 기능은 이번 범위에 포함하지 마라.

## 3. 화면 구성

- 상단: 가게 이름과 '메뉴', '가게 소개', '방문 안내' 메뉴
- 첫 화면: 짧은 소개 문구, 커피 사진, '메뉴 보기'와 '방문 안내' 버튼
- 대표 메뉴: 메뉴 이름, 간단한 설명, 가격을 읽기 쉽게 배치
- 가게 소개: 짧은 소개와 분위기를 설명하는 문장
- 방문 안내: 영업시간, 휴무일과 주소·연락처의 준비 상태
- 하단: 학습용 예시 표시와 사진 출처

'메뉴 보기'와 '방문 안내' 버튼은 해당 영역으로 이동하게 해라.
주소와 연락처를 받지 않았으므로 실제 가게로 연결되는 지도·전화 버튼은 만들지 마라.

## 4. 디자인과 글쓰기

- 아이보리 배경과 짙은 갈색 글자로 차분한 분위기를 만들어라.
- 사진과 여백을 활용하고, 긴 설명과 장식은 줄여라.
- 휴대폰에서는 사진과 글이 자연스럽게 한 줄로 이어지게 해라.
- 메뉴 이름과 가격은 작은 화면에서도 쉽게 읽을 수 있어야 한다.
- 누구나 이해할 수 있는 짧은 한국어를 사용해라.
- 의미 없는 영어 문구, 과장된 후기와 '최고의 카페' 같은 근거 없는 표현은 쓰지 마라.
- 사진은 무료 사용 조건을 확인한 자료를 사용하고 사진가와 원문을 표시해라.

## 5. 구현 조건

- 기존 프로젝트가 있다면 구조를 먼저 확인하고 기존 기능을 재사용해라.
- 이 예시에서는 NexiBase의 Next.js 기반 화면으로 구현한다.
- 소개 글과 메뉴 정보는 SSR HTML에 포함해라.
- 기존 사이트의 회원·관리자·결제 설정은 변경하지 마라.
- 메뉴와 가게 정보를 쉽게 바꿀 수 있도록 코드에서 모아 관리해라.
- 이미지에는 대체 설명을 넣고, 버튼과 링크는 키보드로 사용할 수 있게 해라.
- 작은 화면에서 내용이 가로로 넘치지 않게 해라.
- 실제 가게 정보가 들어오기 전에는 학습용 예시 표시를 유지해라.

## 6. 완성 후 확인과 전달

- 데스크톱과 폭 390px의 모바일 화면을 확인해라.
- 메뉴와 방문 안내 버튼이 올바른 영역으로 이동하는지 확인해라.
- 메뉴 이름, 가격과 영업시간이 SSR HTML에 포함되는지 확인해라.
- 제공하지 않은 주소·전화·후기가 표시되지 않는지 확인해라.
- 실제로 확인한 결과와 아직 확인하지 못한 내용을 구분해라.
- 완성된 화면, 실행 방법, 가게 정보를 바꾸는 위치와 공개 전 확인 목록을 알려줘라.
- 실제 서버에 공개하기 전에는 실제 가게 정보, 사진 권한, 도메인과 HTTPS 상태를 확인해라.

이 조건에 맞춰 먼저 사용할 수 있는 소개 사이트를 만들고, 확인 결과를 바탕으로 필요한 부분만 수정해라.

사용 도구와 제작 조건

AI 코딩 도구(Codex), NexiBase, Next.js

이 예시는 제작 시간과 AI 이용 비용을 따로 측정하지 않았어요. 실제 사용 도구, 서버와 도메인에 따라 비용이 달라집니다.

제작 흐름 한눈에 보기

단계를 누르면 이동해요
  1. 01완성 프롬프트를 복사하기
  2. 02내 가게 정보로 바꾸기
  3. 03프롬프트의 화면 구성을 구현하기
  4. 04휴대폰과 버튼 동작 확인하기
  5. 05실제 정보로 확인한 뒤 공개하기

시작 전에 준비할 것

가게 이름, 소개 문구, 메뉴와 가격, 영업시간을 준비해 주세요. 실제로 공개할 때에는 주소·연락처와 사용 권한이 있는 사진도 필요해요. 코드 실행은 개발 환경이나 도움을 줄 개발자가 필요합니다.

이렇게 만들었어요

5단계

STEP 01

완성 프롬프트를 복사하기

위 완성 프롬프트가 이 사례의 출발점입니다. 짧은 아이디어를 역할, 가게 정보, 화면 구성, 디자인, 구현 조건, 확인 기준으로 구체화했어요. 프롬프트 전체를 복사해 AI 코딩 도구에 전달합니다.

중간 결과와 확인 방법

메뉴·영업시간·방문 안내가 있는 소개 사이트를 요청할 수 있어요. 제공할 결과와 제외할 기능이 명확해집니다.

완성 프롬프트로 돌아가기 ↑
실패·수정한 내용

역할·가게 정보·화면 구성·확인 기준이 들어 있어 요청 범위가 분명합니다. 필요한 정보만 바꾸면 다른 가게에도 적용할 수 있어요.

STEP 02

내 가게 정보로 바꾸기

완성 프롬프트의 1번 가게 정보에서 이름, 소개, 메뉴와 가격, 영업시간을 바꿔 주세요. 실제 주소나 연락처를 아직 준비하지 못했다면 미입력 상태를 유지하세요.

중간 결과와 확인 방법

복잡한 지시문을 다시 쓸 필요 없이 내 가게 정보를 반영할 수 있어요.

이 단계에서 쓸 프롬프트펼쳐 보기
위 완성 프롬프트의 가게 정보만 다음 내용으로 바꿔 주세요.
가게 이름: [내 가게 이름]
소개: [한 줄 소개]
메뉴와 가격: [실제 메뉴]
영업시간과 휴무: [실제 정보]
주소·연락처: [확인한 정보 또는 아직 없음]
제공하지 않은 정보는 추측하지 말고, 예시와 실제 정보를 구분해 주세요.
실패·수정한 내용

실제로 받은 가게 정보가 없어 이 예시에서는 가상의 이름과 메뉴를 사용했습니다.

STEP 03

프롬프트의 화면 구성을 구현하기

이 예시에서는 완성 프롬프트에 맞춰 첫 화면, 대표 메뉴, 가게 소개, 방문 안내를 구현했습니다. 가게 정보는 코드의 shop 항목에 모았고, 본문은 SSR HTML에 포함했습니다.

중간 결과와 확인 방법

결과 링크에서 소개 사이트를 직접 열어볼 수 있어요. 메뉴 이름과 가격, 소개와 영업시간이 표시됩니다.

이 단계에서 쓸 프롬프트펼쳐 보기
위 완성 프롬프트에 맞춰 소개 사이트를 구현해 주세요. 먼저 기존 프로젝트를 확인하고 가게 정보를 한곳에서 바꿀 수 있게 해 주세요. 메뉴 보기와 방문 안내 버튼을 해당 영역에 연결하고, 가상의 정보라는 표시를 유지해 주세요.
중간 결과 열기
실패·수정한 내용

메뉴와 가게 정보는 코드의 shop 항목에 모아 두었습니다. 내용을 바꾸고 같은 확인 순서로 다시 점검할 수 있어요.

STEP 04

휴대폰과 버튼 동작 확인하기

데스크톱과 폭 390px의 모바일 화면에서 글과 사진, 메뉴 가격을 확인합니다. 메뉴와 방문 안내 링크가 해당 영역으로 이동하는지 확인하고, 임의의 주소나 전화번호가 없는지도 살펴봅니다.

휴대폰과 버튼 동작 확인하기 중간 결과
휴대폰과 버튼 동작 확인하기 · 단계별 결과 이미지

중간 결과와 확인 방법

이 예시의 데스크톱·모바일 화면과 메뉴·방문 안내 이동을 확인했습니다. 실제 주소와 연락처는 미입력 상태이며 주문·결제 버튼을 만들지 않았습니다.

이 단계에서 쓸 프롬프트펼쳐 보기
완성 프롬프트의 확인 기준으로 결과를 점검해 주세요. 폭 390px에서 가로 넘침이 없는지, 메뉴·방문 안내 버튼이 동작하는지, SSR HTML에 메뉴 정보가 있는지 확인해 주세요. 확인하지 못한 것은 통과했다고 적지 말고 필요한 수정만 설명해 주세요.
실패·수정한 내용

실제 수정 요청이 생기면 어디가 잘못됐는지 구체적으로 적어 주세요. 예: “메뉴 가격이 휴대폰에서 잘려 보여요. 이름과 가격이 겹치지 않게 수정해 주세요.” 이 문장은 수정 방법을 보여주는 예시입니다.

STEP 05

실제 정보로 확인한 뒤 공개하기

자신의 가게에 적용할 때에는 이름·메뉴·가격·영업시간을 다시 확인하세요. 실제 사진과 주소·연락처를 준비한 후 예시 표시를 정리하고, 도메인과 HTTPS 연결을 확인합니다.

중간 결과와 확인 방법

학습용 화면과 실제 영업용 사이트의 차이를 확인하고 공개에 필요한 정보를 준비할 수 있어요.

이 단계에서 쓸 프롬프트펼쳐 보기
이 소개 사이트를 실제 가게에 공개하기 전에 확인할 목록을 정리해 주세요. 실제 가게 정보와 사진 사용 권한, 모바일 화면, 버튼, 도메인과 HTTPS를 확인하고, 아직 제공되지 않은 정보와 설정을 분명하게 알려 주세요.
실패·수정한 내용

현재 공개된 것은 학습용 예시 사이트입니다. 실제 가게의 운영, 예약이나 결제를 대신 제공하지 않습니다.

자료와 공유 조건

가게 이름과 메뉴는 학습용 가상 정보입니다. 프롬프트는 자신의 가게에 맞게 바꿔 활용할 수 있어요. 커피 사진은 Evgeniy Alekseyev의 Pexels 사진이며, 실제 가게나 직접 만든 이미지가 아닙니다.

모델과 도구가 바뀌면 같은 프롬프트로도 결과가 달라질 수 있어요. 위 제작 조건과 확인 날짜를 함께 살펴보세요.