Home

부캠스캐너

참석자

1주 - 이종연, 김건욱, 권태욱, 이준호, 임태현, 김근영, 김영준, 고경찬

2주 - 육진혁, 조영도, 주한솔, 윤준환, 조현철, 이아람, 고승빈, 배범준

서비스 대상

• 남녀노소

핵심 기능

• 사진 업로드 및 스캔 후 텍스트 파일로 저장 - 2주차 구현완료.

  1. 웹페이지의 업로드 버튼을 눌러서 텍스트를 추출 할 사진 파일을 업로드한다.

  2. 받아온 파일을 OCR api를 활용하여 텍스트로 변환한다.

  3. 변환된 텍스트를 파일로 서버에 저장한다.

• 맞춤법 검사 서비스, 번역 기능

  1. 맞춤법 검사와 번역 여부는 사진을 업로드하기 전에 체크 박스를 사용해 선택하도록 한다.
  2. 맞춤법 검사와 번역 기능은 중복 선택이 가능하며, 만약 두 기능을 모두 선택한다면, 어떤 기능을 먼저 처리할지는 개발팀에서 고려한다.
  3. 번역 기능의 경우 첫 페이지에서 언어를 선택해서 진행하도록 하고, 선택한 언어로 모든 텍스트를 번역한다.

• 결과로 나온 텍스트를 최종 수정 후 저장 및 공유 기능

  1. 사용자는 텍스트가 최종적으로 저장되기 전에 웹 에디터에서 확인 및 수정 할 수 있다.
  2. 저장버튼을 누르면 다운로드 되고, 공유링크가 생성됨
  3. 공유링크로 들어가면 파일 다운로드 가능.

시나리오

모범생 크롱

• 학생인 크롱은 수업중 유인물을 받았다. 집까지 지하철을 1시간이나 타는 크롱은 지하철에서 공부를 하고 싶었는데 얼마전에 산 아이패드 프로를 적극 활용하고 싶었고 종이를 문서로 바꿀순 없을까? 하고 생각했다.

• 크롱을 위해 종이문서를 파일로 바꿀수 있도록 도와주자.

• 조건

  • OCR 기능으로 그림에서 텍스트를 추출해준다.
  • 영어과를 못하는 크롱을 위해 이를 한글로 바꿔줄 번역과 맞춤법 검사 기능을 추가하자
  • 친구가 많은 크롱을 위해 문서를 공유하도록 기능을 추가하자

---

구현 결과

• 크롱은 유인물의 사진을 찍은후 부캠스캐너의 문서스캔 기능을 이용해 텍스트 파일로 전환했다.
• 파일을 전환할 때 번역 기능 을 이용해 한글로 수정했고, 맞춤법 검사 를 이용했다. 완료된 결과 텍스트에서 바꾸고 싶은 부분을 최종적으로 수정 해서 파일로 저장 했다.
• 이렇게 만든 파일을 친구들과 공유 하도록 링크를 생성하여 이 링크를 타고 들어온 친구들이 파일을 다운로드 할 수 있도록 만들어주자.

화면 시안

1주차 개발 환경 및 기술 스택

nodejs - Express() 8080포트 OCR 사용

기본 규약

• ssh 는 22번 포트 오픈
• 3.17.161.241:8080 포트 오픈
• POST 방식 사용, '/upload' 로 라우팅 함.

Server

• multer 모듈 사용하여 파일 업로드 참고
• Multer는 body 객체와 한 개의 file 혹은 여러개의 files 객체를 request 객체에 추가한다. body 객체는 폼 텍스트 필드의 값을 포함하고, 한 개 혹은 여러개의 파일 객체는 폼을 통해 업로드된 파일들을 포함하고 있다.

method	POST
uri	/upload
Request Body	userfile(form-data)	업로드할 사진
Response Body	raw text	이미지에서 추출한 텍스트

Front

• dom event 기반으로 file(image) 데이터 upload
• 부트스트랩 이용해 화면 구성

OCR

• @google-cloud/vision 모듈 사용하여 OCR 참고
• 부스트캠프 좌석 이미지로 테스트해 본 결과 매우 양호한 텍스트 변환이 이루어짐.
• 

Save

• fs 모듈 사용하여 텍스트 파일 생성
• 이미지 파일명과 동일한 txt파일 생성 확인

개발 환경 / 스택 (추천)

1. node.js
2. OCR : 문서화 (링크 참조)
3. 맞춤법 검사 : (링크 참조)
4. Translate : 번역 API (링크 참조)