다섯 걸음이면
내 홈페이지가 생깁니다

이 다섯 개만 하면 끝납니다

앞 걸음이 끝나야 다음 걸음으로 갑니다. 순서를 건너뛰지 마세요.

가게를 열려면 자리가 있어야 합니다

파일 하나 받아서 끌어다 놓으면 끝

1. 1
   연습용 파일 내려받기안내 페이지의 자료실에서 「실습용 게임 파일」을 받습니다. index.html 이름으로 저장됩니다.
2. 2
   폴더 하나에 담기바탕화면에 폴더를 만들고 그 안에 index.html을 넣습니다. 폴더 이름은 아무거나 괜찮습니다.
3. 3
   cloudflare.com 로그인가입해 두신 계정으로 들어갑니다.
4. 4
   왼쪽 메뉴에서 Workers & Pages화면 왼쪽에 세로로 붙어 있는 메뉴입니다.
5. 5
   Create → Pages → Upload assets옆에 있는 Connect to Git은 누르지 않습니다. 어려운 길입니다.
6. 6
   이름을 적고 폴더를 끌어다 놓기여기 적는 이름이 그대로 주소가 됩니다. 영문 소문자와 붙임표(-)만 씁니다.
7. 7
   Deploy 누르고 30초 기다리기주소가 나오면 완성입니다. 휴대폰으로도 열어 보세요.

주소가 생겼습니다

여기서 가장 많이 막힙니다

1. !
   화면이 하얗게만 나옵니다파일 이름이 index.html이 맞는지 보세요. 메모장이 index.html.txt로 저장했을 수 있습니다. 저장할 때 파일 형식을 모든 파일로 바꿔야 합니다.
2. !
   파일이 아니라 폴더를 올려야 합니다파일 하나만 끌어다 놓으면 안 됩니다. 파일이 들어 있는 폴더를 통째로 끌어다 놓으세요.
3. !
   이름을 못 쓴다고 나옵니다한글·대문자·띄어쓰기는 쓸 수 없습니다. pocheon-notice처럼 영문 소문자와 붙임표만 씁니다.
4. !
   고쳤는데 화면이 그대로입니다브라우저가 옛 화면을 기억하고 있어서 그렇습니다. Ctrl + F5를 누르세요.

먼저 창고를 하나 짓습니다

1. 1
   supabase.com 로그인가입해 두신 계정으로 들어갑니다.
2. 2
   New project 누르기창고를 새로 짓는 버튼입니다.
3. 3
   이름과 비밀번호 적기비밀번호는 반드시 메모장에 적어 두세요. 나중에 다시 볼 수 없습니다.
4. 4
   지역은 Northeast Asia (Seoul)가까운 곳을 골라야 빠릅니다.
5. 5
   1~2분 기다리기Setting up project 글씨가 사라지면 다 지어진 것입니다.
6. 6
   차 한 잔 하고 오세요이 시간에 옆자리 짝이 잘 따라오고 있는지 봐 주세요.

챙길 것은 딱 두 줄입니다

왼쪽 아래 Settings(톱니바퀴) → API 를 누르면 아래 두 가지가 있습니다. 메모장에 복사해 두세요.

명단을 볼 수 있는 사람을 정합니다

관리자 페이지는 아무나 열면 안 됩니다. 로그인한 담당자만 보이게 계정을 만듭니다.

1. 1
   왼쪽 메뉴 Authentication → Users사람을 관리하는 곳입니다.
2. 2
   Add user → 이메일·비밀번호 적기담당자 두 분의 계정을 각각 만듭니다. 두 개면 충분합니다.
3. 3
   Sign In / Providers → Email같은 메뉴 안에 있습니다.
4. 4
   Allow new users to sign up 끄기반드시 꺼야 합니다. 켜져 있으면 모르는 사람이 계정을 만들 수 있습니다.

이제 AI에게 알려주면 됩니다

아래 글을 복사해서 Claude나 ChatGPT에 붙여넣으세요. 파란 부분만 아까 메모장에 적어 둔 내 것으로 바꿉니다.

너는 웹 개발을 가르치는 선생님이야.
게시판 글을 관리하는 관리자 페이지를
admin.html 파일 하나로 만들어줘.

-- 내 창고 정보 --
Project URL : https://abcdefgh.supabase.co
anon public key : eyJhbGciOiJIUzI1NiIs...
테이블 이름 : posts

-- 이렇게 만들어줘 --
1. HTML·CSS·JavaScript를 한 파일에 넣을 것
2. 처음에는 이메일·비밀번호 로그인 화면만 보이게
3. 로그인에 성공해야 글 목록이 보이게
4. 글 목록은 표로 보여주고, 최신 글이 위로
5. 글을 고치거나 지우는 버튼도 넣어줘
6. 엑셀(CSV)로 내려받는 버튼 하나 넣어줘
7. 글씨는 18px 이상, 휴대폰에서도 안 넘치게
8. 설명은 빼고 전체 코드만 줘

먼저 글이 쌓일 표를 만듭니다

왼쪽 메뉴 SQL Editor → New query 에 아래를 전부 붙여넣고 Run.

-- 글 한 건이 표의 한 줄이 됩니다
create table if not exists posts (
  id         bigint generated always as identity primary key,
  title      text not null,   -- 제목
  body       text,            -- 내용
  writer     text,            -- 쓴 사람
  image_url  text,            -- 사진 주소 (4단원)
  video_url  text,            -- 영상 주소 (5단원)
  color      int default 0,   -- 포스트잇 색깔
  created_at timestamptz default now()
);

-- 잠금장치 켜기
alter table posts enable row level security;

-- ① 누구나 글을 쓸 수 있게
drop policy if exists "anyone can write" on posts;
create policy "anyone can write" on posts
  for insert to anon with check (true);

-- ② 누구나 글을 읽을 수 있게  ← 오늘의 핵심
drop policy if exists "anyone can read" on posts;
create policy "anyone can read" on posts
  for select to anon using (true);

왜 어떤 건 막고 어떤 건 열까요

게시판 화면도 AI가 만들어 줍니다

위에서 만든 posts 표를 쓰는 게시판을
board.html 파일 하나로 만들어줘.

Project URL : https://abcdefgh.supabase.co
anon public key : eyJhbGciOiJIUzI1NiIs...
테이블 이름 : posts
CDN 방식 @supabase/supabase-js@2 사용

-- 화면 구성 --
1. 위쪽에 글 목록, 최신 글이 맨 위로
2. 제목을 누르면 내용이 펼쳐지게
3. 아래에 글쓰기 칸 (제목·내용·쓴 사람)
4. 저장되면 초록 글씨로 안내,
   실패하면 빨간 글씨로 "다시 시도해 주세요"
5. 글씨는 18px 이상, 휴대폰에서 가로로 안 넘치게
6. 색은 차분한 남색 계열

설명은 빼고 전체 코드만 줘.

올리고 주소만 복사하면 됩니다

1. 1
   postimages.org 접속 후 로그인로그인해야 올린 사진이 사라지지 않습니다.
2. 2
   Choose images 누르고 사진 고르기5MB 이하 JPG·PNG를 권합니다.
3. 3
   올라가면 주소가 여러 개 나옵니다여기서 고르는 것이 중요합니다. 다음 장을 보세요.
4. 4
   Direct link 를 복사메모장에 붙여 두었다가 게시판 글쓰기에 씁니다.

주소를 잘못 고르면 사진이 안 뜹니다

게시판에 사진 칸을 붙입니다

방금 만든 게시판을 아래처럼 고쳐줘.

1. 글쓰기 칸에 "사진 주소" 입력란을 하나 추가하고,
   그 값을 posts 표의 image_url 칸에 저장해줘
2. 글 목록에서 image_url 이 있으면
   그 사진을 글 내용 위에 보여줘
3. 사진 가로 크기는 화면에 맞춰 줄어들게 해줘
   (가로로 넘치면 안 됨)
4. 사진 주소가 비어 있으면 아무것도 안 보이게 해줘
5. 주소가 잘못돼서 사진이 안 열리면
   "사진을 불러올 수 없습니다"라고 대신 보여줘

수정된 전체 코드를 처음부터 다시 줘.

주소 안에 영상 번호가 숨어 있습니다

주소만 붙여넣으면 재생되게

게시판을 아래처럼 한 번 더 고쳐줘.

1. 글쓰기 칸에 "유튜브 주소" 입력란을 추가하고,
   그 값을 posts 표의 video_url 칸에 저장해줘
2. 어떤 형태로 붙여넣어도 알아서 영상 번호만 뽑아줘
   (watch?v= 주소, youtu.be 짧은 주소, embed 주소 전부)
3. 글 목록에서 video_url 이 있으면
   그 영상을 게시판 안에서 바로 재생되게 넣어줘
4. 영상 크기는 화면 너비에 맞춰 늘었다 줄었다 하고,
   가로세로 비율은 16:9로 유지해줘
5. 주소가 비어 있으면 아무것도 안 보이게 해줘

수정된 전체 코드를 처음부터 다시 줘.

오늘 여러분이 만든 것

1. 1
   인터넷 주소문자로 보내면 누구나 열리는 내 홈페이지
2. 2
   관리자 페이지담당자 두 명만 로그인해서 보는 관리 화면
3. 3
   공개 게시판누구나 읽고 쓸 수 있는 샘플 게시판
4. 4
   사진이 뜨는 글올린 사진이 게시판에서 바로 보임
5. 5
   영상이 재생되는 글게시판 안에서 유튜브가 그대로 재생
6. ✓
   그리고 가장 중요한 것막혔을 때 오류를 그대로 복사해 AI에게 물어보는 습관