웹 서비스 연결

예제 앱을 GitHub의 새 비공개 저장소에 올립니다.

`.env.local`이 커밋 목록에 없다는 것을 먼저 확인합니다.

이 예제 앱을 GitHub 비공개 저장소에 올리기 전에 커밋할 파일을 확인해 주세요. `.env.local`, API 키, 토큰과 비밀번호가 있으면 값을 보여 주지 말고 멈춰 주세요. 안전하면 첫 커밋과 푸시까지 진행해 주세요.

예상 결과 비밀값 검사가 먼저 끝나고 예제 코드만 GitHub에 올라갑니다.

Vercel에서 Add New Project를 열고 방금 만든 GitHub 저장소를 가져옵니다.

예제 폴더만 있는 저장소가 아니라면 Root Directory를 예제 앱 경로로 지정합니다.

Vercel Git 연결 공식 안내 →

예상 결과 Vercel 프로젝트 설정에 선택한 GitHub 저장소와 Root Directory가 보입니다.

환경 변수를 넣지 않은 채 처음 배포합니다.

예상 결과 배포 주소에 ‘Supabase 연결 전’ 안내가 보입니다.

작업 브랜치를 하나 만들고 문구 한 줄을 바꿔 푸시한 뒤 Preview 주소를 기록합니다.

홈 화면의 설명 문구 한 줄만 고칠 작업 브랜치를 만들고 변경해 주세요. diff를 보여 준 뒤 커밋하고 푸시하되 main에는 아직 합치지 마세요.

예상 결과 새 브랜치가 GitHub에 올라가고 Vercel에 별도 Preview 배포가 생깁니다.

Supabase에서 새 프로젝트를 열고 SQL Editor로 이동합니다.

Supabase Next.js 공식 안내 →

예상 결과 Supabase 프로젝트 이름와 SQL Editor 화면이 보입니다.

예제 앱의 `supabase/schema.sql` 내용을 SQL Editor에 붙여넣고 실행합니다.

이 프로젝트의 `supabase/schema.sql`을 읽고 어떤 표, 칸, 제약과 RLS 정책이 생기는지 쉬운 말로 설명해 주세요. SQL은 아직 바꾸지 마세요.

예상 결과 projects 표의 여섯 칸과 공개 읽기 정책이 설명됩니다.

Table Editor에서 `projects` 표가 생겼고 RLS가 켜졌는지 확인합니다.

예상 결과 Table Editor의 목록에 `projects`가 보이고 RLS 상태가 켜져 있습니다.

Table Editor에서 `projects`를 열어 `title`, `alt`, `image_url`, `cloudinary_public_id` 칸이 비어 있는지 확인합니다.

예상 결과 빈 표에 `title`, `alt`, `image_url`, `cloudinary_public_id` 칸이 나란히 보입니다.

Cloudinary Dashboard에서 Media Library를 엽니다.

Cloudinary 업로드 공식 안내 →

예상 결과 Media Library 화면에 업로드된 자산 목록과 Upload 버튼이 보입니다.

Upload를 눌러 공개 사용 권한을 확인한 이미지 한 장을 선택합니다.

예상 결과 Media Library 목록에 선택한 이미지 썸네일이 새로 보입니다.

올라간 이미지를 열고 `https://`로 시작하는 보안 주소를 복사합니다.

예상 결과 자산 상세 화면에 `https://`로 시작하는 보안 주소가 보입니다.

같은 상세 화면에서 public ID를 복사하고 주소와 함께 작업 기록에 남깁니다.

예상 결과 작업 기록의 서로 다른 두 줄에 보안 주소와 public_id가 남습니다.

Supabase Table Editor에서 `projects` 표를 열고 Insert row를 누릅니다.

Supabase 표와 데이터 공식 안내 →

예상 결과 `projects` 표에 새 행을 입력할 화면이 열립니다.

`title`에 프로젝트 제목을, `alt`에 이미지에 보이는 대상·색·배치를 적습니다.

이미지에는 [보이는 대상과 배치]가 있습니다. 파일 이름을 반복하지 말고 대상·색·배치를 담은 이미지 설명을 한 문장으로 작성해 주세요.

예상 결과 이미지를 보지 못하는 사람에게도 내용을 전달하는 문장이 나옵니다.

`image_url`에 Cloudinary의 `https://`로 시작하는 보안 주소를 붙여넣습니다.

예상 결과 `image_url` 칸에 `https://res.cloudinary.com/`을 포함한 주소가 보입니다.

`cloudinary_public_id`에 같은 이미지의 public_id를 붙여넣습니다.

예상 결과 `cloudinary_public_id` 칸에 Cloudinary 자산 상세 화면에서 복사한 public_id가 보입니다.

Save를 누른 뒤 새 행에 제목, 설명, 주소와 public_id가 함께 보이는지 확인합니다.

예상 결과 Table Editor의 새 행에 제목·설명·이미지 주소·public_id가 함께 보입니다.

Vercel에는 Supabase 공개 주소와 publishable key 두 값만 넣고 새 Preview를 배포합니다.

이 Vercel 프로젝트에 필요한 환경 변수 이름을 예제 코드에서 확인해 주세요. 공개 읽기 값과 관리자 비밀값을 나누고, Vercel에 넣을 이름 두 개만 보여 주세요. 실제 값은 출력하지 마세요.

예상 결과 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY만 나옵니다.

Preview 주소에서 이미지, 제목과 이미지 설명을 확인합니다.

예상 결과 이미지·제목·이미지 설명이 카드 하나에 함께 보입니다.

GitHub의 최근 커밋과 Vercel Preview가 같은 커밋을 가리키는지 확인합니다.

예상 결과 Vercel 배포 정보의 커밋이 GitHub의 최근 커밋과 같습니다.

Cloudinary 이미지와 Supabase 행에서 같은 public_id를 확인합니다.

예상 결과 Cloudinary의 public_id가 Supabase의 cloudinary_public_id와 같고 image_url도 같은 이미지를 엽니다.

확인을 마친 변경만 main에 합치고 Production 주소를 새 브라우저 창에서 엽니다.

예상 결과 새 브라우저 창의 Production 주소에서도 같은 이미지 카드가 보입니다.