LEVEL 36 QUEST

인증 시스템과 사용자 관리

무료 웹 도구에 간단한 인증 시스템을 구축하고, 사용자 경험을 해치지 않는 로그인 플로우를 설계합니다.

Stage 11-4 — 인증 시스템과 사용자 관리

무료 도구에서 인증의 역할

핵심 원칙: 가입 없이 사용 가능해야 한다.

무료 도구의 첫 번째 원칙은 "진입 장벽 최소화"입니다. 그런데 인증(로그인)은 진입 장벽입니다. 그렇다면 왜 인증을 다루는가?

인증이 필요한 상황:

결과 영구 저장/불러오기 기능을 제공할 때
프리미엄 기능 (횟수 제한 해제 등)을 제공할 때
이메일 리스트를 구축하고 싶을 때
사용자별 대시보드가 필요할 때

인증의 황금률:
"기본 기능은 가입 없이. 부가 기능만 가입 시."

예: 시급 계산은 가입 없이 가능. 히스토리 저장은 구글 로그인 후 가능. 이렇게 하면 진입 장벽은 낮추면서, 원하는 사용자만 가입하게 됩니다.

MVP에서의 인증

MVP 단계에서는 인증을 구현하지 마세요. 인증 없이 출시하고, 사용자들이 "결과를 저장하고 싶다"는 피드백을 주면 그때 추가하세요. 이 레슨은 "나중에 추가할 때"를 위한 준비 과정입니다.

소셜 로그인 구현 (가장 쉬운 방법)

Google 로그인 with Supabase

이메일/비밀번호 대신 소셜 로그인을 사용하면 사용자의 가입 부담이 크게 줄어듭니다. Supabase를 사용하면 몇 줄의 코드로 Google 로그인을 구현할 수 있습니다:

1단계: Supabase 대시보드에서 Google Auth 활성화
- Authentication > Providers > Google 활성화
- Google Cloud Console에서 OAuth 클라이언트 ID 생성
- Client ID와 Client Secret을 Supabase에 입력

2단계: 프론트엔드 구현

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Google 로그인 버튼 클릭 시
async function signInWithGoogle() {
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: window.location.origin
        }
    });
}

// 로그아웃
async function signOut() {
    await supabase.auth.signOut();
}

// 현재 사용자 확인
async function getUser() {
    const { data: { user } } = await supabase.auth.getUser();
    return user;
}

// 인증 상태 변화 감지
supabase.auth.onAuthStateChange((event, session) => {
    if (session) {
        showLoggedInUI(session.user);
    } else {
        showLoggedOutUI();
    }
});
            

3단계: UI 조건부 렌더링

function showLoggedInUI(user) {
    document.getElementById('login-btn').style.display = 'none';
    document.getElementById('user-info').style.display = 'block';
    document.getElementById('user-name').textContent = user.user_metadata.full_name;
    document.getElementById('user-avatar').src = user.user_metadata.avatar_url;
    // 저장/히스토리 버튼 활성화
    document.getElementById('save-btn').disabled = false;
}

function showLoggedOutUI() {
    document.getElementById('login-btn').style.display = 'block';
    document.getElementById('user-info').style.display = 'none';
    document.getElementById('save-btn').disabled = true;
}
            

Kakao 로그인 (한국 사용자 특화)

한국 타겟이라면 카카오 로그인이 Google보다 접근성이 높을 수 있습니다.

카카오 로그인 장점:

한국인 대부분이 카카오 계정 보유
모바일에서 카카오톡 앱으로 자동 인증 (매우 간편)
프로필 이미지, 닉네임 자동 가져오기

Supabase + Kakao 연동:
Supabase는 기본적으로 Kakao를 지원합니다. 카카오 개발자 센터(developers.kakao.com)에서 앱을 등록하고, REST API 키를 Supabase에 설정하면 됩니다.

// 카카오 로그인
async function signInWithKakao() {
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'kakao',
        options: {
            redirectTo: window.location.origin
        }
    });
}
            

추천 전략: Google + Kakao 두 가지를 모두 제공하세요. 사용자가 선호하는 방법을 선택할 수 있게 하면 가입 전환율이 높아집니다.

🔒

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

인증 시스템과 사용자 관리
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

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