세상에 내보내고 운영하기

시즌 1의 4강에서 처음 배포를 했을 때를 기억하나요. 페이지 한 장을 인터넷에 올리고, 폰으로 열어보고, 친구에게 주소를 보냈죠.

그때 올린 건 전단지였어요. 오늘 올리는 건 가게예요. 데이터베이스가 붙어 있고, 로그인이 있고, 방문자가 글을 남기는 가게요. 개업일입니다.

절차는 시즌 1과 거의 같아요. 같은 버튼을 누르는데 무게가 달라요 — 그리고 하나, 개업 전에 반드시 해야 하는 점검이 생겼어요.

오늘 만들 것

진짜 주소로 운영되는 내 블로그. 그리고 이 시즌의 마지막 기술: 공개해도 되는 것과 절대 안 되는 것을 구분하는 눈.

준비물

• 시즌 5의 4강까지 마친 상태
• 35분
• GitHub 계정과 Cloudflare 계정 (시즌 1에서 만든 그것)
• 폰

따라 하기

1. 개업 전 점검 — 오늘의 진짜 수업

시즌 1에서는 올리기 전에 점검할 게 없었어요. 파일이 전부 공개용이었으니까요.

지금은 달라요. 우리 코드에는 열쇠가 들어 있어요. 배포하면 코드가 통째로 공개되니, 공개돼도 되는 열쇠만 들어 있는지 확인해야 해요.

이 블로그를 GitHub에 올리고 Cloudflare Pages로 배포하기 전에,
보안 점검을 먼저 해 줘:

1. 프로젝트 전체에서 sb_secret_ 이나 service_role 같은 비밀 키가
   코드에 들어 있지 않은지 검색해서 확인해 줘
2. 지금 코드에 있는 Supabase 공개 키(sb_publishable_...)가 왜
   공개돼도 괜찮은지, 내가 남에게 설명할 수 있게 두 문장으로 정리해 줘
3. data.js.bak처럼 배포에 필요 없는 파일이 있으면 알려 줘
4. 문제가 없으면 git 저장점을 만들고, GitHub에 올리는 것까지 진행해 줘
   (저장소 이름: my-blog, 공개 저장소)

2번의 답을 소리 내어 읽어보세요. 대략 이런 내용일 거예요 — "이 키로 할 수 있는 일은 RLS 정책이 허용한 것뿐이다. 읽기는 어차피 공개고, 쓰기는 로그인을 요구한다."

이 두 문장을 남에게 설명할 수 있으면, 이 시즌의 보안 수업은 통과예요. 반대로 Secret 키(sb_secret_로 시작)는 정책을 무시하는 만능 열쇠라서 절대 코드에 넣으면 안 돼요. 우리는 처음부터 안 썼죠 — 2강에서 "복사하지 마세요"라고 한 게 이것 때문이에요.

2. 가게를 열어요

시즌 1의 4강과 같은 절차예요. 기억을 더듬으면서 해보세요.

1. dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git
2. my-blog 저장소를 선택
3. 빌드 설정은 전부 비워둔 채 Save and Deploy — 우리는 빌드할 게 없어요. 순수 HTML이니까요. 1강의 "프레임워크 금지"가 여기서 상을 줘요.

1~2분 뒤 주소가 나와요. my-blog-xxx.pages.dev.

3. 열자마자 점검 네 가지

새 주소에서 차례로 확인하세요.

• 글 목록이 보인다 (데이터베이스 연결이 세상에서도 동작)
• 댓글이 달린다 (아무 글에나 하나 남겨보세요)
• 시크릿 창에서 write.html에 못 들어간다 (출입증이 세상에서도 동작)
• 로그인하면 글쓰기가 된다

넷 다 통과하면 개업 완료예요.

4. 오늘의 순간 — 침대에서 발행

폰으로 새 주소를 여세요. 로그인하고, 글을 한 편 쓰세요. 짧아도 돼요. "개업했습니다" 한 줄이라도요.

발행 버튼을 누르는 순간, 그 글은 전 세계 어디서든 보여요.

시즌 1에서는 폰으로 보기만 했어요. 오늘은 폰으로 씁니다. 노트북 없이, 침대에 누워서, 진짜 주소로 운영되는 내 블로그예요. 이게 정적 페이지와 살아있는 앱의 차이고, 이 시즌 전체가 만든 차이예요.

5. 운영 — 정직하게 세 가지

가게를 열었으니 주인이 알아야 할 것들이에요.

절전 모드가 있어요. Supabase 무료 프로젝트는 일주일쯤 데이터베이스에 아무 활동이 없으면 잠들어요. 잠들면 블로그에 "글을 불러오지 못했어요"가 떠요(2강에서 이 문구를 만들어둔 이유예요 — 빈 화면이 아니라 안내가 뜨죠). 죽은 게 아니에요. 대시보드에 들어가면 "This project is currently paused" 안내와 Resume project 버튼이 있고, 누르면 1분쯤 뒤 깨어나요. 데이터는 그대로고요. 다만 안내문에 복구 가능 기한이 함께 적혀 있어요 — 그 기한을 넘기면 복구는 막히고 데이터 다운로드만 가능해져요. 글을 꾸준히 쓰면 잠들 일이 없고, 쉬어갈 때는 백업을 해두세요.

백업은 한 번의 클릭이에요. Table Editor에서 posts 테이블을 열고 CSV로 내보내기를 누르면 글 전체가 파일 하나로 내려와요. 한 달에 한 번이면 충분해요.

고치고 → 저장하고 → 올리면 자동 배포예요. 시즌 1에서 배운 흐름 그대로. 코드를 고치면 GitHub에 올리는 것으로 끝나요. Cloudflare가 알아서 새 버전을 배포해요.

6. 확장 지도 — 필요가 먼저

개업하고 나면 하고 싶은 게 줄을 설 거예요. 급한 순서가 아니라 필요해진 순서로 하세요. 시즌 4의 결론 그대로 — 필요가 먼저, 도구가 나중.

• 내 도메인 연결 — pages.dev 주소가 부끄러워질 때. Cloudflare에서 도메인을 사면 몇 번의 클릭으로 붙어요 (연 2만 원쯤).
• 글 수정·삭제 — 오타 때문에 Table Editor에 들어가는 게 귀찮아질 때. "write.html에 수정 기능을 붙여 줘. RLS 정책도 같이"면 시작돼요.
• 구글 로그인 — 비밀번호가 귀찮아질 때. Supabase가 지원하지만 구글 쪽 설정이 좀 있어요.
• 댓글 스팸 대응 — 스팸이 실제로 왔을 때. 그전엔 하지 마세요.

막혔을 때

배포된 사이트에 "글을 불러오지 못했어요"가 떠요. 내 컴퓨터에서는 되는데 배포만 안 되면, 십중팔구 Supabase가 절전 모드예요. 대시보드에서 Resume project를 누르세요. 그게 아니면 "배포된 주소에서 브라우저 콘솔 에러를 확인하는 법을 알려 줘"라고 시키세요.

GitHub에 올리다 인증이 막혀요. 시즌 1에서도 만난 문제예요. "GitHub 인증이 안 돼. VS Code의 GitHub 로그인으로 해결하는 법을 알려 줘."

Cloudflare가 빌드 실패라고 해요. 빌드 설정을 비웠는지 확인하세요. 뭔가 채워져 있으면 지우고 다시 배포하세요. HTML 한 묶음은 빌드할 게 없어요.

pages.dev 주소가 마음에 안 들어요. 프로젝트 이름을 바꾸면 주소도 바뀌어요. Pages 프로젝트 설정에서 이름을 바꾸거나, 도메인을 사서 붙이세요(확장 지도 참고).

배포한 주소를 남에게 보내기 겁나요. 시즌 1 때도 그랬죠. 그때 배운 문장을 다시 — 완벽해서 보여주는 게 아니라, 보여줘서 완벽해져요. 게다가 이번엔 방문자가 댓글로 답할 수 있어요.

마무리 체크

나가기 전에 하나씩 확인해요:

• 배포 전 점검에서 비밀 키가 없는 걸 확인했어요
• 공개 키가 왜 공개돼도 되는지 두 문장으로 설명할 수 있어요
• my-blog-xxx.pages.dev 주소가 생겼어요
• 열자마자 점검 네 가지를 전부 통과했어요
• 폰으로 로그인해서 글을 발행했어요 ← 오늘의 순간
• 절전 모드가 뭔지, 어떻게 깨우는지 알아요

다음은 어디로

시즌 5 완주예요. 시즌 1~4가 에이전트 다루는 법을 남겼다면, 이 시즌은 앱을 만들어 본 경험을 남겼어요. 화면과 데이터를 분리하고, 권한을 정책으로 지키고, 남의 입력을 의심하고, 공개할 것과 감출 것을 구분하는 — 만드는 사람의 감각이요.

이제 제일 중요한 걸 하세요. 그 블로그에 글을 쓰는 거예요. 도구는 완성됐고, 채우는 건 글이에요.

사이사이 읽을거리는 단편 레슨에 있어요. 특히 이 블로그를 더 키우고 싶다면 사람들이 쓰는 웹앱 만들기 아카이브가 다음 결이에요.