사주결 + 자미두수 + AI 해석
정적 웹앱(index.html) + AI 해석용 서버리스 함수(api/interpret.js)로 구성된 프로젝트입니다.
사주팔자·자미두수 계산은 전부 브라우저에서 실행되고, "AI 종합 해석" 기능만 서버(백엔드)를 거칩니다.
폴더 구조
webapp/
index.html 프론트엔드 전체 (계산 로직 + UI, 별도 빌드 과정 없음)
api/
interpret.js AI 해석 API (Vercel 서버리스 함수)
package.json
.env.example 필요한 환경변수 예시
1. 로컬에서 확인하기
index.html은 그냥 브라우저로 열어도 계산 기능은 다 동작합니다 (AI 해석 버튼만 서버가 없으면 에러 메시지가 뜹니다).
AI 해석까지 로컬에서 테스트하려면 Vercel CLI를 쓰는 게 제일 간단해요.
npm i -g vercel
cd webapp
vercel dev
실행 후 안내되는 로컬 주소(보통 http://localhost:3000)로 접속하면 /api/interpret까지 함께 동작합니다.
이때도 .env.local 파일에 OPENAI_API_KEY를 넣어둬야 합니다 (아래 3번 참고).
2. 배포하기 (Vercel 기준)
- https://vercel.com 가입 (GitHub 계정으로 로그인 가능)
- 이
webapp 폴더를 GitHub 저장소로 올리기
- Vercel에서 "Add New Project" → 방금 만든 저장소 선택 → 그대로 Deploy
(프레임워크 설정 없이도 정적 파일 +
api/ 폴더를 자동으로 인식합니다)
- 배포가 끝나면
https://프로젝트이름.vercel.app 주소가 생깁니다.
- 커스텀 도메인을 쓰고 싶다면 Vercel 프로젝트 설정 > Domains 에서 보유한 도메인을 연결하세요.
3. AI 해석 기능 켜기 (환경변수 설정)
Vercel 프로젝트 > Settings > Environment Variables 에 아래를 추가합니다.
환경변수를 추가한 뒤에는 **다시 배포(Redeploy)**해야 반영됩니다.
API 키는 절대 index.html이나 프론트엔드 코드에 직접 넣지 마세요. 브라우저에 노출되는 순간 누구나 그 키로
당신의 계정에 요금을 발생시킬 수 있습니다. 반드시 api/interpret.js처럼 서버(함수) 쪽에서만 사용해야 합니다.
4. 결제 연동 (아직 미완성 — 실제 서비스 전 필수)
지금 앱의 "AI 해석 보기" 버튼은 테스트용 모의(mock) 결제로 동작합니다.
index.html 안의 mockPayBtn 클릭 핸들러(주석에 TODO 표시됨)를 실제 결제 SDK 연동 코드로 바꾸면 됩니다.
추천 순서
- PG(결제대행)사 선택: 토스페이먼츠 또는 포트원(구 아임포트) 추천 — 카드/카카오페이/네이버페이를 한 번에 지원합니다.
- 사업자등록: 온라인으로 유상 서비스를 판매하려면 사업자등록(개인사업자도 가능)이 필요합니다. 관할 세무서 또는 홈택스에서 신청.
- 통신판매업 신고: 전자상거래로 재화/서비스를 판매하므로 관할 구청에 통신판매업 신고가 필요합니다 (정기결제·소액이면 면제되는 경우도 있으니 PG사 가이드 확인).
- PG사 가맹 계약: 사업자등록증 등 서류를 제출하고 심사를 받습니다. 승인까지 보통 며칠
12주 소요됩니다.
- 결제 SDK 연동: PG사에서 제공하는 JS SDK로 결제창을 띄우고, 결제 성공 시 서버에서 결제 검증(webhook) 후 AI 해석 API 호출을 허용하도록 구현합니다.
- 지금 구조에서는 결제 성공 콜백 안에서
runAiInterpretation()을 호출하는 지점(mockPayBtn 핸들러)만 교체하면 프론트는 크게 안 바뀝니다.
- 다만 지금처럼 프론트에서만 "결제완료" 플래그를 다루면 우회 결제가 가능하므로, 실제 서비스에서는 서버가 결제 성공 여부를 직접 확인한 뒤에만
/api/interpret이 응답하도록 바꿔야 합니다 (예: 결제 성공 시 서버가 1회용 토큰을 발급하고, /api/interpret 호출 시 그 토큰을 검증).
5. 비용 관련 참고
- Vercel: 개인/소규모 트래픽은 무료 티어로 충분합니다.
- OpenAI API: 사용한 토큰만큼 과금됩니다.
gpt-4o-mini 기준 해석 1건당 비용은 매우 저렴한 편(1건에 몇 원~수십 원 수준)이지만, 트래픽이 늘면 누적되니 건당 결제 가격 책정 시 감안하세요. 더 높은 품질이 필요하면 gpt-4o로 바꿀 수 있지만 비용이 올라갑니다.
- 같은 생년월일시로 반복 요청이 들어올 걸 대비해, 필요하면 결과를 DB(예: Supabase)에 캐싱해서 같은 사주는 API를 다시 부르지 않도록 최적화할 수 있습니다 (아직 미구현).
6. 지금 상태 요약
