Discord

서론: 외부 서비스 연동의 숨겨진 함정

AI 코딩 에이전트에게 "Supabase Auth로 구글 로그인 기능 추가해줘"라고 요청하면, 단 몇 초 만에 코드가 생성됩니다. 하지만 실행해보면 supabase.auth.signIn is not a function 같은 에러가 뜹니다. 왜일까요?

AI는 학습 데이터 시점의 API를 기억하고 있기 때문에, 최신 버전의 변경사항을 모를 수 있습니다. Supabase, Firebase, Stripe처럼 빠르게 업데이트되는 서비스일수록 이런 문제가 자주 발생합니다. deprecated된 함수를 사용하거나, 잘못된 설정 방식을 제안하는 경우도 많습니다.

더 큰 문제는 이런 연동 실수는 디버깅이 어렵다는 점입니다. 네트워크 요청은 전송되지만 응답이 없거나, 인증 토큰은 발급되지만 세션이 유지되지 않는 등 애매한 증상으로 나타나기 때문입니다.

이 글에서는 Supabase Auth 연동 실전 사례를 바탕으로, 외부 서비스를 AI와 함께 안전하게 연동하는 체계적인 방법을 소개합니다.

안전한 연동을 위한 3단계 준비

안전한 연동 준비 과정

외부 서비스 연동 작업을 시작하기 전에, 다음 3단계를 거치면 실수를 크게 줄일 수 있습니다.

Step 1: 문서 참조 도구 활성화

AI가 최신 문서를 참조하도록 Context-7 MCP를 활성화합니다. Context-7은 웹 검색 및 문서 참조 기능을 제공하는 MCP 도구로, Claude Code나 Cursor에서 사용할 수 있습니다.

AI에게 다음과 같이 명시적으로 지시합니다:

"Supabase Auth를 구현하기 전에, Context-7을 사용하여 Supabase 공식 문서의 최신 인증 가이드를 참조해줘. 특히 JavaScript 클라이언트 라이브러리의 최신 API를 확인해줘."

이렇게 하면 AI가 학습 데이터가 아닌 실시간 공식 문서를 기반으로 코드를 작성합니다.

Step 2: 코드베이스 전체 분석

연동 코드를 작성하기 전에, 현재 프로젝트의 구조와 기존 코드를 파악해야 합니다. 이때 Reformix와 같은 코드베이스 분석 도구를 활용합니다.

"Reformix를 호출하여 현재 코드베이스를 분석해줘. 특히 기존 인증 관련 코드가 있는지, API 호출 패턴은 어떤지 확인해줘."

이 과정에서 다음을 확인합니다:

기존에 사용 중인 인증 라이브러리나 패턴
환경 변수 설정 방식
API 클라이언트 초기화 위치
에러 핸들링 규칙

Step 3: 구현 계획 수립

바로 코드를 작성하지 않고, AI에게 먼저 구현 계획을 설명하도록 요청합니다.

"Supabase Auth를 이 프로젝트에 적용하기 위한 최적의 구현 계획을 단계적으로 명확하게 설명해줘. 각 단계별로 수정할 파일과 추가할 코드를 구체적으로 알려줘."

계획을 검토하면서 다음을 확인합니다:

환경 변수 설정이 포함되었는지
클라이언트 초기화 위치가 적절한지
인증 상태 관리 방식이 기존 패턴과 일치하는지
에러 처리 로직이 포함되었는지

계획이 타당하면 그때 구현을 시작합니다.

실전 사례: Supabase Auth 연동 과정

Supabase Auth 연동 실습

실제 프로젝트에서 Supabase Auth를 연동한 과정을 단계별로 살펴보겠습니다.

1단계: Supabase 프로젝트 설정

Supabase 콘솔에서 새 프로젝트를 생성하고, 다음 정보를 획득합니다:

Project URL: https://xxxxx.supabase.co
Anon Key: 공개 API 키

환경 변수 파일(.env.local)에 추가합니다:

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

2단계: Google OAuth 프로바이더 활성화

Supabase 콘솔의 Authentication > Providers에서 Google을 활성화합니다. Google Cloud Console에서 OAuth 클라이언트 ID를 생성하여 설정합니다.

3단계: AI에게 구현 요청

이제 준비된 상태에서 AI에게 요청합니다:

"방금 설정한 Supabase 프로젝트로 구글 로그인 버튼을 구현해줘. 버튼을 클릭하면 구글 로그인 팝업이 뜨고, 로그인 성공 후 사용자 정보를 세션에 저장하도록 해줘."

AI가 다음 코드를 생성했습니다:

// lib/supabase.ts
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

// components/LoginButton.tsx
'use client'

import { supabase } from '@/lib/supabase'

export function LoginButton() {
  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
    })
    if (error) console.error('로그인 실패:', error)
  }

  return <button onClick={handleLogin}>구글로 로그인</button>
}

4단계: 동작 확인

로그인 버튼을 클릭하면 구글 로그인 팝업이 뜨고, 인증 후 성공적으로 세션이 생성되는 것을 확인했습니다.

개발자 도구의 Network 탭에서 다음을 확인합니다:

/auth/v1/authorize 요청이 전송되는지
응답 상태가 200인지
세션 토큰이 반환되는지

RLS 문제 해결과 MVP 전략

데이터베이스 보안 설정

Supabase는 기본적으로 **Row Level Security(RLS)**가 활성화되어 있습니다. RLS는 데이터베이스 수준에서 사용자별 접근 권한을 제어하는 강력한 보안 기능이지만, MVP 단계에서는 복잡도를 높이는 요인이 됩니다.

RLS로 인한 전형적인 에러

로그인은 성공했지만, 데이터를 조회하려고 하면 다음과 같은 에러가 발생합니다:

Error: new row violates row-level security policy for table "users"

또는 데이터를 조회해도 빈 배열만 반환됩니다.

MVP 단계에서의 RLS 전략

실제 프로젝트에서는 다음과 같이 접근했습니다:

일단 RLS를 전부 비활성화하여 인증 흐름이 정상 작동하는지 확인
핵심 기능 구현을 완료한 후, 테이블별로 RLS 정책을 점진적으로 추가
최종 배포 전에 모든 테이블에 적절한 RLS 정책 적용

Supabase 콘솔에서 각 테이블의 RLS를 비활성화하는 방법:

-- 테이블별 RLS 비활성화
ALTER TABLE users DISABLE ROW LEVEL SECURITY;
ALTER TABLE posts DISABLE ROW LEVEL SECURITY;

나중에 보안을 강화할 때는 다음과 같은 정책을 추가합니다:

-- 사용자는 자기 데이터만 조회 가능
CREATE POLICY "Users can view own data"
ON users FOR SELECT
USING (auth.uid() = id);

-- 사용자는 자기 데이터만 수정 가능
CREATE POLICY "Users can update own data"
ON users FOR UPDATE
USING (auth.uid() = id);

검증 방법

연동이 완료되면 다음을 체크합니다:

브라우저 개발자 도구의 Network 탭에서 API 요청이 정상적으로 전송되는지 확인
Application 탭 > Local Storage에서 Supabase 세션 토큰이 저장되었는지 확인
실제 사용자 플로우를 처음부터 끝까지 테스트 (로그인 → 데이터 조회 → 로그아웃)

Vooster AI로 외부 서비스 연동 체계화하기

외부 서비스 연동은 한 번 꼬이면 디버깅에 두 배 이상의 시간이 소요됩니다. Vooster AI는 MCP 도구와 프로젝트 문서를 통해 안전한 연동을 지원합니다.

1. MCP 31개 도구로 실시간 문서 동기화

Vooster AI의 MCP는 프로젝트 상태를 실시간으로 연동합니다. Context-7과 함께 사용하면:

AI가 최신 공식 문서를 참조하여 코드 작성
**TRD(기술 요구사항 문서)**에 명시된 기술 스택과 일관성 유지
코드 가이드라인에 따라 일관된 패턴으로 구현

2. TRD에 외부 서비스 명시

프로젝트 생성 시 기술 스택에 Supabase를 추가하면, AI가 자동으로 TRD를 생성합니다. TRD에는 다음이 포함됩니다:

Supabase 클라이언트 버전
인증 방식 (OAuth, Magic Link 등)
데이터베이스 스키마
환경 변수 구성

TRD가 있으면 AI가 일관된 방식으로 코드를 생성합니다.

3. 코드 가이드라인에 연동 규칙 추가

Vooster AI는 프로젝트별 코드 가이드라인을 자동 생성합니다. 여기에 외부 서비스 연동 규칙을 추가할 수 있습니다:

"외부 API 연동 시 반드시 Context-7으로 최신 공식 문서를 확인한다." "Supabase 클라이언트는 lib/supabase.ts에서 단일 인스턴스로 초기화한다." "인증 에러는 모두 try-catch로 감싸고, 사용자에게 명확한 에러 메시지를 표시한다."

이후 AI가 코드를 작성할 때 이 규칙을 자동으로 따릅니다.

4. 태스크 단위로 검증

Vooster AI의 태스크 보드에서 연동 작업을 세분화하여 관리합니다:

T-001: Supabase 프로젝트 설정 및 환경 변수 구성
T-002: Google OAuth 프로바이더 활성화
T-003: 로그인 버튼 UI 구현
T-004: 세션 관리 로직 구현
T-005: RLS 정책 설정 (배포 전)

각 태스크를 완료할 때마다 검증하므로, 문제가 생겨도 범위를 좁혀 빠르게 해결할 수 있습니다.

결론

외부 서비스 연동에서 가장 중요한 것은 최신 문서를 참조하고, 단계별로 검증하는 것입니다. AI 코딩 도구는 강력하지만, 학습 시점의 API를 기억하기 때문에 Context-7 같은 도구로 실시간 문서 참조를 활성화해야 합니다.

Supabase Auth 사례에서 본 것처럼, 다음 순서를 지키면 연동 실수를 크게 줄일 수 있습니다:

Context-7 MCP로 최신 문서 참조
Reformix로 코드베이스 분석
AI에게 구현 계획 먼저 요청
계획 검토 후 단계별 구현
Network 탭으로 API 요청 검증
MVP에서는 RLS 같은 복잡한 기능 나중으로 미루기

Vooster AI는 MCP 31개 도구, TRD, 코드 가이드라인을 통해 이 모든 과정을 체계적으로 지원합니다. 외부 서비스 연동은 한 번 꼬이면 시간이 두 배로 듭니다. Vooster AI의 MCP로 문서와 코드를 동기화하며 안전하게 연동하세요.

오늘 Vooster AI와 함께 체계적인 바이브 코딩을 시작하세요!

외부 서비스 연동할 때 실수 안 하는 법