[플러터] 결제확인 자동화 시스템 구축기 (readsms)

 

들어가며

이번 글에서는 값비싼 계좌조회 서비스를 대신하여 핸드폰과 sms 알람 서비스를 이용해서 결제확인 시스템을 만든 경험을 공유합니다.

sms을 수신하고 이를 다시 DB에 적재하는 과정을 flutter에서 진행하고 이를 보여주는 화면은 next.js를 이용하고 있습니다만, next.js의 구체적인 구현은 다루지 않습니다.

결제확인 자동화 시스템이라고 하기엔 너무 소박한.. 그런 기능 개발기 ㅋㅋ 시작합니다.

개발 요건

기존의 결제확인 프로세스는 다음과 같았습니다.

1. 유저가 상품을 선택한 후 결제하기를 선택한다.
2. 계좌번호가 노출되고 유저가 해당 계좌에 금액을 이체한다.
3. 담당자가 핸드폰을 이용해 계좌를 조회하고 금액을 확인하여 UI를 업데이트한다.

그중에 이번에는 3번 과정을 자동화해보려고 합니다.

일반적으로 유저의 결제여부를 처음부터 구현하기엔 힘듭니다. 그래서 일반적으로 결제모듈을 붙여서 사용합니다. (ex 토스페이먼츠)

근데 이번 기능 요건은 기존 사용하던 erp 시스템상에서는 계좌조회가 되어있지 않아 3번 기능만 자동화하면 되는 개발요건이었습니다.

그래서 결제모듈을 사용하기 보다는 계좌조회는 비슷하게 구현하여 UI로 표현하면 될 것 같았습니다.

개발 계획

맨 처음 기능 poc를 진행할때는 간단히 은행 api를 사용하면 될 것이라 생각했습니다.

하지만 찾아보니 은행은 계좌조회 api를 쉽게 열어주지 않습니다.

그래서 방법을 찾아보던 중에 세무사들의 방식을 전해 들었는데요.

바로 계좌간편조회를 이용하는 것이었습니다.

계좌 간편 조회

은행마다 이름은 다른데 간편 조회 혹은 빠른 조회라고 합니다.

저는 이 기능 테스트를 국민은행으로 진행했습니다.

이 사이트를 몇 분 간격으로 스크랩 핑하면 문제가 해결될 것이라 생각했고 기능 확인을 하던 도중에 KB 마우스 입력기 쪽에서 기능 구현의 어려움을 느꼈습니다.

kb 국민은행의 빠른조회

자동 스크래핑의 어려움

실제 dom를 뜯어보면 이미지를 동적으로 받아옵니다.(노란색 숫자의 배열에 매번 바뀜) 

그다음에는 각각의 숫자에 해당하는 area를 아래에 넣고 이를 통해 숫자를 입력하는 시스템이었습니다.

실제 dom 구조

그래서 자동 스크래핑으로 비밀번호를 입력하는 것은 간단히 구현하기엔 어렵다고 판단을 내렸습니다.

외부 서비스 사용하기

개발하면서 가장 좋은 방법은 남이 잘 만들어놓은 것을 가져다 쓰는 것입니다.

그래서 찾아보았는데요.

이런 서비스를 제공하는 회사는 엄청 많습니다. 근데 무료가 아니고 또 금액을 확인하려면 거의 모든 회사가 문의를 통해 확인하라고 되어있습니다.

그래서 이것도 빠르게 손절했습니다.

은행 SMS 서비스를 이용하기

푸시 알람이 활성화되기 이전에 은행은 입출금 내역을 sms로 보내주는 서비스를 하고 있습니다.

지금은 많은 은행들이 sms보다는 푸시알람을 권고합니다(푸시알람이 더 싸고 편리해서)

근데 아직까진 sms 서비스를 제공함으로 이것을 이용해 보기로 합니다.

방식은 다음과 같습니다.

1. 핸드폰을 준비한다.
2. 앱을 켠다
3. sms를 수신한다.
4. 해당 정보를 파싱 하여 DB에 적재한다.

이 구현 방법은 장점과 단점은 다음과 같습니다.

장점

• 우리의 DB를 쌓을 수 있어서 조회할 때 돈이 들지 않는다.
• 구현 방식이 생각보다 어렵지 않다.

단점

• 핸드폰 번호를 발급받아야 해서 돈이 나간다.
• 앱을 켜놔야 한다.
• sms 누락이 발생할 수 있다.

장점보다 단점이 많아 보여 이런 단점들이 있을 것 같다고 문의를 했는데 이런 답변을 받았습니다.

"누락이 발생하면 기존방식대로 계좌조회하여 확인하면 되고, 핸드폰 금액은 신경 쓰지 않아도 될 금액이고, 앱을 켜놓는 건 상관없습니다"

네. 이젠 우리에겐 장점만 남았으니 구현을 진행하면 되겠습니다.

기능 개발

일단 완성된 앱과 화면을 보고 진행하겠습니다.

테스트 웹 화면(왼쪽), 테스트 앱 화면(오른쪽)

구현해야 할 것은 sms을 수신할 앱과 보여줄 화면입니다.

이 글에서는 sms 수신 앱을 중점으로 다룹니다.

SMS 수신 앱

수신앱은 안드로이드로 하는 게 편합니다. 근데 최근에 플러터에 좋으니 플러터로 간단히 구현해 보겠습니다.

플러터앱 만들기

일단 플러터 앱을 만듭니다.

flutter create sms_api_app

그런 후에 필요한 패키지인 readsms를 설치해 주세요. 권한을 위해서 permission_handler도 설치하면 좋습니다.

flutter pub add readsms
flutter pub add permission_handler

그리고 이제 수신로직과 파싱 하는 로직만 만들면 끝입니다.

sms 수신하는 로직

수신하는 로직은 간단합니다.

permission_handler로 sms을 읽을 수 있는 권한을 체크하고 권한이 있으면 sms를 읽어옵니다.

이때 읽어오는 것은 readsms로 stream으로 읽어와서 계속 읽고 DB에 적재할 수 있도록 하면 됩니다.

파싱로직

파싱로직은 이렇게 생겼습니다.

아직 코드정리가 되지 않았지만 어디까지나 poc니깐 빠르게 개발하는 것을 목적으로 했습니다.

나중에는 은행별로 파싱 하는 로직을 만들어야 할 것 같긴 합니다.

sms 실제

위의 사진처럼 이런 값들이 날아옵니다.

우리가 필요한 것은 첫 번째 줄을 제외한 나머지입니다. 그래서 들어온 객체를 무식하게 split로 잘라서 보내고 있습니다.

중간 로직을 보면 무식하게 입금, 출금을 판단하는 로직부터

잔액의 , (콤마)를 지우는 로직까지 그냥 마구잡이로 구현한 예시라는 것을 확인할 수 있습니다.

네. 이게 끝이에요.

마치며

생각보다 구현은 간단한데  뭔가 큰 기능 같고 뭔가 막 개발자스럽고 그런 느낌이 드는 기능이었습니다.

전체코드는 여기에 올려놓았습니다.

GitHub - gyeongseokKang/sms_receiver_app