Search
🌐

웹뷰(WebView) 사용 (카드) - 앱 스킴(App Scheme) 설정

이 글의 목차
웹 브라우저가 아닌 모바일 환경에서 웹뷰(WebView)로 페이플 앱카드 결제창을 띄우는 경우, 카드사 및 기관별 결제를 위해 외부 앱을 호출해야합니다.
💡
모바일 웹뷰에서 외부 앱을 띄우기 위해서는 앱 스킴 등록을 하셔야 문제없이 결제창이 호출되니, 반드시 확인해주세요!

1. 앱 스킴(App Scheme) 리스트

앱 카드 결제 시, 고객이 선택한 카드사 및 은행의 결제 앱이 열립니다.
외부앱이 실행되어야 하기 때문에 앱 스킴(App Scheme)의 추가가 필요합니다.
이동할 앱 스킴 리스트를 확인하고 추가해주세요.
주요 앱 스킴(App Scheme) 리스트
Search
카드사/기관
앱 스킴(App Scheme)
국민카드
Open
kb-acp:// , liivbank:/
신한카드
Open
shinhan-sr-ansimclick:// , smshinhanansimclick://
우리카드
Open
com.wooricard.wcard:// , newsmartpib://
하나카드
Open
cloudpay:// , hanawalletmembers://
삼성카드
Open
mpocket.online.ansimclick:// , ansimclickscard:// , tswansimclick:// , ansimclickipcollect:// , vguardstart:// , samsungpay:// , scardcertiapp://
롯데카드
Open
lottesmartpay:// , lotteappcard://
현대카드
Open
hdcardappcardansimclick:// , smhyundaiansimclick://
씨티카드
Open
citispay:// , citicardappkr:// , citimobileapp://
ISP 모바일
Open
ispmobile://
ahnlabv3mobileplus://
간편결제
Open
shinsegaeeasypayment:// , payco:// , lpayapp://
COUNT12

2. 앱 스킴(App Scheme) 설정

필요한 앱 스킴을 추가하셨다면 외부 앱으로의 이동을 위해 구현 시 추가해야 할 로직을 코드 예제로 확인해보세요.

2.1 Android

Android는 웹뷰에서 외부 앱으로 이동할 때, WebViewClientshouldOverrideUrlLoading 함수를 사용합니다.
‼️
shouldOverrideUrlLoading 함수에 @Override을 추가하지 않으면, net::ERR_UNKNOWN_URL_SCHEME 오류가 발생하니 주의해주세요!
🔗
WebViewClientshouldOverrideUrlLoading이곳↗️에서 자세히 살펴보세요!

2.1.1 예시 코드

@Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url == null) return false; if (!url.startsWith("http://") && !url.startsWith("https://")) { if (url.startsWith("intent")) { Intent schemeIntent; try { schemeIntent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME); } catch (URISyntaxException e) { e.printStackTrace(); return false; } try { startActivity(schemeIntent); return true; } catch (ActivityNotFoundException e) { String pkgName = schemeIntent.getPackage(); if (pkgName != null) { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkgName))); return true; } } }else{ try { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); return true; } catch (Exception e) { e.printStackTrace(); return false; } } } return false; }
Java
Java 코드 예시
‼️
안드로이드 API 레벨 30에서 특정 카드사/기관으로 결제 시도시, net::ERR_CLEARTEXT_NOT_PERMITTED 오류가 발생하는 경우가 있으니, AndroidManifest.xml 파일에 usesCleartextTraffic 속성true로 설정해주셔야 합니다.
<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application ... android:usesCleartextTraffic="true" ... > ... </application> </manifest>
XML
AndroidManifest.xml 설정 예시

2.2 iOS

웹뷰에서의 외부 앱 호출을 위해 info.plist 에 필요한 앱 스킴(App Scheme)을 등록해주세요.
info.plist에 앱 스킴(App Scheme) 목록을 나열해두면 외부 앱 실행을 묻는 창이 뜨면서 자동으로 처리됩니다.
‼️
iOS 9.0 버전 이상에서는 보안정책의 강화로 LSApplicationQueriesSchemes 항목을 추가했습니다. URL scheme을 사용해서 외부 앱을 열 경우, 화이트리스트에 등록된 scheme만 열 수 있게 하여 보안을 강화하기 위함입니다. 따라서 iOS 9.0 버전 이상에서는 카드사/기관 앱을 열려면 화이트리스트 (허용 목록, info.plist)를 추가해야합니다.
‼️
iOS 6.0 버전 이상에서 사파리(Safari)의 쿠키 기본설정이 항상 설정시에만 세션 유지가 가능하게 바뀌어 세션 만료 오류가 발생할 수 있습니다. 쿠키를 항상 허용으로 설정해주세요.

2.2.1 info.plist 예시

<key>LSApplicationQueriesSchemes</key> <array> <string>nhappcardansimclick</string> <!-- 농협카드-앱카드 --> <string>nonghyupcardansimclick</string> <!-- 농협카드공인인증서 --> <string>kb-acp</string> <!-- 국민카드앱카드 --> <string>shinhan-sr-ansimclick</string> <!-- 신한카드앱카드 --> <string>smshinhanansimclick</string> <!-- 신한카드공인인증서 --> <string>wooripay</string> <!-- 우리카드앱카드 --> <string>cloudpay</string> <!-- 하나카드앱카드 --> <string>lottesmartpay</string> <!-- 롯데카드모바일결제 --> <string>lotteappcard</string> <!-- 롯데카드앱카드 --> <string>citispay</string> <!-- 씨티카드앱카드 --> <string>citicardappkr</string> <!-- 씨티카드공인인증서 --> <string>payco</string> <!-- 페이코 간편결제--> <string>ispmobile</string> <!-- ISP모바일 --> ... </array>
XML
TOP