Dyslexia Kit

Project Overview

Dyslexia Kit은 난독증 아동의 학습 부담을 줄이기 위해, 기존 PDF 학습 자료를 AI 기반의 난독증 친화 교안으로 변환하는 서비스입니다. 보호자가 PDF 교재를 업로드하면 AI 서버가 원문 텍스트를 추출하고, 이를 쉬운 문장과 블록 단위 콘텐츠로 재구성합니다.

변환된 교안에는 어휘 분석, 음운 분석, 교육용 이미지 생성 결과가 함께 포함되며, 학생은 페이지별 학습 화면에서 TTS, 어휘 설명, 쓰기 연습 등의 보조 기능을 활용할 수 있습니다.

Background

난독증 아동은 긴 문장, 복잡한 어휘, 낮은 시각적 구분성, 음운 인식의 어려움으로 인해 일반 교재를 읽고 이해하는 데 부담을 느낄 수 있습니다. 또한 보호자나 교사가 같은 내용을 쉬운 문장, 시각 자료, 어휘 설명, 음운 단위 학습 자료로 다시 구성하는 데는 많은 시간이 필요합니다.

이 프로젝트는 이러한 반복적인 교안 재구성 과정을 AI로 보조하고, 학생이 보다 작은 단위의 콘텐츠를 따라가며 학습할 수 있도록 돕는 것을 목표로 시작했습니다.

Core Features

• PDF 학습 자료 업로드 및 비동기 교안 생성 요청
• AI 기반 텍스트 추출, 쉬운 문장 변환, 블록 단위 교안 생성
• 어휘 분석, 음운 분석, 교육용 이미지 생성 결과 제공
• 보호자-학생 매칭 및 학생별 교재 할당
• TTS, 어휘 분석 모달, 쓰기 연습을 포함한 학습 보조 화면 제공

Architecture

전체 구조는 React 기반 프론트엔드, Spring Boot 백엔드, FastAPI AI 서버로 분리했습니다. 프론트엔드는 사용자 화면과 학습 인터페이스를 담당하고, 백엔드는 인증, 사용자 도메인, 문서 상태 관리, 교재 저장, 학생 할당 API를 담당합니다. AI 서버는 PDF 전처리, LLM 기반 교안 변환, 음운 분석, 이미지 생성, Redis 캐싱을 담당합니다.

Frontend
  ↓ REST API
Backend
  ↓ multipart request
AI Server
  ↓ callback
Backend DB 저장
  ↓
Frontend 학습 화면 제공

PDF 업로드 이후에는 변환 작업이 오래 걸릴 수 있기 때문에, 백엔드에서 작업 상태를 관리하고 AI 서버에 비동기 처리를 요청하는 구조로 설계했습니다. AI 서버는 변환이 완료되면 백엔드 콜백 API로 결과를 전달하고, 백엔드는 이를 교재, 페이지, 이미지, 어휘 분석 데이터로 분해해 저장합니다.

Backend

백엔드는 Spring Boot 기반으로 구현했습니다. 주요 역할은 보호자와 학생 도메인 관리, JWT 인증, PDF 업로드 접수, AI 서버 연동, 변환 결과 저장, 교재 조회 API 제공입니다.

업로드된 PDF는 즉시 최종 교안으로 저장되는 것이 아니라, 먼저 문서 작업 상태와 임시 교재 정보를 생성한 뒤 AI 서버로 전달됩니다. 이후 콜백으로 전달된 원본 JSON 결과를 저장하고, 학습 화면에서 사용할 수 있도록 페이지, 팁, 이미지, 어휘 분석 단위로 나누어 저장했습니다.

이 과정에서 PostgreSQL은 교재와 학습 데이터를 저장하는 중심 DB로 사용했고, Redis는 AI 처리 상태와 캐싱 흐름에서 활용했습니다.

AI Server

AI 서버는 FastAPI와 LangChain을 기반으로 구성했습니다. PDF 파일을 입력받으면 pdfplumber를 통해 페이지별 텍스트를 추출하고, 문단 단위로 정리한 뒤 LLM이 처리할 수 있는 청크로 나눕니다.

이후 Claude API를 활용해 원문을 난독증 친화적인 블록 구조로 변환합니다. 단순 요약이 아니라, 문장을 더 쉽게 바꾸고, HEADING, TEXT, LIST, TABLE, PAGE_IMAGE와 같은 블록 단위로 재구성하는 데 초점을 맞췄습니다.

또한 어려운 단어에 대해서는 어휘 분석 정보를 생성하고, 한글 학습을 돕기 위한 음운 분석 결과를 함께 구성했습니다. 필요한 경우 교육용 이미지 생성 결과도 블록에 포함해, 학생이 텍스트와 시각 자료를 함께 활용할 수 있도록 설계했습니다.

Frontend

프론트엔드는 React와 TypeScript 기반으로 구현했습니다. 보호자 화면에서는 PDF 업로드, 교재 관리, 학생 초대 및 교재 할당 흐름을 제공하고, 학생 화면에서는 할당된 교재를 페이지 단위로 학습할 수 있도록 구성했습니다.

학습 화면에서는 AI 서버가 생성한 블록 데이터를 렌더링하고, TTS, 어휘 분석 모달, 음운 분석, 쓰기 연습 기능을 연결했습니다. 긴 원문을 한 번에 보여주는 대신, 작은 블록 단위로 나누어 보여주는 방식으로 읽기 부담을 줄이는 데 초점을 맞췄습니다.

My Role

저는 AI 서버와 백엔드 연동 흐름을 중심으로 작업했습니다. 특히 PDF 업로드 이후 비동기 교안 생성 요청을 처리하고, AI 서버의 변환 결과를 백엔드에서 저장 가능한 데이터 구조로 연결하는 흐름을 담당했습니다.

AI 서버에서는 LangChain 기반 프롬프트 구성과 PDF 전처리 흐름을 다루었고, 변환 결과가 페이지, 어휘 분석, 음운 분석, 이미지 정보로 이어질 수 있도록 데이터 구조를 정리했습니다. 백엔드에서는 문서 처리 상태 관리, AI 서버 요청, 콜백 수신, 변환 결과 저장 흐름을 중심으로 구현했습니다.

단순히 AI API를 호출하는 것보다, 긴 PDF 처리 과정에서 작업 상태를 어떻게 추적할지, LLM 응답을 어떤 구조로 저장할지, 학생 학습 화면에서 활용 가능한 데이터로 어떻게 나눌지를 고민한 프로젝트였습니다.

Tech Stack

• Backend: Spring Boot, Spring Data JPA, Spring Security, JWT, PostgreSQL, Redis
• AI Server: FastAPI, LangChain, Claude API, pdfplumber, Redis
• Frontend: React, TypeScript, Vite
• Infra & External API: AWS S3, OpenAI TTS, Replicate, Kakao OAuth

What I Learned

이 프로젝트를 통해 AI 기능을 서비스에 붙이는 것만으로는 충분하지 않다는 것을 느꼈습니다. 실제 서비스 흐름에서는 파일 업로드, 작업 상태 관리, 외부 서버 연동, 콜백 처리, 결과 저장, 화면 렌더링까지 하나의 흐름으로 안정적으로 이어져야 했습니다.

특히 LLM이 생성한 결과를 그대로 사용하는 것이 아니라, 백엔드와 프론트엔드가 예측 가능한 형태로 다룰 수 있도록 JSON 구조를 설계하고 저장 단위를 나누는 과정이 중요했습니다. 이 경험을 통해 AI 기반 기능에서도 결국 핵심은 안정적인 데이터 흐름과 명확한 책임 분리라는 점을 배웠습니다.

Improvement Points

현재 구조에서는 백엔드와 AI 서버의 비동기 처리 계약을 더 명확히 정리할 필요가 있습니다. 또한 LLM 응답 JSON에 대한 스키마 검증, 실패 시 재시도 정책, 이미지 생성 실패 시 부분 성공 처리 등 운영 관점의 보완이 필요합니다.

앞으로는 인증/인가 정책을 강화하고, 교안 생성 결과의 품질을 평가할 수 있는 기준을 마련해 단순 변환을 넘어 실제 학습에 도움이 되는 콘텐츠인지 검증하는 방향으로 개선하고자 합니다.