[설계] 웹앱 서비스 계좌/입금이체 기능 추가의 건

Develop

[설계] 웹앱 서비스 계좌/입금이체 기능 추가의 건

너드나무 2024. 5. 22. 20:25

서론

운영하고 있는 웹앱 서비스에서 특정 인원에 대한 간편 계좌 이체 기능을 추가하려고 한다.
고도화 단계를 나누어 단순 클립보드 형태의 이체 지원(Level 1), 입금이체 API 연동(Level 2)으로 구상하였다.

요구사항 분석

웹앱 페이지 상에서의 계좌이체 기능 (결제 X)
- 레퍼런스 : 축의금 계좌이체 기능

고객 1 : 계좌정보 1
- 웹앱으로 표출되는 정보에는 고객 정보와 계좌 정보(은행코드, 계좌번호, 예금주)가 포함된다.
- 기존 시스템에는 금융결제원 연동에 필요한 계좌 OAuth 정보가 존재하지 않는다.

간편한 UX
- 간편함에 대한 필자의 기준은 기능 A to Z의 Depth가 가장 적은 부분을 의미한다.
- 금융결제원 OpenAPI 활용 시, 계좌 등록에 대한 정보 동의 여부를 OAuth 2.0을 기준으로 관리하기 때문에 정보 동의 UX를 추가 기획이 필요하다.
- 이에, Level 1 기준인 클립보드 + 앱링크 형태로 기능 MVP를 구현하려 한다.

관련 기술

클립보드 (Level 1)
- 최근 은행 어플에서는 클립보드에 저장된 내용이 계좌정보와 유사하면 자동으로 이체를 연결해주는 기능을 지원한다.
- 이를 활용하여, 클립보드 -> 앱링크를 통해 사용하고 있는 은행 앱에서 계좌이체를 간단하게 개발할 수 있도록 설계한다.

App Link (Level 1)
- 모바일에서 javascript 실행 시, 접속한 userAgent를 기준으로 앱 관련 기능을 호출할 수 있게 적용한 기술이다.
- iOS, AOS 기준으로 해당 은행 앱 설치 유무에 따른 분기 처리가 필요하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Link</title>
    <script>
        function openApp() {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;

            // Define the app URLs and store URLs
            var iosAppUrl = "myapp://"; // Custom URL scheme for your app
            var iosStoreUrl = "https://apps.apple.com/us/app/myapp/id123456789"; // URL to your app on the App Store
            var androidAppUrl = "intent://myapp/#Intent;scheme=myapp;package=com.example.myapp;end"; // Intent URL for Android
            var androidStoreUrl = "https://play.google.com/store/apps/details?id=com.example.myapp"; // URL to your app on Google Play

            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                // iOS device
                window.location.href = iosAppUrl;

                // Fallback to App Store if the app is not installed
                setTimeout(function () {
                    window.location.href = iosStoreUrl;
                }, 2000);
            } else if (/android/i.test(userAgent)) {
                // Android device
                window.location.href = androidAppUrl;

                // Fallback to Google Play Store if the app is not installed
                setTimeout(function () {
                    window.location.href = androidStoreUrl;
                }, 2000);
            } else {
                // Other devices or unable to determine
                alert("Your device is not supported.");
            }
        }
    </script>
</head>
<body>
    <button onclick="openApp()">Open App</button>
</body>
</html>

금융결제원 OpenAPI (Level 2)
- 계좌인증 이후, 입금이체 API를 사용할 수 있다.
- 금융결제원이 인정한 OAuth 2.0 데이터가 존재한다면, 아래 API를 활용할 수 있다.

결론

계좌이체 자체의 기능은 각각의 뱅킹앱에서 편의 기능을 제공하기 때문에 구현하기 어려운 난이도는 아닌 듯 하다.
다만, 서비스 운영 상에서 고객 간 계좌이체 이력을 가계부 형태로 관리하게 된다면 이력을 검증할 수 있는 금융결제원 API 연동이 필수적이다.

참고 및 인용 출처

- 금융결제원. (2019). 오픈 API - 입금이체. https://developers.kftc.or.kr/dev/openapi/open-banking/deposit.

728x90

저작자표시 비영리 변경금지