LEVEL 58 QUEST

소셜 공유 버튼과 임베드 최적화

도구의 공유 기능을 극대화하고, 다른 사이트에 임베드할 수 있는 위젯을 만들어 확산을 가속화합니다.

Stage 14-3 — 소셜 공유 버튼과 임베드 최적화

공유 UX 최적화의 원칙

공유 버튼이 있다고 해서 사람들이 공유하는 것은 아닙니다. 공유를 자연스럽고 쉽게 만드는 UX 설계가 핵심입니다.

공유 UX 3대 원칙:

최소 클릭: 공유까지 1-2클릭 이내
적절한 타이밍: 사용자가 만족하는 순간에 공유 유도
매력적인 미리보기: 공유했을 때 보이는 미리보기가 매력적

멀티 플랫폼 공유 버튼 구현

플랫폼별 공유 구현 코드

각 소셜 플랫폼에 최적화된 공유 기능을 구현하세요:

통합 공유 시스템:

class ShareManager {
    constructor(result) {
        this.result = result;
        this.toolUrl = `https://myhourlyrate.com?ref=${getUserRef()}`;
        this.shareText = this.generateShareText();
    }

    generateShareText() {
        return `내 프리랜서 실제 시급: ${this.result.hourlyRate.toLocaleString()}원
상위 ${this.result.percentile}%에 해당!
나도 확인해보기 → ${this.toolUrl}`;
    }

    // 1. 네이티브 공유 (모바일 최적화)
    async shareNative() {
        if (navigator.share) {
            try {
                await navigator.share({
                    title: '내 프리랜서 시급 결과',
                    text: this.shareText,
                    url: this.toolUrl
                });
                this.trackShare('native');
            } catch (e) { /* 사용자 취소 */ }
        } else {
            this.copyToClipboard();
        }
    }

    // 2. 카카오톡 공유
    shareKakao() {
        Kakao.Share.sendDefault({
            objectType: 'feed',
            content: {
                title: '프리랜서 시급 계산 결과',
                description: `내 실제 시급: ${this.result.hourlyRate.toLocaleString()}원`,
                imageUrl: 'https://myhourlyrate.com/og-image.png',
                link: {
                    mobileWebUrl: this.toolUrl,
                    webUrl: this.toolUrl
                }
            },
            buttons: [{
                title: '나도 계산하기',
                link: {
                    mobileWebUrl: this.toolUrl,
                    webUrl: this.toolUrl
                }
            }]
        });
        this.trackShare('kakao');
    }

    // 3. X (Twitter) 공유
    shareTwitter() {
        const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(this.shareText)}`;
        window.open(url, '_blank', 'width=600,height=400');
        this.trackShare('twitter');
    }

    // 4. 클립보드 복사
    async copyToClipboard() {
        await navigator.clipboard.writeText(this.shareText);
        showToast('복사 완료! 쓰레드에 붙여넣기 하세요');
        this.trackShare('clipboard');
    }

    // 5. 결과 이미지 다운로드
    async downloadImage() {
        const canvas = await html2canvas(
            document.getElementById('result-card'),
            { scale: 2 }
        );
        const link = document.createElement('a');
        link.download = `내시급_결과_${Date.now()}.png`;
        link.href = canvas.toDataURL('image/png');
        link.click();
        this.trackShare('image_download');
    }

    // 공유 이벤트 추적
    trackShare(method) {
        gtag('event', 'share', {
            method: method,
            content_type: 'tool_result'
        });
    }
}
            

공유 버튼 UI 디자인

공유 버튼의 배치와 디자인이 공유율에 큰 영향을 미칩니다:

최적 배치:
- 결과 카드 바로 아래 (스크롤 없이 보이는 위치)
- 가로 1줄 배열 (세로 나열 X)
- 가장 중요한 버튼을 가장 왼쪽에

버튼 순서 (한국 타겟):
1. 카카오톡 공유 (한국인 필수)
2. 이미지 저장 (쓰레드/인스타용)
3. 링크 복사 (만능)
4. X(트위터) 공유

/* 공유 버튼 스타일 */
.share-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}
.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.share-btn:hover {
    transform: translateY(-2px);
}
.share-btn.kakao {
    background: #FEE500;
    color: #3C1E1E;
}
.share-btn.image {
    background: #6366F1;
    color: white;
}
.share-btn.copy {
    background: #F3F4F6;
    color: #374151;
}
            

🔒

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

소셜 공유 버튼과 임베드 최적화
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

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