JavaNyang 온라인 퀴즈 플랫폼 - 언제 어디서나 편리하게, 1:1 실시간 퀴즈 배틀!
개발기간: 2025.05 ~ 2025.07
서비스 링크 : hyunsuplee.github.io/JavaNyang/
PPT 링크 : JavaNyang PPT
시연 영상 : youtu.be/uUBhM42BH-0
$ git clone [repository-url]
$ cd javanyang-project$ npm install
$ npm startJavaNyang은 자바 프로그래밍 학습을 위한 온라인 퀴즈 플랫폼입니다. 기초 문법부터 고급 개념까지 단계별 학습 시스템을 구성하여, 언제 어디서나 데스크탑 또는 모바일로 편리하게 학습할 수 있습니다. 1:1 실시간 퀴즈 배틀을 통해 몰입도와 학습 동기를 부여하고, 궁금한 점은 바로바로 채팅으로 소통할 수 있는 활발한 커뮤니티 기능을 제공합니다.
- 혼자 학습하는 구조의 한계: 기존 학습서비스는 나홀로 학습하는 구조로 동기부여가 낮음
- 소통 없는 풀이 환경: 실시간으로 의견을 나눌 수 있는 커뮤니케이션 기능 부족
- 실시간 대전의 필요성: 경쟁을 통해 몰입감 있게 학습하는 환경
- 사용자 참여형 콘텐츠 부족: 사용자가 직접 문제를 만들 수 있는 기능이 필요하다고 판단
- 온라인 자바 퀴즈 학습 환경 구축 - 기초부터 심화까지 단계별로 학습 시스템 제공
- 사용자 간 실시간 퀴즈 대전 기능 구현 - 몰입도를 높일 1:1 실시간 퀴즈 대전
- 랭킹 및 업적 기반의 동기 부여 시스템 개발 - 학습 성과를 시각화하고 경쟁 요소를 더해 지속적인 학습 유도
- 개인 퀴즈 데이터 기반 자기 주도 학습 지원 - 나의 학습 기록을 통해 부족한 영역을 스스로 점검 가능하도록 설계
- 퀴즈 중심 실시간 학습: 정적인 문서 위주의 W3Schools와 달리, 실시간 퀴즈를 통해 즉각적인 피드백과 몰입도 높은 학습 제공
- 1:1 퀴즈 대전 가능: 단순한 예제 학습을 넘어서, 사용자 간 실시간 대결을 통해 경쟁 및 스릴있는 학습
- 업적·랭킹 시스템 탑재: 학습 성취를 가시화하는 업적과 순위 시스템으로 지속적인 동기 부여 제공
- 개인 맞춤형 기록 분석: 사용자별 퀴즈 제출·정답률 등 데이터 기반 분석으로 부족한 영역을 진단하여 재학습 가능
- 주제(변수, 제어문 등)와 난이도(초급/중급/고급)별 퀴즈 선택
- 체계적인 단계별 학습 시스템
- 사용자 간 실시간 1:1 퀴즈 대전
- 채팅을 통한 재미와 몰입도 높은 경쟁 학습
- 업적, 랭킹, 정답률 분석을 통한 성취감 자극
- 꾸준한 학습을 유도하는 동기 부여 시스템
- 직접 퀴즈를 만들고 공유할 수 있는 기능
- 학습자 중심의 커뮤니티 기반 콘텐츠 활성화
-
2025.05.07 - 2025.05.21: 프로젝트 기획 & UI 설계
- 프로젝트 주제 선정 및 컨셉 정의
- 피그마를 활용한 UI/UX 화면 설계
- 핵심기능 기획 및 요구사항 정의
- 사용자 플로우 및 시스템 구조 설계
-
2025.05.21 - 2025.06.19: 개발 & 구현
- Supabase 데이터베이스 구축
- 테이블 생성 및 관계 설정
- 실시간 기능을 위한 RLS 정책 설정
- React 컴포넌트 개발
-
2025.06.19 - 2025.07.10: 마무리 & 발표 준비
- 최종 기능 구현 및 통합 테스트
- 버그 수정 및 성능 최적화
- 발표 자료 제작 및 발표 준비
- 프론트엔드 - React + Vite: 빠른 개발과 핫 리로딩을 지원하는 Vite 기반의 React SPA 구조로 사용자 인터페이스 구성
- 백엔드 서비스 - Supabase: 인증, 실시간 데이터베이스, 스토리지, 서버리스 함수까지 통합 제공하는 BaaS 플랫폼 활용
- 실시간 기능 - Supabase Realtime: 웹소켓 기반 실시간 퀴즈 대전 및 채팅 기능으로 사용자 간 상호작용 구현
- 데이터 관리 및 분석 - 퀴즈 통계 시스템: 퀴즈별 정답률, 제출 수, 유저 기록 등을 수집 및 시각화해 맞춤형 학습 피드백 제공
- Mobile & Tablet: 내 손안의 자바 학습실 - "언제 어디서나, 5분이면 충분합니다." 바쁜 일상 속에서도 한 손으로 즐기는 실시간 퀴즈 대전!
- Desktop: 몰입감 있는 풀스크린 학습 경험 - "더 넓게, 더 깊이 배우다." 넉넉한 화면과 정교한 조작으로 퀴즈, 통계, 대전까지 한눈에!
project/
├── public/
│ ├── index.html # HTML 템플릿 파일
│ └── favicon.ico # 아이콘 파일
├── src/
│ ├── assets/ # 이미지, 폰트 등 정적 파일
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── hooks/ # 커스텀 훅 모음
│ ├── pages/ # 각 페이지별 컴포넌트
│ ├── App.js # 메인 애플리케이션 컴포넌트
│ ├── index.js # 엔트리 포인트 파일
│ ├── index.css # 전역 css 파일
│ └── supabaseConfig.js # supabase 인스턴스 초기화 파일
├── package-lock.json # 정확한 종속성 버전이 기록된 파일
├── package.json # 프로젝트 종속성 및 스크립트 정의
├── .gitignore # Git 무시 파일 목록
└── README.md # 프로젝트 개요 및 사용법
퀴즈와 대전을 통한 참여형 학습으로, 수동적인 이론 암기에서 벗어나 실전 감각 향상
정답률, 제출 이력 등 데이터를 기반으로 사용자별 약점을 보완하는 맞춤 전략 가능
실시간 대전과 랭킹 시스템을 활용한 교내 or 스터디 그룹 퀴즈 대회 등 다양한 교육 활동에 접목
업적·기록·피드백을 통해 스스로 학습 목표를 설정하고 반복 훈련하도록 유도