LEVEL 30 QUEST

바이럴 요소 설계와 공유 메커니즘

무료 툴에 바이럴 요소를 내장하고, 쓰레드에서 자연스럽게 공유되는 메커니즘을 설계합니다.

Stage 10-4 — 바이럴 요소 설계와 공유 메커니즘

바이럴은 우연이 아니라 설계다

쓰레드에서 "바이럴"이 되는 도구들은 우연히 퍼진 것이 아닙니다. 처음부터 공유가 일어나도록 설계된 것입니다. 이 레슨에서는 무료 도구에 바이럴 요소를 체계적으로 내장하는 방법을 배웁니다.

바이럴의 핵심 공식: 가치 x 공유 용이성 x 감정 트리거 = 바이럴 확률

세 가지 요소 중 하나라도 0에 가까우면 바이럴은 발생하지 않습니다. 반대로 세 가지를 모두 높이면 바이럴 확률이 기하급수적으로 높아집니다.

공유 메커니즘 완벽 설계

쓰레드 공유 버튼 구현 방법

쓰레드에는 아직 공식 공유 API가 없습니다. 하지만 효과적인 우회 방법이 있습니다:

방법 1: Web Share API (모바일 최적화)

// Web Share API - 모바일에서 쓰레드 앱으로 직접 공유 가능
async function shareToThreads(resultText, toolUrl) {
    if (navigator.share) {
        try {
            await navigator.share({
                title: '내 시급 계산 결과',
                text: resultText + '\n\n' + toolUrl,
            });
        } catch (err) {
            // 사용자가 취소한 경우
            fallbackShare(resultText, toolUrl);
        }
    } else {
        fallbackShare(resultText, toolUrl);
    }
}

// 데스크탑 폴백: 텍스트 복사
function fallbackShare(text, url) {
    const shareText = text + '\n\n' + url;
    navigator.clipboard.writeText(shareText);
    alert('텍스트가 복사되었습니다! 쓰레드에 붙여넣기 하세요.');
}
            

방법 2: 결과 이미지 생성 + 다운로드

// html2canvas로 결과 카드를 이미지로 변환
async function downloadResultCard() {
    const resultCard = document.getElementById('result-card');
    const canvas = await html2canvas(resultCard, {
        scale: 2, // 레티나 대응
        backgroundColor: null,
        useCORS: true
    });
    const link = document.createElement('a');
    link.download = 'my-result.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
}
            

방법 3: 클립보드 복사 (가장 간단)

function copyResult() {
    const text = `내 프리랜서 시급 계산 결과: ${hourlyRate}원!

상위 ${percentile}%에 해당합니다.

나도 계산해보기: https://내도구.com`;

    navigator.clipboard.writeText(text);
    showToast('복사 완료! 쓰레드에 붙여넣기 하세요 ✌️');
}
            

결과 카드 디자인 전략

사용자가 결과를 스크린샷으로 찍어 공유하는 경우가 많습니다. 따라서 결과 화면 자체가 "스크린샷으로 공유하고 싶을 만큼 예뻐야" 합니다.

결과 카드 필수 요소:

도구 로고/이름 — 화면 상단에 작게. 스크린샷에 자동 포함됨
핵심 결과 (크게) — 가장 눈에 띄는 위치. 큰 폰트, 강조색
보조 정보 — 핵심 결과를 보완하는 데이터
도구 URL — 하단에 작게. "나도 해보기: 도구주소"
그라데이션 배경 — 단색보다 그라데이션이 공유율 높음

색상 심리학 적용:

파란색 계열: 신뢰, 전문성 (금융/비즈니스 도구)
초록색 계열: 성장, 긍정 (건강/생산성 도구)
보라색 계열: 창의성, 프리미엄 (디자인/크리에이티브 도구)
주황색 계열: 에너지, 재미 (소셜/엔터테인먼트 도구)

🔒

여기까지는 미리보기입니다

바이럴 요소 설계와 공유 메커니즘
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)