VIBE CODING STUDY / 보너스 1

실전 프롬프트 라이브러리

늑구맵을 만들며 실제로 쓴 요청과, 단계별 응용 템플릿

6단계 커리큘럼 본문 곳곳에 실제로 썼던 프롬프트를 인용했습니다. 이 페이지는 그 프롬프트를 단계별로 한 곳에 모으고, 비슷한 상황에 바로 응용할 수 있게 템플릿 형태로 정리한 것입니다. 그대로 복사해서 써도 되고, 대괄호([ ]) 부분만 지금 만들고 있는 서비스에 맞게 바꿔도 됩니다.

프롬프트를 구체적으로 쓰는 원칙

2단계에서 다룬 원칙이 이 라이브러리 전체를 관통합니다. 결과물의 품질은 얼마나 구체적으로 요청하는가에 달려 있습니다.

뭉뚱그린 요청

"지도 넣어줘"

구체적인 요청

"카카오맵 API로 서울 지역 매장 20곳을 마커로 표시하고, 마커를 누르면 이름/주소/영업시간이 뜨는 팝업을 보여줘"

화면에 뭐가 보여야 하는지, 어떤 데이터가 필요한지를 풀어서 쓰는 것만으로 결과가 크게 달라집니다. 아래 프롬프트들도 전부 이 원칙을 따랐습니다.

단계별 프롬프트 모음

1단계

니즈 정리하기

이 단계는 프롬프트보다 관찰이 핵심입니다. 다만 흩어진 관찰 내용을 정리할 때는 Claude Code에게 맡겨도 됩니다.

> 지금까지 캡처해둔 커뮤니티 반응/댓글 목록을 줄 테니, 반복해서 나오는 질문이나 불편을 3개로 요약해줘. 각 항목마다 몇 번 반복됐는지도 세어줘.

니즈 후보를 감으로만 고르지 않고, 반복 빈도를 숫자로 확인하는 용도입니다.

> 이 이슈가 며칠 안에 끝나는 사건형인지, 매년 돌아오는 계절형인지 판단하고 근거를 알려줘. [이슈 설명 붙여넣기]

1단계 체크리스트의 '사건형 vs 계절형 구분'을 텍스트 판단으로 도와달라고 요청하는 형태입니다.

2단계

환경 셋업과 초기 화면

이 단계부터는 본문에서 실제로 인용한 프롬프트 예시가 그대로 등장합니다.

> Next.js 프로젝트로 초기화해줘.

2단계 본문에서 실제로 쓴다고 밝힌 요청입니다. 뒤에 조건을 더 붙이지 않아도 기본 골격은 이 한 줄로 충분합니다.

> 카카오맵 API로 서울 지역 매장 20곳을 마커로 표시하고, 마커를 누르면 이름/주소/영업시간이 뜨는 팝업을 보여줘.

2단계 본문의 '실전 프롬프트 팁'에 나온 예시입니다. "지도 넣어줘"처럼 뭉뚱그리지 않고, 화면에 뭐가 보여야 하는지/어떤 데이터가 필요한지를 구체적으로 풀었습니다.

3단계

스코프 좁히기

기능을 빼는 것도 프롬프트로 요청할 수 있습니다. '빼줘'라고만 하지 말고 기준을 같이 주는 게 핵심입니다.

> 지금 이 페이지에서 [핵심 기능] 없이도 동작하는 부분이 있으면 목록으로 뽑아줘. 지우라는 게 아니라, 오늘 배포 버전에서 숨길 수 있는지 판단하려는 거야.

3단계에서 강조한 '빼기로 한 기능은 목록으로 남겨두고, 나중에 다시 넣는다'는 원칙을 그대로 요청 문구에 반영한 예시입니다.

> 가게 목록/문항처럼 반복되는 데이터가 컴포넌트 코드 안에 직접 들어가 있으면, 별도 JSON 파일로 분리해줘. 화면 로직은 그대로 두고 데이터만 옮겨줘.

2단계 '흔한 실수'와 3단계 체크리스트에서 공통으로 짚은 '데이터-화면 분리' 원칙을 실행 프롬프트로 옮긴 것입니다.

4단계

데이터와 API 연동

API를 무엇으로, 얼마나 붙일지는 4단계에서 다룬 'ROI부터 계산' 원칙을 프롬프트에도 반영합니다.

> 카카오맵 API로 지도를 띄우고, [데이터 파일 경로]에 있는 위치 정보를 마커 N개로 표시해줘. 마커 클릭 시 [보여줄 정보]를 팝업으로 띄워줘.

4단계 본문의 지도 API 연동 예시를 범용 템플릿으로 바꾼 것입니다. 대괄호 부분만 상황에 맞게 채우면 됩니다.

> 구글 스프레드시트와 연동해서, 사용자가 누르면 항목별 득표수가 실시간으로 올라가는 투표 위젯을 만들어줘. 별도 서버/DB 없이 Google Apps Script로 처리해줘.

늑구맵 굿즈 투표 기능이 실제로 이 방식(Google Apps Script 연동)으로 구현됐습니다. 정식 백엔드 없이 가벼운 인터랙션을 먼저 검증할 때 쓰는 템플릿입니다.

배포/SEO

구조화 데이터와 sitemap

애드센스 재신청 과정에서 실제로 정비했던 항목들입니다. 이 사이트 자체도 지금 이 구조를 쓰고 있습니다.

> 이 페이지에 Article 타입 JSON-LD 구조화 데이터를 추가해줘. headline/description/url/datePublished/dateModified를 채우고, publisher는 기존 컴포넌트를 재사용해줘.

제작기에서 언급한 'JSON-LD 구조화 데이터 정비' 작업을 실행 단위로 옮긴 프롬프트입니다.

> sitemap 설정 파일에 새로 만든 페이지 경로를 추가해줘. lastMod은 오늘 날짜로, priority와 changeFrequency는 비슷한 성격의 기존 페이지를 참고해서 맞춰줘.

새 페이지를 만들 때마다 반복되는 작업이라, 매번 같은 문구로 요청하면 빠뜨리는 일이 줄어듭니다.

5단계

홍보 자료 준비

이 단계는 '만들어줘'보다 '여러 버전을 뽑아달라'고 요청하는 게 효율적입니다.

> 이 서비스를 처음 보는 사람에게 스레드에 공유한다고 가정하고, 3문장 이내 소개 문구를 서로 다른 톤으로 3개 버전 써줘. 과장 없이, 이 화면에서 실제로 할 수 있는 것만 담아줘.

'과장 없이'라는 제약을 꼭 넣어야, 실제로 구현되지 않은 기능을 소개 문구가 앞서서 약속하는 걸 막을 수 있습니다.

> 기자가 이 서비스에 대해 물어볼 만한 질문 5개와, 각 질문에 사실만 담아 짧게 답하는 초안을 같이 만들어줘.

5단계에서 강조한 '취재 연락이 왔을 때 답할 근거를 미리 정리해두기'를 준비하는 데 쓰는 프롬프트입니다.

6단계

운영과 정정

정정 이력처럼 신뢰와 직결되는 작업은 형식을 통일해서 요청하는 게 안전합니다.

> 정정 이력 페이지에 항목을 하나 추가해줘. 날짜는 오늘, 수정 전/수정 후 내용을 명확히 구분하고, 기존 항목들과 같은 형식을 유지해줘.

이 사이트의 정정 이력 페이지도 이 방식으로 운영됩니다. 형식을 매번 새로 정의하지 않고 기존 패턴을 따르게 하는 게 핵심입니다.

> [데이터 파일]에 새 항목을 하나 추가해줘. 기존 항목들의 필드 구조를 그대로 따르고, 빠진 필드가 있으면 알려줘.

수동 업데이트 구조(6단계 참고)에서 반복되는 작업입니다. '기존 구조를 따르라'는 지시가 없으면 필드명이 매번 조금씩 달라질 수 있습니다.

늑구맵의 생각

프롬프트를 외우는 것보다 중요한 건 '내가 지금 원하는 결과를 문장으로 정확히 그릴 수 있는가' 입니다. 여기 있는 템플릿도 결국 각 단계에서 필요한 정보(화면 구성/데이터 위치/제약 조건)를 빠짐없이 담으려고 한 결과일 뿐입니다. 자기만의 서비스를 만들다가 막히는 지점이 생기면, 그 부분을 이 페이지 형식대로 '대괄호 채우기' 해보는 것부터 시작해보세요.

업데이트 로그

  • 2026.08.23 바이브 코딩 스터디 보너스 콘텐츠 1번(실전 프롬프트 라이브러리)으로 최초 게시했습니다.

더 자세한 확인 기준은 편집 원칙, 오류 제보는 문의 및 제보 페이지를 참고해 주세요.