[오프너] 수험생을 위한 능동적 수학 학습 서비스

과정
백엔드
프론트엔드
프로덕트 디자이너
프로덕트 매니지먼트
노출 페이지
대표 이미지
대표이미지
서비스 한 줄 소개
회차
5 more properties

1. 배경 및 문제 정의

국내 수학 교육 연구에 따르면, 학생들의 반복 오답은 단순한 실수가 아니라 개념 이해와 사고 과정이 구조화 되지 않은 학습에서 비롯되고 있습니다.
수학 사교육 시장은 거시시장과 미시시장(직접경쟁사 시장) 모두 점점 커져만 가고 있지만, 학습 본질의 문제는 여전히 미해결인 상태입니다. 그래서, 저희 서비스 “오프너” 는 ‘왜 틀렸는지 모른 채 반복되는 수학 학습’ 을 끊어내는 사고 교정 중심의
학습 경험을 더욱 합리적인 비용과 함께 제안합니다.

2. 경쟁사 포지셔닝

저희 서비스와 관련된 직접 경쟁사들 역시 모두들 좋은 서비스를 보유하고 있습니다.
<경쟁사 대표 기능>
콴다
맞추다
EBSi
수학 대왕
AI이미지 분석 풀이 제공
문제 은행 형식
실제 기출 문제 바탕 문제 은행 및 분석
AI 진단 기반 맞춤형 수학 학습 서비스 플랫폼
여기서 “오프너” 가 제공해야 하는 차별점은 ‘사고 교정’ 이라는 새로운 영역을 정의하는 것 기존 다른 서비스들은 여전히 정답을 알려주는 결과 중심의 서비스에 머물러 있음 → 오프너는 학생이 어디서 막혔는지 질문을 던지고, 스스로 생각하게 만드는 ‘사고 중심 학습 AI’ 라는 포지셔닝을 구축 합니다.

3. VOC (유저리서치)

이러한 문제 의식은 실제 사용자 인터뷰를 통해 더욱 확신할 수 있었습니다. (실제 대면 인터뷰 기반)
수험생과 학부모 6명을 대상으로 심층 인터뷰를 진행한 결과, 학생들은 “해설지를 보면 이해한 것 같지만, 막상 다시 풀면 못 푼다.” 는 이해의 착각에 빠져 있었습니다.
반면 학부모님들은 “비싼 돈을 들여 학원을 보내지만, 내 아이가 진짜 알고 푸는 건지 불안하다” 는 관리의 가시성에 대한 갈증이 컸습니다.
→ 결국, 수동적인 학습의 한계를 끊고, 사고 과정을 점검해 줄 수 있는 도구가 절실하다는 것을 확인할 수 있었습니다.

4. 페르소나 설정

저희는 이 목소리를 바탕으로 두 명의 페르소나를 설정하였습니다. 왼쪽의 메인 페르소나이자 실 사용자인 고3 수험생 ”김수민” 양과 서브 페르소나이자, 실 구매 결정권자인 학부모 “박미숙” 님을 설정하였습니다.
김수민 양: 문제를 많이 푸는 ‘양치기’ 식으로 문제를 풀지만 변형 문제 앞에서 무너지는 학생 → 수민 양 에게는 ‘감이 아닌 논리적 확신’ 이 필요한 상태임.
박미숙 님: 고액 과외는 부담스럽지만, 아이의 학습 상태를 객관적인 데이터로 확인하고 싶어합니다. → 미숙 님은 과외 대비 납득 가능한 비용과 학습의 효과 및 상태를 모니터링 하고 싶어함.

5. As - is, To - be

오프너가 제안하는 변화는 명확합니다. 기존의 학습(As - is)이 해설지를 보고 ‘아, 그렇구나.’ 하고 넘어가는 수동적 이해였다면, 오프너의 학습(To -be)은 AI 튜터의 역질문을 통해 ‘내가 왜 여기서 틀렸지?’를 고민하는 능동적 사고로 전환되는 것입니다. 나아가 변형 문제를 통해 교정된 사고를 즉시 검증함으로써, ‘아는 것’ 과 ‘풀 수 있는 것’을 명확히 구분하게 만듭니다.

6. IA(정보구조도)

대시보드에서 학습 현황을 확인 → 문제 풀이 → 오프너 분석을 통해 사고 교정 → 이 모든 과정이 스크랩북에 자동 저장. 단순히 문제를 풀고 끝나는 것이 아니라 풀이 - 분석 - 기록으로 이어지는 선순환 구조로 설계하였습니다.

7. MVP UI/UX 플로우

<MVP 주요 기능 4가지>
문제 풀이, AI 튜터, 변형 문제, 스크랩북 저장

7.1 오프너 분석

문제 풀이 → 오프너 분석 버튼 생성 → 클릭 시 대화창 생성 → 역질문 시작 → 논리적 비약 파악

7.2 변형 문제 생성

오프너 분석 생성과 동시에 변형 문제 버튼 생성 → 앞서 풀었던 문제와 논리 · 개념적 구조가 동일한 문제 생성

7.3 스크랩북

모든 학습 기록은 ‘내 스크랩북’ 에 차곡차곡 쌓이게 됨. 어떤 대화를 나눴는지와 그 맥락을 전부 기록하고 사용자가 복기할 수 있게 도와주는 역할을 합니다.

7.3 데모 영상

7.4 UT 검증 및 Next Release

실제 사용자 22명을 통해 UT 검증 → 대부분 긍정적인 반응이었으나 일부 개선점들이 보였습니다. 변형 문제로 넘어가는 CTA(버튼 플로우) 가 눈에 잘 띄지 않는 다는 개선점 파악, AI 답변 정합성 업그레이드 등 여러 개선점들 추가로 파악 완료하였음
→ Next Release 부분은 앞서 발견되었던 개선점에 대한 피드백들을 수용하여 우리가 차기 업데이트를 했을 때 어떤식으로 디벨롭하면 좋을 지 “Antigravity 바이브코딩” 을 통해 임의로 구현해보았습니다. 아래는 해당 Next Release 데모 영상 입니다.

<Next Release 데모 영상>

8. 디자인 시스템

개발 효율과 일관된 사용자 경험을 위한 디자인 시스템을 구축하였습니다.
버튼, 배지, 폰트 등 모든 요소를 컴포넌트화하여 재사용성을 높였고, 특히 FE 개발자와의 협업을 위해 디자인 토큰을 정의하여 수정 사항이 코드에 즉각 반영될 수 있는 구조를 만들었습니다.
이는 짧은 프로젝트 기간 내에 높은 완성도의 MVP를 뽑아낼 수 있었던 기반이 되었습니다.

8.1 브랜딩

로고 심볼은 꽉 닫힌 캔을 따는 ‘오픈 탭’을 형상화하였음 → 막혀있는 사고를 뻥 뚫어준다는 의미
메인컬러는 아쿠아 워시는, 학생들이 수학 문제 앞에서 느끼는 긴장과 불안을 해소하고 차분하에 몰입 할 수 있도록 돕는 안정적인 색감을 선택하였음

9. 기술 아키텍쳐

Docker 기반의 컨테이너 환경 구축
CI/CD 파이프라인 자동화 → 개발/운영 실시간 모니터링
FE/BE 분리, Nginx 리버스 프록시로 둠 → 트래픽, 보안 관리 효율 증

9.1 Data Flow

1. AI 튜터 대화

정답을 바로 알려주지 않고, 단계별 질문을 통해 학생의 사고 과정을 점검합니다. AI 튜터는 학생이 어디서 막혔는지, 어떤 개념을 잘못 적용했는지를 역질문 방식으로 안내하여 스스로 오답 원인을 깨닫도록 유도합니다.
Spring AI 2.0 기반 LLM 파이프라인
RAG를 활용한 관련 개념 컨텍스트 증강
SSE 스트리밍으로 실시간 대화 경험

2. 오프너 분석

오답 제출 후 "오프너 분석 보기" 버튼을 통해 AI 튜터가 활성화됩니다. 풀이 과정 전반에서 단계별 사고를 유도하는 역질문을 제공하여, 정답 확인을 넘어 사고 오류를 교정합니다.
사용자의 답안과 풀이 과정 분석
키워드 기반 실수 유형 분류
개선 포인트와 함께 구체적 피드백 제공

3. 변형 문제

AI 튜터를 통해 사고 교정이 완료된 후, 같은 유형의 변형 문제를 자동 생성하여 교정된 사고를 즉시 검증합니다. 이해에 그치지 않고 해결 능력으로 전환되는지를 확인하는 단계입니다.
원본 문제 기반 AI 변형 문제 자동 생성
동일 수학적 개념, 다른 수치/조건 적용
변형 문제 풀이 후 원래 문제로 돌아가기 지원

4. 스크랩북

오프너 분석을 통해 점검한 문제와 AI 튜터 대화가 모의고사 기준별 폴더로 자동 저장됩니다. 과거의 사고 흐름과 교정 포인트를 다시 확인하며 학습 과정을 체계적으로 복기할 수 있습니다.
시험 연도·종류별 자동 분류 저장
AI 분석 요약 + 전체 대화 내역 열람
사고 교정 과정의 누적 관리

5. 실시간 AI 스트리밍

AI 튜터의 응답을 SSE(Server-Sent Events) 기반으로 실시간 스트리밍 전송합니다. 사용자는 AI가 "생각하는" 과정을 실시간으로 확인하며 자연스러운 대화 경험을 느낄 수 있습니다.
SSE 기반 논블로킹 스트리밍 아키텍처
Gzip 압축 이슈 해결 (compress: false 적용)
Spring Security 비동기 디스패치 인증 컨텍스트 처리

6. 실제 기출 문제 풀이

수능, 6월/9월 모의평가의 실제 기출 문제를 제공하며, 타이머와 함께 실전과 유사한 환경에서 문제를 풀 수 있습니다.
미적분, 확률과 통계, 기하 영역 지원
객관식/주관식 답안 제출
스톱워치 기반 풀이 시간 측정
즉각적인 정·오답 피드백

<계층별 구조>

계층
구성 요소
역할
클라이언트 계층
Next.js 프론트엔드 (PC/태블릿)
사용자 인터페이스, SSE 스트리밍 수신, KaTeX 수식 렌더링
애플리케이션 계층
Spring Boot 백엔드
비즈니스 로직, AI 파이프라인, 인증/인가, API 서비스
데이터 계층
PostgreSQL + PgVector, Redis, S3
영구 저장, 벡터 검색(RAG), 캐싱/세션, 정적 자산 저장
인프라 계층
Nginx, Docker, AWS EC2
리버스 프록시, 컨테이너화, 클라우드 호스팅

핵심 설계 원칙

서비스 분리 — 프론트엔드와 백엔드를 독립 컨테이너로 분리하여 각각 독립적으로 배포·확장 가능
리버스 프록시 — Nginx가 단일 엔드포인트에서 트래픽을 라우팅하여 통합 접근 관리
비동기 메시징 — RabbitMQ를 통해 AI 응답 처리 등 비동기 작업을 안정적으로 처리
SSE 스트리밍 — 실시간 AI 응답을 Server-Sent Events로 프론트엔드에 스트리밍 전송

9.2 데이터 흐름

오프너의 학습 흐름은 6단계 파이프라인으로 구성됩니다. 사용자의 문제 풀이부터 사고 교정, 검증까지 자연스러운 학습 경험을 제공합니다.

<사용자 학습 흐름>

① 문제 선택 → ② 문제 풀이 → ③ 오프너 분석 → ④ 사고 교정 → ⑤ 변형 문제 → ⑥ 스크랩북
단계
이름
설명
1단계
문제 선택
시험 연도, 시험 종류(6모/9모/수능), 선택 영역(미적분/확률과 통계/기하)을 선택
2단계
문제 풀이
실제 기출 문제를 타이머와 함께 풀이, 객관식/주관식 답안 제출
3단계
오프너 분석
오답 시 AI 튜터가 활성화되어 풀이 과정을 단계별로 질문
4단계
사고 교정
AI 튜터와의 대화를 통해 사고 오류를 발견하고 근본적인 학습 사고를 교정
5단계
변형 문제
교정된 사고를 검증하기 위한 AI 생성 변형 문제 제공
6단계
스크랩북
오프너 분석 내역과 AI 대화 기록을 모의고사 기준별로 자동 저장·관리

<프론트엔드 컴포넌트>

컴포넌트
설명
대시보드
학습 현황 요약 및 전체 학습 상태 한눈에 확인
문제 풀이 뷰
기출 문제 표시, 타이머, 객관식/주관식 답안 제출 인터페이스
AI 튜터 채팅
SSE 기반 실시간 대화 인터페이스, 단계별 질문-응답 UI
오프너 분석 패널
오답 분석 결과 표시, 사고 흐름 점검 프롬프트
변형 문제 뷰
AI가 생성한 변형 문제 풀이 인터페이스
스크랩북
모의고사별 폴더 구조로 분석 내역 관리, AI 대화 내역 열람
마이페이지
프로필/계정 관리, 구독 결제, FAQ 및 1:1 문의
인증 모듈
이메일/카카오 로그인, JWT 토큰 관리

<백엔드 컴포넌트>

컴포넌트
설명
인증 서비스
Spring Security 기반 인증/인가, JWT 토큰 발급 및 검증
시험 서비스
기출 문제 조회, 시험 정보 관리, 답안 채점
AI 튜터 서비스
Spring AI 기반 LLM 파이프라인, 단계별 질문 생성, 사고 교정 로직
RAG 파이프라인
PgVector 기반 벡터 검색, 관련 문서 검색 및 컨텍스트 증강
변형 문제 생성기
원본 문제 기반 변형 문제 생성 엔진
스크랩북 서비스
분석 내역 저장/조회, 폴더별 관리
채팅 서비스
Redis 임시 저장 → RabbitMQ → PostgreSQL 영구 저장 파이프라인
SSE 전송기
실시간 AI 응답 스트리밍, 비동기 스레드 관리
모니터링
Actuator 메트릭 수집 → Prometheus → Grafana 시각화

9.3 ERD

A. Users
테이블
필드명
데이터 타입
길이
제약조건
설명
Users
id
uuid
-
PK, NOT NULL
사용자 고유 ID
Users
name
varchar
500
NULL 허용
사용자 이름
Users
role
text
-
NOT NULL
사용자 권한
B. Credentials
테이블
필드명
데이터 타입
길이
제약조건
설명
Credentials
id
uuid
-
PK, NOT NULL
인증 정보 ID
Credentials
user_id
uuid
-
NOT NULL, FK → Users.id
사용자 참조 ID
Credentials
provider
text
-
NOT NULL
OAuth 제공자
Credentials
provider_id
varchar
500
NULL 허용
OAuth 식별자
Credentials
email
varchar
500
NULL 허용, UNIQUE 권장
Form 로그인 ID
Credentials
password
varchar
500
NULL 허용
Form 로그인 비밀번호
Credentials
last_login_at
timestamp
-
NOT NULL
마지막 로그인 시점
Credentials
failed_login_attempts
bigint
-
DEFAULT 0
로그인 실패 횟수
Credentials
last_failed_login_at
timestamp
-
NULL 허용
마지막 실패 시점
Credentials
locked_until
timestamp
-
NULL 허용
로그인 제한 해제 시점
C. user_cans
테이블
필드명
데이터 타입
길이
제약조건
설명
user_cans
id
bigserial
-
PK, AUTO INCREMENT
캔 정보 ID
user_cans
user_id
uuid
-
NOT NULL, FK → Users.id, UNIQUE
사용자 ID
user_cans
current_cans
int
-
NOT NULL, CHECK ≥ 0
현재 캔 수
user_cans
max_cans
int
-
NOT NULL, CHECK > 0
최대 캔 수
D. dcan_usage_logs
테이블
필드명
데이터 타입
길이
제약조건
설명
can_usage_logs
id
bigserial
-
PK, AUTO INCREMENT
캔 로그 ID
can_usage_logs
user_id
uuid
-
NOT NULL, FK → Users.id
사용자 ID
can_usage_logs
usage_type
text
-
NOT NULL
사용처 분류
can_usage_logs
cans_used
int
-
NOT NULL, DEFAULT 1, CHECK > 0
사용 캔 수
can_usage_logs
related_id
bigint
-
NULL 허용
관련 도메인 ID
can_usage_logs
cans_before
int
-
NOT NULL, CHECK ≥ 0
사용 전 캔
can_usage_logs
cans_after
int
-
NOT NULL, CHECK ≥ 0
사용 후 캔
can_usage_logs
status
varchar
500
NULL 허용
사용 상태
E. Exams
테이블
필드명
데이터 타입
길이
제약조건
설명
Exams
id
bigint
-
PK, NOT NULL
시험 ID
Exams
exam_year
int
-
NOT NULL
시험 연도
Exams
exam_type
text
-
NOT NULL
시험 종류
Exams
name
varchar
500
NOT NULL
시험 이름
Exams
quantity
bigint
-
NOT NULL, CHECK > 0
문제 수
Exams
time_limit
bigint
-
NOT NULL, CHECK > 0
제한 시간(분)
Exams
date
bigint
-
NULL 허용
시험 날짜
F. Questions
테이블
필드명
데이터 타입
길이
제약조건
설명
Questions
id
bigint
-
PK, NOT NULL
문제 ID
Questions
exam_id
bigint
-
NOT NULL, FK → Exams.id
시험 ID
Questions
passages
jsonb
-
NOT NULL
문제 지문
Questions
question_no
bigint
-
NOT NULL
문제 번호
Questions
options
jsonb
-
NOT NULL
선택지
Questions
answer
int
-
NOT NULL, CHECK ≥ 1
정답 번호
Questions
category
text
-
NOT NULL
문제 분류
Questions
point
int
-
NOT NULL, CHECK > 0
배점
Questions
question_type
text
-
NOT NULL
문제 유형
G. Exam_Results
테이블
필드명
데이터 타입
길이
제약조건
설명
Exam_Results
id
bigint
-
PK, NOT NULL
시험 결과 ID
Exam_Results
user_id
uuid
-
NOT NULL, FK → Users.id
사용자 ID
Exam_Results
exam_id
bigint
-
NOT NULL, FK → Exams.id
시험 ID
Exam_Results
total_score
int
-
NOT NULL, CHECK ≥ 0
총 점수
Exam_Results
total_time_spent
int
-
NOT NULL, CHECK ≥ 0
총 소요 시간
H. Question_Results
테이블
필드명
데이터 타입
길이
제약조건
설명
Question_Results
id
bigint
-
PK, NOT NULL
문제 결과 ID
Question_Results
exam_result_id
bigint
-
NOT NULL, FK → Exam_Results.id
시험 결과 ID
Question_Results
question_id
bigint
-
NOT NULL, FK → Questions.id
문제 ID
Question_Results
selected
int
-
NOT NULL, CHECK ≥ 1
선택 답안
Question_Results
is_correct
boolean
-
NOT NULL
정답 여부
Question_Results
time_spent
bigint
-
NOT NULL, CHECK ≥ 0
풀이 시간
Question_Results
is_opener
boolean
-
NOT NULL
오프너 여부
I. Question_New
테이블
필드명
데이터 타입
길이
제약조건
설명
Question_New
id
bigint
-
PK, NOT NULL
사용자 생성 문제 ID
Question_New
user_id
uuid
-
NOT NULL, FK → Users.id
사용자 ID
Question_New
question_result_id
bigint
-
NOT NULL, FK → Question_Results.id
문제 결과 ID
Question_New
passage
text
-
NOT NULL
문제 본문
Question_New
options
jsonb
-
NOT NULL
선택지
Question_New
answer
int
-
NOT NULL, CHECK ≥ 1
정답
Question_New
category
text
-
NOT NULL
문제 분류
Question_New
question_type
text
-
NOT NULL
문제 유형
Question_New
analysis
text
-
NOT NULL
해설
J. Chat_Message
테이블
필드명
데이터 타입
길이
제약조건
설명
Chat_Message
id
bigint
-
PK, NOT NULL
채팅 ID
Chat_Message
question_result_id
bigint
-
NOT NULL, FK → Question_Results.id
문제 결과 ID
Chat_Message
messages
jsonb
-
NOT NULL
채팅 메시지 로그
Chat_Message
summary
text
-
NOT NULL
채팅 요약
API 부하 테스트 (1차 ~ 4차 결과 종합)

10. 기술 스택 & API

기술 스택과 API 는 다음과 같습니다. * API 명세서는 Swagger 로 정리하였음
디자인 & 프로토 타입: Figma, Maze, Stitch, Antigravity
커뮤니케이션 & 협업 툴: Jira, Confluence, Github, Discord, Notion

FE

분류
기술
선택 이유
핵심 프레임워크
Next.js (App Router) + TypeScript
서버 사이드 렌더링(SSR)과 App Router 기반의 효율적인 라우팅, 타입 안정성 확보
UI 구성 및 스타일링
Tailwind CSS + Headless UI
유틸리티 퍼스트 CSS로 빠른 UI 구현, 접근성을 고려한 Headless 컴포넌트 활용
상태 관리
React Query (서버 상태) + Zustand (클라이언트 상태)
서버/클라이언트 상태 분리로 캐싱 최적화와 경량 전역 상태 관리
폼 & 검증
react-hook-form + zod
성능 최적화된 폼 관리와 스키마 기반 런타임 타입 검증
수식 렌더링
KaTeX
수학 수식의 빠르고 정확한 렌더링 (인라인/블록 모드 분기 적용)
실시간 통신
SSE (Server-Sent Events)
AI 튜터 응답의 실시간 스트리밍 수신
품질 관리
ESLint + Prettier + Git Hooks
코드 일관성 유지 및 자동 포맷팅

BE

분류
기술
선택 이유
언어
Java 21
최신 LTS 버전의 안정성과 가상 스레드 등 최신 기능 활용
핵심 프레임워크
Spring Boot 4.0
엔터프라이즈급 애플리케이션 프레임워크, 자동 구성과 생산성
보안
Spring Security 7.0
JWT 기반 인증/인가, 비동기 디스패치 보안 설정
AI 통합
Spring AI 2.0
LLM 통합을 위한 공식 Spring 모듈, RAG 파이프라인 구축
데이터 접근
JPA (Hibernate)
객체-관계 매핑으로 데이터 접근 추상화
API 문서화
Swagger (OpenAPI)
자동 API 문서 생성 및 인터랙티브 테스트
데이터베이스
PostgreSQL 15 + PgVector
관계형 데이터 저장 + 벡터 유사도 검색 (RAG용)
캐시/세션
Redis
채팅 데이터 임시 저장, 세션 관리, 응답 캐싱
메시지 큐
RabbitMQ
비동기 메시지 처리, 채팅 데이터 영구 저장 파이프라인
AI 검색
RAG (검색 증강 생성)
PgVector 기반 문서 검색 + LLM 응답 증강

11. 트러블 슈팅

프론트엔드 트러블 슈팅

이슈
원인
해결
SSE 데이터 수신 실패
Nginx/Next.js가 SSE를 일반 HTTP로 인식해 Gzip 압축 적용
compress: false 옵션으로 Gzip 비활성화
KaTeX 수식 UI 깨짐
displayMode: true가 블록 속성을 유발해 리스트 UI와 충돌
리스트/상세 화면별 인라인/블록 모드 분기
로그아웃 시 401 에러
로그아웃 전 잔여 쿼리의 비동기 경쟁 상태
로그아웃 시 대기 중 쿼리를 선제 정리, 순차 처리

백엔드 트러블 슈팅

이슈
원인
해결
Redis 데이터 저장 실패
생산자/소비자 간 경쟁 상태(Race Condition)
역할 분리 원칙 적용, 소비자에서만 삭제 수행
SSE 유휴 타임아웃
Spring Security 6.0+ 비동기 디스패치 인증 미전달
DispatcherType.ASYNC 허용, 별도 스레드 처리
SSE MIME 타입 불일치
전역 응답 본문 래퍼가 SseEmitter까지 JSON 래핑
SseEmitter 반환 시 래핑 제외 조건 추가

프로젝트 성과 요약

지표
결과
오프너 분석 버튼 첫 클릭률
78%
AI 튜터 대화 다음 행동 선택률
90%
변형 문제 자연 인지율
62%
계속 사용 의향 평점
4.4 / 5.0점
유료 전환 의사
UT 참여자 90% 긍정 반응

12. 팀 소개

오프너는 "많이 풀었는데, 왜 또 틀리는지 모르겠다"는 수험생의 고민에서 출발하여, 사고를 교정하는 학습 경험을 기술로 구현한 서비스입니다. AI 튜터의 역질문, 변형 문제 검증, 스크랩북 기반 학습 관리까지 — 정답 중심 학습을 사고 중심 학습으로 전환합니다.

회고