북깍스토어
활성북과학고 + 딸깍(바이브코딩) + 앱스토어 — 교사·학생·졸업생 모든 구성원의 앱을 담는 교내 앱스토어
bukstore-vert.vercel.app/Overview
What
북깍스토어는 경기북과학고등학교의 교내 앱스토어다. 교사, 학생, 졸업생 등 북과학고 모든 구성원이 직접 만든 웹 앱과 플랫폼을 등록하고, 구성원이 발견하고 평가하고 즐겨찾기할 수 있는 마켓플레이스다.
이름은 바이브코딩 방과후 수업 학생들과 함께 지었다. 북과학고 + 딸깍(바이브코딩을 뜻하는 학생들 은어) + 앱스토어. 프로젝트의 시작부터 학생 참여로 이루어진 상징적 에피소드다.
Why
세 가지 동기가 맞물렸다. 학생과 교사가 만든 앱이 있었지만 공유하고 발견할 통합 채널이 없었다. 개발 문화를 확산하고 성과를 공유하는 구조를 만들고 싶었다. 그리고 앱스토어 자체가 SW 교육 프로젝트이자 학생 참여형 플랫폼이었다.
How
Next.js와 Supabase로 구축한 풀스택 마켓플레이스다. 사용자가 앱을 제출하면 관리자 승인을 거쳐 게시된다. Framer Motion 기반 3D 카드 스택과 그리드 전환 뷰, 글래스모피즘 UI로 시각적 완성도를 높였다.
별점 시스템으로 인기 순위를 매기고, 피드백 시스템으로 개발자와 사용자가 소통하며, 명예의 전당으로 기여자를 인정한다. 17건의 보안 취약점을 일괄 수정하여 프로덕션 수준의 보안을 확보했다.
Impact
"우리 학교에 필요한 앱을, 우리 구성원이 직접 만들어 쓴다." 개발 결과물이 흩어지지 않고 한 플랫폼에서 발견되고 평가받는 구조가 만들어졌다. 교사가 일방적으로 만든 것이 아니라, 이름부터 학생과 함께 만들어가는 프로젝트다. 실제 학교에서 운영 중이다.
Architecture
아키텍처
스택
Next.js 16 (App Router) · React 19 · TypeScript 5 · Tailwind CSS 4 · Supabase (Postgres + Auth + Storage + RLS) · Zustand · Framer Motion
디렉토리 구조
src/
app/ # Next.js App Router 페이지 + API 라우트
components/ # 기능별 React 컴포넌트
hooks/ # 커스텀 훅 (useAuth)
lib/ # 유틸리티, Supabase 클라이언트, 상수
stores/ # Zustand 상태 관리
types/ # TypeScript 타입 정의
middleware.ts # 인증, 레이트 리밋
DB 테이블
- profiles: 사용자 프로필 (role, is_admin, social_links, 로그인 잠금)
- apps: 앱 등록 정보 (name, slug, url, description, status, star_count, view_count)
- categories: 앱 카테고리 8종
- stars: 사용자-앱 즐겨찾기
- feedback: 앱별 피드백 (유형별, 스레드 답글)
- board_posts: 게시판 글
- board_comments: 게시판 댓글
Storage 버킷
- app-icons (앱 아이콘, 2MB 제한)
- avatars (프로필 아바타)
주요 라우트
/홈 (추천/인기/최신 앱)/apps앱 목록 (카테고리 필터, 3D/그리드 뷰)/apps/[slug]앱 상세 + 피드백/hall-of-fame개발자 랭킹/board앱 요청 게시판/submit앱 등록/my대시보드/admin관리자 패널
인증
Supabase Email/Password, 이메일 인증 필수, 로그인 5회 실패 시 10분 잠금, 미들웨어 기반 보호 라우트.
Decisions
Decision 1: 앱 승인 워크플로
Context: 누구나 올릴 수 있으면 품질 관리가 안 되고, 승인 절차가 복잡하면 참여가 줄어든다. Decision: 제출 → pending → 관리자 승인/거부. 수정 시 다시 pending으로 전환하는 단순한 워크플로를 설계했다. Consequence: 품질 관리와 참여 장벽 사이의 균형을 잡았다.
Decision 2: 3D 카드 스택 + 글래스모피즘 UI
Context: 교내 앱스토어가 밋밋하면 학생들이 관심을 갖지 않는다. 시각적으로 눈에 띄어야 한다. Decision: Framer Motion 기반 3D 카드 스택/그리드 전환 뷰와 글래스모피즘 디자인을 적용했다. 터치 디바이스에서는 데스크톱 전용 효과를 분기 처리. Consequence: 시각적 완성도가 높아져 학생들의 관심을 끌었다. 터치/데스크톱 분기 처리가 실무적으로 중요했다.
Decision 3: 보안 선제 대응 (17건 취약점 수정)
Context: 학교 서비스라서 보안 사고가 나면 안 된다. 학생들이 개발에 참여하는 만큼 공격 표면도 넓다. Decision: SSRF 방어, Supabase Storage 업로드 제한, IP당 레이트 리밋, 로그인 잠금 등 17건을 일괄 수정했다. Consequence: 프로덕션 수준의 보안을 확보했고, 초기부터 보안을 적용하는 습관이 생겼다.
Lessons
배운 점
17건의 보안 취약점을 일괄 수정하면서 웹 보안의 중요성을 체감했다. SSRF 방어, Storage 업로드 제한, 레이트 리밋 등 선제적 보안 조치가 필요하다는 걸 배웠다. 특히 학생들이 사용하는 서비스이기 때문에 보안은 타협할 수 없는 영역이었다.
3D 카드 스택, 글래스모피즘, 커스텀 커서 파티클 등 실험적 UI를 직접 구현하면서 디자인 감각을 키웠다. 터치 디바이스에서 데스크톱 전용 효과를 분기 처리해야 한다는 실무적 교훈도 얻었다.
자동 OG 이미지 가져오기가 불안정해서 수동 아이콘 업로드로 전환한 경험이 있다. 외부 의존 기능은 반드시 fallback을 준비해야 한다.
이 프로젝트의 독특한 점
교사가 만든 플랫폼이지만 이름부터 학생이 지었다. 교사, 학생, 졸업생 모든 구성원이 앱을 올리고 평가하는 자생적 개발 생태계다.