CS 개념을 말로 설명하며, 스스로 사고하는 학습을 돕는 서비스,

 

🎯 주요 기능 소개	🛠 개발 환경 세팅
🔧 시스템 아키텍처	📄 API 명세서
💾 ERD 설계	📚 기술 문서

❓ CS 뽁뽁이 뭔가요?

CS 뽁뽁은 암기 중심의 CS 학습에서 벗어나,
생각하고 설명하며 성장하는 CS 학습 경험을 제공하는 서비스입니다.

CS 뽁뽁은 단순히 문제와 정답을 제공하는 서비스가 아닙니다.
대신 사용자가

• 자신의 언어로 개념을 꺼내 말하고,
• 체크리스트와 자가 진단을 통해 논리의 빈틈을 점검하며,
• 핵심 키워드 분석과 사고를 확장하는 AI 피드백을 통해 학습을 이어가도록 설계되었습니다.

CS 뽁뽁은
"표면적인 이해에 머문 지식"을 "설명할 수 있는 지식"으로 바꾸는 학습 경험을 제공합니다.

---

🎯 주요 기능 소개

기능	설명	핵심 목적
🗣 말하기 연습	CS 퀴즈에 대해 음성 답변하고, 이에 대한 AI 피드백 제공	개념을 자신의 언어로 구조화
✅ 체크리스트 자가진단	자신이 답한 내용을 스스로 점검	자신을 돌아보며 빈틈을 발견
🤖 AI 피드백	누락 개념 강조, 연관 개념 및 꼬리 질문 생성	답변 보완 및 사고 확장 유도
🔥 몸풀기 퀴즈 (객관식)	말하기 전 관련 개념을 빠르게 점검	사전 개념 활성화
📊 학습 리포트	취약 분야 분석, 활동 기록 시각화, 복습 대상 정리	학습 기록 정리

🚀 주요 기능 상세

1. 뽁퀴즈 목록

• 학습하고자 하는 CS 퀴즈를 선택합니다.
• 난이도/카테고리별로 필터링하여 퀴즈를 선택할 수 있습니다.
  
  

2. 몸풀기 퀴즈

• 메인퀴즈(말하기)를 풀기 전, 몸풀기 문제로 개념의 감을 잡아볼 수 있습니다.
• 객관식 퀴즈 제공 : 4지선다형으로 가볍게 풀면서 개념을 쏙쏙 익혀보세요 😊
  
  

3. 말하기 연습 (메인 퀴즈)

• 퀴즈에 대해 직접 말로 답변하며, 개념을 자신의 언어로 설명하는 연습을 돕는 기능입니다.
• STT 기술을 활용하여 사용자의 음성 답변을 텍스트로 변환합니다.
• 텍스트 답변 모드 제공 : 말하기가 어렵거나 부담될 경우, 텍스트로도 답변할 수 있습니다.
• 미러링 기능 : 말하기 답변 중 비디오 녹화를 통해, 자신의 말하는 모습을 다시 보며 스스로 점검할 수 있습니다.
  
  

4. 체크리스트 자가진단

• 체크리스트를 통해, 나의 답변을 기준으로 이해도를 스스로 점검할 수 있습니다.
• 나의 답변 : 음성 또는 텍스트로 제출한 답변을 확인할 수 있습니다. 필요한 부분은 자유롭게 수정할 수 있습니다.
• 체크리스트 제공 : 메인 퀴즈에 대한 체크리스트를 제공하여 답변에 대한 이해도를 자가진단 해볼 수 있습니다.
  
  

5. 생각뽁뽁 (AI 피드백)

• 핵심 개념을 더 깊이 학습 할 수 있도록 보완 포인트와 꼬리 질문을 제공합니다.
• AI 피드백 제공 : 답변과 핵심 키워드를 기반으로 AI 종합 분석 피드백을 확인할 수 있습니다.
  
  

6. 학습 리포트

• 풀었던 퀴즈에 대한 이해도와 진행률을 그래프로 확인할 수 있습니다.
• 풀었던 퀴즈를 중요도 별로 모아볼 수 있고, AI 피드백을 다시 볼 수 있습니다.
  
  

---

Tech Stack

Backend

Frontend

CI/CD, Infra

협업 도구

---

☁ Infra Architecture

---

🚀 Run (Dev Environment)

1. env 파일 생성

frontend/.env

# 프론트엔드 API URL 설정 (docker + nginx 사용)
# API_BASE_URL=http://backend:8080/api
# NEXT_PUBLIC_API_BASE_URL=/api

NODE_ENV=production

# local test용
API_BASE_URL=http://localhost:8080/api
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api

# [Naver OAuth - Frontend]
NEXT_PUBLIC_NAVER_CLIENT_ID=naver_oauth_client_id_here
NEXT_PUBLIC_NAVER_REDIRECT_URI=http://localhost:3000/auth/callback/naver

backend/.env

# dev DB (docker-compose.dev 접속 정보)
DB_HOST=localhost
DB_PORT=5433
DB_USERNAME=dbuser
DB_PASSWORD=dbpass
DB_DATABASE=csbbokbbok_db

#[BE] GEMINI
GEMINI_API_KEY=your_gemini_api_key_here

#[BE] CLOVA Speech
NAVER_CLOVA_SPEECH_INVOKE_URL=your_naver_clova_speech_invoke_url_here
NAVER_CLOVA_SPEECH_SECRET_KEY=your_naver_clova_speech_secret_key_here
NAVER_CLOVA_SPEECH_DEFAULT_LANG=ko-KR

# [Naver OAuth - Backend]
NAVER_CLIENT_ID=naver_oauth_client_id_here
NAVER_CLIENT_SECRET=naver_oauth_client_secret_here

# [Redis] (docker-compose.dev 접속 정보)
REDIS_HOST=localhost
REDIS_PORT=6380
REDIS_PASSWORD=root

#[BE] JWT
JWT_SECRET=your_jwt_secret_here

#[BE] LOG
LOG_LEVEL=debug
LOG_DIR=logs
LOG_TO_FILE=false

NODE_ENV=production

Environment Variables

• 다음 값들은 직접 발급 및 설정이 필요합니다.
• NEXT_PUBLIC_NAVER_CLIENT_ID: (NAVER Login 개발 가이드 참고)
• GEMINI_API_KEY: (Gemini API 가이드 참고)
• NAVER_CLOVA_SPEECH_INVOKE_URL: (NAVER CLOVA Speech 가이드 참고)
• NAVER_CLOVA_SPEECH_SECRET_KEY: (NAVER CLOVA Speech 가이드 참고)
• NAVER_CLIENT_ID: (NAVER Login 개발 가이드 참고)
• NAVER_CLIENT_SECRET: (NAVER Login 개발 가이드 참고)
• JWT_SECRET: (NAVER Login 개발 가이드 참고)

2. 개발용 컨테이너 실행

• DB, Redis 컨테이너 실행

docker-compose -f docker-compose.dev.yml up -d --build postgres redis

3. 의존성 설치

• 프로젝트 root에서 아래 명령어 실행

npm run install:all

4. DB 마이그레이션 & 시드 데이터 생성

• 프로젝트 root에서 아래 명령어 실행

npm run db:init

5. 서버 실행

• 프로젝트 root에서 아래 명령어 실행

npm run dev

6. 접속

• Frontend → http://localhost:3000
• Backend → http://localhost:8080
• PostgreSQL → localhost:5433

7. 종료

docker compose -f docker-compose.dev.yml down

---

🧑‍🤝‍🧑 팀원 구성

류지수	박혜린	정석찬	지은미
@sw-dev-j	@mangoooooo1	@Standard-Chan	@jum0624

---