Supabase, 데이터를 둘 창고 만들기

21.1 웹과 앱이 서로 모르는 이유

지금 웹과 앱은 각자 가짜 데이터 파일을 한 벌씩 들고 있습니다(15장·18장).

• 웹 폴더 안에 한 벌 — 사장님 화면이 읽는다
• 앱 폴더 안에 한 벌 — 손님 폰이 읽는다

손님이 폰에서 신청을 누르면 폰 안의 파일에만 적힙니다. 사장님 웹은 자기 파일을 읽으니 그 신청을 모릅니다. 그리고 둘 다 새로고침하면 처음으로 돌아갑니다. 칠판에 적은 것이니까요(16장).

둘이 같은 걸 보려면 방법은 하나입니다. 둘 다 들여다볼 수 있는 공책을 하나 두고, 거기에 적고 거기서 읽는 것.

📖 데이터베이스(database) — 데이터 창고

데이터를 정리해서 오래 보관해 두는 곳. 가게 장부나 도서관 서가와 같습니다. 칸이 정해진 표에 한 줄씩 적어 두고, 필요할 때 꺼내 봅니다. 화면을 껐다 켜도, 폰을 바꿔도 장부는 그대로 남아 있습니다.

이 책에서는 쉽게 창고라고 부릅니다. 9장에서 본 데이터(화면 뒤에서 기억해 두는 내용 전부)가 여기에 담깁니다.

---

21.2 Supabase는 무엇인가

창고를 내 컴퓨터에 둘 수도 있습니다. 그런데 그러면 폰이 내 컴퓨터를 찾아와야 합니다. 17장에서 겪은 와이파이 문제가 또 생깁니다. 그리고 내 컴퓨터를 끄면 창고도 닫힙니다.

그래서 창고를 인터넷에 하나 빌립니다. 인터넷에 있으면 폰이든 컴퓨터든 그냥 붙습니다. 그 창고를 빌려주는 서비스가 Supabase입니다.

📖 Supabase(수파베이스)

인터넷에 데이터 창고를 빌려주는 서비스. 가입하면 내 창고가 하나 생기고, 웹과 앱이 주소와 열쇠만 있으면 거기에 붙어서 읽고 씁니다. 무료로 시작할 수 있습니다.

창고를 직접 짓고 관리하는 대신 창고 임대 회사를 쓰는 것과 같습니다. 청소·경비· 전기는 임대 회사가 맡고, 우리는 물건만 넣고 꺼냅니다.

수업에서 Claude는 이렇게 설명합니다.

“웹이랑 앱이 같은 데이터를 보려면 둘 다 들여다볼 공용 창고가 하나 있어야 합니다. 그 창고를 인터넷에 하나 빌리는 거예요. 공짜입니다.”

왜 가입까지 시키나

가입이 번거로워 보이지만 오히려 쉬운 길입니다. 내 컴퓨터에 창고를 두면 와이파이· 주소·방화벽 같은 문제가 줄줄이 따라옵니다. 인터넷 창고는 가입 10분이면 끝납니다.

들어갈 때는 20장에서 만든 GitHub 계정을 씁니다. 새 아이디와 비밀번호를 만들지 않습니다. GitHub 계정이 아직 없으면 20장부터 하고 오세요.

오늘 쓰지 않는 기능

Supabase에는 기능이 많습니다. 오늘은 창고에 표를 만들고, 읽고, 쓰는 것만 씁니다.

21.3 가입하기 — 한 번에 하나씩

아래 문장을 Claude에 입력하세요. (참고 16-①)

지금은 웹이랑 앱이 각자 가짜 데이터를 들고 있는 것 같아.
둘이 같은 데이터를 보게 하고 싶어. 어떻게 하면 되는지 알려줘.

Claude가 21.1~21.2절의 이야기를 짧게 하고, 가입하자고 합니다. 아래 문장을 Claude에 입력하세요. (참고 16-②)

가입할게. 뭘 눌러야 하는지 하나씩 알려줘. 한 번에 하나씩만.

Claude는 절차를 한꺼번에 늘어놓지 않습니다. 한 줄 말하고, 됐다는 답을 받고, 다음 줄로 갑니다. 영어 화면이라 버튼 글씨를 그대로 불러 줍니다. 10분쯤 걸립니다.

2~4번 — 왜 GitHub으로 들어가나

이메일로 따로 가입해도 됩니다. 그런데 그러면 나중에 GitHub과 Vercel에 또 가입하고, 아이디와 비밀번호가 세 벌이 됩니다. GitHub 계정 하나로 세 곳에 들어가면 기억할 게 한 벌입니다. 3단계에서 Vercel이 GitHub에서 코드를 가져가고 Supabase 주소를 읽을 때도, 같은 계정끼리라 잇기가 쉽습니다.

4번의 Authorize 는 처음 한 번만 나옵니다. “Supabase가 내 GitHub 이름과 이메일을 봐도 되나요?” 라는 확인입니다. 코드를 가져가는 권한이 아닙니다.

6번 — 비밀번호는 적어 두기만

여기서 정하는 비밀번호는 창고 관리자용입니다. 오늘은 쓸 일이 없습니다. 그래도 나중에 필요할 수 있으니 어딘가 적어 둡니다. 까먹어도 괜찮습니다. 설정 화면에서 다시 정할 수 있습니다.

7번 — 지역은 되돌릴 수 없다

⚠️ 지역은 만든 뒤에 못 바꿉니다

창고가 어느 나라의 컴퓨터에 놓일지 고르는 칸입니다. 한 번 만들면 바꿀 수 없습니다. 바꾸려면 창고를 새로 만들어야 합니다.

목록 맨 위에는 Asia-Pacific 처럼 넓은 지역이 먼저 나오고 「추천」 딱지가 붙어 있습니다. 그걸 고르면 서울이 아닌 곳에 놓일 수 있습니다. 목록을 내려서 Northeast Asia (Seoul) 을 직접 고릅니다.

멀리 잡으면(미국 등) 폰에서 신청을 누르고 웹에 뜨기까지 눈에 띄게 느려집니다. 22장의 “누르면 바로 뜬다” 가 살지 않습니다. 그래서 여기만은 Claude가 확인하고 넘어갑니다 — Northeast Asia (Seoul).

8번 뒤에 — 창고는 일주일 안 쓰면 잠든다

만들기를 누르고 기다리는 동안 Claude가 한 가지를 말해 둡니다.

“이 창고는 일주일 넘게 안 들어가면 잠자기로 들어갑니다. 다음 작업 전에 한 번 열어보시면 됩니다.”

무료 창고는 7일 동안 아무도 안 쓰면 스스로 멈춥니다. 멈춘 창고는 깨우는 데 몇 분이 걸립니다. 다시 열었을 때 “어제까지 됐는데 안 돼요” 가 되지 않게, 작업 전에 supabase.com 에 한 번 들어가 보면 됩니다.

💡 되돌릴 수 없는 것과 조용히 멈추는 것

가입 절차 중 대부분은 틀려도 나중에 고칠 수 있습니다. 이름은 바꾸면 되고, 비밀번호는 다시 정하면 됩니다. 그런데 두 가지는 다릅니다.

지역은 되돌릴 수 없습니다. 잠자기는 아무 경고 없이 조용히 일어납니다. 강사가 준비하면서 따로 적어 둔 두 가지이고, 그래서 PRD 10장 「만들 때 지킬 것」 에도 들어가 있습니다. 틀리면 비싼 것만 확인하고, 나머지는 빨리 지나갑니다.

---

21.4 주소와 열쇠 받아 오기

창고가 만들어졌습니다. 이제 웹과 앱이 이 창고를 찾아오고 들어올 수 있게 두 가지를 받아 옵니다. 아래 문장을 Claude에 입력하세요. (참고 16-③)

가입 끝났어. 이제 뭘 복사해서 주면 돼?

“왼쪽 아래 톱니바퀴(Project Settings) → API Keys 를 눌러 주세요. Publishable key 옆 복사 버튼을 눌러 저한테 붙여 주세요. 맨 위 초록 Connect 를 누르면 나오는 https://….supabase.co 주소도 같이요.”

📖 API 키(key) — 초인종과 진짜 열쇠

프로그램이 창고에 들어갈 때 내미는 긴 암호 글씨. Supabase는 두 종류를 줍니다.

Publishable key — 누구나 누를 수 있는 초인종입니다. 앱에 넣어 손님 폰에 들어가도 괜찮게 만들어져 있습니다. 초인종을 눌러도 문을 여는 건 창고의 규칙이 정합니다. 예전에는 anon public 이라고 불렀습니다.

Secret key — 모든 문을 여는 진짜 열쇠입니다(예전 이름 service_role). 이건 앱에 넣으면 안 됩니다. 오늘은 쓰지 않습니다.

“이거 남한테 보여도 돼요?” 라고 물으면 Claude는 이렇게 답합니다.

“이건 보여도 되는 열쇠예요. 문을 여는 열쇠가 아니라 초인종에 가깝습니다. 진짜 열쇠(Secret key)는 안 씁니다.”

붙여 주면 Claude가 웹 폴더와 앱 폴더에 적어 둡니다. 우리에게 파일을 만들라고 하지 않습니다.

📖 .env(닷엔브) 파일 — 설정 쪽지

주소와 열쇠처럼 프로그램 바깥에서 넣어 주는 설정값을 모아 두는 작은 파일. 이름이 점(.)으로 시작해서 탐색기에서는 잘 안 보입니다.

코드 안에 주소를 직접 박지 않고 이 쪽지에 따로 적어 두면, 나중에 창고가 바뀌어도 쪽지만 바꾸면 됩니다.

Claude가 이렇게 말하고 멈춥니다.

“창고가 생겼습니다. 이제 담을 칸을 만듭니다. 17단계 상자를 붙여넣어 주세요.”

---

21.5 가입 중에 하지 않는 것

21.6 정리

• 웹과 앱이 같은 걸 보려면 둘 다 들여다볼 창고 하나가 필요하다
• 창고를 인터넷에 빌려주는 서비스가 Supabase. 무료로 시작한다
• GitHub 계정으로 들어간다(나중에 Vercel도 같은 계정). 한 번에 한 줄씩. 지역은 Seoul — 되돌릴 수 없다
• 무료 창고는 7일 안 쓰면 잠든다. 다음 작업 전에 한 번 열어 본다
• 받아 오는 건 둘 — Project URL(번지수) · Publishable key(초인종). 진짜 열쇠(Secret key)는 안 쓴다

이 장에서 나온 말

21.7 안 될 때