1. 프로젝트 개요
- 프로젝트 명: CS Arena (CS 아레나)
- 한 줄 소개: “눈으로만 보던 CS 지식을 말로 설명하고(Speak), 가르치고(Teach), 경쟁하며(Battle) 체득하는 AI 기반 인터랙티브 학습 플랫폼”
- 기획 의도 및 핵심 가치
- 본 프로젝트는 기존의 수동적인 ‘주입식 공부(Input)’ 방식에서 벗어나, ‘능동적인 인출(Output)’ 경험을 제공하는 데 집중합니다.
- Active Output (능동적 인출): 텍스트뿐만 아니라 **음성(Voice)**을 통해 실제 면접처럼 소리 내어 답변하며 지식을 체화합니다.
- Meta-Cognition (메타인지 향상): AI 학생에게 개념을 설명하는 **‘파인만 학습법(AI 과외하기)‘**을 통해 내가 무엇을 알고 모르는지 명확히 파악합니다.
- Gamification (동기 부여): 혼자 하는 공부의 지루함을 없애기 위해 실시간 배틀과 포인트 경제 시스템을 도입하여 지속적인 학습 동기를 부여합니다.
- 본 프로젝트는 기존의 수동적인 ‘주입식 공부(Input)’ 방식에서 벗어나, ‘능동적인 인출(Output)’ 경험을 제공하는 데 집중합니다.
- 타겟 사용자
- 기술 면접을 앞두고 말하기 연습이 필요한 취업 준비생
- CS 이론이 머릿속에서 맴돌기만 하고 정리가 안 되는 전공자/비전공자
- 가볍게 CS 지식을 복습하고 싶은 개발자
2. 기획 배경 (Why?)
“Input 중심의 학습에서, Output 중심의 검증으로”
- 문제 의식 (Pain Point):
- 수동적 학습의 한계: 대부분의 CS 학습은 책 읽기, 강의 듣기 등 ‘입력(Input)‘에만 치중되어 있어, 막상 면접장이나 실무에서 설명하려 하면 말문이 막히는 ‘지식의 착각’ 상태에 빠지기 쉽습니다.
- 단조로운 아웃풋: 기존의 ‘백지 복습’ 툴들은 단순 텍스트 입력에 그쳐, 실제 면접과 같은 입체적인 훈련이 불가능합니다.
- 고립된 학습 환경: 혼자 하는 공부는 피드백이 없어 내 설명이 맞는지 알 수 없고, 동기 부여가 지속되기 어렵습니다.
- 해결 방안 (Solution):
- Multi-modal Output: 텍스트뿐만 아니라 **음성(Voice)**을 통해 직접 소리 내어 설명하는 훈련을 제공하여 학습 효과를 극대화합니다.
- Active Interaction: 혼자 쓰는 백지 노트가 아니라, ‘집요하게 질문하는 AI 학생’ 또는 **‘실전 대결 상대’**와의 상호작용을 통해 메타인지 능력을 높입니다.
- Gamification & Reward: 학습(출석, 대결 승리, 커뮤니티 기여)을 포인트로 즉각 보상하여 지속적인 향상심을 자극합니다.
3. 핵심 기능 명세 (Key Features - MVP Scope)
A. [Training] 스마트 백지 노트 (서술형 학습)
- 데이터: DB에 저장된 서술형(Descriptive) 질문 데이터셋 활용.
- 학습 방식:
- 랜덤 주제(예: “프로세스와 스레드의 차이”) 제시.
- 사용자는 음성(STT) 또는 텍스트로 답변 입력.
- AI 피드백:
- 사용자의 답변과 모범 답안을 비교 분석.
- 누락된 핵심 키워드 지적 및 논리적 오류 교정.
- 점수에 따른 포인트 차등 지급.
B. [Role-Play] AI 학생 과외하기 (심화 학습)
- 개념: “가장 완벽한 공부법은 남을 가르치는 것이다 (파인만 학습법).”
- 시나리오:
- AI 페르소나: “저는 이제 막 코딩을 배우기 시작한 비전공자 신입생이에요. 쉽게 설명해 주세요.”
- 진행: 사용자가 개념을 설명하면, AI가 “그럼 스택이랑 큐는 뭐가 다른가요?”, “왜 굳이 스택을 써요?”라며 꼬리 질문을 계속 던짐.
- 평가: AI가 사용자의 설명을 이해했는지 판단하고, 대화가 성공적으로 종료되면 대량의 포인트 지급. (설명이 부실하면 감점)
C. [Battle] 실시간 지식 배틀 (객관식 경쟁)
- 데이터: DB에 저장된 객관식(Multiple Choice) 질문 데이터셋 활용.
- 방식: 실시간 1:1 매칭 또는 봇 대전.
- 기술적 특징: 동시성 제어를 통한 정확한 선착순 판정.
D. [Community] 지식 공유 및 보상
- 기능: 사용자가 정리한 CS 지식을 마크다운 형태의 블로그 글(아티클)로 게시.
- 보상 시스템:
- 글 작성 시 소량의 포인트 지급.
- 다른 사용자의 **‘좋아요’**나 **‘댓글’**을 받으면 추가 포인트 획득.
- 목적: 양질의 콘텐츠 생산 유도 및 포인트 경제 활성화.
E. [System] 포인트 및 데이터 관리
- 질문 추가 요청: 사용자가 “이 문제도 추가해 주세요”라고 요청하면 관리자(사용자님)가 검수 후 DB에 등록.
- 포인트 경제: 학습(획득) ←> 배틀 입장료(소비)의 순환 구조.
2. 사용자 시나리오 (User Scenarios)
사용자(페르소나)가 서비스를 어떻게 이용하는지 4가지 핵심 모드별로 묘사했습니다.
🎬 Scenario 1: [Training] 실전 같은 모의 면접 (스마트 백지노트)
상황: 취업 준비생 ‘민수’는 내일 있을 운영체제 면접이 걱정이다.
- 민수는 ‘CS Arena’에 접속하여 **[랜덤 면접 모드]**를 선택하고 ‘운영체제’ 태그를 고른다.
- 화면의 AI 면접관이 질문을 던진다. “프로세스와 스레드의 차이를 설명해 보세요.”
- 민수는 키보드 대신 마이크 버튼을 누르고 실제 면접처럼 육성으로 답변한다.
- 답변이 끝나자 AI는 STT로 변환된 텍스트를 분석하여 즉시 피드백을 준다.
- “민수님, ‘메모리 공유’에 대한 언급이 빠졌네요. 스레드는 스택을 제외한 메모리 영역을 공유한다는 점을 꼭 언급해야 합니다. (정확도: 75점)”
- 민수는 부족한 부분을 확인하고 다시 재도전하여 90점을 받고 포인트를 획득한다.
🎬 Scenario 2: [Role-Play] AI 학생 가르치기 (AI 과외)
상황: 비전공자 ‘지은’은 ‘TCP/IP’ 개념이 너무 어렵게 느껴져서 완벽하게 이해하고 싶다.
- 지은은 [AI 과외하기] 방에 입장한다.
- “안녕하세요 선생님! 저는 코딩 초보 봇이에요. TCP가 뭐길래 다들 중요하다고 하나요?”라고 AI가 천진난만하게 묻는다.
- 지은은 최대한 쉽게 비유를 들어 설명한다.
- AI는 그냥 넘어가지 않는다. **“그럼 데이터를 보내다가 잃어버리면 어떻게 해요?”**라며 핵심을 찌르는 꼬리 질문을 던진다.
- 지은이 3-Way Handshake 개념까지 설명해주자, AI는 **“아하! 악수하는 것처럼 확인하는 거군요!”**라며 이해했다는 반응을 보인다.
- AI를 이해시킨 지은은 성취감과 함께 대량의 포인트를 보상으로 받는다.
🎬 Scenario 3: [Battle] 긴장감 넘치는 스피드 퀴즈 (실시간 배틀)
상황: 공부하다 지루해진 개발자 ‘현우’는 머리도 식힐 겸 게임을 하고 싶다.
- 현우는 [1:1 배틀] 메뉴로 이동하여 100포인트를 걸고 매칭을 시작한다.
- 상대방(또는 봇)이 매칭되고 카운트다운이 시작된다.
- [네트워크] 관련 객관식 문제가 화면에 뜬다. “HTTP 상태 코드 중 ‘권한 없음’을 뜻하는 것은?”
- 현우는 문제를 읽자마자
401 Unauthorized를 클릭했다. 상대방보다 0.2초 빨랐다! - 실시간으로 점수가 올라가고, 총 5라운드 승부 끝에 승리하여 상대방의 포인트를 뺏어온다.
🎬 Scenario 4: [Community] 지식 공유와 보상 (커뮤니티)
상황: ‘지은’은 오늘 AI에게 가르쳐주며 정리한 내용을 기록으로 남기고 싶다.
- 지은은 **[지식 공유 게시판]**에 “비전공자도 이해하는 TCP/IP 완벽 정리”라는 제목으로 글을 작성한다.
- 글을 올리자마자 활동 점수를 받는다.
- 다음 날, 다른 유저들이 “설명이 너무 쉬워요!”라며 좋아요를 눌러주었고, 지은은 자고 일어났더니 추가 포인트가 쌓여 있는 것을 확인한다.
- 쌓인 포인트로 내일 다시 배틀에 참여할 생각에 기분이 좋아진다.
5. 기술 스택 (Technical Stack)
| 구분 | 기술 스택 | 선정 및 활용 이유 |
|---|---|---|
| Frontend | React | • 실시간 배틀 특성상 페이지 새로고침 없이 상태를 유지하는 SPA 구조 필요 • WebSocket으로 받은 데이터를 Virtual DOM으로 효율적으로 렌더링 • 숙련되진 않았지만 기존에 사용해본 라이브러리라는 이점 |
| Backend | Spring Boot | • BigDecimal로 정확한 포인트 계산 및 트랜잭션 관리로 포인트 무결성 보장 • @Lock, @Transactional로 배틀 시 race condition 방지 • 추후 결제 연동 시 검증된 라이브러리 및 보안 기능 활용 |
| Database | PostgreSQL | • pgvector: RAG 구현을 위한 벡터 검색. • JSONB: 유연한 퀴즈 메타데이터 저장. • ACID: 포인트 데이터의 안전한 저장. |
| AI | 추후 결정 | |
| Cache | Redis | • 게임 방 상태(참가자, 점수, 라운드)를 메모리에서 빠르게 관리 • Sorted Set으로 실시간 랭킹 구현 효율적 • Pub/Sub으로 WebSocket과 연동 가능 |
6. 개발 로드맵 (Agile/Scrum)
본 프로젝트는 1인 개발로 진행되었으나, 애자일 방법론을 차용하여 **1주 단위의 스프린트(Sprint)**를 설정하고 점진적으로 기능을 배포하는 전략을 취했습니다.
- 전체 기간: 2026.01.28 ~ 2026.04.01 (총 10주)
- Sprint 1 (MVP): 환경 세팅, 로그인/회원가입, 기존 백지노트의 MVP 기능 구현
- Sprint 2 (AI/Voice): Web Speech API 및 Spring AI(RAG) 연동, 음성 학습 기능.
- Sprint 3 (Interaction): AI 페르소나 부여 및 ‘AI 과외하기’ 채팅 세션 구현.
- Sprint 4 (Real-time): WebSocket & Redis 도입, 실시간 1:1 배틀 및 동시성 제어.
- Sprint 5 (System): 포인트 경제 시스템 통합, 커뮤니티 기능 및 CI/CD 구축.