LEVEL 57 QUEST

고객 온보딩 & 리텐션

고객을 성공으로 이끄는 온보딩과 이탈 방지 시스템! 유지율이 5% 오르면 수익이 25~95% 증가합니다.

온보딩 체크리스트 시스템 구현

좋은 온보딩은 "Aha Moment"(가치를 깨닫는 순간)까지의 시간을 최소화합니다. 온보딩 완료율이 높을수록 유료 전환율이 비례하여 올라갑니다.

SaaS 온보딩 핵심 원칙

원칙	설명	예시
최소 마찰	가입 시 최소한의 정보만 요청	이메일 + 비밀번호만
빠른 가치 전달	5분 이내 첫 성공 경험	샘플 데이터로 첫 보고서 생성
단계적 공개	모든 기능을 한번에 보여주지 않기	핵심 3가지만 먼저
진행률 표시	완료 % 보여주기	프로그레스바 + 체크리스트
축하 & 보상	각 단계 완료 시 긍정 피드백	컨페티 애니메이션 + XP

// onboarding_system.php - 온보딩 체크리스트

class OnboardingSystem {
    private $pdo;

    // 온보딩 단계 정의
    private const STEPS = [
        ['id' => 'profile',     'title' => '프로필 설정',         'xp' => 10],
        ['id' => 'first_report', 'title' => '첫 보고서 만들기',     'xp' => 20],
        ['id' => 'invite_team',  'title' => '팀원 초대하기',       'xp' => 15],
        ['id' => 'integration',  'title' => '데이터 소스 연결',     'xp' => 25],
        ['id' => 'schedule',     'title' => '자동 보고서 예약',     'xp' => 30],
    ];

    public function __construct(PDO $pdo) {
        $this->pdo = $pdo;
        $this->initTable();
    }

    private function initTable() {
        $this->pdo->exec("
            CREATE TABLE IF NOT EXISTS onboarding_progress (
                id INT AUTO_INCREMENT PRIMARY KEY,
                user_id INT NOT NULL,
                step_id VARCHAR(50) NOT NULL,
                completed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
                UNIQUE KEY unique_step (user_id, step_id)
            )
        ");
    }

    // 사용자의 온보딩 상태 조회
    public function getProgress(int $userId): array {
        $stmt = $this->pdo->prepare(
            "SELECT step_id FROM onboarding_progress WHERE user_id = ?"
        );
        $stmt->execute([$userId]);
        $completed = $stmt->fetchAll(PDO::FETCH_COLUMN);

        $steps = [];
        foreach (self::STEPS as $step) {
            $step['completed'] = in_array($step['id'], $completed);
            $steps[] = $step;
        }

        $completedCount = count($completed);
        $totalSteps = count(self::STEPS);

        return [
            'steps'      => $steps,
            'completed'  => $completedCount,
            'total'      => $totalSteps,
            'percentage' => round(($completedCount / $totalSteps) * 100),
            'is_done'    => $completedCount === $totalSteps,
        ];
    }

    // 단계 완료 처리
    public function completeStep(int $userId, string $stepId): array {
        $stmt = $this->pdo->prepare("
            INSERT IGNORE INTO onboarding_progress (user_id, step_id)
            VALUES (?, ?)
        ");
        $stmt->execute([$userId, $stepId]);

        // XP 부여
        $step = array_filter(self::STEPS, fn($s) => $s['id'] === $stepId);
        $xp = current($step)['xp'] ?? 0;

        if ($stmt->rowCount() > 0 && $xp > 0) {
            $this->pdo->prepare("UPDATE users SET xp = xp + ? WHERE id = ?")
                 ->execute([$xp, $userId]);
        }

        $progress = $this->getProgress($userId);

        return [
            'success'     => $stmt->rowCount() > 0,
            'xp_earned'   => $xp,
            'progress'    => $progress,
            'show_confetti'=> $progress['is_done'],
        ];
    }
}
    

프로그레시브 온보딩 UI (단계별 가이드)

<!-- onboarding_widget.php - 온보딩 위젯 UI -->

<style>
/* 온보딩 체크리스트 위젯 */
.onboard-widget {
    position: fixed; bottom: 20px; right: 20px;
    width: 320px; background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    transition: all 0.3s ease;
}
.onboard-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 16px 20px; color: white;
    cursor: pointer;
}
.onboard-progress-bar {
    background: rgba(255,255,255,0.3);
    border-radius: 10px; height: 8px; margin-top: 8px;
}
.onboard-progress-fill {
    background: white; border-radius: 10px; height: 100%;
    transition: width 0.5s ease;
}
.onboard-steps { padding: 12px 16px; max-height: 300px; overflow-y: auto; }
.onboard-step {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer; transition: background 0.2s;
}
.onboard-step:hover { background: #f8f9ff; border-radius: 8px; }
.onboard-check {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid #ddd; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.onboard-check.done {
    background: #22c55e; border-color: #22c55e; color: white;
}
.onboard-step-title { font-size: 14px; font-weight: 600; }
.onboard-step-title.done { text-decoration: line-through; color: #999; }
</style>

<?php
$onboarding = new OnboardingSystem($pdo);
$progress = $onboarding->getProgress($userId);
?>

<div class="onboard-widget" id="onboardWidget">
    <div class="onboard-header">
        <div style="display:flex;justify-content:space-between;">
            <strong>시작 가이드</strong>
            <span><?= $progress['completed'] ?>/<?= $progress['total'] ?> 완료</span>
        </div>
        <div class="onboard-progress-bar">
            <div class="onboard-progress-fill"
                 style="width:<?= $progress['percentage'] ?>%"></div>
        </div>
    </div>
    <div class="onboard-steps">
        <?php foreach ($progress['steps'] as $step): ?>
        <div class="onboard-step"
             onclick="startStep('<?= $step['id'] ?>')">
            <div class="onboard-check <?= $step['completed'] ? 'done' : '' ?>">
                <?= $step['completed'] ? '✓' : '' ?>
            </div>
            <span class="onboard-step-title <?= $step['completed'] ? 'done' : '' ?>">
                <?= $step['title'] ?> (+<?= $step['xp'] ?> XP)
            </span>
        </div>
        <?php endforeach; ?>
    </div>
</div>
    

🔒

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

고객 온보딩 & 리텐션
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

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