«응답이 0명이에요?» 여러 사람의 답을 한 권의 장부에 — Supabase·구글 시트 붙이기

왜 0명인가

각자의 수첩에 적었기 때문입니다

AI에게 «설문 앱 만들어줘»라고만 하면, AI는 가장 간단한 방법을 고릅니다 — 그 휴대폰의 브라우저에 저장하는 것. 혼자 쓰는 체크리스트라면 문제없지만, 여러 사람의 답을 모아야 하면 이렇게 됩니다.

왼쪽은 강의장 사람들 머리 위에 각자 따로 떠 있는 작은 수첩과 빈 클립보드를 보는 강사, 오른쪽은 모든 휴대폰에서 종이가 날아가 앞쪽의 빨간 큰 장부 한 권에 모이고 강사가 웃으며 가리키는 그림 — 왼쪽: 각자의 수첩(브라우저 저장) — 강사 클립보드는 비어 있습니다. 오른쪽: 한 권의 장부(데이터베이스) — 모든 휴대폰의 답이 한곳에.

📱 각자의 수첩 (브라우저 저장)

설정 0, 공짜, 빠름. 대신 그 휴대폰에만 남습니다. 다른 사람·강사 화면에선 안 보이고, 브라우저 기록을 지우면 사라집니다. → 혼자 쓰는 도구 전용.

📒 한 권의 장부 (데이터베이스)

처음 연결에 20~30분. 대신 누가 어디서 답하든 한곳에 쌓이고, 강사 화면에 실시간으로 모입니다. → 설문·진단·퀴즈·순위판.

장부 고르기

구글 시트냐 Supabase냐 — 앱으로 고르세요

만들려는 것	추천 장부	이유
교육 신청서·만족도 조사 하루 수십 건, 나중에 엑셀로 정리	구글 시트	평소 쓰던 시트에 바로 쌓여 담당자가 열어 보기 편함
강의장 실시간 진단·퀴즈 30명이 1분 안에 동시에	Supabase	동시에 몰려도 빠르고, 강사 화면에 실시간 집계
로그인 있는 사내 앱	Supabase 또는 Firebase	로그인 기능이 장부와 한 세트로 들어 있음
채팅·실시간 게임	Firebase 또는 Supabase	둘 다 «실시간» 기능이 강함 — 익숙한 쪽으로
혼자 쓰는 계산기·체크리스트	브라우저 저장	장부가 필요 없음

이 글에서는 Supabase로

구글 시트는 익숙하지만, 강의장처럼 한꺼번에 몰리는 순간엔 느려지고 실시간 집계가 어렵습니다. Supabase는 화면이 엑셀처럼 생겨서 처음 보는 분도 금방 읽을 수 있습니다. 구글 시트 방식은 아래에 따로 정리했습니다.

실제 앱으로 보기

«HRD 7 Roles 자가진단» — 홀, 장부, 강사 화면

9월 28일 행사에서 참가자들이 휴대폰으로 21문항에 답하면, 무대 화면에 «지금 이 자리의 HRD 지도»가 실시간으로 그려지던 앱입니다. 1편의 식당 비유로 보면 세 부분입니다.

홀

참가자 휴대폰21문항에 답을 마치면 장부에 한 줄 적기

→

장부

Supabase 표 hrd_responses응답 한 건 = 한 줄. 이름·소속은 칸 자체가 없음

→

강사 화면

현장 집계 화면2초마다 장부를 다시 읽어 참여 인원·레이더 차트 갱신

HRD 7 Roles 자가진단 첫 화면 — 지금 당신은 일곱 가지 역할 중 어디에 서 있습니까, 7개 역할 목록과 진단 시작 버튼 — 홀 — 참가자가 보는 진단 화면(jjcreative.co.kr/hrd-check). 맨 아래 «이름·소속·이메일을 묻지 않습니다»라고 적어 두었습니다.

HRD 7 Roles 현장 집계 화면 — 참여 0명, 일곱 꼭짓점 레이더 차트, 응답 대기 — **강사 화면** — 무대에 띄우는 현장 집계. 지금은 장부에 응답이 없어 «0명·응답 대기»로 보입니다.

① 장부 만들기

Supabase 프로젝트 = 장부를 넣어 둘 «책장»

supabase.com 에 GitHub 계정으로 가입(«Continue with GitHub»)하고 New project를 누르면 아래 화면이 나옵니다. 채울 곳은 세 칸뿐입니다.

Supabase Create a new project 화면 — Project name, Database password, Region 세 칸에 빨간 네모 — Supabase «Create a new project» 화면(입력하지 않고 화면만 찍었습니다).

칸	쉬운 말	이렇게
Project name	책장 이름	영어로 알아보기 쉽게(예: lecture-apps)
Database password	책장 열쇠(관리자용)	Generate a password를 눌러 자동 생성 → 비밀번호 관리 앱에 보관. 앱에는 넣지 않습니다
Region	책장을 둘 도시	참가자가 한국에 있으면 Asia-Pacific(서울 가까운 곳) — 응답이 빨라집니다
Compute size 등	책장 크기	그대로(가장 작은 것으로 충분)

책장 하나에 장부 여러 권

무료 요금제는 만들 수 있는 프로젝트(책장) 수에 제한이 있습니다. 그래서 저는 앱마다 책장을 새로 사지 않고, 책장 하나에 앱별 장부를 이름 앞머리로 구분해 넣습니다(예: hrd_로 시작하는 장부는 진단 앱, bm_은 보드게임 앱). AI에게 «기존 Supabase 프로젝트에 이 앱 전용 표를 hrd_ 앞머리로 만들어줘»라고 하면 됩니다.

② 칸 정하기

장부의 칸 — «무엇을 적을지»가 곧 설계입니다

장부(표)를 만든다는 건 «칸 머리글을 정한다»는 뜻입니다. 칸은 AI가 만들어 주지만, 무엇을 적고 무엇을 적지 않을지는 교육 담당자가 정해야 합니다.

Supabase Table Editor의 hrd_responses 표 — id, created_at, scores, stage, event 칸 머리글에 빨간 네모, 2 RLS policies 표시, 표는 비어 있음 — 진단 앱의 실제 장부 «hrd_responses». 칸 머리글 다섯 개(빨간 네모)가 전부입니다. 지금은 응답이 0건이고, 오른쪽 위 **2 RLS policies**는 장부 규칙이 두 개 걸려 있다는 표시입니다.

칸 이름	쉬운 말	왜 이렇게
id	줄 번호	자동으로 1, 2, 3… 붙음
created_at	적힌 시각	자동 기록 — «몇 시에 몰렸나»를 볼 수 있음
scores	역할 7개 점수	21문항 원답 대신 계산된 점수 7개만 저장
stage	HRD 단계	무대 화면의 «평균 HRD 단계»용
event	행사 이름표	같은 장부를 다음 행사에도 쓰고, 행사별로 나눠 보기
(없음)	이름·소속·이메일	일부러 칸을 만들지 않음 — 처음부터 받지 않으면 지킬 개인정보도 없습니다

요령 칸 설계를 AI에게 맡기기 전에 «강사 화면에 무엇을 보여 줄 건가?»를 먼저 말하세요. 보여 줄 것에서 거꾸로 칸이 정해집니다. 그리고 «개인을 알아볼 수 있는 칸은 만들지 마»를 꼭 덧붙이세요.

③ 장부 규칙

RLS — «쓰기는 누구나, 지우기는 아무도»

장부를 인터넷에 연결하면 이런 걱정이 듭니다 — «누가 남의 답을 고치거나 통째로 지우면?» 그걸 막는 게 RLS(행 단위 보안), 쉬운 말로 장부 규칙입니다. 규칙에 적힌 행동만 허락되고, 적히지 않은 행동은 전부 막힙니다.

유리 가림막이 덮인 장부 — 왼쪽 방문자는 틈으로 새 종이를 넣고 유리 너머로 읽을 수 있고, 오른쪽 방문자의 빨간 지우개는 유리에 막힘. 뒤에서 점원이 규칙집을 들고 있음 — 유리 가림막이 RLS. 틈으로 새 쪽지 넣기(쓰기)와 유리 너머로 보기(읽기)는 되지만, 남의 줄을 지우는 빨간 지우개는 막힙니다.

Supabase Policies 화면 — hrd_responses 표에 hrd_anon_insert(INSERT, anon), hrd_anon_select(SELECT, anon) 두 규칙 — 진단 앱 장부의 실제 규칙(Database → Policies). **INSERT**(새 줄 쓰기)와 **SELECT**(읽기) 두 개만 **anon**(로그인 안 한 누구나)에게 허락돼 있습니다.

행동	화면의 영어	진단 앱 규칙	왜
새 줄 쓰기	INSERT	✅ 누구나	참가자가 로그인 없이 답을 내야 하니까
읽기	SELECT	✅ 누구나	무대 화면이 집계를 보여 줘야 하니까(이름이 없는 점수뿐)
고치기	UPDATE	⛔ 규칙 없음 = 아무도	남의 답을 바꾸면 안 되니까
지우기	DELETE	⛔ 규칙 없음 = 아무도	장부를 통째로 날리면 안 되니까

RLS가 꺼져 있으면 장부는 «길바닥의 공책»

Supabase는 «Disable RLS»(규칙 끄기) 버튼 하나로 규칙을 끌 수 있습니다. 꺼진 장부는 앱 주소를 아는 누구나 읽고, 고치고, 통째로 지울 수 있습니다. AI가 «일단 되게 하려고» 규칙을 끄는 경우가 있으니, 다 만든 뒤 «RLS가 켜져 있는지, 어떤 규칙이 있는지 표로 보여줘»라고 꼭 확인하세요. 새 프로젝트를 만들 때 «Enable automatic RLS»(새 장부에 자동으로 규칙 켜기)에 체크해 두면 더 안전합니다.

④ 열쇠 두 개

공개 열쇠와 비밀 열쇠 — 앱에는 하나만

앱이 장부에 접근하려면 열쇠(API 키)가 필요합니다. Supabase는 열쇠를 두 종류 줍니다. 앱(화면)에 넣는 건 공개 열쇠뿐입니다.

Supabase API Keys 화면 — Publishable key 와 Secret keys 두 칸에 빨간 네모, 키 값은 흐리게 — Settings → API Keys. 위 **Publishable key**(공개 열쇠), 아래 **Secret keys**(비밀 열쇠). 키 값은 흐리게 가렸습니다.

🟢 Publishable key (공개 열쇠)

화면 안내문 그대로 «RLS를 켰다면 브라우저에서 써도 안전». 진단 앱 코드에도 이 열쇠가 들어 있습니다 — 장부 규칙이 지켜 주기 때문에 괜찮습니다.

🔴 Secret key (비밀 열쇠)

장부 규칙을 무시하고 모든 걸 할 수 있는 관리자 열쇠. 화면 코드·GitHub·카톡 어디에도 넣지 않습니다. 필요하면 Vercel의 환경 변수(«바이브 02»)에만.

구글 시트로 할 때

신청서·만족도라면 구글 시트가 더 편합니다

제 홈페이지의 «교육 문의» 폼은 구글 시트에 쌓입니다. 시트에 붙은 작은 자동화 프로그램(Apps Script)이 응답을 받아 한 줄씩 적고, 담당자에게 알림 메일까지 보냅니다. AI에게 «구글 시트에 쌓이게 해줘»라고 하면 Apps Script 코드와 붙이는 순서를 알려 줍니다.

	구글 시트 + Apps Script	Supabase
보는 곳	평소 쓰는 구글 시트	Supabase 표 화면(엑셀과 비슷)
잘하는 것	알림 메일, 담당자 공유, 엑셀 정리	동시 접속, 실시간 집계, 로그인
약한 것	30명이 같은 1분에 몰리면 느림	처음 화면이 낯섦
꼭 챙길 것	스팸 막기, «=»로 시작하는 입력 막기(아래 요령)	RLS 장부 규칙

요령 시트는 «=»로 시작하는 글을 수식으로 실행합니다. 누군가 신청서 칸에 수식을 넣으면 시트 안의 다른 신청자 정보가 밖으로 새어 나갈 수 있습니다. AI에게 «시트에 적기 전에 =, +, -, @ 로 시작하는 입력은 글자로만 저장되게 해줘»라고 한 줄 덧붙이세요.

AI에게 말하기

명령어 대신, 이렇게 말하세요

AI-01 💬 코딩 에이전트

설계부터 — 무엇을 적을지 상의하기

만들기 전에 칸부터

강의장에서 참가자 30명이 휴대폰으로 진단에 답하고, 강사 화면에 실시간으로 평균과 분포가 보이는 앱을 만들고 싶어.
응답은 한곳에 모아야 해. 장부(데이터베이스)에 어떤 칸이 필요한지 먼저 표로 제안해줘.
이름·소속·이메일처럼 개인을 알아볼 수 있는 칸은 만들지 말고, 강사 화면에 필요한 것만 남겨줘.

AI-02 💬 코딩 에이전트

Supabase 연결 — 장부와 규칙을 한 번에

설계가 정해졌다면

위 설계대로 Supabase에 표를 만들고 앱을 연결해줘.
- 기존 Supabase 프로젝트를 쓰고, 이 앱 전용 표는 이름 앞에 diag_ 를 붙여줘
- 장부 규칙(RLS)을 켜고, 누구나 새 응답 쓰기와 읽기만 되게 하고 고치기·지우기는 막아줘
- 앱에는 공개 열쇠(publishable key)만 넣고, 비밀 열쇠는 절대 코드에 넣지 마
내가 Supabase 화면에서 직접 해야 하는 일이 있으면 순서대로 알려줘.

AI-03 💬 코딩 에이전트

다 만든 뒤 — 장부 규칙 점검

강의 전날 꼭

이 앱이 쓰는 Supabase 표마다 RLS가 켜져 있는지, 어떤 규칙이 있는지 표로 보여줘.
로그인 안 한 사람이 고치기나 지우기를 할 수 있는 표가 있으면 알려주고 막아줘.
점검 중에 열쇠 값은 화면에 보여주지 마.

AI-04 💬 코딩 에이전트

구글 시트로 — 신청서·만족도

Supabase 대신 시트에 쌓기

이 신청서의 응답이 내 구글 시트에 한 줄씩 쌓이고, 접수될 때마다 나에게 알림 메일이 오게 해줘.
Apps Script를 쓰고, 시트에 붙이는 순서를 화면 기준으로 알려줘.
같은 사람이 여러 번 누르는 것과 스팸을 막고, =, +, -, @ 로 시작하는 입력은 글자로만 저장되게 해줘.

다음 편

바이브 코딩 기초 시리즈

편	내용
바이브 01 · 지도	각 서비스가 어디서 무슨 일을 하는지 한 장으로
바이브 02 · 배포	GitHub에 저장하고 Vercel로 내 주소에 올리기
바이브 03 · 장부 (지금 글)	여러 사람의 응답을 Supabase·구글 시트에 모으기
바이브 04 · 열쇠와 보안	키 유출·공개 저장소·보안 규칙 — 실제 점검 사례로 배우기

이 글을 만든 방법

2026년 10월 8일, 제 Supabase 계정에서 «HRD 7 Roles 자가진단» 앱이 쓰는 실제 표와 규칙, 열쇠 화면을 찍었습니다(열쇠 값은 가림). 새 프로젝트 화면은 입력하지 않고 화면만 찍었고, 어떤 표나 규칙도 바꾸지 않았습니다. 서비스 화면 구성은 바뀔 수 있습니다.