웹 개발

Codex는 기존 디자인 시스템을 활용하면서 제약 조건과 시각 자료를 반영해 반응형 UI를 구현합니다. 웹 앱을 개발하면서 프런트엔드 디자인을 다듬을 때 다음 활용 사례를 참고하세요.

아이디어를 프로토타입으로 구현하기

Codex로 대략적인 아이디어를 구체화해 디자인 방향을 잡고 첫 프로토타입을 구현하세요.

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

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

Front-end Engineering

Figma 디자인을 코드로 구현하기

Codex로 Figma에서 디자인 컨텍스트를 가져와 레포지토리의 컴포넌트, 스타일, 디자인 시스템에 맞는 코드로 구현하세요.

Figma 디자인을 코드로 구현하기

Codex로 Figma에서 디자인 컨텍스트, 에셋, 베리언트를 가져와 레포지토리의 디자인 시스템에 맞는 코드로 구현하세요

Front-end Design

UI 다듬기

Codex에 시각 자료나 프롬프트를 제공하고, 원하는 부분을 수정한 뒤 브라우저에서 결과를 확인하도록 요청하세요.

반응형 프런트엔드 디자인 구현하기

Codex로 스크린샷과 디자인 요구사항을 바탕으로 레포지토리의 디자인 시스템에 맞는 UI를 구현하세요

Front-end Design

Slack에서 범위가 명확한 작업 맡기기

Slack에서 기능 요청이나 이슈 제보가 올라오면 Codex를 태그하세요. Codex가 해당 작업을 맡아 백그라운드에서 처리합니다.

Slack에서 코딩 작업 시작하기

Slack에서 `@ChatGPT`를 멘션해 리포지터리 작업을 요청하세요. Codex는 워크스페이스에 공유된 Codex Cloud 환경 중 사용 요건을 충족하는...

Integrations Workflow

미리보기 배포하기

Codex에 웹 앱을 만들거나 업데이트한 뒤 Vercel로 배포하도록 요청하세요. 배포가 끝나면 다른 사람과 공유할 수 있는 미리보기 URL을 받습니다.

앱 또는 웹사이트 배포하기

Codex에서 Build Web Apps와 Vercel을 함께 사용하면 레포지토리, 스크린샷, 디자인 또는 대략적인 앱 아이디어를 바탕으로 실제로 작동하는 미리보기를...

Front-end Integrations

변경 사항을 더 빠르게 릴리스하기

GitHub에서 Codex로 변경 사항을 안전하게 병합할 수 있는지 확인해 개발 주기를 단축하세요.

GitHub pull request 리뷰하기

GitHub에서 Codex 코드 리뷰를 사용하면 회귀 문제, 누락된 테스트, 문서 문제를 자동으로 찾아 pull request에 바로 표시합니다.

Integrations Workflow