📣 알릴 준비됐어요? — OG·소개·방문자·런치 글

"알릴 준비"의 진짜 의미

서비스가 인터넷에 떴어도, 사람들이 본인 URL을 처음 봤을 때 "클릭하고 싶다"는 첫 인상이 없으면 의미가 없어요. 이 영역은 그 첫 인상의 4가지 요소를 챙겨요.

옆 탭 + Claude Code에서 /v4-launch-content

이번 lesson은 신규 스킬 /v4-launch-content를 같이 써요. 이 스킬은 본인 빌드킷 + vuild.kr 프로젝트 정보를 읽어서 OG 이미지 점검·한 줄 소개 다듬기·런치 글 3개 초안을 한 번에 만들어 줘요.

/v4-launch-content

단계 1 — OG 미리보기 자동 점검 + 만들기

OG = Open Graph. 페이스북이 만든 표준이고 카톡·트위터·디스코드 거의 모든 SNS가 이 표준을 따라요. 본인 URL을 누군가 카톡으로 공유하면, 카톡이 그 URL의 HTML을 가져와서 다음 4가지를 읽어요.

• og:title — 제목 (보통 본인 서비스명 + 한 줄 설명)
• og:description — 설명 (한두 문장)
• og:image — 미리보기 이미지 (1200x630px 권장)
• og:url — 정식 URL

이 4개가 빠지면 카톡에서 회색 박스 + URL만 떠요. 굉장히 안 예뻐서 클릭률이 절반 이하로 떨어져요. 있으면 큰 이미지 + 제목 + 설명이 카드처럼 떠서 클릭률이 2~3배.

vuild.kr checklist는 본인 URL을 자동으로 두드려서 OG 4개 항목이 다 있는지 확인해요. 빠진 게 있으면 "지금 확인" 옆에 ⚠️ 표시 + 어떤 항목이 빠졌는지 알려줘요. Claude Code에서 /v4-launch-content 스킬이 그걸 자동으로 추가해 줘요.

OG 이미지(og:image)는 가장 신경 써야 할 항목이에요. 카드의 70%를 차지하니까요. 첫 사용자 5명 단계에서는 다음 3가지 중 하나로 만들면 충분해요.

1. 가장 빠름: Canva 무료 템플릿 → "Open Graph Image" 검색 → 본인 서비스명 + 한 줄 입력 → PNG 다운로드
2. 중간: /v4-launch-content가 빌드킷 안에 OG 이미지 자동 생성 라우트 추가 (vercel/og 같은 라이브러리)
3. 가장 자동화: Ch.4-11에서 만든 랜딩 페이지 첫 화면 스크린샷을 그대로 OG 이미지로

만든 OG 이미지를 빌드킷 app/assets/images/og.png에 넣고, /v4-launch-content가 layout 파일의 head에 OG 메타태그 4개를 자동 추가해요.

OG 점검은 Kakao Developers의 "디버거" 도구로도 확인 가능해요. developers.kakao.com/tool/debugger/sharing에서 본인 URL 입력하면 카톡이 어떻게 볼지 미리보기.

단계 2 — 한 줄 소개 다듬기 (3초 룰)

본인 서비스를 처음 보는 사람이 3초 안에 "이게 뭐야"에 답할 수 있어야 해요. 그게 한 줄 소개의 역할이에요. 한 줄 소개는 다음 3곳에 동일하게 들어가야 해요.

• 랜딩 페이지 첫 화면의 큰 헤드라인 (Ch.4-11에서 만든)
• OG 메타태그의 og:title 또는 og:description
• vuild.kr checklist의 "한 줄 소개" 필드

좋은 한 줄 소개의 공식은 "누구에게 + 어떤 결과를 + 어떻게"예요.

/v4-launch-content가 본인 프로젝트 정의(Ch.2)를 읽어서 한 줄 소개 5개 후보를 만들어 줘요. 본인이 가장 마음에 드는 것을 골라서 위 3곳에 동일하게 적용.

단계 3 — 방문자 수 도구 1개 설치

누가 본인 URL을 봤는지 모르면 개선 못 해요. 첫 사용자 5명 단계에서는 너무 무거운 도구는 필요 없고, 다음 3가지 중 1개면 충분해요.

가장 추천: 첫 5명 단계라면 Vuild 자체 분석. 본인 vuild.kr 대시보드 안에서 바로 봐요. 더 정밀한 분석이 필요하면 GA4를 추가로 깔아요. (둘 다 켜도 OK)

GA4 셋업 흐름 (가장 표준이라 한 번 적어둠):

1. analytics.google.com 접속 → "측정 시작" → 본인 계정·속성 만들기
2. "플랫폼" → "웹" 선택 → 본인 도메인 + 서비스명 입력
3. 발급된 측정 ID(예: G-XXXXXX) 복사
4. Claude Code에 "GA4 측정 ID G-XXXXXX를 layout head에 gtag.js로 추가해줘" 한 줄
5. git push → Railway 자동 재배포 → 본인 사이트 한 번 방문 → analytics.google.com에서 실시간 보고서로 본인 방문이 잡히는지 확인

단계 4 — 런치 글 3곳 초안

5-7에서 진짜 5명한테 알리고, 그 후에는 더 넓게 알릴 거예요. 그 알림 글을 미리 써둬야 해요. 방금 출시한 흥분 상태에서 글이 가장 잘 나와요. 시간이 지나면 "뭐가 새로운 거였더라" 잊어버려요.

런치 글 3곳을 추천해요. /v4-launch-content가 각 사이트 톤에 맞게 초안을 만들어 줘요.

각 사이트별 좋은 런치 글의 공통 골격은 다음 5단락이에요. 스킬이 본인 프로젝트 맥락 기반으로 자동 작성.

1. 한 줄: 본인 + 만든 것 한 줄 (3초 룰)
2. 왜 만들었나: 본인이 겪은 문제 (Ch.2-4 pain)
3. 어떻게 다른가: 차별점 1가지 (Ch.2-6 solution)
4. 지금 무료인가/유료인가: 가격 + 어떻게 시작
5. 피드백 부탁: 솔직한 반응 부탁 + 본인 연락처

만들어진 3개 초안을 본인 메모 앱(Notion·Obsidian·메모장)에 저장하세요. 5-7 끝난 후 본인이 손봐서 올림.

단계 5 — checklist 4개 항목 ✅

모든 단계가 끝나면 vuild.kr checklist 📣 영역의 4개 항목 상태를 확인해요.

• "카톡에 공유하면 예쁘게 떠요" — 자동 점검. 단계 1 끝 + "지금 확인" 누르면 ✅
• "한 줄 소개가 명확해요" — 자동 점검. 단계 2 후 ✅
• "방문자 수 볼 수 있어요" — 본인이 토글 ✅ (분석 도구 셋업 후)
• "런치 글 3곳 초안 있어요" — 본인이 토글 ✅ (3개 초안 메모 보관 후)

막히는 지점 — 미리 답

• "카카오 디버거에서는 OG 잘 떠요. 그런데 카톡 채팅에서는 회색 박스만 떠요." → 카톡이 OG 캐시를 가지고 있어서. Kakao Debugger 페이지 우측 "캐시 갱신" 버튼 한 번 누르고 5분 기다림.
• "OG 이미지가 1200x630 비율로 안 나와요." → Canva 템플릿이 보통 정확해요. 자동 생성 라이브러리 쓰면 사이즈 옵션 명시 필요. Claude Code에 "vercel/og로 1200x630 OG 이미지 라우트 만들어줘" 한 줄.
• "한 줄 소개가 너무 추상적인 게 자꾸 나와요." → 본인 Ch.2-4 pain·Ch.2-6 solution을 더 구체적으로 vuild.kr에 입력. "혁신" "솔루션" 같은 단어가 들어 있으면 다시 시키기.
• "GA4 실시간 보고서에 본인 방문이 안 잡혀요." → (1) 광고 차단기 끄기 (uBlock 등이 GA를 차단함) (2) 측정 ID가 layout 모든 페이지에 들어갔는지 확인 (3) 본인 도메인 + IP가 GA "내부 트래픽 필터"에서 제외되어 있나 확인.
• "Product Hunt 영어 톤이 어색해요." → 한국어 초안을 Claude에게 "Product Hunt 톤으로 영어로 의역해줘. 짧고 간결하게" 한 줄. 직역보다 의역이 항상 자연스러워요.

완료 체크리스트 (모두 ✅이면 5-7로)

• ☐ OG 4개 항목(title/description/image/url) 자동 점검 ✅
• ☐ 한 줄 소개를 랜딩·OG·checklist 3곳에 동일하게 적용
• ☐ 방문자 수 도구 1개 (Vuild/GA4/Plausible) 셋업 + 본인 방문 확인
• ☐ Disquiet/Product Hunt/본인 SNS 3개 런치 글 초안 메모 저장
• ☐ vuild.kr checklist 📣 영역 4개 항목 ✅