1. 프로젝트 개요

  • 프로젝트 명: CS Arena (CS 아레나)
  • 한 줄 소개: “눈으로만 보던 CS 지식을 말로 설명하고(Speak), 가르치고(Teach), 경쟁하며(Battle) 체득하는 AI 기반 인터랙티브 학습 플랫폼”
  • 기획 의도 및 핵심 가치
    • 본 프로젝트는 기존의 수동적인 ‘주입식 공부(Input)’ 방식에서 벗어나, ‘능동적인 인출(Output)’ 경험을 제공하는 데 집중합니다.
      • Active Output (능동적 인출): 텍스트뿐만 아니라 **음성(Voice)**을 통해 실제 면접처럼 소리 내어 답변하며 지식을 체화합니다.
      • Meta-Cognition (메타인지 향상): AI 학생에게 개념을 설명하는 **‘파인만 학습법(AI 과외하기)‘**을 통해 내가 무엇을 알고 모르는지 명확히 파악합니다.
      • Gamification (동기 부여): 혼자 하는 공부의 지루함을 없애기 위해 실시간 배틀포인트 경제 시스템을 도입하여 지속적인 학습 동기를 부여합니다.
  • 타겟 사용자
    • 기술 면접을 앞두고 말하기 연습이 필요한 취업 준비생
    • 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) 질문 데이터셋 활용.
  • 학습 방식:
    1. 랜덤 주제(예: “프로세스와 스레드의 차이”) 제시.
    2. 사용자는 음성(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] 실전 같은 모의 면접 (스마트 백지노트)

상황: 취업 준비생 ‘민수’는 내일 있을 운영체제 면접이 걱정이다.

  1. 민수는 ‘CS Arena’에 접속하여 **[랜덤 면접 모드]**를 선택하고 ‘운영체제’ 태그를 고른다.
  2. 화면의 AI 면접관이 질문을 던진다. “프로세스와 스레드의 차이를 설명해 보세요.”
  3. 민수는 키보드 대신 마이크 버튼을 누르고 실제 면접처럼 육성으로 답변한다.
  4. 답변이 끝나자 AI는 STT로 변환된 텍스트를 분석하여 즉시 피드백을 준다.
    • “민수님, ‘메모리 공유’에 대한 언급이 빠졌네요. 스레드는 스택을 제외한 메모리 영역을 공유한다는 점을 꼭 언급해야 합니다. (정확도: 75점)”
  5. 민수는 부족한 부분을 확인하고 다시 재도전하여 90점을 받고 포인트를 획득한다.

🎬 Scenario 2: [Role-Play] AI 학생 가르치기 (AI 과외)

상황: 비전공자 ‘지은’은 ‘TCP/IP’ 개념이 너무 어렵게 느껴져서 완벽하게 이해하고 싶다.

  1. 지은은 [AI 과외하기] 방에 입장한다.
  2. “안녕하세요 선생님! 저는 코딩 초보 봇이에요. TCP가 뭐길래 다들 중요하다고 하나요?”라고 AI가 천진난만하게 묻는다.
  3. 지은은 최대한 쉽게 비유를 들어 설명한다.
  4. AI는 그냥 넘어가지 않는다. **“그럼 데이터를 보내다가 잃어버리면 어떻게 해요?”**라며 핵심을 찌르는 꼬리 질문을 던진다.
  5. 지은이 3-Way Handshake 개념까지 설명해주자, AI는 **“아하! 악수하는 것처럼 확인하는 거군요!”**라며 이해했다는 반응을 보인다.
  6. AI를 이해시킨 지은은 성취감과 함께 대량의 포인트를 보상으로 받는다.

🎬 Scenario 3: [Battle] 긴장감 넘치는 스피드 퀴즈 (실시간 배틀)

상황: 공부하다 지루해진 개발자 ‘현우’는 머리도 식힐 겸 게임을 하고 싶다.

  1. 현우는 [1:1 배틀] 메뉴로 이동하여 100포인트를 걸고 매칭을 시작한다.
  2. 상대방(또는 봇)이 매칭되고 카운트다운이 시작된다.
  3. [네트워크] 관련 객관식 문제가 화면에 뜬다. “HTTP 상태 코드 중 ‘권한 없음’을 뜻하는 것은?”
  4. 현우는 문제를 읽자마자 401 Unauthorized를 클릭했다. 상대방보다 0.2초 빨랐다!
  5. 실시간으로 점수가 올라가고, 총 5라운드 승부 끝에 승리하여 상대방의 포인트를 뺏어온다.

🎬 Scenario 4: [Community] 지식 공유와 보상 (커뮤니티)

상황: ‘지은’은 오늘 AI에게 가르쳐주며 정리한 내용을 기록으로 남기고 싶다.

  1. 지은은 **[지식 공유 게시판]**에 “비전공자도 이해하는 TCP/IP 완벽 정리”라는 제목으로 글을 작성한다.
  2. 글을 올리자마자 활동 점수를 받는다.
  3. 다음 날, 다른 유저들이 “설명이 너무 쉬워요!”라며 좋아요를 눌러주었고, 지은은 자고 일어났더니 추가 포인트가 쌓여 있는 것을 확인한다.
  4. 쌓인 포인트로 내일 다시 배틀에 참여할 생각에 기분이 좋아진다.

5. 기술 스택 (Technical Stack)

구분기술 스택선정 및 활용 이유
FrontendReact• 실시간 배틀 특성상 페이지 새로고침 없이 상태를 유지하는 SPA 구조 필요
• WebSocket으로 받은 데이터를 Virtual DOM으로 효율적으로 렌더링
• 숙련되진 않았지만 기존에 사용해본 라이브러리라는 이점
BackendSpring Boot• BigDecimal로 정확한 포인트 계산 및 트랜잭션 관리로 포인트 무결성 보장
• @Lock, @Transactional로 배틀 시 race condition 방지
• 추후 결제 연동 시 검증된 라이브러리 및 보안 기능 활용
DatabasePostgreSQLpgvector: RAG 구현을 위한 벡터 검색.
JSONB: 유연한 퀴즈 메타데이터 저장.
ACID: 포인트 데이터의 안전한 저장.
AI추후 결정
CacheRedis• 게임 방 상태(참가자, 점수, 라운드)를 메모리에서 빠르게 관리
• 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 구축.