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

Codex use case

프로토타입으로 아이디어 검증하기

ImageGen으로 여러 디자인 시안을 살펴보고 아이디어의 첫 버전을 만들어 보세요.

Difficulty Intermediate
Time horizon 1h

Codex와 ImageGen으로 초기 아이디어의 디자인 방향을 정하고, 핵심 기능만 담은 프로토타입을 구현한 뒤 브라우저에서 검증하세요.

Best for

  • 기획서만 읽을 때보다 프로토타입을 직접 써 볼 때 더 많은 답을 얻을 수 있는 초기 제품 아이디어
  • 구현 전에 여러 디자인 방향을 살펴봐야 하는 웹 앱, 대시보드, 도구
  • 추가 투자에 앞서 실제로 작동하는 프로토타입으로 제품 아이디어를 검증하려는 팀

Contents

    ← All use cases

    프로토타입으로 아이디어 검증하기

    ImageGen으로 여러 디자인 시안을 살펴보고 아이디어의 첫 버전을 만들어 보세요.

    Codex와 ImageGen으로 초기 아이디어의 디자인 방향을 정하고, 핵심 기능만 담은 프로토타입을 구현한 뒤 브라우저에서 검증하세요.

    Intermediate
    1h

    Codex와 ImageGen으로 초기 아이디어의 디자인 방향을 정하고, 핵심 기능만 담은 프로토타입을 구현한 뒤 브라우저에서 검증하세요.

    Intermediate
    1h

    Best for

    • 기획서만 읽을 때보다 프로토타입을 직접 써 볼 때 더 많은 답을 얻을 수 있는 초기 제품 아이디어
    • 구현 전에 여러 디자인 방향을 살펴봐야 하는 웹 앱, 대시보드, 도구
    • 추가 투자에 앞서 실제로 작동하는 프로토타입으로 제품 아이디어를 검증하려는 팀

    Skills & Plugins

    • ImageGen
      `gpt-image-2`로 디자인 콘셉트, UI 목업, 에셋 디자인 시안과 베리언트를 만들어 보세요. 디자인 방향을 선택하면 Codex가 그에 맞춰 구현합니다.
    • 실행 중인 앱을 실제 브라우저에서 열고 변경한 라우트를 점검하세요. UI를 조금씩 조정하면서 매번 결과를 확인한 뒤 다음 수정으로 넘어가세요.
    • 새 웹 앱, 대시보드, 사이트, 프론트엔드 프로토타입을 만들 때는 콘셉트부터 정하는 워크플로우를 사용하고, 브라우저에서 구현 결과를 검증하세요.
    • 브라우저 게임 프로토타입을 만들 때 엔진 선택, 직접 플레이할 수 있는 게임 루프 구현, 에셋 제작 워크플로우 구성, HUD 구현과 플레이테스트가 필요하다면 Game Studio를 사용하세요.
    Skill Why use it
    ImageGen `gpt-image-2`로 디자인 콘셉트, UI 목업, 에셋 디자인 시안과 베리언트를 만들어 보세요. 디자인 방향을 선택하면 Codex가 그에 맞춰 구현합니다.
    Playwright 실행 중인 앱을 실제 브라우저에서 열고 변경한 라우트를 점검하세요. UI를 조금씩 조정하면서 매번 결과를 확인한 뒤 다음 수정으로 넘어가세요.
    Build Web Apps 새 웹 앱, 대시보드, 사이트, 프론트엔드 프로토타입을 만들 때는 콘셉트부터 정하는 워크플로우를 사용하고, 브라우저에서 구현 결과를 검증하세요.
    Game Studio 브라우저 게임 프로토타입을 만들 때 엔진 선택, 직접 플레이할 수 있는 게임 루프 구현, 에셋 제작 워크플로우 구성, HUD 구현과 플레이테스트가 필요하다면 Game Studio를 사용하세요.

    Starter prompt

    ImageGen으로 다음 아이디어를 담은 고품질 UI 목업을 만든 뒤, [Build Web Apps plugin/Game studio plugin]을 사용해 구현해 주세요. [describe the idea, target user, and the main workflow]
    ImageGen으로 다음 아이디어를 담은 고품질 UI 목업을 만든 뒤, [Build Web Apps plugin/Game studio plugin]을 사용해 구현해 주세요. [describe the idea, target user, and the main workflow]

    디자인 방향 먼저 잡기

    GPT Image 2는 완성도 높은 UI 목업을 만드는 데 탁월합니다. 새로운 아이디어를 탐색할 때는 처음부터 직접 디자인하지 않아도 이미지 생성으로 디자인 방향을 잡을 수 있습니다.

    방법은 두 가지입니다.

    • ImageGen 스킬로 시안을 다듬으세요. 마음에 드는 UI가 나오면 Codex에 시안과 일치하는 프로토타입을 만들어 달라고 요청하세요. 이때는 기존 ChatGPT 채팅을 이어가는 대신 Codex를 선택하고 새 채팅을 시작한 뒤 구현하려는 최종 이미지를 첨부하세요. Codex는 사용자가 첨부한 이미지를 직접 참고할 수 있을 때 더 좋은 결과를 냅니다.
    • 플러그인에 아이디어만 설명하세요. 플러그인이 디자인 방향을 제안하고 다음 단계까지 진행합니다.

    플러그인 활용하기

    구현에 앞서 시안을 여러 차례 다듬을 필요가 없다면 플러그인에 아이디어를 설명하세요.

    웹 앱, 대시보드, 창의적인 웹사이트, 프론트엔드 중심의 도구를 만들 때는 Build Web Apps 플러그인을 사용하세요. 이 워크플로우에 따라 Codex는 먼저 디자인 시안을 만들고, 시안에 맞춰 코드를 작성한 뒤 브라우저에서 구현 결과를 원래 시안과 비교합니다.

    브라우저 게임으로 아이디어를 검증하려면 Game Studio 플러그인을 사용하세요. 이 워크플로우에서는 게임의 범위를 넓히기 전에 플레이어가 할 수 있는 행동, 처음 구현할 플레이 가능한 게임 루프, 게임 엔진, 에셋 제작 워크플로우, HUD, 조작 방식, 브라우저 테스트를 정합니다.

    반복 개선 워크플로우

    개념 검증의 범위는 빠르게 구현하고 팀과 함께 검증할 수 있는 최소 기능 제품(MVP)으로 좁히는 것이 좋습니다. MVP가 예상대로 동작하는지 확인하려면 Codex에 Playwright interactive로 구현 결과를 검증해 달라고 요청하세요.

    첫 버전이 동작하면 같은 채팅에서 변경 범위를 구체적으로 정해 요청하며 개선해 나갈 수 있습니다.

    [feature/bug fix/etc.] 항목을 새로 추가해 주세요. Playwright interactive로 변경 사항을 검증해 주세요. 반영할 피드백: [paste comments, screenshots, or review notes]

    Related use cases