🚀 5분 만에 로그인 시스템 구축하기: Supabase 시작 가이드

G: 백엔드 개발의 복잡함에 지치셨나요? 🤯 사용자 인증 시스템을 구축하는 것은 웹 및 모바일 애플리케이션 개발에서 가장 기본적인 부분이면서도 가장 번거로운 작업 중 하나입니다. 데이터베이스 설정, 암호화, 세션 관리, 비밀번호 재설정 등 고려해야 할 것이 한두 가지가 아닙니다.

하지만 걱정 마세요! 오늘날 우리는 Supabase라는 강력한 도구를 사용하여 단 5분 만에 완벽하게 작동하는 로그인 시스템을 구축하는 방법을 알아볼 것입니다. 믿기지 않는다구요? 그럼 저와 함께 지금 바로 시작해 볼까요? 🚀

💡 왜 Supabase인가요? Firebase의 오픈소스 대안!

Supabase는 오픈소스 기반의 백엔드 서비스로, 흔히 ‘Firebase의 오픈소스 대안’으로 불립니다. 하지만 단순히 대안을 넘어선 강력한 특징들을 가지고 있습니다:

• PostgreSQL 기반: 친숙한 관계형 데이터베이스인 PostgreSQL을 사용합니다. SQL에 익숙하다면 더욱 쉽게 접근할 수 있습니다. 🐘
• 통합 인증(Authentication): 이메일/비밀번호, 소셜 로그인(Google, GitHub, Facebook 등), OTP 로그인 등 다양한 인증 방식을 손쉽게 통합할 수 있습니다. 🔑
• 실시간(Realtime) 구독: 데이터베이스 변경 사항을 실시간으로 클라이언트에 푸시할 수 있습니다. ⚡️
• 스토리지(Storage): 파일 업로드 및 관리를 위한 객체 스토리지 기능을 제공합니다. 📦
• 엣지 함수(Edge Functions): Deno 기반의 서버리스 함수를 통해 백엔드 로직을 구현할 수 있습니다. ⚙️
• 쉬운 사용성: 직관적인 대시보드와 잘 정리된 문서, 그리고 강력한 클라이언트 라이브러리(JavaScript, Dart/Flutter 등)를 제공합니다. 👍

이 모든 기능들이 유기적으로 연결되어 있어, 개발자는 핵심 비즈니스 로직에만 집중할 수 있게 해줍니다. 특히 인증 기능은 Supabase의 핵심 강점 중 하나입니다.

🛠️ 1단계: Supabase 프로젝트 시작하기

가장 먼저 Supabase 프로젝트를 생성해야 합니다.

1. Supabase 가입 및 로그인:

   • Supabase 웹사이트 (supabase.com)에 접속하여 GitHub 계정이나 이메일로 가입/로그인합니다.
   • Supabase 대시보드로 이동합니다.

2. 새 프로젝트 생성:

   • 대시보드에서 New project 버튼을 클릭합니다.
   • Name: 프로젝트 이름을 입력합니다. (예: MyLoginApp)
   • Database Password: 강력한 비밀번호를 설정하고 기억해둡니다. 🔒
   • Region: 서버 위치를 선택합니다. 사용자들과 가까운 곳을 선택하는 것이 좋습니다.
   • Organization: 조직을 선택하거나 새로 생성합니다.
   • Create new project를 클릭합니다. 프로젝트 생성이 완료될 때까지 잠시 기다립니다. (약 1~2분 소요)

3. API 키 확인:

   • 프로젝트 대시보드로 이동합니다.
   • 왼쪽 메뉴에서 Project Settings (톱니바퀴 아이콘 ⚙️)를 클릭한 다음 API를 선택합니다.
   • 여기서 Project URL과 anon public 키를 확인할 수 있습니다. 이 두 값은 클라이언트 애플리케이션에서 Supabase와 통신할 때 필요하니 잘 기록해 두세요! 📋
     • Project URL: https://[your-project-id].supabase.co 형태
     • anon public (or public anon) key: eyJ... 형태로 시작하는 긴 문자열

⚙️ 2단계: 인증(Authentication) 설정하기

이제 프로젝트가 준비되었으니, 로그인 시스템의 핵심인 인증 방식을 설정해 봅시다.

1. 인증 설정 페이지 접속:

   • Supabase 대시보드에서 왼쪽 메뉴의 Authentication (자물쇠 아이콘 🔑)을 클릭합니다.
   • Settings 탭으로 이동합니다.

2. 로그인 공급자 활성화:

   • 기본적으로 Email 로그인이 활성화되어 있습니다.
   • Enable email signup이 활성화되어 있는지 확인합니다.
   • Confirm email 옵션도 활성화하는 것을 권장합니다. (사용자가 가입 시 이메일 인증을 하도록 하여 스팸 계정을 방지합니다.) 📧
   • 원한다면 Google, GitHub, Facebook 등 다른 소셜 로그인 공급자들도 활성화할 수 있습니다. 각 공급자를 클릭하여 안내에 따라 API 키를 설정하면 됩니다. (이 예시에서는 이메일/비밀번호만 사용하겠습니다.)

3. SMTP 설정 (선택 사항이지만 중요!):

   • 실제 서비스에서는 비밀번호 재설정 이메일, 이메일 인증 이메일 등을 발송해야 합니다. 이를 위해 SMTP 설정을 해야 합니다.
   • Email Templates 섹션 아래의 SMTP Settings에서 SendGrid, Mailgun 등 이메일 서비스 제공자의 정보를 입력하면 됩니다. (이 단계는 5분 안에 완료하기는 어렵지만, 실제 서비스에서는 필수적입니다!) 📩

💻 3단계: 클라이언트 코드 작성하기 (5분 안에 로그인 시스템 완성!)

가장 핵심적인 단계입니다. 우리는 Supabase에서 제공하는 React용 Auth UI 컴포넌트를 사용하여 놀랍도록 빠르게 로그인 시스템을 구현할 것입니다. (React 대신 일반 HTML/JS로도 가능하며, Vue, Next.js 등 다양한 프레임워크에서도 유사하게 적용됩니다.)

이 예시에서는 React 앱에서 Supabase Auth UI를 사용하는 방법을 보여드리겠습니다.

1. 새 React 프로젝트 생성 (이미 있다면 스킵):

   npx create-react-app supabase-login-app
   cd supabase-login-app

2. Supabase 클라이언트 및 Auth UI 설치:

   npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared
   # 또는 yarn add @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

3. Supabase 클라이언트 초기화: src 폴더 안에 supabaseClient.js 파일을 만들고 아래 코드를 추가합니다. YOUR_SUPABASE_URL과 YOUR_SUPABASE_ANON_KEY를 1단계에서 얻은 값으로 바꿔주세요.

   // src/supabaseClient.js
   import { createClient } from '@supabase/supabase-js'
   
   const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
   const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY
   
   export const supabase = createClient(supabaseUrl, supabaseAnonKey)

   주의: 실제 값을 코드에 직접 넣는 대신 .env 파일을 사용하여 환경 변수로 관리하는 것이 좋습니다. supabase-login-app 루트 폴더에 .env 파일을 만들고 아래 내용을 추가하세요:

   REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
   REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

   이후 앱을 다시 시작해야 환경 변수가 로드됩니다.

4. Auth 컴포넌트 사용: src/App.js 파일을 열고 모든 내용을 지운 후 아래 코드를 붙여넣으세요.

   
   // src/App.js
   import React, { useState, useEffect } from 'react';
   import { Auth } from '@supabase/auth-ui-react';
   import { ThemeSupa } from '@supabase/auth-ui-shared'; // 테마 임포트
   import { supabase } from './supabaseClient'; // 3단계에서 만든 supabaseClient 임포트
   
   function App() {
     const [session, setSession] = useState(null);
   
     useEffect(() => {
       // 세션 상태 변경을 감지합니다.
       supabase.auth.getSession().then(({ data: { session } }) => {
         setSession(session);
       });
   
       const {
         data: { subscription },
       } = supabase.auth.onAuthStateChange((_event, session) => {
         setSession(session);
       });
   
       return () => subscription.unsubscribe();
     }, []);
   
     if (!session) {
       // 세션이 없으면 로그인/회원가입 UI를 보여줍니다.
       return (
         <div style={{ width: '100%', maxWidth: '400px', margin: '50px auto' }}>

🚀 Supabase 로그인/회원가입

        <Auth
          supabaseClient={supabase}
          appearance={{ theme: ThemeSupa }} // 기본 테마 사용
          providers={['google', 'github', 'discord']} // 활성화할 소셜 로그인 선택 (선택 사항)
          localization={{
            variables: {
              sign_in: {
                email_label: '이메일 주소',
                password_label: '비밀번호',
                email_input_placeholder: '당신의 이메일',
                password_input_placeholder: '비밀번호',
                button_label: '로그인',
                social_provider_text: '다음으로 로그인',
                link_text: '이미 계정이 있으신가요? 로그인',
              },
              sign_up: {
                email_label: '이메일 주소',
                password_label: '비밀번호',
                email_input_placeholder: '당신의 이메일',
                password_input_placeholder: '비밀번호',
                button_label: '회원가입',
                social_provider_text: '다음으로 회원가입',
                link_text: '계정이 없으신가요? 회원가입',
              },
              // 비밀번호 재설정, 업데이트 등의 텍스트도 커스터마이징 가능
            },
          }}
        />
      </div>
    );
  } else {
    // 세션이 있으면 사용자 정보를 보여줍니다.
    return (
      <div style={{ width: '100%', maxWidth: '400px', margin: '50px auto', textAlign: 'center' }}>

환영합니다! 🎉

로그인되었습니다. 사용자 이메일: {session.user.email}

        <button
          onClick={() => supabase.auth.signOut()}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ef4444',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            marginTop: '20px'
          }}
        >
          로그아웃 🚪
        </button>
      </div>
    );
  }
}

export default App;
```

5. 앱 실행:

   npm start

   브라우저가 열리면서 http://localhost:3000에 Supabase 로그인/회원가입 UI가 나타나는 것을 볼 수 있습니다! ✨

   이메일 주소와 비밀번호를 입력하고 회원가입 버튼을 누르면, Supabase 대시보드의 Authentication 탭에 새로운 사용자가 추가된 것을 확인할 수 있습니다. 만약 이메일 확인을 활성화했다면, 해당 이메일로 확인 메일이 발송됩니다.

   소요 시간: 5분! ⏱️ 어떤가요? 이 간단한 코드 몇 줄만으로 사용자 가입, 로그인, 세션 관리, 로그아웃 기능까지 모두 구현했습니다! 물론 이메일 확인, 비밀번호 재설정 등의 기능도 Auth 컴포넌트가 자동으로 처리해 줍니다.

🎨 (옵션) 수동으로 로그인/회원가입 UI 구현하기 (더 세밀한 제어)

위의 Auth 컴포넌트는 매우 편리하지만, 디자인 커스터마이징에 제한이 있을 수 있습니다. 좀 더 커스터마이징된 UI를 원한다면, Supabase JS 클라이언트를 직접 사용하여 로그인 기능을 구현할 수 있습니다.

// src/components/AuthForm.js (새 파일 생성)
import React, { useState } from 'react';
import { supabase } from '../supabaseClient'; // 3단계에서 만든 supabaseClient 임포트

function AuthForm() {
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (event) => {
    event.preventDefault();
    setLoading(true);
    const { error } = await supabase.auth.signInWithPassword({ email, password });

    if (error) alert(error.message);
    setLoading(false);
  };

  const handleSignup = async (event) => {
    event.preventDefault();
    setLoading(true);
    const { error } = await supabase.auth.signUp({ email, password });

    if (error) alert(error.message);
    else alert('회원가입 성공! 이메일을 확인하여 인증을 완료해주세요.');
    setLoading(false);
  };

  return (
    <div style={{ maxWidth: '400px', margin: '50px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
      <h2 style={{ textAlign: 'center', marginBottom: '30px', color: '#333' }}>로그인 또는 회원가입</h2>
      <form onSubmit={handleLogin}>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="email" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>이메일:</label>
          <input
            id="email"
            type="email"
            placeholder="당신의 이메일 주소"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <div style={{ marginBottom: '20px' }}>
          <label htmlFor="password" style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>비밀번호:</label>
          <input
            id="password"
            type="password"
            placeholder="비밀번호"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            style={{ width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' }}
          />
        </div>
        <button
          onClick={handleLogin}
          disabled={loading}
          style={{
            width: '100%',
            padding: '12px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            fontSize: '16px',
            cursor: 'pointer',
            marginBottom: '10px'
          }}
        >
          {loading ? '로그인 중...' : '로그인'}
        </button>
        <button
          onClick={handleSignup}
          disabled={loading}
          style={{
            width: '100%',
            padding: '12px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            fontSize: '16px',
            cursor: 'pointer'
          }}
        >
          {loading ? '회원가입 중...' : '회원가입'}
        </button>
      </form>
    </div>
  );
}

export default AuthForm;

이제 App.js에서 Auth 컴포넌트 대신 AuthForm을 사용합니다.

// src/App.js
import React, { useState, useEffect } from 'react';
import { supabase } from './supabaseClient';
import AuthForm from './components/AuthForm'; // 새로 만든 AuthForm 임포트

function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => subscription.unsubscribe();
  }, []);

  if (!session) {
    return <AuthForm />; // AuthForm 컴포넌트 렌더링
  } else {
    return (
      <div style={{ width: '100%', maxWidth: '400px', margin: '50px auto', textAlign: 'center' }}>

<h2>환영합니다! 🎉</h2>

<p>로그인되었습니다. 사용자 이메일: <strong>{session.user.email}</strong></p>
        <button
          onClick={() => supabase.auth.signOut()}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ef4444',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            marginTop: '20px'
          }}
        >
          로그아웃 🚪
        </button>
      </div>
    );
  }
}

export default App;

이렇게 하면 원하는 대로 디자인을 자유롭게 변경하면서 Supabase의 강력한 인증 기능을 활용할 수 있습니다.

🌟 다음 단계: 로그인 시스템을 넘어!

5분 만에 로그인 시스템을 구축했지만, Supabase의 진정한 힘은 여기서부터 시작됩니다!

1. Row Level Security (RLS) 설정:

   • 가장 중요합니다! Supabase 테이블의 데이터를 안전하게 보호하려면 반드시 RLS를 설정해야 합니다.
   • Database -> Table Editor에서 특정 테이블을 선택하고 Policies 탭으로 이동하여 RLS 정책을 추가합니다.
   • 예를 들어, “사용자 본인의 프로필만 수정 가능”과 같은 정책을 쉽게 구현할 수 있습니다. 🔒

2. 사용자 프로필 테이블 연동:

   • auth.users 테이블은 Supabase가 관리하는 인증 정보입니다.
   • 사용자 이름, 프로필 사진, 기타 상세 정보를 저장하려면 별도의 public.profiles 테이블을 만들고 auth.users 테이블의 id와 연결하는 것이 일반적입니다. (One-to-one 관계) 🧑‍💻

3. 비밀번호 재설정 및 변경:

   • Supabase 인증은 비밀번호 재설정 이메일 전송 기능도 제공합니다. supabase.auth.resetPasswordForEmail('user@example.com') 같은 함수를 사용합니다. 🔑

4. 소셜 로그인 연동:

   • Auth 컴포넌트의 providers 속성을 활용하거나, supabase.auth.signInWithOAuth({ provider: 'google' })와 같은 함수를 직접 호출하여 Google, GitHub 등 다양한 소셜 로그인을 추가할 수 있습니다. 🌐

5. 새로운 기능 확장:

   • 실시간 구독(Realtime): 채팅 앱이나 알림 시스템을 구축할 때 유용합니다. 💬
   • 스토리지(Storage): 사용자 프로필 사진, 게시물 이미지 등을 저장하고 관리할 수 있습니다. 🖼️
   • 엣지 함수(Edge Functions): 복잡한 백엔드 로직이나 서드파티 API 연동을 위한 서버리스 함수를 배포합니다. 💡

✨ 마무리하며

오늘 우리는 Supabase를 사용하여 단 5분 만에 기본적인 로그인 시스템을 구축하는 놀라운 경험을 했습니다. 복잡한 백엔드 설정 없이도, Supabase의 강력한 기능을 통해 개발 생산성을 극대화할 수 있다는 것을 확인했죠.

Supabase는 단순한 Firebase 대안이 아니라, 오픈소스의 이점을 살리면서도 현대적인 웹/앱 개발에 필요한 모든 백엔드 기능을 제공하는 완벽한 플랫폼입니다. 이제 이 강력한 도구를 바탕으로 여러분만의 멋진 아이디어를 현실로 만들어 보세요! 🚀

궁금한 점이 있다면 언제든지 Supabase 문서를 참조하거나 커뮤니티에 질문해보세요. 즐거운 코딩 되세요! Happy Hacking! 😊