2024 Epson Innovation Challenge in Korea

Epson 프린터와 스캐너의 새로운 사용자 경험과 문제 해결을 위해 혁신적인 개발자들과 관심 있는 모든 분을 위한 챌린지입니다.
AIGOO 앱은 Epson Innovation Challenge in Korea에 참여한 서비스입니다.

AIGOO (아이고)

프로젝트 소개
AIGOO는 아티스트와 영어권 팬의 손편지 소통 및 한국어 학습 앱입니다.
Epson Connect API를 활용하여 손편지를 스캔하고 인쇄합니다.
Germini AI를 사용하여 OCR로 추출한 텍스트를 번역하고, 맞춤형 학습 자료를 제공합니다.

개발기간
2024.06.07 ~ 2024.06.23

사용 기술

Development

Tools

Next.js

풀스택 개발을 지원하는 프레임 워크로, API Routes를 사용해 gptapi 엔드포인트를 구축하였습니다. 또한, App router 방식을 사용하여 동적 라우팅을 간단하게 구현할 수 있었습니다.

Typescript

주로 interface 키워드를 활용해 응답 데이터 객체의 타입을 지정하였습니다. 타입스크립트의 구조적 타이핑 특징을 활용하여 컴파일 타임에 타입을 검사하였습니다. 보다 안정적이고 예측 가능한 코드를 작성할 수 있었습니다.

React-Query

'손편지'라는 데이터 특성상 데이터 업데이트가 자주 발생하지 않기 때문에 데이터를 캐싱해서 빠른 페이지 로드를 개발하고자 했습니다. stale Time를 길게 설정하여 불필요한 Data Fetching이 발생하지 않도록 하였습니다. 유지보수성과 확장성을 목적으로 query와 mutation를 Hook으로 만들어서 사용하였습니다.

Tailwind CSS

커스텀 테마를 설정하여 UXUI와의 동일한 네이밍으로 스타일 적용할 수 있었습니다. Tailwind 자체 유틸리티를 통해 빠르게 화면을 구현할 수 있었습니다.

Zustand

'Creat'함수를 사용해서 쉽게 Store를 생성하고, 전역 상태 관리가 가능했습니다.

기능 소개 및 시연

Epson 복합기 등록과 스캔 요청

AIGOO 서비스에서 편지 등록을 2가지 방식으로 지원합니다.
하나는 Epson 복합기로 스캔하여 등록하기, 다른 하나는 이미지 파일 등록입니다.
지금 보이는 화면은 Epson 복합기로 스캔하여 편지를 등록하는 모습입니다.

1. Epson 복합기 계정을 등록하고, Epson Connect API를 사용해 해당 스캔에 요청을 보냅니다.
2. 복합기에서 스캔 설정을 완료한 후
3. 'Pressed' 버튼을 클릭하면 편지가 업로드됩니다.

편지 키워드 저장과 AI 학습 자료 생성

'MailBox' 페이지에서 등록된 편지를 확인할 수 있습니다.
스캔 후 등록까지 시간이 소요되기 때문에 'pending'상태일 때 disabled 처리됩니다.
편지 등록이 완료되면 스캔 원본을 확인할 수 있고, OCR를 활용해 추출된 텍스트를 Germini AI로 번역을 제공합니다.
문장마다 키워드를 확인하고 저장할 수 있습니다.
저장된 키워드를 바탕으로 학습 자료를 생성합니다. AI 학습자료는 'Notes' 페이지에서 확인할 수 있습니다.

FE 개발 팀원 소개

차동민	남기훈	조은상
프로젝트 팀장 편지 상세 페이지 키워드 선택 및 저장 페이지	메인 페이지 편지 스캔 및 보내기 페이지 헤더 및 네비게이션 제작	우편함 페이지 AI 학습자료 페이지 학습자료 폼 제작

시작하기

clone project

$ [email protected]:AIGOO-Epson/frontend.git

open project

$ cd frontend

install

$ npm install

start

$ npm run dev