모바일 웹에서 카카오톡 및 Web Share API가 작동하지 않는 원인과 웹 쉐어 폴백 구현

웹 서비스를 개발할 때 바이럴 유입을 늘리기 위해 `navigator.share()` API를 사용하여 사용자가 카카오톡, 인스타그램, 메시지 앱 등으로 결과를 바로 전송하도록 구현합니다. 하지만 실제 사용 환경에서는 특정 인앱 브라우저(인스타그램, 페이스북, 웹뷰)에서 API 호출이 거부되거나 차단되는 현상이 발생합니다.

1. Web Share API 거부 원인 분석

분석 결과 모바일 웹 환경에서 공유 API가 동작하지 않는 주된 원인은 3가지였습니다:

• 보안 컨텍스트(HTTPS): HTTP 연결 환경에서는 navigator.share API가 undefined로 비활성화됨
• 사용자 액션(User Gesture) 미충족: 버튼 클릭 이벤트의 비동기 처리(async/await 대기) 도중 execution context가 끊기면 브라우저가 사용자 직접 동작으로 인정하지 않음
• 인앱 브라우저의 Web Share 미지원: 인스타그램/카카오톡 내부 웹뷰에서는 navigator.share 호출 시 NotAllowedError 발생

2. 3단계 방어적 공유 폴백(Fallback) 구조 구축

이를 해결하기 위해 GoodFruit 웹앱에서는 아래와 같이 3단계 조건부 공유 로직을 적용했습니다:

1. 1단계: navigator.share 지원 여부 및 HTTPS 보안 컨텍스트 확인 후 네이티브 공유창 호출
2. 2단계: 네이티브 공유 실패 시 Clipboard API(navigator.clipboard.writeText)로 현재 결과 URL 즉시 복사
3. 3단계: 구형 브라우저 대응용 execCommand('copy') 임시 텍스트 영역 생성 방식 마지막 방어선 배치

이와 같은 3단계 방어 로직을 적용한 결과, 어떤 모바일 웹뷰 환경에서 접근하더라도 유저가 끊김 없이 공유 링크를 복사하여 타인에게 전달할 수 있게 되었습니다.