피드로 돌아가기
Dev.toFrontend
원문 읽기
Gemini 기반 AI 파싱과 Local-first 설계를 통한 성적 계산 자동화 구현
I built a "what do I need on my final" calculator with AI auto-fill (Next.js 16 + Gemini)
AI 요약
Context
반복적인 성적 계산의 불편함을 해결하기 위한 도구 필요성 대두. 기존의 수동 입력 방식에서 벗어나 Syllabus PDF 및 Canvas 스크린샷 기반의 데이터 자동 추출 구조 설계 요구.
Technical Solution
- Local-first 아키텍처 채택을 통한 localStorage 기반 데이터 저장 및 서버 사이드 DB 의존성 제거
- Gemini 2.5 Flash 모델을 활용한 비정형 문서(PDF, PNG, JPG) 내 카테고리, 가중치, 점수 추출 로직 구현
- AI의 불확실한 추출값에 대한 무분별한 추측을 방지하기 위해 flags 배열을 통한 신뢰도 낮은 데이터의 명시적 반환 및 사용자 보정 UI 설계
- API 쿼터 초과 대응을 위해 서버 제공 공유 키와 사용자 개인 API 키를 선택적으로 사용하는 Fallback 메커니즘 구축
- 긴 LLM 응답 대기 시간(10~20초)의 UX 저하를 방지하기 위해 파일 타입별 맞춤형 상태 메시지를 1.3초 간격으로 순환 출력하는 가상 진행 상태 UI 적용
실천 포인트
- LLM 추출 결과의 신뢰성을 확보하기 위해 '추측' 대신 '공백'과 '사유'를 반환하는 Validation 로직 검토 - 외부 API 의존성이 높은 서비스의 경우 Shared Key와 Personal Key를 병행 운영하는 Quota 관리 전략 적용 - 긴 처리 시간이 소요되는 비동기 작업 시 단순 로딩 바 대신 도메인 특화 상태 메시지를 통한 심리적 대기 시간 단축 기법 활용 - 개인정보 민감 데이터 처리 시 서버 저장 없이 Proxy API와 LocalStorage만 사용하는 Local-first 접근법 고려