═══════════════════════════════════════════════════════════
  연습용 포스트잇 게시판 꾸러미
  포천교육지원청 전문적학습공동체 연수 (바이브코딩)
  2026. 9. 7.(월) 10:00 ~ 12:00 · 포천미래교육센터
═══════════════════════════════════════════════════════════


▣ 이 꾸러미 안에 무엇이 있나요

   postit-board
     ├─ 먼저읽어보세요.txt   ← 지금 보고 계신 파일
     ├─ posts.sql            ← Supabase 에 붙여넣을 명령서
     └─ upload
          └─ index.html      ← 인터넷에 올릴 게시판 파일


▣ 무엇을 할 수 있나요

   · 누구나  — 메모 붙이기, 남의 메모 읽기
   · 관리자만 — 메모 고치기, 메모 지우기

   관리자는 게시판 맨 아래 '관리자 로그인' 을 눌러 들어갑니다.
   로그인하면 메모마다 [고치기] [지우기] 버튼이 생깁니다.


▣ 순서대로 세 가지만 하시면 됩니다


─── 1단계 ─ Supabase 에 메모 창고 만들기 ───────────────────

  ① supabase.com 에 로그인해서 내 프로젝트로 들어갑니다.
     프로젝트가 없으면 New project 로 하나 만듭니다.
     (지역은 Northeast Asia (Seoul), 비밀번호는 메모장에 적어두세요)

  ② 관리자로 쓸 계정을 만듭니다.  ★ 이걸 먼저 하세요
       Authentication → Users → Add user
       이메일과 비밀번호를 정해서 넣으면 됩니다.
       담당자와 대리자, 두 개를 만들어 두시길 권합니다.

  ③ 아무나 가입하지 못하게 막습니다.  ★ 반드시
       Authentication → Sign In / Providers → Email
       "Allow new users to sign up" 을 끕니다.

       이걸 켜 두면 모르는 사람이 스스로 계정을 만들어
       내 게시판의 관리자가 될 수 있습니다.

  ④ 왼쪽 메뉴에서 SQL Editor 를 누르고 New query 를 누릅니다.

  ⑤ posts.sql 파일을 메모장으로 열어 내용을 전부 복사합니다.
     (Ctrl + A 로 전체 선택 → Ctrl + C)
     ※ 일부만 긁으면 오류가 납니다. 반드시 전부 복사하세요.

  ⑥ SQL Editor 에 붙여넣고 오른쪽 아래 Run 을 누릅니다.

  ⑦ 아래쪽에 표가 나오고 다음 네 줄이 보이면 성공입니다.
       anyone can write        INSERT   anon
       anyone can read         SELECT   anon
       logged in can update    UPDATE   authenticated
       logged in can delete    DELETE   authenticated


─── 2단계 ─ 내 창고 주소와 열쇠를 게시판에 알려주기 ────────

  ① Supabase 왼쪽 아래 Settings(톱니바퀴) → API 를 누릅니다.

  ② 다음 두 가지를 복사해 둡니다.
       · Project URL      (https://○○○○.supabase.co)
       · anon public key  (eyJ... 로 시작하는 아주 긴 문자열)

     ※ service_role key 는 절대 쓰지 마세요.
       모든 잠금을 무시하는 마스터키입니다.

  ③ upload 폴더 안의 index.html 을 메모장으로 엽니다.
     (파일에서 마우스 오른쪽 → 연결 프로그램 → 메모장)

  ④ 파일 아래쪽에서 아래 두 줄을 찾습니다.

       var SUPABASE_URL      = "https://.....supabase.co";
       var SUPABASE_ANON_KEY = "eyJhbGciOi.....";

  ⑤ 따옴표 안의 내용만 내 것으로 바꾸고 저장합니다. (Ctrl + S)


─── 3단계 ─ 인터넷에 올리기 ────────────────────────────────

  ① cloudflare.com 에 로그인합니다.

  ② 왼쪽 메뉴 Workers & Pages 를 누릅니다.

  ③ Create → Pages → Upload assets 를 고릅니다.
     (Connect to Git 이 아닙니다)

  ④ 프로젝트 이름을 적습니다. 이 이름이 그대로 주소가 됩니다.
     영문 소문자와 붙임표(-) 만 쓸 수 있습니다.
     ※ 참석자끼리 이름이 겹치면 안 됩니다.
       postit-kim, postit-lee 처럼 각자 다르게 지으세요.

  ⑤ upload 폴더를 통째로 끌어다 놓습니다.
     ※ index.html 파일 하나만 끌면 안 됩니다. 폴더째 올리세요.
     ※ posts.sql 과 이 안내문은 올리지 않습니다.

  ⑥ Deploy 를 누르고 30초 기다립니다.

  ⑦ https://내가정한이름.pages.dev 주소가 나오면 완성입니다.
     휴대폰으로도 열어 보세요.


▣ 게시판 사용법

  · ＋ 새 메모 붙이기 를 누르면 글쓰기 칸이 열립니다.
  · 제목만 적어도 붙일 수 있습니다.
  · 메모 색깔은 다섯 가지 중에서 고를 수 있습니다.

  · 사진 넣기
      postimages.org 에 로그인 → Choose images 로 사진 올리기
      → Direct link 복사 (i.postimg.cc 로 시작하는 것)
      → 게시판의 '사진 주소' 칸에 붙여넣기
      ※ Thumbnail 이나 Hotlink 를 고르면 사진이 안 나옵니다.

  · 유튜브 영상 넣기
      유튜브에서 주소를 복사해 '유튜브 주소' 칸에 그대로 붙여넣기
      ※ 짧은 주소(youtu.be/...) 도 됩니다.
      ※ 만든 사람이 퍼가기를 막아 둔 영상은 재생되지 않습니다.


▣ 관리자로 고치고 지우기

  ① 게시판 맨 아래 '관리자 로그인' 을 누릅니다.

  ② 1단계 ②에서 만든 이메일과 비밀번호를 넣습니다.

  ③ 로그인하면 화면 위에 초록색 '관리자 모드' 띠가 뜨고,
     메모마다 [고치기] [지우기] 버튼이 생깁니다.

  ④ [고치기] 를 누르면 그 메모의 내용이 글쓰기 칸에 그대로 들어옵니다.
     고른 메모는 초록 테두리로 표시됩니다.
     내용을 바꾸고 '고친 내용 저장' 을 누르면 됩니다.

  ⑤ [지우기] 는 한 번 더 묻고 나서 지웁니다.
     지운 메모는 되살릴 수 없습니다.

  ⑥ 자리를 뜨실 때는 '로그아웃' 을 눌러 주세요.

  ※ 비밀번호는 브라우저에 저장되지 않습니다.
    창을 닫거나 새로고침하면 로그인이 풀립니다. 정상입니다.


▣ 안 될 때 확인할 것

  · 화면이 하얗게만 나옵니다
      → 파일 이름이 index.html 이 맞는지 보세요.
        메모장이 index.html.txt 로 저장했을 수 있습니다.
        저장할 때 파일 형식을 '모든 파일' 로 바꿔야 합니다.

  · "아직 게시판 표가 없습니다" 라고 나옵니다
      → 1단계 posts.sql 실행을 아직 안 하신 것입니다.

  · "메모를 불러오지 못했습니다" 라고 나옵니다
      → 읽기 권한이 열리지 않은 것입니다.
        posts.sql 을 처음부터 끝까지 다시 실행해 보세요.

  · 메모를 붙였는데 저장이 안 됩니다
      → 2단계에서 주소와 열쇠를 잘못 붙여넣었을 수 있습니다.
        주소 끝에 빗금(/) 이 붙지 않았는지,
        열쇠가 중간에서 잘리지 않았는지 확인하세요.

  · 로그인이 안 됩니다
      → Authentication → Users 에 그 이메일이 있는지 확인하세요.
        계정을 만들 때 정한 비밀번호가 맞는지도 확인합니다.

  · 로그인은 됐는데 "고칠 권한이 없습니다" 라고 나옵니다
      → posts.sql 의 [5][6] 부분이 실행되지 않은 것입니다.
        전체를 다시 복사해서 Run 해 보세요.

  · 고쳤는데 화면이 그대로입니다
      → 브라우저가 옛 화면을 기억하고 있습니다. Ctrl + F5 를 누르세요.

  · 그 밖의 오류
      → F12 → Console 탭 → 빨간 글씨를 통째로 복사해서
        AI 에게 그대로 붙여넣고 물어보세요.


▣ 꼭 지켜 주세요

  이 게시판은 주소를 아는 사람이면 누구나 볼 수 있습니다.
  이름·전화번호·주소·학번 같은 개인정보는 올리지 마십시오.
  남의 사진과 영상에는 저작권이 있습니다.
  연습이 끝나면 Cloudflare 프로젝트와 Supabase 표를 정리해 주세요.


───────────────────────────────────────────────────────────
  강사 · 포천시청소년재단 인재육성실 유중원 실장
───────────────────────────────────────────────────────────
