커넥터

Supabase 연동

Supabase를 사용하면 개발 경험이 없어도 웹사이트용 백엔드를 쉽게 구성할 수 있습니다.

개요

Supabase는 사용자가 데이터를 저장하고 백엔드와 같은 기능을 제공할 수 있게 해주는 오픈소스 백엔드 플랫폼입니다. Supabase와 연동하면 Atoms 팀이 브라우저 메모리에만 저장되어 새로고침하거나 닫을 때 손실될 수 있는 문제를 해결할 수 있습니다. Atoms를 Supabase와 연동하면 웹사이트를 지속형 스토리지와 고급 기능을 갖춘 완전한 애플리케이션으로 전환할 수 있습니다.

자세한 안내는 여기에서 확인하세요:

주요 장점

개발 경험이 필요 없다는 점 외에도, 다음과 같은 세 가지 주요 장점이 더 있습니다:

빠른 설정: 백엔드를 빠르게 구축하고 개발 프로세스를 가속화할 수 있습니다.
높은 확장성: 사용자 증가에 맞춰 대응할 수 있어 프로젝트를 제한 없이 확장할 수 있습니다.
비용 효율적: 소규모 프로젝트와 스타트업에 적합한 무료 티어를 제공합니다.

Atoms에 Supabase 연동하기

다음은 Atoms를 Supabase와 연동하는 짧은 가이드입니다.

Atoms에서 Supabase 연동 시작하기
- Settings를 엽니다.
- 왼쪽 사이드바에서 Connectors를 선택합니다.
- Supabase 커넥터를 찾아 Connect를 클릭합니다.
- Atoms가 연결 설정 인터페이스를 표시하며, 안내에 따라 진행하면 됩니다.
인증 및 프로젝트 구성하기

Supabase 계정에 로그인하라는 팝업이 표시됩니다.
- 드롭다운 메뉴에서 조직을 선택합니다.
- Supabase 계정을 인증하려면 Authorize Atoms를 클릭합니다. (연결은 몇 초 안에 완료되며 수동 설정이 필요하지 않습니다)
- 인증이 완료되면 다음 작업을 할 수 있습니다:
  - 목록에서 기존 Supabase 프로젝트를 선택하거나
  - +Add New One을 클릭하여 새 조직을 즉시 추가할 수 있습니다. (도움이 필요하면 Atoms Assistant가 Atoms에 Supabase 연동하기 과정을 안내해 드립니다.)
자동 구성
- 프로젝트를 선택하면 Atoms가 자동으로 Supabase 프로젝트에 연결됩니다. 데이터베이스 구조, 테이블, 보안 설정을 수집합니다.
- "Supabase Connected" 알림이 표시되면 백엔드가 완전히 구성되어 사용할 준비가 완료된 것입니다.

사용자 인증

Atoms에서 앱을 만든 후에는 사용자 인증을 구현하고 싶을 수 있습니다. Supabase Auth는 앱에 인증 및 권한 부여 기능을 간편하게 추가할 수 있도록 해줍니다. 이 과정에서 Atoms는 두 가지 방법, 즉 (1) 이메일 및 비밀번호 와 (2) 소셜 로그인(Google) 을 안내합니다.

이메일 및 비밀번호

Supabase를 Atoms와 연동합니다
- 유효한 Supabase 계정이 있는지 확인합니다.
- 채팅 인터페이스 오른쪽 상단의 인증 버튼을 클릭해 Supabase 계정을 인증합니다.
- 사용할 Supabase 프로젝트를 선택합니다.
에이전트에게 요구사항 전달하기
- 채팅에 요구사항을 입력합니다. 예를 들어, 간단히 "Add authentication"이라고 프롬프트할 수 있습니다.
- 그러면 일반적으로 Supabase 인증 시스템에 연결된 기본 로그인 및 회원가입 페이지가 생성됩니다.
테스트용 사용자 만들기
- 새로 추가된 로그인/회원가입 인터페이스를 사용해 테스트 사용자를 생성합니다.
- 페이지를 새로고침하여 사용자 세션이 유지되는지 확인합니다.
- 또는 Supabase 대시보드로 이동한 뒤 Authentication > Users로 이동하여 테스트용 사용자를 수동으로 추가할 수 있습니다.
앱 배포하기

소셜 로그인(Google)

Supabase 프로젝트에서 Google OAuth 구성하기
- Supabase 대시보드의 Authentication 페이지로 이동합니다.
- Sign In/Up 하위 페이지로 이동합니다.
- Google 옵션을 찾아 스위치를 켜 활성화합니다. (자세한 Supabase 구성 단계는 Configuring Google OAuth in Supabase 또는 Supabase Docs를 참조하세요.)
에이전트에게 요구사항 전달하기
- 채팅에 요구사항을 입력합니다. 예: "Add Google authentication".
- 그러면 로그인 페이지에 Continue with Google 버튼이 추가됩니다.
Google 인증 테스트하기
- 로그인 페이지로 이동합니다.
- Continue with Google 버튼을 클릭합니다.
- Google 계정으로 로그인하고 사용자 프로필이 올바르게 업데이트되는지 확인합니다.
- Google OAuth 흐름을 완료하여 사용자가 다시 앱으로 리디렉션되는지 확인합니다.
앱을 Atoms의 App 월드에 배포하기

Supabase에서 Google OAuth 구성하기

Google Cloud 프로젝트 만들기
- Google Cloud Console에 액세스하기
  - Google Cloud Console을 열고 Google 계정으로 로그인합니다.
- 새 프로젝트 만들기
  - 상단의 드롭다운 메뉴를 클릭하고 **New Project.**를 선택합니다.
  - 프로젝트 이름을 입력하고 결제 계정을 선택한 다음 **Create.**를 클릭합니다.
Google OAuth 자격 증명 구성하기
- 동의 화면 설정하기
  - 검색창에 OAuth를 입력하고 OAuth 동의 화면을 엽니다.
  - 앱 이름, 사용자 지원 이메일 및 기타 필수 항목을 입력합니다.
  - External 또는 Internal을 선택한 후 Create를 클릭합니다.
- OAuth Client ID 만들기
  - Create OAuth Client를 클릭한 다음 OAuth Client ID를 선택합니다.
  - Application Type에서 Web application을 선택합니다.
  - Authorized redirect URIs에 Supabase 대시보드의 콜백 URL을 추가합니다.
  - Create를 클릭하고 생성된 Client ID와 Client Secret을 기록해 둡니다.
Supabase에서 Google OAuth 구성하기
- Supabase Dashboard에 로그인하기
  - Supabase Dashboard을 열고 프로젝트에 로그인합니다.
- Google OAuth 활성화하기
  - Authentication 페이지로 이동합니다.
  - Providers 섹션에서 Google 옵션을 찾아 활성화합니다.
  - 앞에서 생성한 Client ID와 Client Secret을 해당 필드에 추가합니다.
- 구성 저장하기
  - Save를 클릭해 변경 사항을 적용합니다.

데이터 저장

웹/앱에서 사용자 인증을 구성한 후 사용자 데이터를 저장하고 싶을 수도 있습니다.

Supabase에 연결되면 데이터베이스에 어떤 데이터를 저장하고 싶은지 Atoms에 알려주기만 하면 됩니다. 에이전트가 데이터베이스 테이블을 자동으로 구성하고 이를 UI에 직접 연동합니다.

요구사항 정의하기
- 채팅에 요구사항을 입력합니다. 예: "Please ensure that new trip records are saved to the database".
- 저장하려는 데이터를 가능한 한 명확하게 설명합니다.
- Atoms가 입력 내용을 기반으로 필요한 데이터베이스 구조를 자동으로 구성합니다.
Atoms에서 기능 테스트하기
- 앱에서 샘플 데이터를 생성합니다. 예를 들어 UI를 통해 몇 개의 "trip records"를 추가합니다.
- 데이터를 저장하고 페이지를 새로고침합니다. 데이터가 Supabase 데이터베이스와 동기화됩니다.
- Supabase에 로그인하여 새로 추가한 데이터가 데이터베이스에 존재하는지 확인합니다.
Atoms와 Supabase 간 데이터 동기화 검증하기
- Supabase 대시보드를 열고 Table Editor로 이동합니다.
- 기존 데이터를 수정하거나 새 데이터를 생성합니다.
- Supabase에서 변경한 내용은 Atoms 앱에 실시간으로 동기화됩니다.
- Atoms로 돌아가 수정되거나 새로 생성된 데이터가 올바르게 표시되는지 확인합니다.
- 데이터가 성공적으로 동기화되면 구성이 완료된 것입니다.
앱 배포하기

Edge Functions

Supabase Edge Functions는 사용자와 가까운 서버 노드에 배포되는 서버리스 백엔드 프로그램입니다. 기존 서버를 구축하고 유지할 필요를 없애 주며, 더 낮은 네트워크 지연 시간과 더 빠른 응답 속도로 원하는 맞춤 로직을 실행할 수 있게 해줍니다. 대부분의 웹 애플리케이션에서 프런트엔드(버튼, 폼, UI)는 기본 상호작용을 처리하지만, 다음과 같은 일부 중요한 작업은 반드시 백엔드에서 실행되어야 합니다:

사용자 등록 후 환영 이메일 자동 발송;
폼 제출 시 AI API를 호출해 콘텐츠를 분석하거나 점수를 매기기;
결제 과정에서 Stripe 같은 서드파티 결제 게이트웨이를 연동하고 주문 세부 정보를 기록하기.

이 모든 작업은 Edge Functions를 통해 구현됩니다.

사용 사례

Atoms에서 Supabase Edge Functions를 사용하면 다음을 할 수 있습니다:

환영 이메일 발송: 신규 사용자가 가입한 뒤 다음 단계 안내가 포함된 환영 메시지를 자동으로 이메일로 보내 참여도와 온보딩 경험을 향상시킵니다.
사용자 폼 제출 처리: 피드백, 가입 또는 댓글 제출 시 확인 알림(예: "We've received your feedback and will review it shortly")을 자동 생성해 전송하여 사용자가 작업이 성공했음을 알 수 있게 합니다.
리마인더 예약: 이메일 또는 푸시를 통해 일간 또는 주간 알림(회의, 작업 또는 이벤트용)을 설정해 사용자가 시간을 관리하고 생산성을 유지하도록 돕습니다.
AI 서비스 활용: 사용자가 텍스트를 입력한 후 OpenAI 같은 AI API를 자동 호출해 문법 검사 또는 지능형 재작성 작업을 수행하고, 최적화된 결과를 사용자에게 반환합니다.
온라인 결제 처리: 사용자가 전자상거래 또는 서비스 플랫폼에서 결제를 시작할 때 Stripe 같은 게이트웨이와 연동해 거래를 안전하게 처리하고 주문 세부 정보가 포함된 명확한 성공 또는 실패 페이지를 표시합니다.

키 저장 및 관리

많은 애플리케이션은 서드파티 서비스(예: Stripe, OpenAI)에 연결하기 위해 키 또는 API 자격 증명이 필요합니다. Supabase가 연결되면 Atoms는 이러한 시크릿을 안전하게 관리하고 사용할 수 있는 방법을 제공합니다. Atoms와 Supabase의 연동을 통해 어떤 함수에 시크릿이 필요할 때마다 Atoms가 이를 자동으로 감지하고 필요한 값을 입력하라고 안내합니다. 사용자는 에이전트의 "Add API Key" 버튼을 클릭하고 키를 입력하기만 하면 되며, 그러면 Atoms가 이를 암호화해 Supabase의 Edge Functions Secrets Manager에 저장합니다. 실행 시 이러한 키는 함수에 안전하게 주입되므로 자격 증명이 평문으로 저장되는 것을 방지할 수 있습니다.

백엔드 함수 추가 및 배포

Supabase에 연결한 후, 필요한 내용을 에이전트에게 알려주세요:

채팅에 요청을 입력합니다. 예: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."
에이전트가 코드를 생성하면 Add API Key와 View in Edge Function 두 개의 버튼이 표시됩니다.
Add API Key를 클릭합니다.
API 키를 입력하고 Send를 클릭합니다.
View in Edge Function을 클릭합니다.
Supabase Edge Function 페이지로 리디렉션됩니다.

보안 참고: 모든 키는 Supabase에 암호화되어 저장되며, Atoms는 이에 접근할 수 없습니다.

자주 묻는 질문

내 애플리케이션에 Supabase 백엔드 기능을 어떻게 추가하나요?

다음 세 가지 간단한 단계로 애플리케이션에 Supabase를 연동할 수 있습니다:

채팅 인터페이스 오른쪽 상단의 인증 버튼을 클릭해 Supabase 계정을 인증합니다.
사용할 Supabase 프로젝트를 선택하고 연결합니다.
채팅에서 요구사항을 공유하면 에이전트가 연결된 Supabase 프로젝트를 기반으로 기능을 개발합니다.

Supabase는 소셜 로그인을 지원하나요?

Supabase는 다음을 포함한 다양한 인증 방식을 지원합니다:

이메일 및 비밀번호.
비밀번호 없는 인증: 일회용 비밀번호(OTP) 또는 매직 링크 같은 옵션.
소셜 로그인: Google, Twitter, GitHub 같은 서드파티 제공업체 지원.
전화번호 인증.
Single Sign-On (SSO): SAML SSO 지원.
익명 로그인: 사용자가 익명으로 로그인할 수 있습니다.

앱마다 별도의 Supabase 프로젝트를 만들어야 하나요?

기존 Supabase 프로젝트를 선택할 수도 있고 새 프로젝트를 만들 수도 있습니다. 각 채팅은 한 번에 하나의 프로젝트에만 연결할 수 있습니다.

Supabase에 연결한 후 프로젝트를 리믹스하면 연결이 유지되나요?

리믹스 후에는 연결이 해제되며 다시 설정해야 합니다. 또한 다른 사용자가 공유한 App 월드의 앱이 Supabase에 연결되어 있는 경우, 다른 사용자는 이를 리믹스할 수 없습니다.

여러 Atoms 프로젝트에서 하나의 Supabase 데이터베이스를 사용할 수 있나요?

네, 여러 Atoms 프로젝트에서 하나의 Supabase 데이터베이스를 사용할 수 있습니다. 하지만 연결과 구성을 신중하게 관리해야 합니다.

왜 제 프로젝트가 Supabase 조직 아래에 표시되지 않나요?

무료 Supabase 플랜에서는 7일 연속 활동이 없는 프로젝트가 자동으로 일시 중지됩니다. Atoms Organizations 목록에서 Inactive 필터로 전환하면 일시 중지된 프로젝트를 확인할 수 있습니다.

Supabase에 연결하려고 할 때 왜 \

Supabase는 각 조직과 Atoms 계정 사이에 일대일 OAuth 바인딩을 적용합니다. “Test” 조직이 이미 다른 Atoms 사용자에 의해 인증된 경우, 다른 계정으로 이를 바인딩하려는 이후 시도는 이 오류와 함께 거부됩니다. 이를 해결하려면 Supabase Dashboard 사이드바에서 Settings → API → OAuth Apps로 이동해 해당 조직의 기존 Atoms OAuth 권한 부여를 삭제한 다음, Atoms로 돌아와 본인 계정으로 다시 연결하세요.

이 페이지가 도움이 되었나요?

개요