표 만들기, 이미지 올리기, 주소 연결하기
Supabase에 빈 표를 만들고, Cloudinary에 이미지를 올린 뒤, 받은 주소를 표의 한 행에 적습니다.
학습 카드 3장
이 단원의 학습 카드
모든 학습 카드 내용을 아래에서 차례로 볼 수 있습니다.
Supabase에 프로젝트 표 만들기 이미지 카드의 제목·설명·이미지 주소를 담을 projects 표를 만들고 공개 읽기 규칙을 확인할 수 있습니다
Supabase 데이터 보안은 브라우저에 공개하는 키와 RLS를 함께 사용하도록 설명합니다. 이번 표는 방문자에게 읽기만 허용하고, 로그인한 작업자는 Supabase Table Editor에서 행을 추가합니다.
projects 표의 한 행에는 제목, 이미지 설명, Cloudinary 주소, public_id와 등록 시각이 들어갑니다. 이미지 파일 자체는 Supabase 표에 넣지 않습니다.
-
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` 칸이 나란히 보입니다.
Table Editor에서 각 칸의 이름을 보고 이미지 카드 한 장의 정보가 어느 칸에 들어갈지 적습니다.
projects 표와 RLS가 켜져 있고 `title`, `alt`, `image_url`, `cloudinary_public_id` 칸을 찾을 수 있으면 완료입니다.
이미지 파일을 Supabase 표에 넣지 않습니다. 표에는 다음 단계에서 Cloudinary가 돌려준 이미지 주소와 public_id를 글과 함께 적습니다.
용어 풀이
전체 용어집 →2026-08-19 기준 · 출처 · Supabase — Next.js quickstart, Supabase — Secure data
Cloudinary에 이미지 한 장 올리기 Cloudinary Media Library에 이미지를 올리고 다음 단계에 넘길 보안 주소와 public_id를 찾을 수 있습니다
Cloudinary 업로드 안내는 업로드된 자산에 접근할 주소와 public ID를 설명합니다. 이 카드에서는 Cloudinary 화면에서 이미지를 올리고 두 값을 받는 곳까지만 진행합니다.
Supabase에 적는 일은 다음 카드에서 따로 합니다. 서비스 하나마다 받은 값과 남긴 결과를 확인하면 문제가 생겨도 어느 단계에서 멈췄는지 찾을 수 있습니다.
-
Cloudinary Dashboard에서 Media Library를 엽니다.
Cloudinary 업로드 공식 안내확인Media Library 화면에 업로드된 자산 목록과 Upload 버튼이 보입니다.
-
Upload를 눌러 공개 사용 권한을 확인한 이미지 한 장을 선택합니다.
확인Media Library 목록에 선택한 이미지 썸네일이 새로 보입니다.
-
올라간 이미지를 열고 `https://`로 시작하는 보안 주소를 복사합니다.
확인자산 상세 화면에 `https://`로 시작하는 보안 주소가 보입니다.
-
같은 상세 화면에서 public ID를 복사하고 주소와 함께 작업 기록에 남깁니다.
확인작업 기록의 서로 다른 두 줄에 보안 주소와 public_id가 남습니다.
이미지 한 장을 올리고 보안 주소와 public_id를 서로 다른 두 줄에 복사합니다.
Cloudinary Media Library에서 이미지를 보고 보안 주소와 public_id를 각각 찾을 수 있으면 완료입니다.
이미지 주소와 public_id를 같은 값으로 적지 않습니다. 주소는 브라우저가 이미지를 받을 곳이고 public_id는 Cloudinary 안에서 이미지를 찾는 이름입니다.
용어 풀이
전체 용어집 →2026-08-19 기준 · 출처 · Cloudinary — Upload images, Cloudinary — Pricing
Cloudinary 주소를 Supabase 한 행에 적기 Cloudinary에서 받은 이미지 주소와 public_id를 제목·설명과 함께 Supabase projects 표의 한 행에 저장할 수 있습니다
Supabase의 표에는 이미지 파일이 들어가지 않습니다. Cloudinary가 돌려준 주소와 public_id만 제목·설명과 함께 행으로 저장합니다. Supabase 표와 데이터 안내에서는 Dashboard의 Table Editor와 SQL Editor 경로를 함께 안내합니다.
title ← 프로젝트 제목
alt ← 이미지 설명
image_url ← Cloudinary 보안 주소
cloudinary_public_id ← Cloudinary public_id
이 행을 저장하면 사이트가 읽을 글과 이미지 주소가 한곳에 모입니다. 다음 카드에서 Vercel에 Supabase의 공개 읽기 값을 연결하면 이 행이 공개 화면의 이미지 카드로 바뀌니다.
-
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가 함께 보입니다.
Supabase의 새 행에 네 값을 저장하고 image_url을 새 탭에서 엽니다.
Supabase 한 행에 제목·설명·Cloudinary 주소·public_id가 함께 보이고 image_url을 열면 같은 이미지가 보이면 완료입니다.
Cloudinary 이미지 주소를 `title`이나 `cloudinary_public_id`에 넣지 않습니다. 주소는 `image_url`, Cloudinary 안의 이름은 `cloudinary_public_id`에 적습니다.
용어 풀이
전체 용어집 →2026-08-19 기준 · 출처 · Supabase — Tables and data, Supabase — Secure data