서비스 역할 나누기
코드, 배포, 이미지 파일과 프로젝트 정보를 어디에 둘지 먼저 나눕니다.
학습 카드 1장
이 단원의 학습 카드
모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.
이미지 카드가 만들어지는 길 완성된 이미지 카드를 기준으로 GitHub·Vercel·Cloudinary·Supabase가 주고받는 값을 설명할 수 있습니다
만들 화면은 아래의 프로젝트 카드입니다.
봄 패키지 리뉴얼
연두색 상자와 흰색 병이 놓인 제품 사진
portfolio.example.com에서 제목·설명·이미지가 함께 보입니다.
네 서비스는 각자 하나의 일만 맡습니다.
| 서비스 | 맡는 일 | 다음으로 넘기는 값 |
|---|---|---|
| GitHub | 사이트 코드와 변경 기록 보관 | Vercel이 읽을 코드와 커밋 |
| Vercel | 코드를 웹사이트로 조립해 인터넷 주소에 공개 | 방문자가 열 Preview와 Production 주소 |
| Cloudinary | 이미지 파일 보관 | https://...로 시작하는 이미지 주소와 public_id |
| Supabase | 제목·설명·이미지 주소를 표의 한 행에 보관 | 사이트가 읽을 프로젝트 정보 |
값이 움직이는 순서는 아래와 같습니다.
코드 → GitHub → Vercel → 공개 사이트 주소
이미지 → Cloudinary → 이미지 주소 + public_id
↓
제목 + 설명 + 이미지 주소 + public_id → Supabase의 한 행
↓
공개 사이트의 프로젝트 카드방문자가 Vercel 주소를 열면 사이트가 Supabase에서 제목·설명·이미지 주소를 읽습니다. 그런 다음 Cloudinary 주소에서 이미지를 받아 카드 하나로 합쳐 보여 줍니다. GitHub에는 코드만 남고 이미지 파일은 남지 않습니다.
연습
이미지 카드 한 장이 브라우저에 표시될 때 네 서비스에서 어떤 값이 차례로 움직이는지 화살표로 적어 봅니다.
코드, 배포, 이미지 파일과 프로젝트 정보를 네 서비스에 정확히 나눌 수 있으면 완료입니다.
알아두면 좋습니다
네 서비스를 모두 데이터 보관함이라고 부르면 오류가 난 위치를 찾기 어렵습니다. GitHub는 코드, Vercel은 배포, Cloudinary는 이미지 파일, Supabase는 표로 찾을 정보를 맡는다고 구분합니다.
용어 풀이
전체 용어집 →- GitHub
- 코드와 변경 기록을 보관하고 검토하는 웹 서비스입니다.
- Vercel
- GitHub의 웹 코드를 빌드해 인터넷 주소에 배포하는 서비스입니다.
- Cloudinary
- 이미지 파일을 보관하고 웹에서 불러올 주소로 전달하는 서비스입니다.
- Supabase
- 프로젝트 제목과 이미지 주소처럼 정해진 칸의 정보를 데이터베이스에 보관하는 서비스입니다.
2026-08-19 기준 · 출처 · GitHub Docs — Hello World, Vercel — Git, Cloudinary — Node.js image and video upload, Supabase — Next.js quickstart