05 · Service Patterns · 지속 · 관계
공유Share
링크 복사·초대·소셜 공유. 단순해 보이지만 ‘무엇을 공유하는지’가 모호하거나 공유받은 사람이 맥락을 잃으면 교우 간의 자연스러운 소개가 막힙니다.
공유의 3가지 유형
- 콘텐츠 공유 — 들은 설교, 본 공지를 지인에게. 원문 접근이 목적.
- 초대 — 소그룹·봉사팀에 참여. 권한 부여가 따름.
- 추천 — 새가족 초청 카드. 추적 링크로 누가 누구를 초대했는지 확인.
링크 복사 UX
https://service.com/p/abc123
링크가 복사됐습니다
- URL을 읽기 전용 입력 필드에 노출 + 복사 버튼. 사용자가 직접 긁기도 가능해야.
- 복사 성공 시 Toast 또는 인라인 확인. 2초간 표시 후 사라짐.
- 복사 후
navigator.clipboard가 막혔을 때는 수동 드래그 가이드를 준비.
공유받는 사람의 맥락
공유의 절반은 원본 링크의 품질입니다. 받은 쪽이 클릭했을 때 로그인 장벽이나 권한 오류가 뜨면 이탈. 공개 링크 vs. 로그인 필요 링크를 분리해 사용자가 선택할 수 있게.
- 공개 링크: 누구나 읽기 전용으로 접근.
- 권한 링크: 이메일 확인 후에만 접근. 초대형에 적합.
- 링크 만료일 · 해제 버튼 — 민감 콘텐츠에 필수.
Do· OG 메타를 풍부하게
공유된 URL이 카카오톡 · 슬랙에 붙었을 때 썸네일 + 제목 + 설명이 뜨도록 og:image · og:title을 페이지마다 고유하게.
Don't· 공통 OG 한 장
모든 페이지가 똑같은 서비스 로고로 미리보기된다면 공유의 맥락 전달력이 사라집니다. 공유받은 사람은 “뭔지 모를 링크”를 열지 않습니다.
초대 흐름
- 이메일 · 전화번호 다건 입력(콤마 · 줄바꿈으로 분리) + 역할 선택.
- “초대 링크 생성”으로 단일 링크 공유도 허용. 부서 제한 옵션.
- 초대 상태 추적: 전송됨 · 확인됨 · 수락됨 배지.
- 수락 화면에서 “{초대자}님이 {모임}에 초대했습니다” 문구 + 교회 소개 1분 영상.
새가족 초청
- 고유 초청 코드가 포함된 링크로 누가 누구를 초청했는지 추적.
- 초청자는 새가족 등록이 완료되면 알림으로 확인(보상이 아닌 관계 형성의 신호).
- 내 초청 현황 페이지: 클릭 수 · 등록 완료 수 · 함께 참여하는 모임.
조합되는 컴포넌트
접근성 · 보안
- 복사 버튼 클릭 시
aria-live영역에 “링크가 복사됐습니다”. - 공유 URL 입력 필드는
readOnly. 포커스 시 전체 선택되도록. - 민감한 내용(헌금 영수증 등)의 공개 링크에는 만료일을 기본값으로.