웹으로 구현된 서비스를 웹앱으로 구현할 때 어떤 부분을 고려해야 애플 리젝을 받지 않을까?
애플 리젝 사유중 흔하게 알려져 있는 것은 사용자가 앱의 카메라 또는 갤러리 권한 없이 진입하려고 할 때
허용 권한을 물어보지 않고 바로 진입한 경우이다.
그냥 webview로 감싸서 출시하면 되는거 아니야? 고려할 게 있나? 하겠지만
생각해보면 웹뷰를 통해 카메라나 갤러리를 여는 경우 권한을 묻는 alert없이 바로 접근하는 것을 알 수 있다.
🍕 JavaScript interface
JavaScript Interface는 네이티브 앱 개발만 했다면 잘 들어보지 않았을 것이다.
단순히 말해서 웹에서 action과 함께 전달하고 싶은 값을 앱단에 전달 할 수 있는 장치이다.
그렇게 되면 앱에서는(iOS기준) WKWebView가 해당 값을 받아 원하는 처리를 할 수 있다.
웹앱은 생각보다 이 기능을 많이 사용하고 있고, 반대로 WKWebView의 evaluteJavaScript메서드를 통해 앱에서 웹단으로도 신호를 전달할수도 있다. 이것들은 이미 다른 블로그에 잘 정리되어 있으니 참고하길 바란다.
추가로 기기가 안드로이드인지 iOS인지에 따라서 약간 다르게 작성해야 하는데 지금부터는 iOS기준으로 작성해보겠다.
(안드로이드는 이런 권한 확인 과정이 필요 없긴 하다)
다시 본론으로 들어와서 어떤 프로세스로 권한을 확인하면 좋을까?
웹에서 카메라 또는 갤러리에 접근하려고 할 때 모바일에서는 해당 사실을 알아야 접근 권한을 물어볼 수 있고, 사용자의 대답에 따라서 권한 여부를 앱 설정에 저장할 수 있다.
웹에서는 User-Agent로 어느 환경에서 접근했는지 알 수 있는데, 앱에서 접근했다면 웹과는 다른 프로세스를 가져야 한다.
(이 User-Agent에 대해서는 이후에 블로그에 써볼까 싶긴 함)
자 어쨌든 이 분기처리 부분은 웹 개발자에게 맡기고(ㅋㅋㅋㅋ),,, 앱일때는 냅다 카메라/갤러리를 틀지 말고 javaScript Interface를 보내준다.
⭐️ 다음으로 프로세스를 정리 해보겠다.
- userContentController메서드를 통해서 신호를 받으면 WKScriptMessage타입의 message를 파라메터로 받는다.
- message.name를 통해 카메라/갤러리 접근 권한시 웹단에서 보내준 신호임을 캐치한다.
- 카페라/갤러리의 접근 권한을 확인한다.(네이티브에서 원래 확인하는 프로세스와 동일하게 로직을 구현하면 된다)
- 권한이 허락되었다면 네이티브 자체에서 카메라/갤러리를 접근한다.
완전 어려운 거 아님! 네이티브로 구현했을 때와 크게 다른 점이 없다.
물론 네이티브에서만 처리하면 카메라에서 사진을 찍은 후, 또는 갤러리에서 사진을 선택한 후에 대한 처리까지도 특별한 것 없이 진행하면 될 것이다.
하지만 웹앱에서도 이런 경우가 그렇게 어려운 프로세스가 아니다.
아까 javascript interface를 설명하면서 그 반대의 신호 전달도 가능하다고 했는데
WKWebView의 메서드인 evaluteJavaScript를 사용하면 웹단에 구현되어 있는 메서드를 실행할 수 있다.
PC에서 선택된 사진을 파라메터로 보내면서 처리하는 A라는 메서드가 있을 것인데,
앱에서 전송한 String 타입의 사진을 B메서드로 받아 웹에서 처리하기 적잘한 타입으로 변경한 뒤 A를 통해 처리해줄 것이다.
나의 경우 jsCodeString를 아래와 같이 구현했는데 selectedImages는 웹단에 구현된, 선택된 String 타입의 이미지를 처리하는 메서드이다. 즉, 이 selectedImages는 B라는 메서드인 셈이다.(따로 웹 개발자가 구현해주긜..)
let jsCodeString = """
selectedImages(\(jsonString));
"""
mainView.webView.evaluateJavaScript(jsCodeString) { result, error in
if let error {
debugPrint("❌ imageSenderEvaluateJavaScript 실행 Error: \(error.localizedDescription)")
} else {
debugPrint("✅ imageSenderEvaluateJavaScript 실행")
}
}
⭐️ 따라서 선택된 이미지를 처리하는 프로세스 또한 아래와 같다.
- 선택한 사진, 또는 촬영한 사진을 String 타입으로 변경한다.
- 이 String 타입의 사진을 웹에 보내주기 위해 evalutedJavaScript메서드를 사용하여 웹단 메서드를 호출한다.
- 웹에서 해당 사진을 받아 적절한 타입으로 변경해준 뒤 PC와 동일한 프로세스를 따른다.
이렇게 되면 사진을 다른 타입으로 변경해줘야 하고, 웹에 전송해야 한다는 번거로움이 있지만
권한 여부를 위해서는 어쩔 수 없는 부분이다.
이렇게 해서 권한에 대한 부분은 리젝 사유로 받지 않았지만 다른 부분들이 걸리고 말았다^^(그럴 줄 알았지)
아래는 예시 사진이고 이런식으로 리젝사유를 아주 친절하게 가르쳐 준다.
해당 사유에 대해서 잘 설명하는 글을 다음 앱 심사를 넣을 때 [메모]부분에 넣어주면 해결 끝!
만약 스크린 샷이나 영상을 첨부해야 한다면 메모 아래 첨부파일에 첨부하면 된다.
나는 총 4가지 부분에서 리젝을 받았기 때문에 개발적으로 수정해야 할 부분은 수정하고, 설명해야 할 부분은 설명한 뒤
이후 심사를 통과했다.
만약 해당 리젝사유를 받았다면 참고하길 바란다.
☝🏻[1.2.0 Safety: User-Generated Content]
사용자를 위한 기능이 없다고 판단되었는데, 사용자가 신고할 수 있는 기능 또는 차단할 수 있는 기능을 넣지 않아 리젝되었다.
이후 신고 / 차단 기능을 서둘러 넣게 되었고, 정상적으로 작동하는 스크린샷을 첨부하였다.
각자의 프로젝트 성격에 맞게 알맞은 기능을 추가하면 될 것 같다.
☝🏻[2.1.0 Performance: App Completeness]
본인인증 기능 때문에 리젝된 것인데, 왜 이 기능이 필요한지에 대해 자세히 설명(해명)하는 글을 담았다...
☝🏻[2.3.10 Performance: Accurate Metadata]
해당 부분은 우리 팀의 불찰로 리젝된 것인데, iOS/안드로이드 별로 앱 설치 경로를 나눠 띄워야 했지만
iOS에서도 구글 플레이 설치 버튼이 노출되고 있어 이를 없애라는 내용이었다.
☝🏻[4.8.0 Design: Login Services]
Xcode프로젝트에서 iPhone환경에서만 사용할 수 있도록 설정해뒀지만, 심사하는 분이 아이패드로도 테스트를 해 본 것인지,
아이패드에서 최적화 되어 있지 않다는게 이유였다.
검색해보니 iphone전용으로 했어도 이런 경우로 리젝을 당하는 경우가 좀 있는 것 같았다.
아이폰 전용이라는 것과, 왜 아이폰만 지원하는지에 대한 설명을 적었고, 이후 통과되었다.
