[태그:] Web Share API

작성자: 컴맹 집사

대표 이미지: 결과 화면 아래에 공유하기 버튼을 두었다 (출처: 왕립 개집사협회 앱 2026년 9월 19일 버전 화면, 직접 캡처)

테스트 앱은 공유로 살아난다. 누군가 결과를 단체방에 올리고, 그걸 본 사람이 “나도 해 볼래”라며 링크를 누른다. 이 흐름이 없으면 앱은 내 친구 몇 명 안에서 끝난다.

그동안 사람들은 결과를 공유하려고 캡처하고, 카카오톡을 열고, 방을 고르고, 사진을 붙이고, 링크를 따로 복사해서 붙여야 했다. 다섯 단계를 버튼 하나로 줄이는 게 이번 목표였다.

공유 방법은 여러 가지였다

AI에게 “웹앱에서 결과를 공유하는 방법을 초보자가 만들기 쉬운 순서대로 알려 줘”라고 물었다.

방법	설명	난이도
링크 복사	버튼을 누르면 앱 주소가 복사된다	쉬움
휴대폰 기본 공유 메뉴	휴대폰의 공유 창(카톡, 문자, 인스타 등)이 뜬다	쉬움
카카오톡 전용 공유	카톡 공유 카드가 예쁘게 만들어진다	어려움
SNS별 공유 버튼	페이스북, X 등 각각의 버튼	보통

휴대폰 기본 공유 메뉴라는 게 눈에 들어왔다. 사진이나 기사를 공유할 때 아래에서 올라오는 그 창이다. 웹앱에서도 그 창을 불러올 수 있다면, 카카오톡이든 문자든 사용자가 알아서 고르면 된다.

Web Share API: 휴대폰의 공유 창 빌려 쓰기

이 기능의 이름은 Web Share API였다. (출처: MDN 웹 문서, Web Share API) API라는 말이 처음엔 어려웠는데, AI는 이렇게 설명했다.

API는 “이렇게 부탁하면 이렇게 해 줄게”라고 정해 둔 창구입니다. Web Share API는 웹앱이 휴대폰에게 “공유 창 좀 띄워 줘”라고 부탁하는 창구예요.

식당에서 주방에 직접 들어가지 않고 주문 창구로 주문하는 것과 비슷하다. 공유 창을 내가 만들 필요 없이, 휴대폰에 부탁만 하면 된다.

결과 화면에 "공유하기" 버튼을 만들어 줘.
누르면 휴대폰 기본 공유 창이 뜨게 해 줘.
공유 내용:
- 문구: "초코 폐하의 발바닥 궁정대신 작위를 받았어요! #왕립개집사협회"
- 다음 줄에 앱 주소
폐하 이름과 작위는 결과에 맞게 바뀌게 해 줘.

휴대폰에서 버튼을 누르자 익숙한 공유 창이 올라왔다. 카카오톡을 고르니 문구와 링크가 함께 들어간 메시지가 준비돼 있었다. 다섯 단계가 두 번의 터치로 줄었다.

공유 창이 안 뜨는 환경

기쁨도 잠시, 컴퓨터로 앱을 연 친구가 “공유 버튼 눌러도 아무것도 안 되는데?”라고 했다. Web Share API는 모든 환경에서 지원되지 않는다. 일부 컴퓨터 브라우저와 오래된 휴대폰에서는 동작하지 않았다.

그래서 조건문을 한 번 더 썼다.

• 만약 공유 창을 띄울 수 있는 환경이면 → 공유 창을 띄운다.
• 그렇지 않으면 → 앱 주소를 복사하고 “링크가 복사되었어요”라는 안내를 잠깐 보여 준다.

이렇게 하면 어떤 환경에서든 버튼이 뭔가는 해 준다. 아무 반응 없는 버튼이 가장 답답하다는 건 이미지 저장 기능에서 이미 배웠다.

이미지도 같이 보낼 수 있을까

다음 욕심은 작위증 이미지까지 함께 공유하는 것이었다. AI에게 물으니 Web Share API로 파일도 공유할 수 있지만, 지원하는 기기와 브라우저가 링크 공유보다 적다고 했다. 실제로 해 보니 내 안드로이드 휴대폰에서는 이미지와 문구가 함께 카카오톡으로 넘어갔지만, 일부 환경에서는 이미지만 가거나 아예 동작하지 않았다.

그래서 역할을 나눴다.

• 작위증 공유: 작위증 이미지와 문구를 함께 보낸다. 안 되는 환경에서는 “이 브라우저는 바로 공유를 지원하지 않아요. 이미지로 저장한 뒤 공유해 주세요”라고 안내한다.
• 앱 링크 보내기: 작위증이 없어도 누를 수 있는 버튼으로, 앱 주소와 소개 문구만 보낸다. 거의 모든 환경에서 동작한다.

한 버튼에 모든 걸 담으려다 불안정해지는 것보다 역할을 나누는 편이 안정적이었다.

카카오톡 전용 공유를 미룬 이유

한국에서는 카카오톡 공유가 가장 중요하다. 전용 공유를 쓰면 제목, 이미지, 버튼이 들어간 카드가 만들어진다. 욕심이 났지만 일단 미뤘다.

• 카카오 개발자 사이트에 가입하고 앱을 등록해야 한다.
• 앱 키를 발급받아 코드에 넣어야 한다.
• 등록한 도메인(앱 주소)이 맞아야 동작한다.

하나하나는 할 수 있는 일이었지만, 초보자인 나에게는 새 개념이 너무 많았다. 휴대폰 기본 공유 창으로도 카카오톡 공유는 충분히 됐다. 카카오톡 전용 공유는 앱이 자리 잡은 뒤 다시 도전하기로 “나중에 할 것” 목록에 적었다.

공유 문구를 다듬은 과정

의외로 시간이 걸린 건 문구였다. 처음엔 “집사 작위 진단 결과를 공유합니다”였는데, 아무도 누르고 싶지 않은 문장이었다.

몇 번 고친 끝에 원칙을 정했다.

• 결과를 먼저 말한다: “초코 폐하의 발바닥 궁정대신 작위를 받았어요!”
• 상대를 끌어들인다: “우리 집 강아지가 왕이라면, 나는 어떤 집사일까?”
• 해시태그는 하나만: #왕립개집사협회
• 짧게: 카톡 미리보기에서 잘리지 않을 길이

친구들 반응을 보면, 결과를 먼저 말하는 문구를 받은 사람이 링크를 더 많이 눌렀다. 남의 결과를 보면 내가 어떤 집사일지 궁금해지기 때문이다.

공유 후 돌아오는 사람을 위한 준비

공유 기능을 만들고 나서야 깨달은 게 있다. 링크를 받은 사람이 들어왔을 때 첫 화면이 중요하다는 점이다. 친구의 결과 문구를 보고 들어왔는데 첫 화면이 밋밋하면 바로 나간다. 앞에서 첫 화면을 다듬어 둔 게 여기서 빛을 봤다. 공유 문구의 분위기(“작위를 받았어요!”)와 첫 화면의 분위기(“나도 왕실 집사 되기”)가 이어지도록 맞춘 것도 도움이 됐다.

카카오톡 안에서 열었을 때

링크를 카카오톡으로 받으면 대부분 카카오톡 안의 브라우저에서 열린다. 이 안에서는 저장이나 공유가 제대로 안 되는 경우가 있었다. 그래서 카카오톡, 인스타그램 같은 앱 안에서 열린 경우를 알아채서 “다른 브라우저로 열기” 안내와 “주소 복사” 버튼을 보여 주게 했다. 카카오톡에서는 기본 브라우저로 바로 여는 버튼도 넣었다. 다만 이 부분은 기기마다 동작이 달라서 여러 휴대폰에서 계속 확인하고 있다.

---

이전 글: 결과 이미지 저장, 아이폰만 안 되던 미스터리 해결기
다음 글: 앱 닫으면 결과가 사라진다고? 이전 결과 보기 만든 이야기