주제

이미지 안에 있는 영어 텍스트를 추출하여 한국어로 번역해주는 웹사이트

팀원

최준민: 웹 프론트엔드, API 연동
곽영주: 웹 백엔드 및 파일 업로드 구현
조성윤: 기획(총괄) 및 AWS 인스턴스, 버켓 관리

프로젝트 소개

이 프로젝트는 이미지에서 영문을 인식하여 한글로 번역을 도와주는 웹 사이트를 서비스하기 위해 만들어졌습니다.
이 웹 사이트를 통해 사용자들은 여행, 영문 자료 독해 등의 영문 사용이 필요한 활동에 편의를 제공받을 수 있습니다.

개발 내용

AWS 인스턴스로 가성머신을 생성하여 웹서버 구축하고 nodejs와 expressjs 사용하여 웹 개발을 하였습니다.
S3 버켓을 생성하여 사용자로부터 받은 이미지를 multer-s3 모듈을 사용하여 버켓을 저장합니다.
그리고 이미지에서 영어 텍스트를 추출하는 rekognition API를 사용하여 이미지가 저장된 버켓에 접근하여 해당 이미지에서 텍스트를 추출합니다.
추출한 텍스트를 papago API를 사용하여 한국어로 변역한 후, 서버단에서 json 형식으로 이미지에서 추출한 영어 텍스트와 번역한 한국어를 프론트 단으로 전달합니다.
프론트 단에서는 웹 사이트를 reload하지 않기 위해 비동기 처리 방식인 ajax를 사용하여 json 형식으로 값을 받아 웹 사이트로 보여줍니다.

결과물 소개

[다이어그램]

[웹 화면]

[시연영상]

https://youtu.be/wz0Ie8uwR_k

사용 방법

1. AWS 인스턴스 생성하여 가상머신 구동

/* ssh로 생성된 가상머신에 원격 접속 */

2. 웹 구동

$ npm start

3. 이미지 업로드

1. 파일 선택 버튼 클릭
2. 번역할 텍스트가 있는 이미지 선택

4. 텍스트 추출하여 번역

변환 버튼 클릭

필요성 및 활용방안

번역하기 힘든 영어 텍스트가 들어간 이미지 파일에서 텍스트를 추출한 뒤에 번역합니다.
여행, 독서, 공부 등 다방면에서 활용이 가능합니다.
이후 웹을 반응형으로 만들어 모바일에서 볼 수 있도록 활용할 수 있습니다.