Blackbox.ai를 Supabase와 연동하기

Blackbox.ai를 Supabase와 연동하기

Blackbox.ai를 Supabase와 연동하기

Blackbox.ai를 Supabase와 연동하기

2025년 7월 21일

최근에는 빠르게 프로토타입을 만들고 검증하는 것이 그 어느 때보다 중요해졌습니다. 이전 블로그에서는 Blackbox.ai와 Adeline.ai라는 도구들을 소개하며, 개발자 친화적인 AI 기반 도구의 가능성을 탐구해보았습니다.

이번 글에서는 Blackbox.ai에서 제공하는 Remote Agent 기능을 활용하여 Supabase와 연동하는 과정을 실습을 통해 자세히 소개하고자 합니다. Supabase는 백엔드 환경을 간편하게 구성할 수 있는 Backend as a Service (BaaS) 플랫폼으로, 특히 MVP 개발에 탁월한 도구입니다.


Blackbox.ai의 Remote Agent란?

Blackbox.ai의 Remote Agent 기능은 기존 App Builder 기능과 유사하지만, UI를 통해 외부 환경(예: GitHub 등)과 연동하여 더 확장된 코드 개발을 가능하게 합니다.

  • 세션 기반 실행 환경: App Builder와 마찬가지로 Remote Agent의 기본 실행 환경은 세션 단위로 생성되며, 별다른 조치가 없는 한 세션 종료 시 해당 환경은 기본적으로 초기화됩니다.

  • 파일 다운로드: 생성된 코드를 Blackbox.ai로부터 개별 파일로 다운로드가 가능합니다. 다만, 모든 파일 전체를 하나의 파일로 묶어서 다운로드하는 기능은 제공되지 않는 것으로 보입니다.

  • 지속적인 개발을 위한 GitHub 연동: GitHub 연동을 통해 지속적인 개발 환경을 구성할 수 있습니다. 이 과정에서 Blackbox.ai가 비공개(private) repository에 접근할 수 있다는 점은 주의가 필요합니다.


Supabase 프로젝트 준비하기

Blackbox.ai와의 연동을 위해 Supabase에서 아래와 같은 준비 과정을 먼저 수행합니다.

1. Supabase 계정 생성 및 로그인

처음 사용자는 supabase.com 사이트에 접속하여 상단 위에 있는 “Start your project”를 클릭하여 회원 가입을 합니다. 기존 사용자는 “Sign in” 버튼을 클릭하여 Supabase에 로그인합니다.

2. 프로젝트 생성

프로젝트 생성 시 단체명, 프로젝트 이름, 데이터베이스 비밀번호 등을 묻게 됩니다. 해당 정보를 입력하고 나머지는 기본값으로 둔 채 ‘Create new project’를 클릭합니다.

3. 테이블 생성

이제 테이블을 생성해 봅시다. 좌측의 Database 아이콘을 클릭하고 Tables 항목을 클릭하여 테이블 데이터에 접근할 수 있습니다. 테이블 생성을 위해 우측의 +New Table 버튼을 클릭합니다. 새로 만들 테이블 이름과 컬럼 구성은 아래와 같습니다.

  • 테이블 이름: myfruits

  • 컬럼 구성:

    • ID (자동 생성, 데이터 타입: int8)

    • fruits (데이터 타입: text)

    • count (데이터 타입: numeric)

이후 하단의 Save 버튼을 클릭하여 테이블 생성을 마칩니다. 위 컬럼을 포함한 테이블이 생성되었으면 햄버거 버튼을 클릭하고 ‘View in Table Editor’를 클릭합니다. 이때 테이블에 데이터를 기입할 수 있는 페이지로 이동합니다. ‘Insert’ 버튼을 클릭하고 ‘Insert row’ 버튼을 클릭합니다. 이제 해당 테이블에 아래의 데이터 정보를 기입합니다.


Blackbox.ai에 프롬프트 입력하기

이제 Blackbox.ai로 돌아와서 상단의 ‘Remote Agent’ 버튼을 클릭합니다. 이후 하단의 ‘Supabase’ 버튼을 클릭하여 Supabase 프로젝트와 연동을 진행합니다.

이제 프롬프트 창에 다음과 같은 명령을 입력해봅니다.

"Supabase에서 myfruits 테이블의 데이터를 가져오는 Node.js 기반의 서버를 하나 만들어줘. 웹에서도 볼 수 있었으면 좋겠어."

”Please create a Node.js-based server that fetches data from a table named myfruits in Supabase. I’d like to be able to view it on the web as well.”

이 요청에 따라 Blackbox.ai는 다음과 같은 코드 환경을 자동으로 생성합니다.

  • Node.js 서버 코드

  • Supabase 구성 포함된 .env 파일

  • 웹 URI 제공: 생성된 서버는 URI 형태로 접근 가능하며, 웹 브라우저에서 바로 데이터 확인 가능

  • 예외 처리 포함: 네트워크 요청 등에 대한 예외 처리 코드 자동 삽입


Supabase 구성 자동화: .env 파일 생성의 편리함

Blackbox.ai가 Supabase와 연동될 때 가장 인상 깊었던 점 중 하나는, .env 파일이 자동으로 생성된다는 사실입니다. 보통 외부 서비스를 연동할 때는 .env 파일을 수동으로 만들어야 하고, 여기에 다음과 같은 정보들을 일일이 수작업으로 입력해야 합니다:

  • SUPABASE_URL

  • SUPABASE_ANON_KEY

  • JWT_SECRET

  • 기타 환경 변수들

하지만 Blackbox.ai에서는 프롬프트 요청만으로 이 과정 중 JWT_SECRET키에 대해서는 자동으로 값을 가져옵니다. 사용자가 Supabase 프로젝트에 로그인하고 사용할 프로젝트를 지정하면, Blackbox.ai는 다음과 같은 작업을 알아서 수행합니다:

  1. Supabase 프로젝트의 URL과 키를 감지

  2. 적절한 JWT 시크릿 키를 포함

  3. .env 파일에 해당 정보를 삽입

  4. 서버 코드에서 이를 불러와 사용할 수 있도록 구성

다만, Blackbox.ai가 SUPABASE_URL과 SUPABASE_ANON_KEY 정보는 가져오지 못했습니다. 해당 정보는 사용자가 Supabase 사이트에 들어가서 수동으로 검색해서 가져와야 합니다.

  • Supabase 사이트의 프로젝트로 들어간 다음 좌측 사이드바의 Project Settings를 클릭합니다.

  • CONFIGURATION 섹션의 Data API를 클릭하면 SUPABASE_URL을 가져올 수 있습니다.

  • PROJECT SETTINGS의 API Keys를 클릭하면 SUPABASE_ANON_KEY를 가져올 수 있습니다.


예시: 자동 생성된 .env 파일 (예시)

# Supabase Configuration
# Replace these values with your actual Supabase project details

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key

# JWT Secret from your configuration
JWT_SECRET=dvjEm...
  
# Database Configuration
DB_SCHEMA=public,graphql_public
MAX_ROWS=1000
DB_EXTRA_SEARCH_PATH=public, extensions

서비스를 통해 .env 파일 생성을 어느 정도 자동화하는 덕분에, 개발자는 코딩에 더 집중할 수 있고 구성 및 세팅에 쓸 시간을 절약할 수 있습니다. 실습을 처음 해보는 사람도 복잡한 설정 없이 결과를 빠르게 확인할 수 있다는 점에서 초보자에게도 매우 친화적인 구조라고 할 수 있습니다.

실제 실행 확인

Blackbox에서 제공하는 URI로 접속해보면, 앞서 Supabase에서 생성한 myfruits 테이블의 데이터가 브라우저 화면에 잘 출력되는 것을 확인할 수 있습니다. 설정이나 추가 코드 작성 없이도 모든 통신과 구성요소가 자동으로 처리된다는 점이 인상 깊습니다.

다만, 항상 그런 것은 아니지만 프롬프트 입력에서부터 결과 출력에 이르기까지 상대적으로 긴 시간이 소요되는 경우가 있다는 점이 아쉽습니다. 작업이 백그라운드로 처리되기 때문에 다른 작업과 함께 병행이 가능하지만 대기 시간을 단축할 수 있다면 작업 효율성을 높일 수 있을 것으로 기대합니다.


마무리하며

이번 실습을 통해 Blackbox.ai와 Supabase를 연동하는 과정이 얼마나 간편한지 확인할 수 있었습니다. 별다른 API 문서나 복잡한 설정 없이도, 단순한 프롬프트 입력만으로 전체 서버 환경이 구성되고 결과까지 확인할 수 있다는 점은 매우 강력한 개발 흐름을 의미합니다.

앞으로도 Blackbox.ai와 같은 AI 기반 개발 도구들이 Supabase와 같은 플랫폼과의 연계를 통해 더욱 실용적이고 생산적인 개발 환경을 제공하게 될 것입니다. 특히 개인 개발자나 빠른 프로토타입이 필요한 팀에게는 큰 도움이 될 수 있으니, 관심 있다면 꼭 한번 실습해보시길 권해드립니다.