학생 데이터와 AI를 내 앱에 연결하기

「실험 결과 제출함」 하나로 봅니다

모둠이 측정값과 결론을 내면 교사 화면에 모이고, AI가 결론에 피드백 초안을 붙이는 앱입니다. 이 매뉴얼에서 만드는 앱이기도 합니다. 다른 교과라면 「감상문 제출함」이나 「탐구 보고서 제출함」으로 바꿔 읽으셔도 부품은 같습니다.

오늘 만드는 두 길

왜 Firebase나 Apps Script가 아니라 Supabase인가요

모인 기록이 표로 보이고, AI 키를 숨기는 함수를 카드 등록 없이 쓰고, 한 반이 한꺼번에 제출해도 버팁니다.

표에 나온 말

「Edge Function의 금고」가 뭔가요

학교 카드로 물건을 살 때를 떠올리면 됩니다. 선생님은 품의만 올리고, 카드는 행정실 금고에 있고, 결제는 행정실이 대신 합니다.

GitHub 계정으로 들어갑니다

배포에서 쓴 GitHub 계정으로 가입하면 비밀번호를 따로 만들 필요가 없습니다.

1. supabase.com 에서 [Start your project]오른쪽 위 [Sign in]이 보이면 그것을 눌러도 됩니다
2. [Continue with GitHub]로 로그인GitHub 권한을 묻는 화면에서 [Authorize]배포할 때 GitHub을 어차피 쓰니, 계정을 하나로 묶으면 외울 비밀번호가 하나 줄어듭니다.
3. [New project]에서 이름, 데이터베이스 비밀번호, 지역 정하기비밀번호는 [Generate a password] 후 메모장에 저장. 지역(Region)은 Northeast Asia (Seoul)데이터베이스 비밀번호는 대시보드에서 다시 보여 주지 않고 새로 바꾸는 것만 됩니다. 지역을 서울로 고르는 것은 서버가 가까울수록 학생 화면에 답이 빨리 오기 때문입니다.
4. [Create new project]를 누르고 1~2분 기다리기프로젝트 화면이 뜨면 준비 끝

주소 하나, 키 하나

Project URL과 Publishable key 두 가지만 앱에 넣습니다.

1. 프로젝트 화면 위쪽의 [Connect] 누르기Project URL과 Publishable key가 함께 보입니다. [Settings] → [API Keys]에서도 찾을 수 있습니다주소는 어느 프로젝트로 보낼지, 키는 어느 앱에서 온 요청인지 알려 줍니다. 둘이 맞아야 Supabase가 요청을 받아 줍니다.
2. Project URL 복사하기https://영문자.supabase.co 모양
3. Publishable key 복사하기sb_publishable_ 로 시작하는 키앱 파일은 학생 기기로 내려가 누구나 열어 볼 수 있어서, 보여도 괜찮은 키만 앱에 넣습니다.

예전 설명서나 AI가 eyJ로 시작하는 긴 키(anon, service_role)를 복사하라고 하면 예전 방식입니다. Supabase는 2026년 말까지 예전 키를 없애 가는 중이라, 새로 만드는 앱은 sb_publishable_ 키로 합니다.

빌더연결 부탁문

복사한 주소와 키, 모을 내용을 적으면 부탁문이 완성됩니다.

1. 부탁문을 보내 표를 만드는 SQL 받기되묻는 질문에는 짧게 답합니다표를 마우스로 만들 수도 있지만, 규칙(RLS)까지 한 번에 빠짐없이 걸려면 SQL이 낫습니다. 저도 SQL을 직접 쓰지 않고, AI가 쓴 것을 읽어 본 뒤 실행합니다.
2. SQL Editor에 붙여 실행하기왼쪽 메뉴 [SQL Editor] → [+ New query] → 붙여넣기 → [Run]SQL로 만든 표는 RLS를 따로 켜야 합니다. 켜지 않으면 publishable 키를 가진 누구나 모든 줄을 읽고 고칠 수 있어서, 부탁문에 RLS를 꼭 넣었습니다.
3. Table Editor에서 표가 생겼는지 보기왼쪽 메뉴 [Table Editor] → 표 이름SQL이 제대로 돌았는지 눈으로 봅니다. 표 위쪽에 RLS가 꺼져 있다고 나오거나 규칙 수가 0이면 AI에게 다시 부탁합니다.

두 갈래 가운데 하나

1. 휴대폰으로 앱 열기배포한 주소가 있으면 휴대폰으로. 아직이면 내 컴퓨터에서 index.html학생은 휴대폰이나 크롬북으로 엽니다. 제 컴퓨터에서 되던 것이 학생 기기에서는 다르게 보이기도 합니다.
2. 두세 번 제출해 보기빈칸으로도, 아주 긴 글로도, 버튼 연타로도학생들은 빈칸으로도 내고, 아주 길게도 쓰고, 버튼을 여러 번 누릅니다. 수업 중에 처음 겪는 것보다 미리 겪는 편이 낫습니다.
3. Table Editor에서 모인 줄 보기왼쪽 [Table Editor] → 표 이름. 새로고침하면 줄이 늘어납니다다음 단계에서 교사 대시보드를 만들기 전에, 줄이 제대로 들어오는지 여기서 먼저 봅니다.
4. CSV로 내려받기표 위쪽의 내보내기(Export) 메뉴에서 CSV. 엑셀에서는 [데이터] → [텍스트/CSV]로 열고 UTF-8을 고릅니다모인 답을 평가나 기록의 근거로 쓰려면 엑셀로 옮겨야 합니다.
5. 연습으로 넣은 줄 지우기줄 앞 칸을 골라 [Delete]연습 줄이 남아 있으면 수업 날 모인 답과 섞입니다.

교사 화면은 따로 둡니다

Table Editor는 Supabase 계정 주인이 보는 관리 화면입니다. 수업에서 반별로 보고, 안 낸 모둠을 찾고, 피드백을 다는 일은 교사 대시보드에서 합니다.

교사 계정 하나, 규칙 하나, 화면 하나

Supabase에 교사 계정을 만들고, 교사만 읽는 규칙을 더하고, teacher.html을 받아 학생 앱 옆에 올립니다.

1. Supabase에서 교사 계정 만들기왼쪽 [Authentication] → [Users] → [Add user] → [Create new user] → 교사 이메일과 비밀번호, [Auto Confirm User] 켜기대시보드에 들어올 사람을 Supabase가 알아야, 규칙에서 「이 이메일로 로그인한 사람만」을 가를 수 있습니다.
2. 새 가입은 막기[Authentication]의 가입 설정(Sign In / Providers)에서 Allow new users to sign up 끄기. 같은 프로젝트에 학생이 가입해서 쓰는 다른 앱이 있으면 그대로 둡니다가입이 열려 있으면 누구나 계정을 만들 수 있습니다. 규칙을 교사 이메일 하나로 좁혀서 읽지는 못하지만, 쓰지 않는 문은 닫는 편이 안전합니다.
3. 부탁문을 보내 규칙 SQL과 teacher.html 받기아래 빌더에 교사 이메일을 넣고 복사해 보냅니다규칙과 화면을 한 대화에서 받아야 표 이름과 칸 이름이 어긋나지 않습니다.
4. SQL Editor에서 규칙 SQL 실행하기[SQL Editor] → [+ New query] → 붙여넣기 → [Run]3단계의 「학생은 넣기만」 규칙 옆에 「교사만 읽고 고치기」를 더합니다. 이 규칙이 없으면 로그인해도 대시보드에 아무 줄도 보이지 않습니다.
5. teacher.html을 학생 앱과 같은 곳에 올리기앱이면 이 폴더에 저장, 웹 채팅이면 받은 코드를 teacher.html로 저장한 뒤 학생 앱과 같은 저장소에 올리고 배포 주소 뒤에 /teacher.html을 붙여 엽니다같은 곳에 두면 한 번에 올라가고 연결 정보도 같습니다. 대시보드 주소는 학생에게 알리지 않지만, 알려져도 로그인 없이는 아무것도 보이지 않습니다.
6. 세 가지로 확인하기학생 화면에서 제출하면 대시보드에 바로 보이는지 · 로그아웃하면 사라지는지 · 시크릿 창에서 teacher.html을 열면 로그인 화면만 나오는지규칙이 제대로 걸렸는지는 로그인하지 않은 쪽에서 열어 봐야 알 수 있습니다.

빌더교사 대시보드 부탁문

3단계에서 넣은 주소·키·표 이름·모을 내용을 그대로 가져옵니다. 교사 이메일은 이 페이지에 저장하지 않습니다.

AI를 붙이면 되는 일

학생이 AI와 직접 대화하는 앱은 회사 약관과 법을 먼저 확인합니다. OpenAI API는 미성년자가 쓰게 하려면 보호자 동의와 나이에 맞는 안전장치를 두게 되어 있고, Anthropic(Claude) API는 미성년자가 쓰는 서비스에 나이 확인, 내용 거르기, AI라는 사실 밝히기 같은 안전장치를 요구합니다. 개인정보 보호법은 만 14세 미만의 개인정보를 처리하려면 법정대리인의 동의를 받게 합니다. Google(Gemini API)은 제가 아직 잘 알지 못해 준비 중입니다.

AI 키는 브라우저에 두지 않습니다

AI 회사의 키는 쓴 만큼 결제되는 법인카드입니다. 앱 코드에 넣으면 누구나 F12로 볼 수 있습니다.

키를 받기 전에 결제 한도부터

선불로 조금만 넣고, 자동 충전을 끄고, 월 한도를 겁니다.

빌더AI 함수 부탁문

함수 코드와 앱 쪽 코드를 한 번에 받습니다. 코드는 대시보드에 붙여넣기만 하면 됩니다.

1. AI 회사에서 결제 한도를 걸고 키 만들기위 표의 순서대로. 키는 만들 때 한 번만 보이니 바로 다음 칸으로키가 새어 나가면 제 카드로 결제됩니다. 한도를 먼저 걸면 최악의 경우에도 넣은 돈 안에서 멈춥니다.
2. Supabase의 금고(Secrets)에 키 넣기[Edge Functions] → [Secrets] → Key에 OPENAI_API_KEY, Value에 키 → [Save]. 넣자마자 쓸 수 있습니다앱 파일에 적은 글자는 F12로 누구나 봅니다. Secrets에 넣은 키는 함수만 꺼내 씁니다.
3. 부탁문을 보내 함수 코드와 앱 쪽 코드 받기되묻는 질문에는 짧게 답합니다
4. 대시보드에서 함수 만들기[Edge Functions] → [Deploy a new function] → [Via Editor] → 함수 코드 붙여넣기 → 이름 정하고 [Deploy function]함수는 Supabase의 서버에서 돌아서 학생 기기로 내려가지 않습니다. 그래서 키를 꺼내 쓸 수 있습니다.
5. 함수 설정의 Verify JWT 확인하기publishable 키로 부르는 함수는 끄고, 대신 함수 안에서 호출 횟수를 셉니다. AI가 알려 준 대로publishable 키로 부르면 로그인한 사람의 표(JWT)가 없어서, 이 스위치가 켜져 있으면 401 오류로 막힙니다. 대신 함수 안에서 부르는 횟수를 세어 막습니다.
6. 앱에서 불러 보기답이 오면 성공. 오류 글은 그대로 AI에게 보냅니다

카드대시보드에 [AI 피드백 초안] 단추 붙이기

함수를 만든 뒤 이 카드를 보내면, 교사 대시보드에서 제출마다 AI 초안을 받아 읽고 고쳐서 저장합니다.

이 다섯 가지만 답할 수 있으면 됩니다

1. 학생 정보가 어디로 가는지앱이 무엇을 어디로 보내는지 적어 봅니다. Supabase의 표, AI 회사. 이름·번호·얼굴 사진은 보내지 않고, 학교의 심의 절차를 확인합니다
2. API 키가 드러나지 않는지앱 파일에서 Ctrl+F로 sk-, sb_secret, AIza를 찾아 봅니다. 하나라도 나오면 올리지 않습니다
3. AI가 틀렸을 때 어떻게 하는지AI 답 아래에 "AI가 쓴 답이라 틀릴 수 있어요"를 붙이고, 평가에 쓰는 답은 교사가 먼저 읽습니다
4. 비용이 폭주하지 않게 무엇으로 막는지세 겹. 회사 쪽 월 한도와 자동 충전 끄기, 함수의 호출 횟수 제한, 짧은 답과 가벼운 모델
5. 서비스가 고장 났을 때 수업 대안이 있는지같은 활동을 종이 활동지나 AI 없는 판으로 할 수 있게 준비하고, 앱은 오류가 나도 멈추지 않고 안내 문구를 보여 주게 합니다

키가 새어 나갔다면

1. 그 키를 바로 지우기회사 대시보드의 API keys에서 삭제(Revoke)
2. 새 키를 만들어 금고에 다시 넣기Supabase [Edge Functions] → [Secrets]에서 값만 바꿉니다
3. 사용량 화면에서 모르는 사용이 있었는지 보기날짜별 사용량이 갑자기 튀었는지
4. 모르는 결제가 있으면 회사에 바로 문의하기키를 지운 시각과 사용 기록을 함께 보냅니다

학생 정보를 모으거나 학생이 AI를 쓰게 하는 앱은 학교의 절차를 먼저 확인합니다. 2026학년도부터 학교에서 쓰는 에듀테크와 소프트웨어는 학교운영위원회 심의를 거치게 되었습니다.

1. 앱 파일에서 비밀 키 찾기Ctrl+F로 sk-, sb_secret, AIza. publishable 키(sb_publishable_)는 들어 있어도 괜찮습니다
2. 연습으로 넣은 줄 지우기Table Editor에서 줄을 골라 [Delete]
3. 보관함에 올리기회차와 PIN을 고르고 index.html을 끌어다 놓기

연수 허브로 돌아가기