[해결] 모바일 웹에서 네이티브 공유창을 여는 방법 (Web Share API 적용기)

한 줄 요약: 웹 환경에서도 앱(App)처럼 스마트폰 OS의 네이티브 공유 시트(공유창)를 호출할 수 있도록 navigator.share (Web Share API)를 적용하고, 지원되지 않는 PC/데스크톱 브라우저 환경에서는 Clipboard API 기반의 복사 fallback을 연결해 호환성을 확보했습니다.

초기에는 카카오톡 공유 버튼 하나만 배치하고, 클릭 시 카카오톡 SDK의 Kakao.Share.sendDefault()를 실행하는 방식이었습니다.

// 기존 시도 (카카오 SDK 의존 방식)
function shareResult() {
  Kakao.Share.sendDefault({
    objectType: 'feed',
    content: { ... }
  });
}

웹 환경에서 모바일 OS(iOS/Android)의 공유 시스템에 접근하는 표준 API인 Web Share API (navigator.share)를 사용하지 않고 특정 3rd party SDK에 의존했기 때문입니다.

Modern Web Standard API인 Web Share API + Graceful Fallback Strategy를 구축했습니다.

4. Clipboard Fallback (PC/데스크톱 대응): PC 환경처럼 navigator.share를 지원하지 않는 브라우저에서는 클립보드로 공유 URL을 즉시 복사하고 "링크가 복사되었습니다!" 토스트 안내를 띄웁니다.

`app.js` (프런트엔드 크로스 브라우저 공유 로직)

async function handleShareAction(shareTitle, shareText, shareUrl) {
  // 1. 모바일 브라우저 네이티브 공유창 지원 여부 검사 (Web Share API)
  if (navigator.share) {
    try {
      await navigator.share({
        title: shareTitle || "GoodFruit 과일 맛 분석 결과",
        text: shareText || "내 과일의 맛 점수와 판정 근거를 확인해보세요!",
        url: shareUrl || window.location.href,
      });
      // GA4 공유 성공 이벤트 전송
      gtag("event", "share_click", { method: "web_share_api" });
      return;
    } catch (error) {
      // 사용자가 공유 창을 그냥 닫은 경우는 에러가 아니라 AbortError 임
      if (error.name === "AbortError") {
        console.log("사용자가 공유를 취소했습니다.");
        return;
      }
      console.warn("Web Share API 실행 실패, fallback으로 전환합니다:", error);
    }
  }

  // 2. PC / 미지원 브라우저 Fallback: 클립보드 복사
  try {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(shareUrl || window.location.href);
    } else {
      // 구형 브라우저 fallback
      const textArea = document.createElement("textarea");
      textArea.value = shareUrl || window.location.href;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
    }
    showToastMessage("분석 결과 링크가 클립보드에 복사되었습니다!");
    gtag("event", "share_click", { method: "clipboard_copy" });
  } catch (err) {
    showToastMessage("링크 복사에 실패했습니다. 주소창을 직접 복사해주세요.");
  }
}

더 이상 웹사이트 하단에 수많은 SNS 공유 아이콘을 나열할 필요가 없습니다. navigator.share 하나면 모바일 앱 수준의 깔끔한 네이티브 공유 경험을 웹 사용자에게 제공할 수 있습니다.

실제 적용 서비스