[Flutter 앱 개발] Account Number Scanner

개발 동기

얼마 전에 친구와 밥을 먹으러 갔다가 친구가 계좌이체를 했는데 일일이 입력하는 게 귀찮다고 사진 찍으면 바로 인식하게 해주는 어플 같은 게 있으면 좋겠다고 얘기했습니다. 그 얘기를 듣고 삘이 꽂혀서 개발을 시작하게 되었습니다.

툴은 플러터를 사용해서 개발을 시작했습니다. 작년에 플러터 책을 사서 공부했어 기본적인 건 다룰 수 있었기 때문입니다.

 

개발 과정

앱 실행 -> 카메라 실행 -> 사진 찍기 -> 사진에서 텍스트 추출 -> 클립보드에 복사 -> 은행어플 켜기

이건 제가 기획한 어플의 작동 흐름입니다. 계좌번호와 은행 이름이 클립보드에 복사되면 은행 어플을 켰을 때 해당 계좌로 송금하기 버튼이 뜨는 것을 이용하고자 했습니다.

 

먼저 카메라를 켜서 사진을 찍고 그 이미지를 변수에 담기 위해 ImagePicker package를 사용했습니다.

그다음으로 이 어플의 핵심 기능인 사진에서 텍스트 추출을 하기 위해 OCR.space라는 사이트를 이용했습니다. 해당 사이트에서 API Key를 제공받고 앞서 찍은 사진을 https://api.ocr.space/parse/image 이 주소로 보내면 결괏값을 받아올 수 있더군요. 작동에 성공했지만, 캡처본 같은 깔끔한 사진은 인식하는 데 반해 그냥 카메라로 찍은 사진은 제대로 인식을 못 하더군요.

그래서 다른 ocr 프로그램을 찾아봤는데 ML Vision이라는 것이 있었습니다. 이를 사용하는 방법이 적힌 블로그를 찾아서 참고했습니다.

여기까지가 가장 큰 관문이었고 그 이후는 클립보드에 복사하는 것 코드를 짜주고 URL_Launcher package를 이용하여 특정 어플 실행하는 기능도 구현하였습니다. 대부분의 은행 어플을 사용할 수 있게 만들 계획이지만 우선은 제가 주로 사용하는 카카오뱅크로 연결되게 했습니다.

 

핵심 코드 일부분

어플 시연 사진

시연 영상을 올리고 싶었지만, 혹시라도 계좌가 유출될까 봐 사진으로 대체합니다.

 

후기

flutter 책에 나온 예제를 따라 해본 것 이외로 제가 만들어 보고 싶은 어플을 만든 것은 처음인데 생각보다 너무 재미있었고 짧은 시간 안에 결과물을 만들어 내니 성취감이 컸습니다. 그래서 앞으로도 시간이 날 때 조금씩 공부할 생각입니다.

위 어플 시연 사진에서 보셨다시피 아직 한글 텍스트를 인식하지 못하는 상태이고 이 때문에 직접 붙여넣기를 하고 보낼 은행을 선택해야 합니다. 또한 다른 은행 어플로도 연결할 수 있게 추가해야 하는 상황입니다.

우선 어플의 핵심 기능을 완성해두고 ML Vision이 한글을 지원하는지 찾아보기도 하며 다른 은행 어플 연결도 계획하는 와중에 토스에 이미 유사한 기능이 있다는 얘기를 들어버렸습니다... 그래서 약간의 현타가 왔지만 일단 만든 것이 있으니 정리도 해둘 겸 글을 씁니다.

아쉽긴 하지만 제가 계획한 어플은 토스를 사용하지 않는 사람들도 이용할 수 있기 때문에 마저 완성은 해볼 생각입니다. 그리고 완성하게 된다면 이 블로그나 플레이 스토어에 올려보겠습니다.

 

참고자료

카메라관련

블로그 : https://fre2-dom.tistory.com/346

공식문서 : https://docs.flutter.dev/cookbook/plugins/picture-using-camera

이미지에서 텍스트 추출

OCR.space 이용 : https://medium.com/@nsivaramdav/create-a-image-to-text-recognition-app-with-flutter-d135b682ba4d

ML Vision  이용 : https://365waytobe-pro-grammer.tistory.com/81