기초 문법부터 고급까지, 단계별 자바 학습 퀴즈 플랫폼

JavaNyang 온라인 퀴즈 플랫폼 - 언제 어디서나 편리하게, 1:1 실시간 퀴즈 배틀!
개발기간: 2025.05 ~ 2025.07

배포 주소

서비스 링크 : hyunsuplee.github.io/JavaNyang/
PPT 링크 : JavaNyang PPT
시연 영상 : youtu.be/uUBhM42BH-0

시작 가이드

Installation

$ git clone [repository-url]
$ cd javanyang-project

$ npm install
$ npm start

---

팀원 소개

---

프로젝트 소개

JavaNyang은 자바 프로그래밍 학습을 위한 온라인 퀴즈 플랫폼입니다. 기초 문법부터 고급 개념까지 단계별 학습 시스템을 구성하여, 언제 어디서나 데스크탑 또는 모바일로 편리하게 학습할 수 있습니다. 1:1 실시간 퀴즈 배틀을 통해 몰입도와 학습 동기를 부여하고, 궁금한 점은 바로바로 채팅으로 소통할 수 있는 활발한 커뮤니티 기능을 제공합니다.

주제 선정 배경

• 혼자 학습하는 구조의 한계: 기존 학습서비스는 나홀로 학습하는 구조로 동기부여가 낮음
• 소통 없는 풀이 환경: 실시간으로 의견을 나눌 수 있는 커뮤니케이션 기능 부족
• 실시간 대전의 필요성: 경쟁을 통해 몰입감 있게 학습하는 환경
• 사용자 참여형 콘텐츠 부족: 사용자가 직접 문제를 만들 수 있는 기능이 필요하다고 판단

프로젝트 목표

• 온라인 자바 퀴즈 학습 환경 구축 - 기초부터 심화까지 단계별로 학습 시스템 제공
• 사용자 간 실시간 퀴즈 대전 기능 구현 - 몰입도를 높일 1:1 실시간 퀴즈 대전
• 랭킹 및 업적 기반의 동기 부여 시스템 개발 - 학습 성과를 시각화하고 경쟁 요소를 더해 지속적인 학습 유도
• 개인 퀴즈 데이터 기반 자기 주도 학습 지원 - 나의 학습 기록을 통해 부족한 영역을 스스로 점검 가능하도록 설계

차별화 포인트

• 퀴즈 중심 실시간 학습: 정적인 문서 위주의 W3Schools와 달리, 실시간 퀴즈를 통해 즉각적인 피드백과 몰입도 높은 학습 제공
• 1:1 퀴즈 대전 가능: 단순한 예제 학습을 넘어서, 사용자 간 실시간 대결을 통해 경쟁 및 스릴있는 학습
• 업적·랭킹 시스템 탑재: 학습 성취를 가시화하는 업적과 순위 시스템으로 지속적인 동기 부여 제공
• 개인 맞춤형 기록 분석: 사용자별 퀴즈 제출·정답률 등 데이터 기반 분석으로 부족한 영역을 진단하여 재학습 가능

---

Stacks 🐈

Language

Development Tools

Frameworks & Libraries

Backend & Database

Design & Planning

---

주요 기능 📦

⭐️ 카테고리 및 난이도별 퀴즈 풀이

• 주제(변수, 제어문 등)와 난이도(초급/중급/고급)별 퀴즈 선택
• 체계적인 단계별 학습 시스템

⭐️ 실시간 대전 및 채팅

• 사용자 간 실시간 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 스터디 그룹 퀴즈 대회 등 다양한 교육 활동에 접목

🎯 지속적인 자기 주도 학습 유도

업적·기록·피드백을 통해 스스로 학습 목표를 설정하고 반복 훈련하도록 유도

---

JavaNyang
You Can Enjoy Unlimited Java quiz

---

ⓒ 김환희 · 김예지 · 백유선