Figma, React, Supabase, Vercel을 몰라도 괜찮습니다. 이 글에서는 Codex로 복잡한 절차를 생략하고 바로 수익성 있는 웹사이트를 만드는 방법을 알려드립니다.
sudoku.com 사이트는 월간 1,269만 건의 유기 검색을 받습니다 (SimilarWeb 2026년 4월 데이터). 중국어권 개발자들은 아직 이러한 미국 시장용 텍스트/숫자 게임 사이트를 많이 만들지 않고 있습니다—정보 격차가 바로 여기에 있습니다.
지난주, 저는 하루 만에 NYT Connections 스타일의 단어 그룹핑 게임 사이트—Daily Word Categories를 만들었습니다.
디자인 경험 0, 프론트엔드/백엔드 코드 0, 월 비용은 단 한 개의 Codex 구독료 $20뿐입니다. 나머지 4가지 도구는 모두 무료로 시작합니다.
단 한 줄의 명령어도 입력하지 않았고, 마우스도 한 번 클릭하지 않았습니다—Codex가 명령어를 실행하고, Codex가 제 컴퓨터의 모든 앱(브라우저/Finder/디자인 소프트웨어)을 조작했으며, Codex가 데이터베이스를 설정했습니다.
더 좋은 점은, Codex가 이제 브라우저를 점유하지 않고 백그라운드에서 여러 탭을 병렬로 실행할 수 있다는 것입니다. Codex가 계정을 등록하거나 DNS를 변경하는 동안 여러분은 동시에 컴퓨터로 다른 작업을 할 수 있습니다.
디자인을 배울 필요도, 코드를 작성할 필요도, 배포 명령어를 외울 필요도 없습니다—Codex와 대화만 하면 됩니다.
Codex가 이제 할 수 있는 3가지—노력 없이 접근하는 핵심
중국 커뮤니티의 대부분은 여전히 Codex를 단순한 "AI 코딩 도구"로 생각합니다. 하지만 실제로 2026년 5월 이후, Codex는 3가지 일을 할 수 있으며, 이 3가지가 결합되어 완전한 사이드 프로젝트 사이트를 운영해 줍니다:
▸ CLI 명령 실행: npm / git / pnpm / vercel 명령어를 실행합니다. 사용 시기: 도구 설치 / 프로젝트 시작 / 배포 시.
▸ 컴퓨터 사용: 여러분 컴퓨터의 모든 앱을 조작합니다—Chrome / Safari / Finder / 디자인 소프트웨어 / 모든 GUI. 한 번 승인 후, Codex가 클릭하고, 입력하고, 스크린샷을 찍습니다. Chrome은 전용 확장 프로그램이 있습니다 (로그인된 세션을 사용하는 것이 가장 안정적입니다). 사용 시기: 5개 계정 등록 / DNS 변경 / Search Console 설정 / 명령줄이 없는 모든 앱 조작 시.
▸ MCP 서비스 호출: (Supabase / GitHub / Stripe 등에서 사용 가능) 외부 서비스 API 및 구성을 직접 호출합니다. 사용 시기: 데이터베이스 스키마 구성 / 리포지토리 생성 / 결제 설정 시.
이 스택은 무엇인가요?
5가지 도구의 조합으로, 1개는 유료, 4개는 무료로 시작합니다:
- Codex — 메인 드라이버 + Computer Use + MCP 트리오 → 월 $20 (구독)
- Open Design — 디자인 초안 생성 (오픈소스, 9가지 CLI 호환) → $0 (로컬 우선)
- Supabase — 데이터베이스 + 로그인 + 파일 저장소 (MCP 인터페이스 있음) → $0 (무료 티어 500MB DB / 50k MAU)
- Vercel — 배포 + 도메인 호스팅 + CDN → $0 (무료 티어 월 100GB 대역폭)
- Replicate — AI 모델 API (필요시) → 종량제 $0.001-0.01/호출
- 도메인 (필수) — 선택 사항 → 연 $10 (Namecheap)
→ 첫해 총 비용은 약 $250 ($20×12 + $10 도메인, 종량제 API 제외).
왜 Daily Word Categories를 데모로 선택했나요?
미국 시장의 텍스트/숫자 게임은 2026년 블루오션입니다. 3가지 데이터 포인트 (공개 자료):
- sudoku.com: 월 1,269만 유기 검색 (SimilarWeb 2026년 4월), 여전히 성장 중.
- NYT Games: The New York Times에 따르면, 1,000만 이상의 일일 활성 사용자.
- "Connections hints today"와 같은 롱테일 키워드는 엄청난 일일 검색량을 보유 (Google Keyword Planner 기준).
Daily Word Categories가 AI 사이트 구축에 완벽한 이유:
- AI가 직접 무한 레벨 생성 — 매일 16개 단어 + 4개 테마 카테고리, Codex가 한 문장으로 생성.
- 초보자가 5초 만에 규칙 이해 — 미니멀한 UI, 복잡한 상태 불필요.
- 명확한 수익화 경로 — AdSense (높은 트래픽) + 제휴 마케팅 (유사 도구 홍보) + 프리미엄 구독 (일일 힌트).
- 정보 격차 존재 — 대부분의 중국 개발자가 미국 텍스트 게임을 하지 않아 경쟁이 낮음.
Open Design이란? 왜 설치해야 하나요?
Open Design은 @tuturetom의 nexu-io 팀이 오픈소스로 공개한 Claude Design의 대안입니다 (GitHub: github.com/nexu-io/open-design).
3가지 핵심 기능:
- 로컬 우선: 컴퓨터에 설치, 데이터 업로드 없음.
- BYOK (자체 키 사용): 비용 통제 가능.
- 19가지 스킬 + 71개 브랜드급 디자인 시스템: 이커머스 / SaaS / 게임 / 개인 사이트 포괄.
- 9가지 CLI 범용: Codex / Claude Code / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi와 호환.
이는 바이브 코딩 학파의 가장 큰 약점인 UI 디자인을 해결합니다.
구체적으로 어떻게 작동하나요?
5단계로 완료됩니다. 각 단계는 "여러분이 하는 일 / Codex가 대신 하는 일"을 명확히 합니다—여러분의 역할은 음성/텍스트뿐입니다.
1. Codex가 계정 5개를 등록합니다 (15분)
여러분이 하는 3가지: Codex에게 "계정 5개 등록해줘"라고 말하기 → 화면 보면서 이메일/비밀번호/인증코드 입력하기 → OAuth 승인 시 "Allow" 클릭하기.
Codex가 대신 하는 일: Computer Use로 브라우저 열기 → 등록 페이지를 하나씩 열기 → 자동으로 양식 작성 + OAuth 리디렉션 처리 + 계정 정보 기록 → 확인 안내 + 다음 사이트로 전환.
Codex에 이렇게 보내세요:
"Computer Use를 사용해서 GitHub / Vercel / Supabase / Namecheap / Replicate 순서로 계정 등록을 도와줘. GitHub OAuth 로그인을 우선 사용해 (Vercel / Supabase에서 지원함). 내가 이메일과 비밀번호를 입력할 테니, 네가 프로세스를 진행하고 마지막에 5개 계정 정보를 리스트로 정리해줘."
Codex가 자동으로 Chrome을 엽니다 (기존 세션이 있다면 Chrome 확장 프로그램이 가장 안정적임) 그리고 사이트별로 하나씩 진행합니다. 여러분은 화면을 보고, 개인 정보를 입력하고, Allow를 클릭하기만 하면 됩니다.
2. Codex가 Open Design + 전체 도구 체인을 설치합니다 (10분)
여러분이 하는 2가지: 프롬프트 하나 보내기 → 각 단계에 'y' 누르기.
Codex가 대신 하는 일: 로컬 환경 확인 → 누락된 항목 설치 → Open Design 설치 → 시작 → 모든 명령어 실행 + 진행 상황 표시 + 완료 시 접속 주소 알려주기.
보내기:
"github.com/nexu-io/open-design에 가서 Open Design을 ~/Tools/open-design에 설치해줘. Mac 사용자는 공식 서명 앱을 우선 사용해. Supabase CLI + Vercel CLI도 설치해줘. 로컬 Open Design 주소와 3가지 도구 버전을 알려줘서 설치를 확인하게 해줘."
Codex가 자동 실행:
1# Codex가 실행하는 명령어, 여러분은 지켜보기만 하면 됩니다2git clone https://github.com/nexu-io/open-design ~/Tools/open-design3cd ~/Tools/open-design && pnpm install && pnpm dev4npm install -g supabase5npm install -g vercel
3-8분 만에 완료, Codex가 Open Design의 로컬 주소를 알려줍니다.
3. Codex가 Open Design을 조작하여 디자인 초안을 생성합니다 (5분)
여러분이 하는 2가지: 게임 사이트를 설명하는 프롬프트 보내기 → 마음에 드는 디자인 1개 선택하기.
Codex가 대신 하는 일: Computer Use로 Open Design 인터페이스 열기 → 디자인 요구사항 입력 → 생성 대기 → 3가지 후보 제시 → 선택한 디자인을 프로젝트 디렉토리에 저장하기.
보내기:
"Computer Use를 사용해서 로컬 Open Design을 열어줘. Daily Word Categories 게임 사이트 디자인을 만들어줘—NYT Connections 스타일로, 매일 16개 영어 단어를 4개 그룹으로 나누는 방식이야. 다크 테마, 모바일 우선, NYT Games 같은 미니멀 스타일로 해줘. 선택할 수 있게 3가지 후보를 보여줘."
Codex가 자동으로 Open Design 인터페이스를 조작하고 이미지를 생성합니다.
4. Codex가 프론트엔드를 작성하고 Supabase MCP로 데이터베이스를 구성합니다 (15-20분)
여러분이 하는 2가지: 기능을 설명하는 프롬프트 보내기 → Codex가 완료할 때까지 기다리기.
Codex가 대신 하는 일: React 프론트엔드 작성 + Supabase MCP를 사용하여 데이터베이스 스키마 직접 구성 + RLS + API 작성 → 자동으로 크론 작업 구성 (Supabase 대시보드를 열 필요 없음).
보내기:
"2번 디자인 초안을 Next.js 프로젝트로 변환해줘. Supabase MCP를 사용해서 2개 테이블을 직접 구성해줘: (1) puzzles (날짜 + 16개 단어 + 4개 카테고리) (2) user_progress (user_id + puzzle_date + solved_at). 기본 RLS 규칙도 구성해줘. 매일 오전 6시에 GPT-5를 사용해서 새로운 레벨을 생성하는 크론 작업을 설정해줘."
Codex가 Supabase MCP를 호출하여 데이터베이스를 직접 구성 (SQL 편집기 열 필요 없음) + 프론트엔드 코드 작성 + 크론 작업 설정.
7-15분 후, localhost:3000에서 플레이 가능합니다.
5. Codex가 Vercel에 배포하고 Computer Use로 Namecheap에서 DNS를 변경합니다 (15분)
여러분이 하는 3가지: 프롬프트 보내기 → Namecheap 로그인 비밀번호 입력하기 → Google Search Console 비밀번호 입력하기.
Codex가 대신 하는 일: CLI로 git push + vercel deploy 실행 + 환경 변수 동기화 → Computer Use로 브라우저 열기 → Namecheap 백엔드 조작하여 DNS 변경 → Google Search Console로 전환하여 확인 + 사이트맵 제출.
보내기:
"새 GitHub 리포지토리에 푸시하고, Vercel에 배포하고, 환경 변수를 자동으로 동기화해줘. Computer Use를 사용해서 내 Namecheap에 로그인하고 dailywordcat.com의 DNS를 Vercel이 제공하는 네임서버로 변경해줘. 또한 Google Search Console을 설정하고 sitemap.xml을 제출해줘."
Codex가 자동으로:
- CLI 부분: git init + push + vercel deploy + env vars 동기화
- Computer Use 부분: 브라우저 열기 → Namecheap 조작하여 DNS 변경 → Google Search Console로 전환하여 확인 + 사이트맵 제출
전체 과정에서, 여러분은 요청 시 Namecheap/Google 비밀번호만 입력하면 됩니다; Codex가 다른 모든 것을 클릭해 줍니다.
도메인 해결은 20-30분 내에 완료됩니다.
이 순간, 여러분은 실제로 운영되는 웹사이트를 가지게 됩니다.
가장 흔한 3가지 함정
함정 1: Computer Use가 1/3/5단계에서 승인 없이 중단됨
Codex Computer Use는 각 앱을 처음 조작할 때 "Allow"를 클릭하라는 창을 띄웁니다. Codex App의 Computer Use를 사용해 본 적이 없다면, 설정 → 개인정보 보호 → 손쉬운 사용 / 화면 기록에서 Codex를 한 번 승인하여 권한 팝업을 찾느라 5분 동안 멈추는 것을 방지하는 것이 좋습니다. Chrome 작업에는 Chrome 확장 프로그램이 가장 안정적입니다.
함정 2: Supabase RLS (행 수준 보안)가 구성되지 않음 = 데이터베이스 노출
Codex가 MCP를 통해 기본 버전의 RLS를 구성합니다. 실제 운영 전에 RLS 규칙이 합리적인지 반드시 확인해야 합니다. 구체적인 내용은 다음 게시물에서 설명하겠습니다.
함정 3: Chrome 백그라운드 병렬 작업 ≠ 모든 Computer Use 작업이 병렬 가능
5/21 OpenAI 발표 이후, Chrome의 Codex 작업은 이미 백그라운드 병렬이며 브라우저를 점유하지 않습니다—1단계 계정 등록 / 5단계 DNS 변경은 Chrome 작업이므로 동시에 컴퓨터로 다른 작업을 할 수 있습니다.
하지만: Codex가 네이티브 앱 (Finder / Photoshop / 모든 비브라우저 앱)을 조작할 때는 여전히 순차적입니다—이때는 마우스를 잡지 말고 / cmd+tab으로 전환하지 말고, 해당 단계가 끝날 때까지 기다리세요. 2-4단계에서 로컬 Open Design과 상호작용할 때 가끔 네이티브 모드를 사용하니 명심하세요.
이 방법으로 어떤 종류의 사이트를 만들 수 있나요?
4가지 정체성에 맞춥니다:
미국 시장 텍스트/숫자 게임 사이트를 만들고 싶다 (블루오션 선택) → Wordle 변형 / Connections 변형 / 스도쿠 / 크로스워드
일일 퍼즐 정답 사이트를 만들고 싶다 (롱테일 트래픽 수확기) → "Connections hints today" / "Wordle answer today" 유형 사이트; 최고 스도쿠 플레이어는 월 1,269만 유기 검색을 받습니다.
트렌딩 도구 사이트를 만들고 싶다 ("AI XX Generator" 유형) → 새 모델 출시를 따라가는 도구 랜딩 페이지.
로그인과 결제가 있는 SaaS를 만들고 싶다 → Supabase auth + Stripe + Vercel = 완전한 상업 사이트.
월 비용 대비 수익 기대치
- 1개월 차: 월 비용 $20-30 / 수익 $0-50 (사이트 구축 + Google 색인 대기)
- 3개월 차: 월 비용 $30-50 / 수익 $50-300 (단일 사이트 트래픽 증가)
- 6개월 차: 월 비용 $50-100 / 수익 $500-1000+ (여러 사이트 누적 / AdSense + 제휴 마케팅)
수익 수치는 일반적인 업계 범위입니다. 실제 AdSense/제휴 마케팅 대시보드를 참조하세요. 참조 상한선: sudoku.com은 단일 사이트로 1,269만 유기 검색을 받습니다.
마지막 한마디
사이트를 런칭하려면 예전에는 3가지 역할이 필요했습니다: 디자이너 + 프론트엔드 + 백엔드. 또는 한 사람이 3개월 동안 3가지 기술 세트를 배워야 했습니다.
이제, Codex 구독 1개 + Open Design 오픈소스 = 3가지 역할 모두 커버. 월 $20은 스타벅스 커피 한 잔보다 약간 더 비쌀 뿐입니다.
더 중요한 것은—Codex는 이제 코드를 작성하는 것 이상을 할 수 있습니다. Computer Use를 사용하여 컴퓨터의 모든 앱을 조작하고 (브라우저뿐만 아니라—Finder / Photoshop / 모든 GUI) + MCP를 호출하여 백엔드 서비스를 구성할 수 있습니다. 오늘 (5/21), OpenAI는 또 하나의 기능을 추가했습니다: Chrome 작업이 백그라운드 병렬 탭에서 실행되어 브라우저를 점유하지 않습니다. 초보자는 정말로 수동 작업 0 + 대기 시간 0을 경험합니다: 여러분은 음성만 사용하고, 화면을 보고, 'y'를 누르고, 나머지 시간은 X(트위터)를 하거나 회의에 참석하면 됩니다.
미국 시장 텍스트/숫자 게임 사이트는 여전히 블루오션입니다—sudoku.com이 1,269만 검색을 받으며 여전히 성장하고 있고, 대부분의 중국 개발자는 아직 움직이지 않았습니다. 정보 격차는 곧 돈입니다.
하루를 정해서 이 5단계를 실행해 보세요. 한 번 해보면, 새 사이트를 런칭하는 것은 30분짜리 작업이 됩니다. 주말 계획에 방해가 되지 않을 것입니다.
