호스팅(Vercel)·데이터베이스(Supabase), 왜 필요한가

만든 걸 세상에 띄우고, 정보를 저장하는 두 기둥. 그리고 Claude Code가 배포까지 대신 해주는 법.

내 컴퓨터에만 있으면 아무도 못 봅니다

무언가를 만들었어도, 내 컴퓨터 안에만 있으면 나만 볼 수 있습니다. 친구에게, 손님에게 보여주려면 인터넷에 올려야 합니다. 그게 호스팅입니다.

Vercel은 만든 사이트를 인터넷에 올려 주소(URL)를 주는 서비스입니다.

비유하면: 집(사이트)을 지었으면, 주소가 있어야 사람들이 찾아옵니다. Vercel이 그 주소를 줍니다.

사이트가 정보를 기억해야 할 때가 있습니다. 댓글, 회원, 예약, 주문… 이런 걸 저장하는 곳이 데이터베이스이고, Supabase가 그 역할을 합니다.

이 사이트의 방명록도 Supabase에 저장됩니다.

여기가 핵심입니다. 보통 배포는 복잡합니다. 하지만 Claude Code에게는 이렇게만 말하면 됩니다:

"이거 Vercel에 배포해줘."

그러면 Claude Code가 빌드하고, 올리고, 주소까지 알려줍니다. Supabase 연결도:

"댓글 기능 추가해줘. Supabase에 저장되게."

설정·키 연결·코드까지 알아서 합니다. 당신은 무엇을 원하는지만 말하면 됩니다.

Vercel세상에 공개 (주소)

Supabase정보 저장 (기억)

Claude Code둘 다 연결 · 배포

Claude Code가 두 가지를 연결하고 배포까지 대행합니다.

다음 가이드에서는 사이트를 더 강력하게 만드는 API를 다룹니다.

📖 쉬운 용어 사전

어려운 말은 없습니다. 헷갈리면 여기를 보세요.

Claude Code — 자연어로 말하면 코드·파일·배포까지 해주는 AI 도구

호스팅 (Hosting) — 만든 사이트를 인터넷에 올려 주소를 주는 것 (예: Vercel)

데이터베이스 (Database) — 정보를 저장하고 기억하는 곳 (예: Supabase)

배포 (Deploy) — 만든 걸 실제 인터넷에 띄워 사람들이 쓰게 하는 것

API — 다른 서비스의 기능을 내 사이트에서 가져다 쓰는 연결 통로

API 키 (Key) — 그 API를 쓸 수 있게 해주는 비밀 열쇠

SaaS — 구독형 소프트웨어 — 설치 없이 인터넷으로 쓰는 서비스

크론 (Cron) — 정해진 시각마다 자동으로 작업을 실행하는 예약 기능

에이전트 (Agent) — 목표를 주면 스스로 판단·도구사용·반복해 끝내는 AI

환경변수 (Env) — API 키 같은 비밀값을 코드에 노출 않고 안전히 보관하는 곳

DNS — 도메인 주소를 실제 서버로 연결해주는 인터넷 전화번호부

프레임워크 (Framework) — 웹사이트를 빠르게 만들게 도와주는 기본 뼈대 (예: Next.js)

막히면 같이 풀어요

울산 AI 커뮤니티는 누구나 환영합니다.