React Native로 WebView로 kcp 본인인증을 호출하였지만 어째서인지 빈 화면이 출력이 될 경우

서론

React Native에서 WebView를 사용하여 신원 인증 시스템을 모바일 앱에 통합할 때 개발자는 특히 테스트 단계에서 문제에 직면할 수 있습니다. 많은 개발자가 웹에서는 제대로 작동하지만 앱에서는 인증 화면을 올바르게 표시하는 데 문제가 발생할 수 있습니다. 혹시나 개발 중에 동일한 문제에 직면한 다른 사람들에게도 도움이 될 수 있으면 하여 해당 글을 남깁니다.

상황

하나의 의뢰가 들어왔습니다. 영카트 기반으로 쇼핑몰을 만들었으며 해당 사이트를 앱 패키징을 해달라는 의뢰입니다.

언제나 동일하게 작업을 진행하는 과정에서 처음으로 WebView로 연동된 본인인증을 클릭하였을 때 하얀 백지 화면만 출력이 되는 현상이 발견되었습니다. 분명 웹에서는 문제 없이 작동이 되는 것을 확인이 되었지만 어째서인지 앱에서는 정상적으로 작동하지 않아 console.log로 어느 페이지로 이동하는지 확인한 결과 url 주소는 정상적으로 받아오지만, get 값이 다르다는걸 확인할 수 있었고, 해당 값은 pageType=application로 전달이 되면서 빈 화면이 표시되었습니다. 이로 인해 테스트버전으로는 확인이 불가능한 것인지 또는 API 비용을 지불하고 이를 테스트하기 위해 KEY 값을 얻어야 하는지 궁금해졌습니다.

 

문제

• 웹상에서는 본인인증 화면이 정상적으로 표시됩니다.
• 앱에서는 WebView를 통해 인증 화면 대신 빈 흰색 화면이 표시됩니다.
• 해당 get 데이터는 pageType=application이 나타납니다.
• 현재 테스트를 위해 PG API 결제는 이루어지지 않았으며 테스트버전으로 진행 중입니다.

이로 인해 질문이 제기되었습니다. 

관련 API 비용을 지불하고 KEY를 받지 않고 테스트할 수 있습니까? 
아니면 테스트하기 전에 적절한 KEY를 받기 위해 API 비용을 지불해야 합니까?

 

해당 내용을 정리하여 많은 정보를 찾아보았지만, 해당 내용 관련하여 아무런 정보를 얻을 수 없었습니다. 하여 해당 문제점을 해당 PG (본인인증)사 담당 개발자에게 연락을 넣어 답변을 받게 되었습니다.

 

답변

해당 PG(본인인증)사에 연락 후 문제 해결에 도움이 되는 안내를 받았습니다. 그들이 제공한 주요 솔루션은 다음과 같습니다.

• 결제 없이 테스트 가능: 앱에서 테스트하기 위해 API 비용을 지불할 필요가 없습니다. 웹과 앱 모두에서 테스트가 가능합니다.
• WebView 수정: 문제는 인증 창이 앱의 WebView 내에 표시되는 방식에 있을 수 있습니다. 인증 페이지는 앱 환경 내에서 작동하도록 설정해야 하는 동적 웹 페이지입니다.
• 변수 추가: WebView에서 인증 창이 올바르게 표시되도록 하려면 인증 프로세스의 페이지에 다음 변수를 추가하는 것이 좋습니다.

<input type="hidden" name="kcp_page_submit_yn" value="Y"> 
<!-- kcp 본인인증 -->

이 변수를 추가하고 해당 값을 Y로 설정하면 앱 내에서 직접 인증 흐름을 테스트할 수 있으며 빈 화면 문제가 해결됩니다.

 

결론

당연하게도 테스트를 위한 API는 개발 중에 API 비용을 지불할 필요 없이 앱에서도 충분히 테스트가 가능하다는 것이며, kcp_cert_start 페이지에 변수를 추가하면 WebView 내에서 인증 화면이 올바르게 표시되어 빈 화면 문제가 해결됩니다. 하지만 해당 내용은 어디까지나 kcp 기반으로 진행된 내용이며, 다른 솔루션에 대해서는 아직 겪어본 적이 없어 해당 상황이 도움이 될지는 장담할 수 없습니다.