한줄 요약
> 지난 세션에서 만든 "할 일 대시보드"(정적 HTML 한 장짜리 사이트)에, Claude Code("제나비서")와 함께 Supabase 연동 가이드를 따라가며 실제로 데이터가 저장되는 "방명록" 기능을 붙이고, 이어서 LLM 위키 가이드를 따라 AI가 계속 정리해주는 개인 지식창고까지 세팅한 이야기.
시작 계기
지피터스 스터디 Session 2 추가자료 두 개를 연이어 진행했습니다.
> "1주차에서 만든 정적 사이트를 데이터베이스와 연결해서 동적 사이트로 만들자" (Supabase 편)
> "AI가 마크다운 파일로 스스로 정리해나가는 지식창고를 만들자" (LLM 위키 편)
저는 지난 세션에서 이미 Vercel 배포까지 끝낸 "할 일 대시보드"가 있었는데, 그 사이트는 Next.js가 아니라 파일 하나짜리 정적 HTML로 만들어져 있었습니다. 가이드는 Next.js 프로젝트를 전제로 쓰여 있어서, 그대로 따라가지지 않는 부분들이 있었습니다. 그 지점들을 어떻게 풀었는지가 이 글의 핵심입니다.
작업 과정 (시간순)
STEP 1. Supabase 프로젝트 만들기
supabase.com에서 깃허브 계정으로 로그인하고 새 프로젝트를 생성했습니다. 처음 써보는 화면이라 "조직(Organization) 만들기"라는 낯선 중간 단계가 나와서 잠깐 멈췄지만, Personal 타입을 선택하고 넘어가면 되는 정상적인 흐름이었습니다.
STEP 2. 방명록 저장용 표(테이블) 만들기
Supabase의 SQL Editor에 아래와 같은 뼈대의 쿼리를 붙여넣어 실행했습니다.
create table guestbook (
id bigint generated always as identity primary key,
name text not null,
message text not null,
created_at timestamptz not null default now()
);
alter table guestbook enable row level security;
-- 읽기는 누구나 허용, 쓰기는 빈 이름/빈 메시지만 차단하는 정책 추가
읽기는 누구나 가능하지만 수정·삭제는 아무도 못 하게 막는 보안 설정(RLS)까지 이 단계에서 함께 걸어두었습니다.
STEP 3. 코드 작업 — Next.js가 아니라서 오히려 더 단순해짐
여기서 원래 가이드와 실제 상황이 갈렸습니다. 가이 드는 .env.local 파일, NEXT_PUBLIC_ 환경변수, Vercel 환경변수 재배포 같은 Next.js 전용 절차를 안내하지만, 제 사이트는 빌드 과정이 없는 순수 정적 페이지였습니다. 그래서 Claude Code가 접속 열쇠(Project URL, anon key)를 별도 환경변수 파일이 아니라 새로 만든 guestbook.html 파일 안에 바로 넣는 방식으로 단순화해서 처리했습니다. (참고: anon key는 원래 브라우저에 노출돼도 안전하도록 설계된 "공개용 열쇠"라 이렇게 넣어도 문제가 없습니다.)
STEP 4. 로컬 테스트 → 깃허브 업로드 → Vercel 자동 재배포
guestbook.html 파일을 더블클릭해서 로컬에서 먼저 테스트하고, 이름·메시지가 목록에 바로 뜨는 걸 확인한 뒤 깃허브에 푸시했습니다. Vercel이 깃허브 푸시를 감지해서 자동으로 재배포했고, 별도 설정 없이 실제 배포 주소에서도 동일하게 작동하는 것까지 확인했습니다.
STEP 5. 이어서 — 나만의 AI 지식창고(LLM 위키) 세팅
두 번째 가이드를 이어서 진행해, raw/(원본 자료) · wiki/(AI가 정리한 요약 페이지) · SCHEMA.md(운영 규칙) 구조로 개인 지식창고를 만들었습니다. 이후 실제로 갖고 있던 개인 학습 자료 일부를 넣어 Claude Code가 요약 페이지를 자동으로 만들고 서로 링크로 연결해주는 것까지 테스트했습니다. (자료 내용 자체는 개인적인 것이라 이 글에는 담지 않습니다.)
막혔던 순간 TOP 5
#
상황
원인
해결
1
Supabase에서 "New Project" 눌렀는데 "조직 만들기" 화면이 나옴
Supabase가 처음 쓰는 계정에는 프로젝트보다 먼저 조직을 만들라고 요구함
Personal 타입 선택 후 계속 진행 (정상 흐름)
2
API 키 화면에 "anon key"가 안 보이고 "Publishable key"만 보임
Supabase가 최근 키 체계를 새 이름으로 바꿈
화면 상단의 "Legacy anon, service_role API keys" 탭에서 기존 방식의 키를 찾음
3
Project URL을 어디서 찾는지 못 찾음
최신 UI에서 API 키 화면과 프로젝트 URL 표시 위치가 분리됨
브라우저 주소창의 프로젝트 고유번호로 URL을 직접 조합 (https://[고유번호].supabase.co)
4
가이드의 환경변수·재배포 절차가 내 사이트에 그대로 안 맞음
가이드는 Next.js 전제, 실제 사이트는 정적 HTML
접속 열쇠를 HTML 파일에 직접 삽입하는 방식으로 단순화 (anon key라 노출돼도 안전)
5
원본 문서(.docx)를 AI가 그대로 못 읽음
docx는 바이너리 파일이라 텍스트 도구로 직접 열리지 않음
파이썬으로 문서 안의 텍스트만 추출하는 방식으로 우회
핵심 팁
1. 가이드가 전제한 기술과 내 프로젝트가 다를 수 있다는 걸 알고 있으면 당황하지 않습니다. Next.js 전용 가이드라도, AI가 실제 프로젝트 구조(정적 사이트 등)에 맞게 알아서 더 단순한 방법으로 조정해줄 수 있습니다.
2. Supabase의 "anon key"와 "service_role key"는 완전히 다른 물건입니다. anon key는 공개돼도 되는 열쇠, service_role은 절대 노출하면 안 되는 마스터 열쇠라는 것만 기억하면 됩니다.
3. 서비스의 화면 구성은 계속 바뀝니다. 가이드에 적힌 이름(anon key)이 화면에 안 보여도, 대부분 "Legacy" 같은 이름의 탭에 예전 방식이 남아있는 경우가 많습니다.
결과 / 임팩트
정적 대시보드에 실제로 데이터가 저장·유지되는 "방명록" 기능 추가 완료, 배포 사이트에서도 동일하게 작동 확인
보안 설정(RLS)까지 적용되어 있어 아무나 남의 글을 고치거나 지울 수 없는 상태로 완성
raw/wiki/SCHEMA.md구조의 개인 지식창고 기반을 만들어, 앞으로 자료를 계속 쌓아나갈 수 있는 틀 확보
향후 계획
[ ] 지식창고에 개인 자료 mirsa frime 지식을 순차적으로 더 넣어보기
[ ] 오토프라임 업무 지식도 비슷한 위키 구조로 정리할지 검토
기술 스택: HTML / Vanilla JavaScript, Supabase(PostgreSQL 기반 백엔드), GitHub + Vercel(자동 배포)
사용 도구: Claude Code (Sonnet 5)
