수학 손글씨 풀이 AI 진단 학습 서비스
본 프로젝트의 요구사항(손글씨 풀이 촬영, 멀티모달 AI 진단, 단계적 힌트, 재풀이 재평가, 교사 확인 대상 분류)을 기반으로 직접 구현하는 프로젝트입니다.
프로젝트 개요
본 프로젝트의 요구사항(손글씨 풀이 촬영, 멀티모달 AI 진단, 단계적 힌트, 재풀이 재평가, 교사 확인 대상 분류)을 기반으로 직접 구현하는 프로젝트입니다. 학생은 모바일 웹에서 풀이를 촬영하고 진단 피드를 시간순으로 확인했습니다.
작업 범위
- 풀이 촬영·업로드: 학생이 모바일 웹에서 교재 풀이를 촬영해 올리면 이미지 상태를 확인하고 진단 피드에 새 풀이가 쌓이는 화면입니다
- AI 진단·단계 힌트: AI가 풀이 중 틀린 지점과 오개념 유형을 표시하고, 정답을 바로 주지 않고 단계별 힌트를 한 겹씩 열어 주는 화면입니다
- 재풀이·재평가: 힌트를 본 학생이 다시 풀이를 촬영해 올리면 이전 풀이와 나란히 비교하고 재평가 결과를 보여주는 화면입니다
- 교사 확인 대상 분류: AI 진단과 독립 풀이 결과가 어긋나거나 신뢰도가 낮은 건을 교사 확인 대상으로 분류해 사유와 함께 보여주는 화면입니다
주요 업무
- 풀이 촬영·업로드 화면: 촬영 이미지의 해상도·기울기·밝기를 검사한 뒤 Firebase Storage에 올리고, 멀티모달 AI API 분석 요청을 비동기로 등록합니다
- AI 진단·단계 힌트 화면: 멀티모달 AI API에 풀이 이미지와 문제 메타를 전달해 줄 단위 인식 결과, 오류 지점, 오개념 분류를 구조화 JSON으로 받고 힌트를 3단계로 나눠 노출합니다
- 재풀이·재평가 화면: 재풀이를 같은 문제 스레드에 연결해 시도 이력으로 저장하고, 이전 오류 지점의 해소 여부를 AI가 항목별로 다시 판정합니다
- 교사 확인 대상 분류 화면: 같은 문제를 별도 프롬프트로 독립 풀이시켜 진단 결과와 비교하고, 불일치·저신뢰 조건을 규칙 엔진으로 판정해 확인 대기열에 올립니다
프로젝트 핵심 과제
손글씨 필기체와 수식 기호를 줄 단위로 읽어야 하므로 표본 풀이 이미지를 추가로 확보해 인식 기준을 검증하는 절차 설계
AI 진단이 틀렸을 때 학생에게 잘못된 오개념 라벨이 보이지 않
확정 전 상태 표시 정책 설계 필요
힌트가 정답을 우회 노출하지 않
단계별 프롬프트 제약과 응답 후처리 규칙 설계 필요
미성년 학생 사진과 풀이 기록을 익명 학생 코드 기준으로만 연결하는 저장 구조와 접근 규칙 설계
핵심 기능 상세
풀이 촬영·업로드
학생이 모바일 웹에서 교재 풀이를 촬영해 올리면 이미지 상태를 확인하고 진단 피드에 새 풀이가 쌓이는 화면입니다.
- 브라우저 카메라 입력과 Canvas 기반 기울기 보정·리사이즈 전처리 적용
- Firebase Storage 업로드 진행률 표시와 재시도 큐 구성
- Firestore 실시간 구독으로 분석 상태를 피드 카드에 반영
촬영 품질 검사와 업로드, 분석 요청을 분리된 단계로 설계해 흐릿한 사진이 AI 진단까지 전달되지 않는 구조를 구현합니다.
AI 진단·단계 힌트
AI가 풀이 중 틀린 지점과 오개념 유형을 표시하고, 정답을 바로 주지 않고 단계별 힌트를 한 겹씩 열어 주는 화면입니다.
- 프롬프트 템플릿과 JSON 스키마 검증으로 줄 단위 인식·오류 지점·오개념 분류 응답 정규화
- 힌트 단계 상태를 Firestore에 저장해 학생별 열람 단계 추적
- 풀이 이미지 위 오류 지점 오버레이를 SVG 좌표로 렌더링
AI 응답을 스키마로 검증한 뒤 힌트를 단계별로 잠그는 구조로, 정답 노출 없이 학생의 사고를 유도하는 흐름을 구현합니다.
재풀이·재평가
힌트를 본 학생이 다시 풀이를 촬영해 올리면 이전 풀이와 나란히 비교하고 재평가 결과를 보여주는 화면입니다.
- 문제별 시도 이력을 Firestore 하위 컬렉션으로 모델링
- 이전 진단 JSON과 재풀이 인식 결과를 항목 단위로 비교하는 판정 로직 구현
- 시도 간 변화를 타임라인 카드로 표시하는 피드 컴포넌트 구성
재풀이를 새 건이 아니라 같은 문제 스레드의 다음 시도로 연결해 오류 해소 여부가 이력으로 이어지는 데이터 구조를 설계합니다.
교사 확인 대상 분류
AI 진단과 독립 풀이 결과가 어긋나거나 신뢰도가 낮은 건을 교사 확인 대상으로 분류해 사유와 함께 보여주는 화면입니다.
- 독립 풀이 호출과 진단 호출을 병렬 실행하고 결과를 정규화해 비교
- 불일치·저신뢰도·인식 불확실 3가지 규칙으로 확인 대상 플래그 판정
- 확인 대상 사유 코드를 Firestore 문서에 기록하고 필터 칩으로 노출
AI가 확신하지 못하는 건을 학생에게 단정해서 보여주지 않고 교사 확인 흐름으로 넘기는 판정 규칙을 구현합니다.
프로젝트 진행 단계
풀이 데이터 모델과 이미지 전처리 설계 · 2026.10
문제·시도·진단 컬렉션 구조 설계, 촬영 이미지 품질 검사와 업로드 흐름 정의
멀티모달 AI 진단 파이프라인 구현 · 2026.10
풀이 인식·오개념 분류 프롬프트와 JSON 스키마 검증, 단계 힌트 생성 API 구현
학생 모바일 피드 화면 구현 · 2026.10
촬영·진단 피드·힌트·재풀이 화면 구현, 실시간 구독 기반 상태 갱신 적용
교차검증과 확인 대상 규칙 구현 · 2026.10
독립 풀이 비교와 저신뢰 판정 규칙, 확인 대기열 구조 구현
개발 결과
기술적 주안점
- 촬영 품질 검사와 업로드, 분석 요청을 분리된 단계로 설계해 흐릿한 사진이 AI 진단까지 전달되지 않는 구조를 구현합니다
- AI 응답을 스키마로 검증한 뒤 힌트를 단계별로 잠그는 구조로, 정답 노출 없이 학생의 사고를 유도하는 흐름을 구현합니다
- 재풀이를 새 건이 아니라 같은 문제 스레드의 다음 시도로 연결해 오류 해소 여부가 이력으로 이어지는 데이터 구조를 설계합니다
