하려던 것 📝
함께 연구하는 선생님들의 4주간 매일 학급 사진 업로드 미션을 추적하고, 팀별 누적 현황을 실시간으로 확인할 수 있는 대시보드를 만들고자 함. 엑셀이나 수동 집계 없이 선생님들이 직접 접속해 체크인하고, 관리자가 순위를 한눈에 볼 수 있는 웹 서비스 배포를 목표로 삼았음.
활용한 툴 ⚒️
Claude Sonnet 4.6: 기획 의도를 대화로 전달하는 것만으로 HTML/JS/CSS 전체 코드 생성 및 반복 개선에 활용함. Supabase MCP: DB 테이블 설계 및 생성, Storage 버킷 설정을 Claude가 직접 실행하는 데 활용함. GitHub Pages: 별도 서버 없이 무료로 정적 웹사이트를 배포하는 데 활용함.
진행 세부 내용 🔍
1️⃣ 기획 → 대시보드 첫 버전 생성
시도한 방법: "골드바 모으는 느낌으로 10명이 누적 체크인할 수 있는 대시보드 만들어줘"라는 한 줄 요청으로 시작함.
얻은 결과: 골드바 시각화, 순위 자동 정렬, 상위 5명 배지 표시가 포함된 대시보드가 즉시 생성됨.
2️⃣ Supabase DB 연동
시도한 방법: "DB 연동할 수 있어?"라고 질문하자 Claude가 Supabase MCP를 통해 직접 프로젝트 생성, teachers·checkins 테이블 생성, RLS 정책 설정까지 자동으로 처리함.
얻은 결과: 모든 기기에서 실시간 공유되는 DB 연동 완료. 로컬 스토리지 의존 없이 선생님들이 어느 기기에서나 동일한 데이터를 확인 가능해짐.
3️⃣ 팀 기능 추가
시도한 방법: "팀별로 나눌 수 있어? 팀 1개에 교사 10명으로"라고 요청함.
얻은 결과: teams 테이블이 추가되고 탭 기반 팀별 뷰, 전체 현황 카드, 팀 등록/관리 기능이 한 번에 구현됨.
4️⃣ 팀 이미지 업로드 기능 추가
시도한 방법: "팀 등록하면 이미지도 등록할 수 있게 해줘"라고 요청함.
얻은 결과: Claude가 Supabase Storage 버킷 생성과 RLS 정책까지 직접 설정하고, 팀 대표 이미지 업로드·미리보기·삭제 기능을 포함한 UI를 완성함.
5️⃣ GitHub Pages 배포
시도한 방법: 생성된 HTML 파일을 GitHub 저장소에 index.html로 업로드하고 Pages 설정을 활성화함.
얻은 결과: 선생님들에게 바로 공유 가능한 웹 대시보드 배포 완료.
시행착오 ⚠️
GitHub Pages 버튼 클릭 오류: 배포 후 팀 등록·관리 버튼이 동작하지 않는 문제가 발생함. 원인은 외부 CDN에서 Supabase JS를 로드하는 방식이 GitHub Pages의 CSP(보안 정책)에 의해 차단된 것이었음. Supabase JS를 esbuild로 번들링하여 HTML 파일 안에 직접 인라인으로 삽입하는 방식으로 해결함.
파일명 문제: mission-dashboard.html.html로 확장자가 중복 저장되어 404 오류가 발생함. 파일명을 index.html로 정확히 지정하여 해결함.
저장 방식 혼선: 크롬에서 Ctrl+S로 저장 시 폴더째로 저장되는 문제 발생. Ctrl+U로 소스 보기 후 전체 복사하거나, 크롬 저장 형식을 "웹페이지, HTML만"으로 선택하는 방식으로 해결함.
배운 점 📚
대화만으로 풀스택이 완성된다: DB 설계, API 연동, UI 구현, 배포까지 코드를 직접 작성하지 않고 대화로 요청하는 것만으로 전 과정이 완성됨. Supabase MCP 덕분에 Claude가 DB를 직접 만들고 설정까지 처리해주어 개발 지식이 없어도 실제 서비스를 만들 수 있음을 확인함.
작게 시작하고 대화로 확장하는 것이 효과적: 처음부터 모든 기능을 요구하지 않고, 기본 대시보드 → DB 연동 → 팀 기능 → 이미지 업로드 순으로 한 단계씩 추가 요 청하는 방식이 오류 없이 빠르게 완성하는 데 더 효과적이었음.
배포 환경 차이를 고려해야 한다: 로컬에서 잘 동작하던 코드가 GitHub Pages에서 동작하지 않는 CSP 이슈처럼, 개발 환경과 배포 환경의 차이에서 오는 문제를 인지하고 대응하는 것이 중요함을 배움.
향후 계획 🧭
주말 학급 구성 완료 미션 체크 기능을 별도로 추가하여 미션 종류를 다양화할 예정임. 미션 기간 종료 시 자동으로 최종 순위를 집계하고 결과를 공유하는 기능을 추가할 계획임. 선생님별 업로드 달력 뷰를 추가하여 어느 날 업로드했는지 한눈에 확인할 수 있도록 개선할 예정임.
