Test Maker
나만의 단어장, 나만의 시험지
개요
기간
2024.11 ~ 2025.02
개요
개인 프로젝트
주요 기능
OCR 단어 추출, 단어장 관리, 객관식/주관식 시험지 자동 생성 및 내보내기
사용 기술
구현 기능 및 개발 과정
단어장 제작 및 관리 기능
단어장을 만들기 위해 OCR API 데이터를 추출, 추출 데이터의 상태 관리, 단어장 저장 기능이 필요함.
OCR API로 교재 사진에서 텍스트를 추출함. 받아온 데이터는 타입이 안정적이고 디버깅이 쉬운 Redux로 관리함. 저장할 때는 단어·의미·카테고리·오답 횟수를 함께 다루기 좋은 Realm을 사용함.
OCR 텍스트를 단어와 의미로 나누는 방식
사진에서 추출한 텍스트는 한 줄에 단어와 의미가 섞여 있어 문제로 바로 사용할 수 없음.
설정 탭에서 단어와 의미를 구분하는 기호를 사용자가 직접 지정하도록 함. 추출한 텍스트는 입력란에서 바로 수정할 수 있음. 확인 시 지정한 기호를 기준으로 단어와 의미가 분리됨.
문단 안에 답이 포함된 경우, 답과 설명을 순서대로 추출하는 옵션을 별도로 제공함.
카테고리/단어 선택 기능
단어장을 생성한 뒤 테스트하거나 피드백을 받을 수 있는 기능들이 필요했음. 단어를 선택하고, 선택한 단어를 객관식, 주관식으로 테스트한 뒤, 오답을 확인하는 기능이 필요함.
따라서 단어 선택 과정에서 재귀 함수를 사용하고, 선택된 단어는 전역 상태로 관리되게 함. 테스트를 할 때는 큐에 랜덤으로 단어들을 넣고, 큐의 마지막에 마커를 넣어서 지속적으로 테스트를 진행할 수 있게 함. 틀린 단어들은 Realm을 통해 관리함. 단어 선택부터 테스트 및 오답 확인까지 가능하도록 학습할 수 있는 구조를 구현함.
단어 테스트 기능
객관식 테스트를 할 때 보기들을 그리드 형태로 렌더링 해야했음. 그러나 NPM에 등록된 라이브러리 중 React Native 그리드 라이브러리의 마지막 업데이트가 오래 전이라 호환성이 떨어졌고, 다른 등록된 라이브러리들은 설명이 부족했음.
따라서 Flat List를 참고하여 그리드 컴포넌트를 구현하고 Create React Library의 도움을 받아 그리드 컴포넌트를 Npm에 직접 배포함.
그리드 컴포넌트를 npm에 배포함. 이후 별도 패키지로 다시 만들며 styled-components 의존을 제거함.
트러블 슈팅
카테고리의 트리 구조화
카테고리 계층을 추가하면서 자료 형태가 중첩 구조로 변경됨. 이에 따라 기존 자료 탐색 구조를 사용할 수 없게 됨.
카테고리 노드에 자식 목록과 부모 참조를 함께 저장함. 재귀 함수로 경로를 따라 노드를 탐색하고, 없으면 생성함.
하위 카테고리의 깊이와 무관하게 탐색함. 부모 참조를 역으로 탐색해 대·중·소분류 경로 문자열을 복원함.
결과 및 회고
결과
React Native 활용하여 안드로이드, IOS 모두 구현
오답 데이터를 오답 횟수 기준 최대 힙으로 관리해 자주 틀린 단어부터 표시함.
Google Vision Api를 활용
회고
NPM에서 필요한 컴포넌트 라이브러리(그리드)를 찾지 못해 직접 구현하고 NPM에 배포
자료구조를 활용한 프로그램 구현
Type Script에 대한 이해도 향상
라이선스