소셜 공유 파이프라인 설계 — SSR 공유 페이지에서 바이럴 루프까지

갤러리는 있는데 사용자가 없다

AI 동화 생성 파이프라인은 완성되어 있다. 공개 갤러리도 구축했다. 빠진 것은 하나. 결과물이 다음 사용자를 데려오는 구조. 소셜 공유 파이프라인을 설계했다.

구현은 4개 트랙으로 나뉜다. 공유 페이지(SSR), 카카오 SDK 연동, 프리셋 체인, 레퍼럴 쿠폰. 각 트랙의 의존성을 분석해 병렬 작업을 최대화했다.

1. SSR 공유 페이지 — 동적 OG의 설계

공유 링크를 받은 사람이 카카오톡에서 보는 것은 OG 미리보기다. 이 미리보기가 클릭을 결정한다. 정적 메타 태그로는 불가능하다. 작품마다 제목, 표지, 설명이 다르기 때문이다.

Next.js App Router의 Server Component로 해결한다.

/book/[id] 접근 시:
1. 서버에서 작품 데이터 fetch (SSR)
2. 비공개 또는 미존재 → 404
3. generateMetadata()로 동적 OG 태그 생성
4. opengraph-image 핸들러로 1200×630 이미지 생성
5. 캐싱: revalidate 3600 (1시간)

OG 이미지는 표지 이미지 + 제목 + 브랜드 로고를 조합한다. 별도 이미지 서버 없이 Next.js의 ImageResponse로 동적 생성한다.

핵심은 공유 페이지가 단순 뷰어가 아니라 전환 장치라는 점이다. 하단에 “이 스타일로 만들기” CTA를 배치한다. 이 버튼이 바이럴 루프의 시작점이다.

2. 카카오 SDK — 3단계 폴백 전략

한국 사용자의 주요 공유 채널은 카카오톡이다. 카카오 SDK의 sendDefault로 피드형 공유를 구현한다.

공유 버튼은 3단계 폴백 구조를 가진다.

카카오 SDK는 lazyOnload 전략으로 로드한다. 페이지 로드를 차단하지 않는다. 초기화는 로드 완료 후 1회.

공유 버튼 컴포넌트는 범용으로 설계한다. title, description, imageUrl, shareUrl을 props로 받는다. 공유 페이지, 갤러리 프리뷰, 카드 오버레이 어디서든 동일한 컴포넌트를 재사용한다.

3. 프리셋 체인 — 공유에서 생성까지

공유 페이지의 CTA를 클릭하면 생성 페이지로 이동한다. 이때 원본 작품의 스타일과 프롬프트가 URL 파라미터로 전달된다.

/create?style_id=X&writing_prompt_id=Y

생성 페이지의 상태 관리 훅이 이 파라미터를 수신한다. 우선순위는 3단계다.

URL 프리셋 > localStorage 이전 설정 > 시스템 기본값

URL 프리셋이 있으면 해당 스타일과 프롬프트가 미리 선택된 상태로 페이지가 열린다. 사용자는 이름만 입력하면 된다. 마찰을 최소화한다.

이 패턴의 장점은 변경 범위가 작다는 것이다. 생성 페이지 자체를 수정하지 않는다. 상태 초기화 로직에 initialPreset 인자를 하나 추가하면 끝이다. 이후 갤러리의 “이 스타일로 만들기” 버튼도 동일한 URL 패턴을 사용한다.

4. 레퍼럴 쿠폰 — 공유에 인센티브 부여

공유만으로는 부족하다. 수신자에게 인센티브가 필요하다.

쿠폰 시스템의 흐름은 두 단계다.

생성: 사용자가 공유 버튼을 클릭하면 서버가 고유 코드를 발급한다. 이 코드가 공유 URL에 ref 파라미터로 붙는다.

적용: 수신자가 공유 링크로 접속하면 ref 값이 로컬 스토리지에 저장된다. 가입 완료 후 자동으로 쿠폰이 적용되어 무료 토큰이 지급된다.

검증 규칙은 4가지다.

• 만료 여부 확인 (발급 후 30일)
• 미사용 상태 확인
• 자기 자신의 쿠폰 사용 불가
• (선택) 사용자당 횟수 제한

5. 의존성 기반 구현 순서

4개 트랙의 의존성을 분석하면 병렬 작업을 최대화할 수 있다.

Week 1 ─────────────────────────────
├─ Track A (독립): UX 개선 3건
├─ Track B (순차): 공유 페이지 → 프리셋 → 카카오 버튼
│
Week 2 ─────────────────────────────
├─ Track C (독립): 건당 결제 + 원탭 생성
│
Week 3~4 ───────────────────────────
├─ Track D (B 완료 후): 복제 기능 + 쿠폰

Track A와 B는 완전 병렬이다. Track C도 병렬 가능하지만 Week 1 이후 시작이 안정적이다. Track D만 B의 완료를 기다린다. 복제 기능은 공유 페이지와 프리셋이 선행되어야 하기 때문이다.

결론

소셜 공유는 기능 하나가 아니다. SSR 페이지, 동적 OG, 카카오 SDK, 프리셋 체인, 쿠폰 시스템이 하나의 파이프라인으로 연결된다. 각 부분은 독립적으로 동작하지만, 전체가 모여야 바이럴 루프가 완성된다. 결과물이 다음 사용자를 데려오는 구조. 그것이 이 설계의 목적이다.