Cloudinary 주소를 Supabase 한 행에 적기

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 projects 표에 적을 값은 제목 [제목], 설명 [설명], Cloudinary 주소 [주소], public_id [public_id]입니다. 각 값을 title, alt, image_url, cloudinary_public_id에 맞춰 표로 정리해 주세요.

대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.

내 상황에 맞춰

제 프로젝트 제목은 [제목]이고 이미지 설명은 [설명]입니다. 표에 저장하기 전에 제목이 비어 있지 않은지, 설명이 화면 내용을 전달하는지만 확인해 주세요.

한 단계 더

Supabase 행의 image_url을 브라우저 새 탭에서 열었을 때 Cloudinary의 같은 public_id 이미지인지 확인하는 순서를 적어 주세요.

Supabase의 새 행에 네 값을 저장하고 image_url을 새 탭에서 엽니다.

헷갈리기 쉬운 것

Cloudinary 이미지 주소를 `title`이나 `cloudinary_public_id`에 넣지 않습니다. 주소는 `image_url`, Cloudinary 안의 이름은 `cloudinary_public_id`에 적습니다.

왜 이렇게 작동하나요

사진 창고에서 받은 주소와 관리 번호를 상품 목록표의 정확한 칸에 옮겨 적는 것과 비슷합니다.

Supabase 행의 image_url을 사이트가 읽으면 그 주소로 Cloudinary 이미지를 불러옵니다. title과 alt는 같은 행에서 읽어 이미지 옆에 보여 줍니다.

용어 풀이

전체 용어집 →

행: 표에서 프로젝트 하나의 정보를 가로로 묶은 한 줄입니다.
이미지 설명: 이미지를 보지 못하는 사람도 내용을 알 수 있도록 보이는 대상·색·배치를 적은 문장입니다.