안티그래비티 + Supabase MCP 연동 가이드: 말 한마디로 데이터베이스 구축

현대적인 개발 환경에서 AI 에이전트는 코드를 생성하는 수준을 넘어,
실제 데이터베이스와 상호작용하며 인프라를 직접 관리하는 단계에 이르렀다.

 

특히 안티그래비티 에디터의 MCP(Model Context Protocol) 통합 기능은
이러한 '행동하는 AI'의 진면목을 보여준다.

 

본 가이드에서는 Supabase MCP를 활용하여
복잡한 설정 없이 자연어로 데이터베이스 테이블을 구축하고 연동하는 실전 프로세스를 다룬다.

1. 왜 Supabase MCP인가?

Supabase는 인증, 데이터베이스 관리, 실시간 구독 등을 제공하는 백엔드 서비스(BaaS)다.
안티그래비티와 Supabase MCP가 만나면 개발자는 다음의 이점을 누릴 수 있다.

• 스키마 인식 코딩:
  AI가 실제 데이터베이스 구조를 실시간으로 파악하여 정밀한 쿼리와 코드를 작성한다.
• 자동화된 인프라 관리:
  SQL 툴이나 웹 대시보드에 접속하지 않고도 채팅창에서 테이블 생성 및 수정을 지시할 수 있다.
• 보안 정책 자동 설정:
  RLS(Row Level Security)와 같은 복잡한 보안 규칙을 에이전트가 대신 설계하고 적용한다.

 

---

2. Step 1: 안티그래비티에서 Supabase MCP 설치하기

먼저 안티그래비티 에디터에 Supabase와 통신할 수 있는 'MCP 서버'를 추가해야 한다.

• 안티그래비티 에디터를 실행한 후 우측 상단의 에이전트 패널에서 점 세 개(...) 버튼을 클릭한다.

• 메뉴에서 [MCP Servers] 를 선택하여 MCP 스토어를 연다.
• 상단 검색창에 'Supabase'를 입력하고 검색 결과에서 해당 서버 카드를 선택한다.

• [Install] 버튼을 눌러 설치를 진행한다.

안티그래비티 MCP 스토어에서 Supabase 서버를 설치하는 화면

 

---

3. Step 2: Supabase 액세스 토큰 설정

설치가 완료되면 연동을 위한 인증 작업이 필요하다.
이는 안티그래비티 에이전트가 사용자의 Supabase 계정에 접근할 수 있는 권한을 부여하는 과정이다.

1. Supabase 공식 대시보드에 로그인한다.
2. 좌측 하단의 [Account Preferences] 아이콘을 클릭한 뒤 [Access Tokens] 메뉴로 이동한다.
3. [Generate New Token] 을 클릭하여 토큰 이름을 입력하고 발급받는다.
4. 생성된 토큰을 복사한 후, 안티그래비티의 MCP 설정창에 붙여넣는다.

보안을 위해 발급된 Supabase 액세스 토큰을 안전하게 관리하고 에러 없이 에디터에 연동한다

 

---

4. Step 3: 실전 활용 - 말 한마디로 테이블 생성하기

이제 준비는 끝났다. 에이전트에게 자연어로 데이터베이스 작업을 지시해 본다.
예를 들어 학습 기록을 저장할 테이블이 필요하다고 가정해 보자.

 

에이전트에게 명령하기:

"Supabase와 연동해서 이 사이트의
학습 기록을 저장할 수 있는 learning_history 테이블을 만들어줘.
사용자 ID와 학습 컨텐츠, 그리고 학습 시간을 저장해야 해."

 

이 명령을 받으면 안티그래비티 에이전트는
Supabase MCP의 도구를 호출하여 직접 SQL DDL 코드를 생성하고 실행한다.

 

사용자는 대시보드에서 수동으로 컬럼을 정의할 필요 없이 결과만 확인하면 된다.

데이터베이스 테이블을 생성하고 확인하는 장면

 

---

5. Step 4: 기존 코드와 데이터베이스 유기적 연결

코드와 데이터베이스를 한층 더 스마트하게 연결하려면 에디터의 '@' 기호를 적극 활용해야 한다.

1. 채팅창에서 @index.html과 같이 관련 파일을 먼저 참조한다.
2. "이 코드를 방금 만든 learning_history 테이블과 연동하고 싶어.
   데이터를 저장하고 불러오는 함수를 작성하고 필요한 RLS 설정도 해줘."라고 요청한다.
3. 에이전트는 파일의 컨텍스트와 데이터베이스 스키마를 동시에 분석하여
   최적의 연동 로직을 제안한다.

[Tip]
RLS(Row Level Security)란?
데이터베이스의 각 행(Row)에 대해 누가 읽고 쓸 수 있는지를 결정하는 보안 정책이다.
Supabase에서는 이를 통해 사용자별 데이터 접근 권한을 안전하게 분리할 수 있으며,
안티그래비티 에이전트는 이 복잡한 정책 설정을 말 한마디로 자동화해 준다.

 

마무리하며

 

안티그래비티와 Supabase MCP의 결합은 단순한 편리함을 넘어 '코딩의 본질'에 집중하게 해준다.

 

복잡한 연동 설정과 인프라 핸들링은 AI 에이전트에게 맡기고,
개발자는 비즈니스 로직과 설계라는 더 높은 가치에 집중할 수 있다.

 

참고: 본 포스트에 사용된 이미지는 실습 이해를 돕기 위한 예시이며,
실제 에디터 화면과 약간의 차이가 있을 수 있다.

 

지금 바로 안티그래비티를 통해 진정한 '바이브 코딩'을 경험해 보길 바란다.

 

안티그래비티 설치 및 프로젝트 생성에 대해 알고 싶으면 다음 글을 참고하기 바란다.
구글 안티그래비티 사용법 가이드 _ 무료 AI 코딩 툴 (설치 및 세팅)