확장 (선택)
오늘 못해도 OK, 집에 가서 해도 OK. 시간 남는 분만 도전.
여기는 "오늘 못해도 OK, 집에 가서 해도 OK"인 단계입니다. 시간이 남으면 도전, 부담스러우면 건너뛰세요.
🚀 확장 4가지 — 우선순위 순
1. README 다듬기 + GitHub 정리 — 가장 쉽고 임팩트 큼
2. Vercel 배포 — 인터넷에 올려서 공유하기
3. Supabase 연동 — DB가 필요한 앱일 때
4. 🆕 익명 질문함 데모 앱 — DB 첫 경험, 1시간 안에 끝
확장 1 · README 다듬기 + GitHub 정리
가장 적은 시간 투자로 가장 큰 효과. 5분이면 끝.
README.md를 다듬어줘.
다음이 포함되게:
1. 앱 이름 + 한 줄 소개 (눈에 띄게)
2. 해결하는 문제 (2~3줄)
3. 실행 방법 (단계별 명령어)
4. 현재 기능 목록 (개발된 것만)
5. TODO — 다음에 추가할 기능
6. 스크린샷 자리 표시 ()
마지막에 Commit & Push까지 해줘.
확장 2 · Vercel 배포
만든 앱을 인터넷에 올려서 누구나 접속할 수 있게 합니다. GitHub 레포만 있으면 됩니다.
Vercel 배포 단계별 가이드
- vercel.com 접속 → 로그인 (GitHub 계정으로)
- "Add New..." → "Project" 클릭
- 오늘 만든 GitHub 레포 선택 → "Import"
- Framework Preset 자동 감지 (Next.js / Vite / Other 등)
- 환경 변수가 필요하면 "Environment Variables"에 입력
- "Deploy" 클릭 → 1~2분 대기
- 배포 완료되면 URL 받음 (예: my-app-xxx.vercel.app)
막힐 때: 빌드 에러 발생 시 Vercel 화면의 로그를 복사해서 Claude에게:
Vercel 배포에서 이런 에러가 났어:
[로그 붙여넣기]
원인 분석하고 해결해줘.
수정한 코드를 다시 Push할 수 있게 안내해줘.
확장 3 · Supabase 연동
DB가 필요한 앱일 때만 진행하세요. 예: 사용자 정보 저장, 여러 사람이 쓰는 앱, 데이터를 누적 저장하고 싶을 때.
💡 오늘 못해도 괜찮습니다
Supabase 연동은 처음 하면 30~60분 걸립니다. 워크숍 시간 안에 못 끝낼 가능성이 높아요. 가입까지만 해두고, 연동은 집에 가서 천천히 하는 것을 권장합니다.
Supabase 연동 단계별 가이드
1. Supabase 프로젝트에서 테이블 만들기
- supabase.com 로그인 → 프로젝트 선택
- 왼쪽 메뉴 "Table Editor" → "New table"
- 테이블 이름·컬럼 설정 (또는 SQL Editor로 CREATE TABLE)
2. API 키 가져오기
- 왼쪽 메뉴 "Project Settings" → "API"
- "Project URL"과 "anon public" 키 복사
- (절대 공개 금지 — GitHub에 직접 올리지 말 것)
3. Claude에게 연동 요청
Supabase 연동을 추가해줘.
내 Supabase 정보:
- URL: [Project URL]
- 키: [anon public 키]
- 테이블: [테이블명]
- 컬럼: [컬럼명들]
연동 방법:
1. .env 파일에 키 저장 (절대 GitHub에 안 올라가게 .gitignore 확인)
2. supabase-js 라이브러리 설치
3. 데이터 읽기·쓰기 함수 만들기
4. 기존 코드와 연결
5. 테스트 실행해서 데이터가 들어가는지 확인
CLAUDE.md에 "Supabase 키는 .env로 관리" 규칙도 추가해줘.
⚠️ .env 파일이 .gitignore에 포함되어 있는지 반드시 확인. 키가 GitHub에 올라가면 즉시 무효화해야 합니다.
💎 꿀팁 — Supabase는 Claude Code에게 손잡고 가자
Supabase 첫 연동은 정말 어렵습니다. 화면 어디서 뭘 클릭해야 하는지, 어떤 키를 어디서 가져오는지, 헷갈리는 게 한두 가지가 아니에요. 한 번에 다 하려 하지 말고, Claude Code에게 단계별로 자세히 물어보세요.
막힐 때 이렇게 물어보세요:
Supabase를 처음 써봐서 잘 몰라.
[지금 막힌 상황] 인데 어떻게 해야 해?
화면 어디를 클릭해야 하는지
초보자가 알 수 있도록 아주 자세히 단계별로 설명해줘.
필요하면 무엇이 보일지 예시도 알려줘.
예시 질문들:
- "Supabase에서 테이블 만들었는데 anon key를 어디서 찾아야 해?"
- "RLS(Row Level Security)가 뭐야? 켜야 해 꺼야 해?"
- "SQL Editor에서 CREATE TABLE 문이 에러나. 이 에러 분석해줘: [에러 메시지]"
- ".env 파일을 만들었는데 Claude Code가 못 읽는 것 같아. 확인 방법 알려줘"
💡 "잘 모른다"고 솔직히 말하면 Claude가 훨씬 친절하게 설명해줍니다. 부끄러워하지 마세요.
확장 4 · 익명 질문함 데모 앱 — 1시간 안에 DB 첫 경험
🎯 이번 데모 앱의 목표
"DB를 쓴다는 게 어떤 경험인지" 몸으로 익히는 것이 목표입니다. 완성도보다 "내가 만든 앱이 진짜 데이터를 저장하고 불러온다"는 감각이 핵심이에요. 1시간 안에 끝납니다.
왜 익명 질문함인가
- 오늘 바로 써먹음 — 만들고 나면 회고/Q&A 시간에 진짜로 사용 가능
- 익명이라 작성 부담 없음 — DB가 받는 첫 데이터가 진짜 사람의 진짜 질문
- 응용 폭이 넓음 — 수강생 질문함, 워크숍 피드백함, 익명 건의함 등으로 변형 가능
- DB의 핵심을 다 경험 — 데이터 저장(Create) + 불러오기(Read)
💭 잠깐 — 왜 DB(데이터베이스)를 써야 하나요?
📚 비유로 이해하기
DB가 없으면 우리 앱은 "기억상실증 환자"입니다. 누가 무슨 말을 했는지, 어떤 데이터가 있었는지 새로고침 한 번에 다 사라져요.
DB는 그 앱에 "기억"을 달아주는 것입니다. 사용자가 적은 글, 만든 데이터, 누른 좋아요... 모두 저장되어서 다음에 다시 와도 그대로 있어요.
DB 없는 앱 vs DB 있는 앱
| DB 없음 | DB 있음 (Supabase) | |
|---|---|---|
| 새로고침 | 데이터 사라짐 | 그대로 남아있음 |
| 여러 사람 사용 | 각자 따로 데이터, 공유 불가 | 모두 같은 데이터를 봄 |
| 예시 앱 | 계산기, 단순 변환기 | 방명록, Q&A, 회원 관리 |
이런 앱은 DB가 꼭 필요해요
- 여러 사람이 함께 쓰는 앱 (커뮤니티, 채팅, 게시판)
- 로그인이 필요한 앱 (계정 정보 저장)
- 시간이 지나도 데이터가 유지되어야 하는 앱 (가계부, 일기, 메모)
- 관리자가 데이터를 보고 분석하는 앱 (설문, 신청 관리)
이런 앱은 DB 없어도 OK
- 일회성 계산 도구 (BMI, 환율, 시간 계산기)
- 변환 도구 (이미지 → PDF, 단위 변환)
- 정보 제공 사이트 (회사 소개, 포트폴리오)
📋 익명 질문함 — 1시간 진행 흐름
| 시간 | 활동 |
|---|---|
| 0:00 ~ 0:15 | Supabase 가입 + 프로젝트 생성 + 테이블 만들기 |
| 0:15 ~ 0:25 | API 키 가져오기 + 새 폴더 만들기 |
| 0:25 ~ 0:50 | Claude Code로 앱 만들기 (코드는 아래 제공) |
| 0:50 ~ 1:00 | 테스트 + 동료가 작성해보기 + 공유 |
📌 Step 1. Supabase에서 테이블 만들기 (15분)
Step 1 상세 가이드 펼치기
1-1. Supabase 가입 (이미 가입한 분은 1-2로)
- supabase.com 접속
- 우측 상단 "Start your project" 또는 "Sign up" 클릭
- "Continue with GitHub" 클릭 → "Authorize Supabase"
1-2. 새 프로젝트 만들기
- 대시보드에서 "New Project" 클릭
- Organization은 자동 생성된 것 그대로
- Project name:
anonymous-questions또는 본인이 원하는 이름 (영문 소문자+하이픈) - Database Password: 강력하게 설정 → 반드시 메모 (다시 못 봄)
- Region: Northeast Asia (Seoul) 선택
- "Create new project" 클릭 → 2~3분 대기
1-3. 테이블 만들기 (UI에서 클릭으로)
- 왼쪽 사이드바 "Table Editor" 클릭
- 중앙의 "New table" 또는 "Create a new table" 클릭
- Name:
questions입력 - Enable Row Level Security (RLS) 체크박스가 켜져 있다면 일단 끄세요 (데모용)
⚠️ 실제 서비스에서는 RLS를 켜는 게 보안상 좋지만, 오늘은 단순화를 위해 끕니다.
- Columns 영역에서:
id,created_at은 기본으로 있음 — 그대로 두기- "Add column" 클릭하여
content추가- Type: text
- Default Value: 비워둠
- "Is Nullable" 체크 해제 (필수 입력으로)
- 하단 "Save" 클릭
✅ 1단계 완료 체크
Table Editor에서 questions 테이블이 보이고, 컬럼이 id / created_at / content 3개면 OK!
📌 Step 2. API 키 가져오기 (5분)
Step 2 상세 가이드 펼치기
- 왼쪽 사이드바 맨 아래 "Project Settings" (톱니바퀴 아이콘) 클릭
- 왼쪽 메뉴에서 "API" 클릭
- 화면에서 2개를 메모장에 복사:
- Project URL —
https://xxxxx.supabase.co형태 - anon public 키 —
eyJhbGc...로 시작하는 긴 문자열
- Project URL —
🔐 중요 — service_role 키는 절대 안 됨
같은 화면에 service_role 키도 보이지만, 그건 절대 클라이언트 코드에 넣지 마세요. 우리가 쓸 것은 anon public 키입니다. (브라우저에 노출돼도 안전)
📌 Step 3. 익명 질문함 앱 만들기 (25분)
Step 3 상세 가이드 펼치기 — 코드 포함
3-1. 새 폴더 만들기
- 바탕화면에
anonymous-questions폴더 생성 - VS Code에서 그 폴더 열기 (File → Open Folder)
3-2. Claude Code로 앱 만들기
VS Code 좌측 Claude 아이콘 클릭 → 아래 프롬프트 그대로 복사해서 입력:
익명 질문함 데모 앱을 만들고 싶어.
요구사항:
1. HTML 하나로 동작하는 단일 페이지
2. Supabase 연결 (CDN으로 supabase-js 불러오기)
3. 화면 구성:
- 상단: 익명으로 질문을 입력하는 textarea + "질문하기" 버튼
- 하단: 작성된 질문 목록 (최신순)
4. 기능:
- "질문하기" 누르면 questions 테이블에 INSERT
- 페이지 로드 시 모든 질문을 SELECT해서 표시
- 작성 시각도 함께 표시 (예: "3분 전")
5. 디자인:
- WOWD.LAB 컬러: Primary #50676A, Accent #F29B2F
- Pretendard 폰트 (CDN)
- 미니멀, 여백 충분히
- 모바일 반응형
내 Supabase 정보:
- URL: [여기에 Project URL 붙여넣기]
- anon key: [여기에 anon public 키 붙여넣기]
먼저 코드 전체를 index.html 하나로 만들어줘.
다 만들면 브라우저에서 어떻게 테스트하면 되는지 알려줘.
3-3. 만약 Claude가 제대로 못 만들면 — 참고 코드
Claude가 막히거나 시간이 부족할 때 아래 코드를 그대로 써도 됩니다. YOUR_SUPABASE_URL과 YOUR_SUPABASE_ANON_KEY만 본인 것으로 교체.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>익명 질문함</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard', sans-serif; background: #FAFAF8; padding: 24px; max-width: 600px; margin: 0 auto; color: #231F20; }
h1 { color: #50676A; font-size: 28px; margin-bottom: 8px; }
.subtitle { color: #888780; margin-bottom: 32px; }
textarea { width: 100%; min-height: 100px; padding: 16px; border: 1px solid #E8E5DF; border-radius: 8px; font-family: inherit; font-size: 15px; resize: vertical; }
textarea:focus { outline: none; border-color: #50676A; }
button { background: #F29B2F; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; margin-top: 12px; font-size: 15px; }
button:hover { background: #D6831E; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.question { background: white; padding: 16px; border-radius: 8px; margin-bottom: 12px; border-left: 3px solid #50676A; }
.question-time { color: #888780; font-size: 13px; margin-top: 8px; }
.questions-title { font-size: 18px; font-weight: 600; margin: 32px 0 16px; color: #50676A; }
.empty { color: #888780; text-align: center; padding: 32px; }
</style>
</head>
<body>
<h1>익명 질문함</h1>
<p class="subtitle">이름 없이 자유롭게 질문해주세요.</p>
<textarea id="content" placeholder="질문을 입력하세요..."></textarea>
<button onclick="submitQuestion()">질문하기</button>
<div class="questions-title">받은 질문</div>
<div id="questions"></div>
<script>
// Supabase 클라이언트 초기화
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// 질문 작성
async function submitQuestion() {
const content = document.getElementById('content').value.trim();
if (!content) {
alert('질문을 입력해주세요.');
return;
}
const { error } = await supabase
.from('questions')
.insert([{ content }]);
if (error) {
alert('저장 실패: ' + error.message);
return;
}
document.getElementById('content').value = '';
loadQuestions();
}
// 질문 목록 불러오기
async function loadQuestions() {
const { data, error } = await supabase
.from('questions')
.select('*')
.order('created_at', { ascending: false });
if (error) {
console.error(error);
return;
}
const container = document.getElementById('questions');
if (data.length === 0) {
container.innerHTML = '<div class="empty">아직 질문이 없어요. 첫 질문을 남겨보세요!</div>';
return;
}
container.innerHTML = data.map(q => `
<div class="question">
<div>${escapeHtml(q.content)}</div>
<div class="question-time">${timeAgo(q.created_at)}</div>
</div>
`).join('');
}
// HTML 이스케이프 (XSS 방지)
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// "3분 전" 형태로 변환
function timeAgo(dateStr) {
const diff = (Date.now() - new Date(dateStr)) / 1000;
if (diff < 60) return '방금 전';
if (diff < 3600) return `${Math.floor(diff / 60)}분 전`;
if (diff < 86400) return `${Math.floor(diff / 3600)}시간 전`;
return `${Math.floor(diff / 86400)}일 전`;
}
// 페이지 로드 시 질문 불러오기
loadQuestions();
</script>
</body>
</html>
3-4. 테스트하기
- 위 코드를
index.html파일로 저장 - VS Code에서 Live Server 확장 설치 (없으면)
- index.html 우클릭 → "Open with Live Server"
- 브라우저가 열리면 질문 입력 → "질문하기" 클릭
- 아래 목록에 내가 쓴 질문이 뜨면 성공! 🎉
📌 Step 4. 동료에게 공유 + 같이 써보기 (10분)
Step 4 상세 가이드 펼치기
한 사람의 익명 질문함을 모두 같이 쓰면 더 재미있어요. 한 분 노트북에서 호스트로 띄우거나, 빠르게 배포해서 URL을 공유하세요.
방법 1. 같은 와이파이 안에서 공유 (가장 빠름)
- 호스트 노트북에서 Live Server 실행 (이미 실행 중)
- 터미널에서 본인 IP 주소 확인:
- Windows:
ipconfig→ IPv4 주소 - Mac:
ifconfig | grep inet
- Windows:
- 예:
192.168.0.5:5500같은 주소를 동료에게 공유 - 동료들이 그 주소로 접속해서 질문 작성
- 호스트 화면에서 새로고침하면 다 모인 질문이 보임!
방법 2. Vercel로 빠른 배포 (5분)
- 위 "확장 2 · Vercel 배포" 가이드 그대로 따라하기
- 배포된 URL을 카톡방에 공유
- 모두가 같은 URL로 접속해서 질문 작성
🎉 이 순간이 진짜 마법
동료들이 작성한 질문이 내 화면에 실시간으로 쌓이는 걸 보면 — "아, 이게 DB가 하는 일이구나"가 몸으로 들어옵니다. 이 감각이 오늘 가장 중요한 학습 자산입니다.
🚀 다음 단계 — 확장 아이디어
오늘 데모를 끝낸 분들은 집에 가서 아래 기능을 추가해보세요. 모두 Claude Code에게 한 줄로 요청 가능합니다.
| 기능 | 난이도 | 응용 예 |
|---|---|---|
| 좋아요 카운트 | ⭐ | 좋은 질문에 공감 표시 |
| 답변 달기 | ⭐⭐ | Q&A 게시판으로 확장 |
| 카테고리 분류 | ⭐⭐ | 주제별로 정리 |
| 관리자 페이지 | ⭐⭐⭐ | 부적절 질문 숨기기 |
| 실시간 업데이트 | ⭐⭐⭐ | Supabase Realtime으로 자동 갱신 |
| 본인 업무에 응용 | — | 강사 워크숍 피드백함, 익명 건의함, 수강생 질문함 |
💡 응용 — 본인 프로젝트로 옮기기
오늘 만든 익명 질문함은 Supabase 연동의 "최소 동작 모델"입니다. 본인이 만들고 있는 프로젝트에서 DB를 추가하고 싶다면:
- 1. 본인 프로젝트의 Supabase에서 필요한 테이블 만들기
- 2. 위 코드의
questions를 본인 테이블명으로 교체 - 3. 컬럼명을 본인 데이터에 맞게 수정 (
content→title,description등) - 4. 나머지 로직은 거의 같음
막히면 Claude Code에게: "이 익명 질문함 코드를 참고해서 내 [프로젝트명]에 적용하는 방법 알려줘"
🆕 DB 첫 경험을 위한 별도 가이드가 있어요
Supabase를 처음 셋업하고 DB와 연결되는 진짜 앱을 만들고 싶다면 — 다음 페이지의 "④ WOWVote 데모"를 추천합니다. 이미 만들어진 코드를 받아서 본인 Supabase에 연결만 하는 실습이라 1시간 안에 끝나요.