EZREAD (졸업작품)
문해력에 어려움이 있는 사용자를 위한 OCR 기반 텍스트 변환 서비스 개발
- React
- Typescript
- Vite
- OCR
- Tailwind CSS
발표 자료
왜 만들었나
문명의 발전으로 독해 수준이 점차 떨어지는 일상에서, 흔히 마주치는 글이 누군가에게는 큰 장벽으로 다가올 수 있다는 문제의식이 있었습니다. 문서를 올리면 짧고 간단한 말로 다시 써주는 서비스를 목표로 했습니다.
핵심 기능
텍스트 요약
쉽게 읽기
회원 인증
사용 기록
기술적으로 고민한 지점
API 연동 시 중복 요청 및 로딩 UX 문제
PROBLEM
백엔드 API 연동 과정에서 useEffect와 fetch/axios로 초기 데이터를 불러오도록 구현했으나, 컴포넌트 리렌더링 시 불필요한 중복 네트워크 요청이 발생하고 통신 지연 시 빈 화면이 노출되는 UX 저하 문제가 있었습니다.
ACTION
- isLoading, isError 상태를 분리 관리해 로딩 중엔 스켈레톤 UI를, 에러 시엔 토스트 메시지로 사용자 친화적 피드백 제공
- TypeScript로 API 응답 타입을 엄격히 정의하고 옵셔널 체이닝을 적용해 런타임 에러 방지
- React Query를 도입해 캐싱 및 중복 요청 최적화 진행
RESULT
불필요한 API 호출을 줄이고 안정적인 에러 핸들링을 구축함으로써, 네트워크 환경이 불안정한 상황에서도 비정상 종료 없이 부드러운 사용자 경험을 제공할 수 있도록 개선했습니다.
회고
백엔드 개발자와 직접 소통하며 백엔드의 개발 환경과 데이터 처리 과정을 이해할 수 있었고, 처음으로 프론트엔드 개발의 전반적인 과정을 경험해볼 수 있었다. 개발 과정에서 프론트엔드와 백엔드 간의 연동 과정에서 발생하는 충돌을 직접 고민하고 해결하면서 협업 과정에 대한 이해도 높일 수 있었다. 또한 기존에 부족하다고 느꼈던 UI 설계에도 적극적으로 고민하고 개선을 거듭한 결과, 이전보다 만족스러운 결과물을 완성할 수 있었다.