이미지 카드가 만들어지는 길

만들 화면은 아래의 프로젝트 카드입니다.

봄 패키지 리뉴얼

연두색 상자와 흰색 병이 놓인 제품 사진

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, Cloudinary, Supabase 가운데 필요한 서비스를 표시해 주세요.

한 단계 더

GitHub, Vercel, Cloudinary, Supabase 가운데 한 서비스가 멈췄을 때 방문자 화면에서 어떤 증상이 생기는지 서비스별로 정리해 주세요.

이미지 카드 한 장이 브라우저에 표시될 때 네 서비스에서 어떤 값이 차례로 움직이는지 화살표로 적어 봅니다.

헷갈리기 쉬운 것

네 서비스를 모두 데이터 보관함이라고 부르면 오류가 난 위치를 찾기 어렵습니다. GitHub는 코드, Vercel은 배포, Cloudinary는 이미지 파일, Supabase는 표로 찾을 정보를 맡는다고 구분합니다.

왜 이렇게 작동하나요

온라인 쇼핑몰이 사진 파일, 상품 정보, 방문자 화면과 화면을 만드는 코드를 서로 다른 방식으로 관리하는 것과 비슷합니다.

GitHub의 코드를 Vercel이 실행하고, 실행된 화면이 Supabase의 글과 Cloudinary의 이미지를 각각 불러와 카드 하나로 합쳐 보여 줍니다.

용어 풀이

전체 용어집 →

GitHub: 코드와 변경 기록을 보관하고 검토하는 웹 서비스입니다.
Vercel: GitHub의 웹 코드를 빌드해 인터넷 주소에 배포하는 서비스입니다.
Cloudinary: 이미지 파일을 보관하고 웹에서 불러올 주소로 전달하는 서비스입니다.
Supabase: 프로젝트 제목과 이미지 주소처럼 정해진 칸의 정보를 데이터베이스에 보관하는 서비스입니다.