For the complete documentation index, see llms.txt. Markdown versions of documentation pages are available by appending .md to the page URL.
기본 탐색 메뉴
Theme

추천
API 대시보드
ChatGPT 사용해 보기
Codex

Codex use case

브라우저 게임 만들기

게임 개발 계획을 세우고 Codex에 구현과 실제 브라우저 테스트를 맡기세요.

Difficulty Intermediate
Time horizon Long-running

Codex로 게임 기획안을 구체적인 개발 계획으로 정리한 뒤, 그 계획에 따라 브라우저 게임을 만드세요. imagegen으로 그래픽 에셋을 만들고, Codex에 실제 브라우저에서 게임을 테스트하며 조작감과 UI를 다듬어 달라고 요청하세요.

Best for

  • 브라우저 게임을 처음부터 개발할 때
  • 게임 조작, 그래픽, 배포 과정을 모두 반복해서 테스트하고 조정해야 할 때

Contents

    ← All use cases

    브라우저 게임 만들기

    게임 개발 계획을 세우고 Codex에 구현과 실제 브라우저 테스트를 맡기세요.

    Codex로 게임 기획안을 구체적인 개발 계획으로 정리한 뒤, 그 계획에 따라 브라우저 게임을 만드세요. imagegen으로 그래픽 에셋을 만들고, Codex에 실제 브라우저에서 게임을 테스트하며 조작감과 UI를 다듬어 달라고 요청하세요.

    Intermediate
    Long-running

    Codex로 게임 기획안을 구체적인 개발 계획으로 정리한 뒤, 그 계획에 따라 브라우저 게임을 만드세요. imagegen으로 그래픽 에셋을 만들고, Codex에 실제 브라우저에서 게임을 테스트하며 조작감과 UI를 다듬어 달라고 요청하세요.

    Intermediate
    Long-running

    Related links

    AGENTS.md로 맞춤 지침 설정하기 스킬

    Best for

    • 브라우저 게임을 처음부터 개발할 때
    • 게임 조작, 그래픽, 배포 과정을 모두 반복해서 테스트하고 조정해야 할 때

    Skills & Plugins

    • Playwright
      실제 게임 빌드를 브라우저에서 플레이하며 현재 상태를 확인하고 조작감, 타이밍, UI 사용감을 다듬으세요.
    • ImageGen
      콘셉트 아트, 스프라이트, 배경, UI 에셋을 생성하고, 다음 에셋 묶음을 만들 때도 쓸 수 있도록 프롬프트를 정리해 두세요.
    • OpenAI Docs
      OpenAI 기반 기능을 게임에 연동하기 전에 최신 공식 가이드를 확인하세요.
    Skill Why use it
    Playwright 실제 게임 빌드를 브라우저에서 플레이하며 현재 상태를 확인하고 조작감, 타이밍, UI 사용감을 다듬으세요.
    ImageGen 콘셉트 아트, 스프라이트, 배경, UI 에셋을 생성하고, 다음 에셋 묶음을 만들 때도 쓸 수 있도록 프롬프트를 정리해 두세요.
    OpenAI Docs OpenAI 기반 기능을 게임에 연동하기 전에 최신 공식 가이드를 확인하세요.

    Starter prompt

    이 레포지토리에서 $playwright-interactive, $imagegen, $openai-docs를 사용해 브라우저 게임을 기획하고 만들어 주세요. PLAN.md에 따라 게임을 구현하고 `.logs/`에 작업 내역을 기록해 주세요.
    이 레포지토리에서 $playwright-interactive, $imagegen, $openai-docs를 사용해 브라우저 게임을 기획하고 만들어 주세요. PLAN.md에 따라 게임을 구현하고 `.logs/`에 작업 내역을 기록해 주세요.

    소개

    게임 개발은 Codex가 코드 생성 외에 어떤 일을 도울 수 있는지 잘 보여 줍니다. 실제로 게임을 만들려면 보통 게임 구상을 문서로 정리하고, 렌더링 계층과 프런트엔드의 기본 구조를 구현하고, 백엔드에서 상태를 관리해야 합니다. 게임 에셋을 제작하고 화면을 꾸준히 다듬는 작업도 필요합니다.

    먼저 Codex가 게임의 동작을 구체적으로 문서화하도록 하세요. 그런 다음 Playwright interactive로 실제 브라우저에서 게임을 테스트하며 개선하도록 하면 효과적입니다.

    게임 계획 세우기

    Codex가 프로젝트의 기본 구조를 만들기 전에 다음 내용을 구체적으로 담은 PLAN.md를 작성해 달라고 하세요.

    • 플레이어의 목표
    • 핵심 게임 루프
    • 입력 방식과 조작법
    • 승리 및 실패 조건
    • 게임 진행 방식이나 난이도
    • 시각적 스타일
    • 사용할 기술 스택과 호스팅 환경에 대한 가정
    • 주요 개발 단계의 순서

    “게임을 만들어 줘”라는 요청만으로는 무엇을 만들어야 할지 모호합니다. Codex는 게임의 각 부분을 어떻게 구현할지 알아야 하며, 개발 중에도 세부 구현 계획을 자주 참고해야 합니다.

    /plan 슬래시 명령어로 플랜 모드를 활성화할 수 있습니다. 생성된 계획을 PLAN.md 파일에 저장하세요.

    AGENTS.md로 Codex에 작업 지침 제공하기

    Codex가 계획에 따라 작업하고, 결과를 검증하고, 적절한 도구를 사용하도록 다음과 같이 AGENTS.md를 작성하세요.

    # 게임 이름

<Type of game>

기술 스택:

- 프런트엔드: NextJS(Vercel에서 호스팅)
- 렌더링: <insert technology>
- 백엔드 및 웹소켓: Fastify(<hosting platform>에서 호스팅)
- 데이터베이스: Postgres(<hosting platform>에서 호스팅)
- 캐싱 및 발행/구독: Redis(<hosting platform>에서 호스팅)
- 생성형 AI 기능: OpenAI

작업 지침:

- 기능 구현이나 작업을 하나 완료할 때마다 즉시 빌드 및 테스트 명령어를 실행해 결과를 검증하세요.
- 새 기능을 구현할 때는 PLAN.md 파일의 계획을 따르세요.
- .logs 디렉터리에 작업 내용과 그 과정에서 고려한 사항, 결정한 내용을 기록하세요. 필요에 따라 새 로그 파일을 만들고, 기능을 개선할 때 이 기록을 참고하세요.
- playwright로 게임 화면을 테스트하세요. 화면이 어색하거나 의도한 분위기와 맞지 않으면 수정하고 다시 테스트하세요.
- imagegen으로 게임에 사용할 시각 에셋을 생성하세요. 나중에 같은 스타일의 에셋을 더 생성할 수 있도록 에셋 묶음을 생성할 때마다 사용한 프롬프트를 .prompts 디렉터리에 파일로 저장하세요.
- Context7 MCP를 사용해 <rendering framework> 문서를 가져오세요.

    이렇게 하면 Codex가 필요할 때마다 관련 스킬을 사용하면서 오랫동안 독립적으로 작업할 수 있습니다.

    스킬 활용하기

    AGENTS.md 파일에 언급한 스킬을 추가하세요.

    • Imagegen을 추가하면 Codex가 필요에 따라 게임에 사용할 시각 에셋을 생성할 수 있습니다.
    • Playwright interactive를 추가하면 Codex가 실제 브라우저에서 게임을 테스트할 수 있습니다.
    • OpenAI docs를 추가하면 Codex가 최신 OpenAI API 문서를 가져올 수 있습니다.
    • 렌더링 프레임워크의 최신 문서가 필요하면 Context7 MCP 서버도 추가할 수 있습니다.

    스킬을 추가하는 방법은 스킬 문서를 참고하세요.

    팁: 시각 에셋의 스타일을 일관되게 유지하려면 Codex에 이미지 생성 프롬프트를 파일로 저장해 달라고 하세요. 원하는 에셋의 스타일을 설명하면 Codex가 재사용할 수 있는 구체적인 프롬프트를 작성합니다.

    Codex에 개발을 맡기고 게임 다듬기

    Codex는 처음 세운 계획을 바탕으로 게임의 첫 버전을 만듭니다.

    생성해야 할 이미지 에셋이 많으면 첫 버전을 만드는 데 몇 시간이 걸리기도 합니다. Codex는 작업 결과를 직접 테스트하고 실제 브라우저에서 게임을 플레이할 수 있으므로 추가 지시 없이도 오랫동안 작업을 이어 갈 수 있습니다.

    계획이 구체적일수록 첫 버전의 완성도가 높아집니다.

    직접 게임을 플레이해 보면서 필요에 따라 스크린샷을 제공하거나, 플레이 방식을 바꾸거나 시각 에셋을 수정해 달라고 하세요. 결과가 만족스러울 때까지 이 과정을 반복하세요.

    Tech stack

    Need

    웹 게임 기술 스택

    Default options

    Next.js 와 함께 Phaser 또는 PixiJS 사용

    Why it's needed

    브라우저 게임의 UI와 렌더링 계층을 구현하기에 적합한 기본 조합입니다.

    Need

    백엔드 기술 스택

    Default options

    Fastify , WebSockets, Postgres , Redis

    Why it's needed

    게임 데이터를 영구 저장하거나 매치메이킹, 순위표, 발행·구독 기능을 구현할 때 적합한 기본 조합입니다.

    Need Default options Why it's needed
    웹 게임 기술 스택 Next.js 와 함께 Phaser 또는 PixiJS 사용 브라우저 게임의 UI와 렌더링 계층을 구현하기에 적합한 기본 조합입니다.
    백엔드 기술 스택 Fastify , WebSockets, Postgres , Redis 게임 데이터를 영구 저장하거나 매치메이킹, 순위표, 발행·구독 기능을 구현할 때 적합한 기본 조합입니다.

    Related use cases

    목표를 향해 작업하기

    Codex가 여러 대화 턴에 걸쳐 작업을 이어가야 하고 종료 조건의 충족 여부를 확인할 수 있다면 `/goal`을 사용하세요.

    Engineering Automation

    Codex가 사용할 CLI 만들기

    Codex에 어느 폴더에서나 실행할 수 있고 레포지토리 스크립트와 조합하거나 파일을 다운로드할 때 쓸 수 있는 CLI를 만들어 달라고 하세요

    Engineering Code

    검증 모듈 마이그레이션

    Codex에 마이그레이션 범위를 명시한 문서와 계약 테스트 픽스처, 미리 설정한 클라우드 환경을 제공하세요

    Engineering Quality