← 블로그튜토리얼

AI에게 "사주 앱 만들어줘"라고 말해보세요 — 바이브코딩 실전 가이드

2026. 2. 18.

바이브코딩이란?

바이브코딩(Vibe Coding)은 AI에게 자연어로 원하는 것을 설명하면 AI 가 코드를 작성해 주는 개발 방식입니다. Cursor·Claude Code·Windsurf·Codex·Antigravity 같은 AI 코딩 도구로 누구나 30분 안에 사주 서비스를 만드실 수 있습니다.

⭐ 가장 빠른 길 — 맞춤 프롬프트 빌더

어떤 프롬프트로 시작해야 할지 막연하시다면, SAZU 가 직접 만든 맞춤 프롬프트 빌더부터 사용해 보세요.

https://www.sazu.app/manse-api/docs (Quick Start 탭)

몇 가지 질문에 답하시면 (신규 프로젝트인지·기존 앱에 추가인지·노코드 자동화인지·간단 테스트인지), 그대로 AI 도구에 붙여 넣을 수 있는 맞춤 프롬프트가 자동 생성됩니다. 본 글의 나머지 단계를 빠르게 압축한 결과를 얻으실 수 있습니다.

이 빌더가 사용 환경(Next.js·Vite·HTML·React Native·노코드 도구)·AI 도구·결과 표시 위치까지 모두 고려해서 프롬프트를 만들어 주므로, 막연한 시작을 피하실 수 있습니다.

준비물

  • AI 코딩 도구 — Cursor·Claude Code·Windsurf·ChatGPT·기타 (무료 사용 가능)
  • SAZU API 키 — 대시보드에서 무료 발급 (회원가입만 하시면 즉시 사용 가능)
  • Vercel 계정 — 무료 배포 + 환경변수에 키 안전 보관용

Step 1: 공식 SDK 설치 — @sazuapp/client

raw fetch 대신 공식 TypeScript SDK 를 사용하세요. 자동 재시도·타입 안전·서버 사이드 가드 모두 포함되어 있습니다.

npm install @sazuapp/client

Step 2: AI 에게 프롬프트 입력

위에서 안내드린 맞춤 프롬프트 빌더 사용을 추천드립니다. 직접 작성하시는 경우 다음 예시 그대로 붙여 넣으셔도 좋습니다:

공식 SDK @sazuapp/client 를 사용해 Next.js 사주 분석 웹사이트를 만들어줘.

- 생년월일·시간·성별·음양력 토글 입력 폼
- npm install @sazuapp/client 후 SazuClient 로 호출
- API 키는 환경변수 SAZU_API_KEY 에 있어 (코드에 직접 작성 금지)
- 결과 화면에 사주 원국, 오행 분포 차트, 분석 요약 표시
- 다크 테마, 한국어, 모바일 친화

API 문서: https://www.sazu.app/manse-api/docs
보안 가이드 (서버 사이드 호출) 도 함께 참고해줘.

Step 3: AI 가 코드를 자동 생성

AI 가 자동으로 다음을 만들어 줍니다:

  • 입력 폼 컴포넌트 (생년월일·시간·성별·음력 토글)
  • SDK 초기화 + 서버 라우트 (app/api/sazu/route.ts)
  • 결과 표시 컴포넌트 (사주 원국 카드, 오행 차트, 요약 박스)
  • 에러 처리 (SazuApiErrorisAuthError·isRateLimited 분기)
  • 반응형 레이아웃

Step 4: Vercel 에 배포

GitHub 에 push 하고 Vercel 에 연결하면 자동 배포됩니다. Project Settings → Environment VariablesSAZU_API_KEY 를 추가하면 끝입니다.

총 소요 시간: 약 30분 (코딩 경험 없이도 가능합니다.)

Free 로 시작 → 고급 기능이 필요하시면 Pro

SAZU API 는 Free 5개 모듈 + Pro 9개 모듈 = 총 14개 명리 모듈을 제공합니다.

  • Free (월 500회·분당 10회): 사주 원국·대운·오행·요약·신강 — 개인 챗봇·MVP 검증에 충분
  • Pro (월 10,000회·분당 300회·₩29,900/월): 격국·용신·신살·허자·합형충파해·원국 상호작용·세운·월률분야·종합 평가까지 — 명리학 정통 진단

AI 에이전트 MCP — Pro 사용자 한정

Pro 사용자라면 직접 코드를 짤 필요 없이 AI 에이전트가 SAZU API 를 자연어로 호출하게 하실 수 있습니다.

claude mcp add sazu --env SAZU_API_KEY=$SAZU_API_KEY -- npx -y @sazuapp/mcp-server

Claude Code·Cursor·Windsurf·Codex·Antigravity 모두 지원합니다.

보안 안내 — 키는 서버에서만

API 키를 HTML·브라우저 JavaScript·공개 git 저장소에 절대 노출하지 마세요. 노출 시 누구나 고객님의 월 한도를 소진할 수 있습니다.

항상 Vercel Functions·Next.js API route·Server Action 의 환경변수에만 보관하시고, 브라우저는 본인 백엔드를 호출 → 백엔드가 SAZU API 를 호출하는 구조로 만드세요.

다시 강조 — 막연하시면 맞춤 프롬프트 빌더

본 글이 길게 느껴지신다면, 처음으로 돌아가 맞춤 프롬프트 빌더 한 번 사용해 보시기 바랍니다.

https://www.sazu.app/manse-api/docs (Quick Start 탭)

질문 몇 개 답하시면 본 글의 모든 단계를 압축한 맞춤 프롬프트가 즉시 생성됩니다. 그 프롬프트를 AI 도구에 붙여 넣기만 하시면 됩니다.

참고 자료

SAZU API를 시작해보세요

신용카드 없이, 무료로 시작할 수 있습니다.