navigator.share
수료 카드 만들어 공유하기
해결하는 문제
결과물을 이미지로 만들어 메신저로 바로 보내고 싶다.
캔버스로 카드 이미지를 그린 뒤 휴대폰 공유 창으로 이미지째 보냅니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것이름과 소감
브라우저가 하는 일캔버스에 1080×1350 이미지 그리기
나오는 것공유 창으로 이미지 전송 또는 PNG 저장
쓰는 브라우저 기술
Canvas toBlobWeb Share API (files)document.fonts
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- navigator.canShare({files})
- 이미지 크기와 테마
- 글꼴 로딩 기다리기
자주 막히는 곳
- PC 브라우저는 파일 공유를 지원하지 않는 경우가 많다
- 글꼴이 늦게 불러와지면 카드 글자가 기본 글꼴로 그려진다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 맞춤 칭찬 문구 작성
- 사진을 넣은 기념 카드
웹 서비스
- 교육 수료 카드
- 이벤트 인증 카드
피지컬 AI
- 카드 이미지를 무선 프린터로 출력
- NFC 명찰에 수료 링크 쓰기
넓히는 방법
- QR 코드를 넣은 수료증
- CSV를 올려 여러 명 일괄 생성
- PDF로 저장 (pdf-lib)
지원 브라우저
PC 크롬·엣지일부
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
이름과 소감을 적으면 수료 카드 이미지를 만들어 휴대폰 공유 창으로 이미지째 보낼 수 있는 웹페이지를 만들어줘.
같은 분류의 능력
10 통신·네트워크에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md