실제 서비스로 만들기
이 튜토리얼에서 만든 화면을 로그인과 DB 저장이 되는 진짜 서비스로 바꾸는 길이에요. 화면만 만드는 것보다 단계가 많고, 배포하려면 계정이 몇 개 필요해요. 화면을 다 만든 뒤에 해도 되고, 화면만으로 끝내도 돼요.
참고
이 쪽의 프롬프트는 pro-kit 절차에 맞춰 썼지만, 처음부터 끝까지 실행해 확인하지는 않았어요.
1. neon과 supabase 고르기
pro-kit에는 DB를 어디에 둘지에 따라 템플릿이 두 개 있어요. 처음이라면 neon을 고르세요. 화면만 만든 프로젝트가 neon 템플릿이라 그대로 이어 갈 수 있어요.
| 항목 | neon | supabase |
|---|---|---|
| 내 컴퓨터의 DB | Docker(또는 Podman)로 띄운 Postgres | Supabase 로컬(DB만) |
| 인터넷의 DB | Neon | Supabase |
| 더 필요한 것 | Docker 또는 Podman | Docker 또는 Podman, Supabase CLI |
| 화면만 만든 프로젝트에서 | 그 프로젝트를 그대로 이어 가요 | 새 프로젝트를 만들고 화면을 옮겨 와요 |
| 이럴 때 | 처음이거나 특별한 이유가 없을 때 | 이미 Supabase를 쓰고 있을 때 |
주의
여기서부터는 Docker(또는 Podman)가 필요해요. 아래 프롬프트를 보내면 에이전트가 Docker(또는 Podman)부터 확인하고, 없으면 설치를 안내해요. Docker Desktop을 쓰면 앱을 켜 두세요.
2. 실제 서비스로 바꾸기
neon: 같은 프로젝트에서 이어 가기
화면을 만든 프로젝트 폴더에서 연 에이전트에 보내세요.
프롬프트에이전트 대화창에 붙여 넣기
이 프로젝트를 실제 서비스로 바꿀 거야. 로컬 DB 띄우고 첫 마이그레이션 해줘. 끝나면 커밋해줘.
에이전트가 내 컴퓨터에 DB를 띄우고, 로그인에 필요한 표(테이블)를 만들어요. "화면만 프로젝트" 표시도 지워서, 이제부터는 실제 서비스 규칙으로 일해요. 여기까지 커밋해 두면 다음 기능 작업의 기록과 섞이지 않아요.
supabase: 새 프로젝트로 옮기기
작업 폴더(~/projects)에서 연 에이전트에 보내세요. 이름은 바꿔도 돼요.
프롬프트에이전트 대화창에 붙여 넣기
pro-kit의 AGENTS.md대로 supabase 템플릿으로 living-app 프로젝트 만들어줘.
끝나면 에이전트를 닫고(/exit, Codex는 /quit) 새 폴더에서 다시 여세요.
터미널터미널에 입력
cd ~/projects/living-appclaude --dangerously-skip-permissions # Codex는 codex --yolo
화면을 옮겨 오라고 하세요.
프롬프트에이전트 대화창에 붙여 넣기
../living에서 만든 화면과 디자인을 이 프로젝트로 옮겨줘. PRODUCT.md, DESIGN.md, 화면 설계 문서, 서체도 함께. 끝나면 커밋해줘.
이렇게 되면 성공
에이전트가 로컬 DB 주소와 끄는 명령을 알려 줘요.
개발 서버 켜고 열 주소 알려줘로 열면 만든 화면이 그대로 보여요.
3. 서비스 규칙 알려 주기
누가 무엇을 볼 수 있는지, 서비스에서 쓰는 말을 정리해요. 에이전트가 기능을 만들 때 이 규칙을 지켜요.
프롬프트에이전트 대화창에 붙여 넣기
이 서비스의 규칙을 정리해줘. - 회원은 초대받은 집에만 들어갈 수 있고, 자기 집의 지출만 봐. - 지출은 누구나 적을 수 있지만 고치고 지우는 건 적은 사람만 해. - 정산 완료는 보내는 사람이 표시해. 이 내용으로 GLOSSARY.md와 docs/domain/project.md를 채워줘.
GLOSSARY.md는 서비스에서 쓰는 말을 모은 용어집이고, docs/domain/project.md는 권한과 데이터 흐름을 적은 문서예요.
4. 기능 만들기
기능은 하나씩 요청하세요. 에이전트는 요청마다 같은 순서로 일해요.
무엇을 만들지 정리한 스펙을 보여 주고 확인을 받아요.
만들고, 다른 사람의 데이터를 볼 수 없는지까지 테스트해요.
스스로 리뷰하고 고친 뒤, 내가 직접 써 보고 확인해 달라고 해요.
프롬프트에이전트 대화창에 붙여 넣기
회원가입과 로그인을 만들어줘. 예시 사용자 대신 실제로 가입한 사람으로 들어가게.
프롬프트에이전트 대화창에 붙여 넣기
지출을 추가하고 고치고 지우면 DB에 저장되게 해줘. 화면의 예시 데이터는 DB에서 읽게 바꿔.
프롬프트에이전트 대화창에 붙여 넣기
초대 코드로 집에 들어오는 기능을 만들어줘.
이렇게 되면 성공
개발 서버에서 가입하고, 데이터를 저장한 뒤 새로 고쳐도 그대로 남아 있어요.
다른 계정으로 들어가면 내 데이터가 보이지 않아요.
막히면
스펙을 확인해 달래요: 읽어 보고
좋아, 진행해줘나 고칠 곳을 답하세요.끝에 "릴리스하고 운영 배포"와 "커밋·push만" 중에서 고르래요: 배포 준비(5단계)를 마친 뒤부터 나오는 질문이에요. 아직 올리지 않을 거면
커밋·push만을 고르세요.직접 써 보고 확인해 달래요: 개발 서버에서 기능을 써 본 뒤
확인했어라고 답하세요.DB에 연결할 수 없대요: Docker가 켜져 있는지 보고
DB가 켜져 있는지 확인하고 안 켜져 있으면 켜줘라고 보내세요.
5. 검증하고 배포하기
인터넷에 올리려면 계정이 필요해요. 모두 무료 요금제로 시작할 수 있어요.
| 계정 | 쓰는 곳 |
|---|---|
| GitHub | 코드 저장, 운영 배포 전 버전 기록(릴리스) |
| Vercel | 웹사이트 올리기 |
| Neon 또는 Supabase | 인터넷의 DB(운영 DB) |
프롬프트에이전트 대화창에 붙여 넣기
지금까지 만든 거 검증해줘
인터넷에 둘 운영 DB를 만들고 이 프로젝트에 연결해요. neon 템플릿은 Neon, supabase 템플릿은 Supabase에 만들어요. 에이전트는 이렇게 부탁할 때만 원격 DB를 만들고 연결해요.
프롬프트에이전트 대화창에 붙여 넣기
운영 DB를 만들고 이 프로젝트에 연결해줘. 내가 직접 할 일이 있으면 먼저 알려줘.
프롬프트에이전트 대화창에 붙여 넣기
Vercel 배포 준비해줘. 필요한 계정과 내가 직접 할 일을 먼저 알려줘.
vercel login처럼 내가 직접 실행해야 하는 명령은 에이전트가 알려 줘요. Claude Code라면 대화창에 !를 붙여(! vercel login) 바로 실행할 수 있고, Codex라면 터미널 창을 하나 더 열어 실행하세요.
Vercel은 프로젝트의 첫 배포를 운영으로 만들어요. 그래서 처음에는 운영에 올리고, 그다음부터 확인용 주소(develop)에 먼저 올려 본 뒤 운영에 올려요.
프롬프트에이전트 대화창에 붙여 넣기
운영에 배포해줘
프롬프트에이전트 대화창에 붙여 넣기
develop에 배포해줘
주의
운영 배포는 버전을 기록한(릴리스한) 코드만 올라가요. 에이전트가 릴리스 노트를 보여 주고 동의를 받은 뒤 진행해요. 비밀번호나 DB 주소는 대화창에 붙여 넣지 마세요.
이 쪽을 다 했나요?