Claude Code와 Codex로 코드를 작성하더라도, 앱을 실제 사용자에게 제공하려면 배포·데이터 저장·로그인·오류 추적을 맡을 도구가 필요합니다. 여기서 검토할 구성은 14개 기능 범주에 걸친 29개 도구입니다. 같은 도구가 여러 범주에 등장하며, 29개를 한 프로젝트에 모두 넣으라는 뜻은 아닙니다. 만들 서비스에 필요한 기능을 먼저 정하고 범주마다 골라 쓰는 방식이 적절해 보입니다.
도구를 고를 때 확인할 세 조건
코딩 agent(작업을 스스로 수행하는 AI)와 함께 쓸 도구라면 기능만큼 agent가 그 기능을 다룰 수 있는지도 살펴야 합니다. 선택 기준은 다음 세 가지입니다.
- 시작 비용: 넉넉한 무료 구간이 있거나 적은 비용으로 시험할 수 있는가.
- 확장성: 시험용 앱을 넘어 실제 사용자가 쓰는 서비스에도 적용할 수 있는가.
- agent 연동: MCP(코딩 agent가 외부 서비스와 연결되는 규약), CLI(명령줄에서 서비스를 다루는 도구), 전용 플러그인 등을 지원하는가.
세 번째 조건은 작업 방식과 직결됩니다. 배포나 설정을 매번 웹 관리 화면에서 수동으로 처리하는 대신, agent가 지원 도구를 통해 작업을 수행할 수 있기 때문입니다. 다만 연동 지원 여부만으로 도구를 결정하기보다는 앱에 필요한 기능과 시작 비용을 함께 확인해야 합니다.
웹사이트와 웹 앱은 다른 구성으로 시작합니다
코드를 작성할 agent로는 Anthropic의 Claude Code와 OpenAI의 Codex를 중심에 둡니다. 두 제품 모두 데스크톱 앱과 CLI를 제공해 개발 과정과 명령줄 작업에 사용할 수 있습니다. 코딩 agent를 고른 다음에는 배포할 대상이 콘텐츠 중심 사이트인지, 사용자가 상호작용하는 앱인지 구분합니다.
소개 페이지나 문서처럼 콘텐츠가 중심이라면 Astro로 사이트를 만들고 Cloudflare Pages에 배포하는 구성이 알맞습니다. Astro는 가벼운 콘텐츠 중심 페이지에, Cloudflare Pages는 이를 제공하는 호스팅에 역할을 나눠 맡습니다. 반면 계정, 동적인 화면, 결제 흐름이 필요한 웹 앱에는 Next.js와 Vercel을 중심으로 shadcn/ui 구성 요소와 Tailwind CSS를 조합합니다. 화면 구성과 스타일 작업에도 코딩 agent를 활용할 수 있습니다.
▲ 서비스 형태별 웹 구성
호스팅 범주에서는 Vercel과 Cloudflare가 모두 후보입니다. 두 플랫폼은 배포를 시험할 미리보기 환경과 agent 연동 도구를 제공합니다. 하나만 고른다면 여러 기반 서비스를 함께 제공하는 Cloudflare 쪽이 조금 더 나은 선택으로 보이지만, 콘텐츠 사이트와 웹 앱에 같은 구성을 적용할 필요는 없습니다. Vercel이 호스팅과 웹 앱 범주에 다시 등장하는 것도 이 때문입니다.
데이터의 형태를 정한 뒤 로그인을 붙입니다
데이터베이스 네 가지는 저장할 데이터의 성격에 따라 나뉩니다. 문서 형태의 유연한 데이터에는 MongoDB, 관계형 PostgreSQL 데이터에는 Supabase가 기본 후보입니다. Neon은 분기 기능이 있는 서버리스 PostgreSQL이 필요할 때, Tiger Data는 분석·모니터링 기록처럼 시간 순서로 쌓이는 데이터가 많을 때 검토합니다. 네 가지를 동시에 쓰기보다 데이터 구조와 필요한 기능으로 범위를 좁히는 편이 자연스럽습니다.
사용자 계정이 필요한 앱이라면 Clerk가 로그인·가입·계정 관리 범주를 맡습니다. 준비된 화면 구성 요소로 소셜 로그인과 계정 화면을 붙일 수 있고, MCP 서버를 통한 코딩 agent 연동도 지원합니다. 계정이 없는 콘텐츠 사이트라면 이 범주부터 추가할 이유는 없습니다.
운영 기능은 필요한 시점에 더합니다
앱이 이메일을 보내거나 파일을 보관하고 결제를 받기 시작하면 도구 선택 범위가 넓어집니다. 이때는 비슷해 보이는 기능도 용도를 나눠 살펴야 합니다.
| 기능 범주 | 도구 | 선택할 상황 |
|---|---|---|
| 이메일 | Resend, Cloudflare Email, Kit | 앞의 두 도구는 앱 알림·인증 메일, Kit는 뉴스레터와 마케팅 메일에 사용합니다. |
| 상시 실행 서버 | DigitalOcean Droplets | 실행 시간 제한이 있는 방식보다 오래 돌아가는 작업이나 정기 작업에 적합합니다. |
| 파일 저장 | Cloudflare R2 | 사용자 사진·영상이나 생성된 이미지 같은 파일을 저장합니다. 데이터 반출 요금이 없다는 점도 선택 근거입니다. |
| 결제 | Stripe | 일회성 결제나 구독, 결제 관리 기능이 필요할 때 검토합니다. |
| 앱 안의 AI 모델 | Anthropic, OpenAI | 앱이 글 생성·추론·대화 기능을 호출할 때 사용합니다. |
| 이미지 모델 | Gemini, GPT Image 2 | 앱 안에서 이미지를 생성할 때 검토합니다. |
| 분석·오류 추적 | PostHog, Sentry | PostHog은 제품 이용 분석, Sentry는 오류와 성능 문제 파악을 맡습니다. |
| 작업 관리 | GitHub Issues, Linear | 전자는 코드 저장소의 버그·작업, 후자는 더 넓은 계획과 일정 관리에 사용합니다. |
▲ 앱 운영에 필요한 기능
오래 실행되는 백그라운드 작업이 있다면 DigitalOcean Droplets 같은 가상 서버가 필요한지 살펴봅니다. 이미지 파일을 쌓는 앱이라면 Cloudflare R2를 더하고, 결제가 없는 앱이라면 Stripe를 빼는 식입니다. AI 기능을 넣을 때도 코드를 작성하는 Claude Code·Codex와 앱 안에서 호출하는 모델은 역할이 다릅니다. 여러 모델 제공자를 연결하면 서비스 중단에 대비하거나 작업별 비용에 맞춰 모델을 고를 수 있습니다.
서비스를 운영하기 시작한 뒤에는 PostHog으로 이용 현황을 살피고 Sentry로 실행 오류를 추적할 수 있습니다. GitHub Issues에 코드와 직접 연결된 작업을 기록하고 Linear에 더 큰 계획을 정리하면, 코딩 agent가 해야 할 일의 범위도 구분하기 쉽습니다.
29개를 설치하지 말고 필요한 범주부터 고릅니다
먼저 만들 앱을 콘텐츠 사이트, 계정이 필요한 웹 앱처럼 한 문장으로 정의합니다. 다음으로 데이터 저장, 이메일, 상시 실행 작업, 결제, AI 기능이 실제로 필요한지 표시합니다. 남은 범주마다 초기 비용·서비스 확장성·MCP 또는 CLI 지원을 확인하면 후보를 줄일 수 있습니다.
Claude Code나 Codex에는 앱의 목적과 필요한 기능을 알려 주고, 각 범주에서 선택한 도구와 제외한 도구의 이유를 설명하도록 요청할 수 있습니다. 그 결과를 바탕으로 필요한 도구부터 연결하는 것이, 29개 목록을 그대로 복사하는 것보다 프로젝트에 맞는 출발점입니다.