바이브 코딩으로 '진짜' 풀스택 웹서비스 만들기

Codex + Supabase + Hostinger로 20분 만에 로그인, DB 저장, RLS 권한 제어, 배포까지 완벽 구현하는 가이드

Codex CLI/Desktop Supabase MCP Stitch Skill Hostinger Deployment

요즘 AI 에이전트를 활용하면 보기 좋은 웹사이트 화면은 몇 분 만에 만들어집니다. 하지만 회원가입이나 글쓰기 버튼을 눌렀을 때 실제로 서버 데이터베이스(DB)에 저장되지 않는다면 그것은 동작하는 서비스가 아닌 '프론트엔드 껍데기'에 불과합니다.

실제로 동작하는 웹서비스를 만들려면 사용자 인증(Auth), 데이터베이스(DB), 행 단위 접근 권한(RLS)이라는 백엔드 장벽을 넘어야 합니다. 본 포스팅에서는 직접 서버를 구축하지 않고도 AI 코딩 도구와 **Supabase**, **Hostinger**를 조합하여 진짜 풀스택 웹서비스를 처음부터 인터넷 배포까지 완성하는 방법을 설치부터 활용까지 상세히 안내합니다.

구분	사용 도구 / 서비스	주요 역할
Design	GPT Image Generator + Figma	웹사이트 컨셉 시안 생성 및 섹션별 정렬 레퍼런스 제작
Frontend	Codex + Stitch Skill + Product Design Plugin	`design.md` 디자인 시스템 생성 및 Playwright 기반 자동 UI 개발
Backend	Supabase (Auth + PostgreSQL + RLS)	회원가입, 로그인, DB 저장, 작성자 본인 제어 보안 정책 설정
Deployment	Hostinger (Web Deployment)	ZIP 소스코드 업로드 기반 1분 커스텀 도메인 실제 배포

🛠️ Part 1. 필수 도구 및 플러그인 구체적 설치 방법

바이브 코딩 체계를 구축하기 위해 Codex 프로그램과 필수 4대 플러그인/스킬을 설치해야 합니다.

1

Codex 데스크톱 앱 및 프로젝트 폴더 생성

Codex 앱을 실행한 후 프로젝트 선택 > 새 프로젝트를 클릭합니다. 소스 폴더로 사용할 로컬 폴더(예: 바탕화면의 prompt-board)를 지정하고, 권한 설정은 '나 대신 승인(Auto-approve)'으로 설정하여 작업 승인 절차를 자동화합니다.
2

Stitch (Design Taste) 스킬 설치 (GitHub 연동)

이미지 시안을 분석하여 픽셀 단위 디자인 시스템(design.md) 문서를 생성해 주는 필수 스킬입니다.

Codex 대화창 입력 명령 # Stitch 스킬 저장소 URL을 복사하여 대화창에 붙여넣고 설치 요청 https://github.com/.../stitch-design-taste # 설치 확인 (대화창에 $ 입력 후 검색) $stitch
3

Product Design 플러그인 설치

Codex의 플러그인(Plugins) 탭으로 이동한 뒤 검색창에 Product Design을 입력하고 [설치]를 클릭합니다. 이 플러그인은 개발에 필요한 이미지 에셋을 내장 GPT Image 2.0 모델로 자동 생성하고 화면을 구성합니다.
4

Supabase MCP 플러그인 설치 및 계정 연동

플러그인 탭에서 Supabase를 검색하여 설치합니다. 브라우저 인증 창이 뜨면 기존 Supabase 계정(없을 경우 회원가입 후)으로 승인을 완료합니다. 이제 Codex가 MCP를 통해 백엔드 DB와 서버를 직접 다룰 수 있게 됩니다.
5

Superpowers 워크플로우 플러그인 설치

플러그인 탭에서 Superpowers를 검색 및 설치합니다. 맥락 손실을 방지하고 체계적인 개발 계획 수립-검증 단계를 자동으로 이끌어주는 개발 관리 플러그인입니다.

🚀 Part 2. 단계별 풀스택 웹서비스 제작 및 활용 방법

Step 1. GPT & Figma로 디자인 레퍼런스 준비

디자인 없이 코딩을 바로 시작하면 UI 일관성이 무너집니다.

에디토리얼 아카이브 스타일

Step 2. Codex에서 design.md 생성 및 프론트엔드 구축

피그마 레퍼런스 이미지를 Codex에 드래그 앤 드롭으로 첨부하고 다음 프롬프트를 실행합니다.

Step 2-1. 디자인 시스템 문서 생성 프롬프트 $stitch 이 이미지 레퍼런스를 참고해서 design.md 문서를 만들어줘. 기본적인 로그인, 데이터베이스 서버를 갖춘 프롬프트 공유 게시판 웹을 만드는데 사용할 거야.

문서가 생성되면 @Product Design 플러그인을 호출하여 프론트엔드 코드를 구축합니다.

Step 2-2. 프론트엔드 코드 생성 프롬프트 @Product Design design.md 문서를 참조하여 프롬프트를 공유하는 게시판 웹의 프론트엔드 디자인을 만들어줘. 백엔드 연동 없이 정적인 UI 디자인만 만들어주면 돼.

💡 플레이라이트(Playwright) 자동 자가 진단

Codex에는 Playwright 테스트 엔진이 내장되어 있어, 코드 생성 중 스스로 화면을 렌더링하고 비주얼 오류나 레이아웃 깨짐을 감지하여 자동 수정 과정을 거칩니다.

Step 3. Supabase 연동 (인증 + CRUD + RLS 보안)

백엔드 연동을 위해 Superpowers 플러그인을 활용해 정교한 개발 계획을 수립하고 자동 실행합니다.

Step 3-1. 백엔드 연동 요청 프롬프트 Supabase MCP를 사용해서 이 로컬 코드베이스를 프롬프트 공유 웹사이트로 완성하고 싶어. - 이메일 회원가입, 로그인, 로그아웃 기능 - 게시글 작성(Create), 조회(Read), 수정(Update), 삭제(Delete) CRUD 기능 - 비회원도 글 조회는 가능하지만, 작성은 로그인한 사용자만 가능 - 작성자 본인이 작성한 글만 수정/삭제할 수 있도록 RLS(Row Level Security) 정책 설정 - 데이터베이스 스키마와 RLS 정책까지 안전하게 설계하고 순차적으로 구현해줘.

⚠️ 필수 체크: Supabase 이메일 인증 비활성화

무료 버전 Supabase는 이메일 발송 제한이 있습니다. 원활한 개발 및 테스트를 위해 Supabase 대시보드의 Authentication > Providers > Email 메뉴에서 Confirm email 토글을 OFF로 변경해 주세요.

Step 4. Hostinger로 실제 인터넷에 1분 배포

컴퓨터 내부(Localhost)에서 완성된 서비스를 세상에 공개하는 단계입니다.

Codex에 배포용 ZIP 압축 파일 생성을 요청합니다.
ZIP 압축 요청 프롬프트 현재 프로젝트를 Hostinger의 Deploy Web 기능으로 배포하고 싶어. 불필요한 node_modules나 비밀 데이터를 제외하고 원본 소스 코드를 배포용 ZIP 파일로 만들어줘.
Hostinger H패널 접속 > 웹사이트 추가 > 웹 배포 (Web Deployment) 클릭.
지리적으로 가까운 리전(예: 싱가포르)을 선택하고 커스텀 도메인을 연결합니다.
생성된 ZIP 압축 파일을 업로드하고 [배포] 버튼을 누르면 1분 이내에 글로벌 라이브 웹사이트가 완성됩니다!

📌 마무리 및 체크리스트

✔ 풀스택 서비스 구축 완료 검증 목록

실제 이메일 계정으로 회원가입 및 로그인이 정상 동작하는가?
새로 작성한 게시글이 Supabase Table Editor DB에 기록되는가?
다른 계정으로 로그인했을 때 타인이 쓴 글의 '수정/삭제' 버튼이 숨겨지고 RLS 차단되는가?
Hostinger 도메인으로 접속 시 모바일/태블릿 반응형 레이아웃이 정상 유지되는가?

이제 아이디어만 있다면 AI 에이전트와 Supabase, Hostinger를 활용해 껍데기뿐인 사이트가 아닌 실제 유저가 사용하고 데이터가 저장되는 진짜 웹서비스를 자유롭게 만들어 보시기 바랍니다!

이 블로그 검색

최신 AI 뉴스