← 포트폴리오 목록
중학생 진로탐색 인터랙티브 수업 플랫폼
중학교 진로탐색워크북 디지털화 요구사항(학생 워크북 작성, 교사 실시간 대시보드, 전자칠판 수업 화면, 역할 기반 접근 제어)을 기반으로 직접 구현한 프로젝트입니다.
▶ 라이브 데모 보기 ↗Overview
프로젝트 개요
중학교 진로탐색워크북 디지털화 요구사항(학생 워크북 작성, 교사 실시간 대시보드, 전자칠판 수업 화면, 역할 기반 접근 제어)을 기반으로 직접 구현한 프로젝트입니다. Supabase Realtime으로 교사-학생 간 실시간 동기화를 구현했습니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
Supabase Realtime과 RLS를 동시 활성화하면 subscription 필터 설정이 복잡해지는 리스크
channel 단위 필터(filter: 'class_id=eq.X')로 대응합니다
전자칠판 환경에서 WebSocket 연결 불안정 리스크
자동 재연결 로직과 오프라인 fallback UI를 구현하여 대응합니다
멀티 역할 권한 제어와 실시간 이벤트 처리 동시성 이슈 대응 계획 수립
핵심 기능 1
학생 워크북 작성 화면
핵심 기능 2
교사 실시간 대시보드
핵심 기능 3
전자칠판 수업 화면
핵심 기능 4
역할 기반 접근 제어
프로젝트 성과
Supabase Realtime + RLS 동시 적용 구조 설계Realtime subscription과 RLS 정책을 동시에 적용하여 학생별 데이터 격리를 유지하면서 교사-학생 실시간 동기화를 구현하는 아키텍처를 설계합니다.
3역할 JWT custom claims 기반 권한 체계student/teacher/admin 역할을 JWT에 삽입하고 Next.js middleware + Supabase RLS 이중 레이어로 권한을 검증하는 구조를 구축합니다.
전자칠판 전용 UI 최적화 설계1920px+ 대형 화면에서 Fullscreen API와 container query를 활용한 전자칠판 전용 레이아웃을 적용합니다.
멀티테넌시 school_id 격리 구조모든 테이블에 school_id를 FK로 설정하고 RLS에서 자동 필터링하는 멀티 학교 SaaS 데이터 격리 구조를 설계합니다.
Review
기술적 주안점
- Supabase RLS와 Realtime을 결합하여 학생별 데이터 격리와 교사 제어 신호 실시간 수신을 동시에 구현합니다
- Server Component와 Supabase Realtime을 조합하여 초기 로드 성능과 실시간 동기화를 모두 확보하는 하이브리드 구조를 설계합니다
- 전자칠판 전용 레이아웃과 Fullscreen API 포커스 모드를 구현하여 교실 환경에 특화된 수업 진행 UX를 설계합니다