Codex 
OpenDesign OpenDesign에서 OpenAI Codex로 인터페이스를 디자인하는 방법: 설정, 브리프부터 검토된 파일까지 이어지는 하나의 완전한 작업, 그리고 시작 전에 알아야 할 한계까지 다룹니다.
“더 차분한 프로젝트 보드.
명확한 우선순위. 집중할 여백.”
하나의 완전한 Codex 디자인 작업
하나의 작업을 처음부터 끝까지 보여줍니다: 전달하는 브리프와 제약 조건, 돌아오는 산출물, 그리고 완료 전에 여전히 실행하는 검토 과정입니다. 아래 인터페이스는 이 페이지를 위해 제작된 예시이며, 실제로 기록된 Codex 실행 결과가 아닙니다.
브리프소규모 제품 팀을 위한 프로젝트 진행 보드를 디자인합니다. 전체 진행 상황, 다음 마일스톤, 막힌 작업을 한눈에 보여줍니다. 작업은 할 일, 진행 중, 완료 컬럼을 이동합니다. 보드는 데스크톱과 모바일에서 모두 작동해야 합니다.
data-od-id 훅이 포함된 단일 독립형 HTML 파일브리프를 작성하고, 디자인 시스템을 선택하고, 승인 기준을 정의합니다.
레이아웃을 계획하고, HTML, CSS, JavaScript를 작성하고, 파일을 실행하며, 요청에 따라 수정합니다.
디자인 시스템과 스킬을 제공하고, 프리뷰를 렌더링하며, 모든 버전을 프로젝트 내 파일로 저장합니다.
시각적 계층 구조, 8px 그리드에 따른 여백, 두 브레이크포인트, 모든 인터랙션을 인수 전에 확인합니다.
사이드바, 헤더, 통계, 열은 8px 그리드에 맞춰 배치되며, 1440px나 390px에서도 겹치는 요소가 없습니다.
진행률, 다음 마일스톤, 차단된 항목 수는 열 머리글보다 우선하며, 강조 색상은 하나의 마일스톤 레이블에만 사용됩니다.
열은 세그먼트 스위치로 전환되고, 마일스톤 바는 유지되며, 사이드바는 탭 바로 접힙니다.
여기에서 미리보기를 데스크톱과 모바일 사이로 전환하십시오. 직접 만든 산출물에서 작업을 열어 필터, 키보드 탐색, 포커스 동작을 테스트하십시오.
적합성
호환성
이 가이드는 로컬 Codex를 다룹니다. 다른 모드는 설정과 결제 방식이 다릅니다. 게시된 참고 자료는 2026년 9월 11일 기준으로 확인했습니다.
OpenAI Codex는 코딩 에이전트이며, 이전의 코드 완성 모델이 아닙니다. 이 페이지는 Codex로 인터페이스를 설계하는 것에 관한 내용이며, Codex 앱 자체의 UI에 관한 것이 아닙니다. OpenDesign의 설정 안내에는 Codex가 사용 가능한 에이전트 중 하나로 나와 있습니다.
로컬 Codex의 경우 ChatGPT로 로그인하거나 OpenAI API 키를 사용하십시오. 두 방식은 결제 및 정책상의 의미가 다릅니다. OpenAI의 인증 안내를 따르십시오. 이 페이지는 할당량이나 가격을 보장하지 않습니다.
데스크톱 빌드는 다운로드 페이지에서 확인하십시오. 소스 퀵스타트에 명시된 Node.js 및 pnpm 요구 사항은 소스에서 실행하는 경우에 적용되며, 데스크톱 패키지 설치에는 적용되지 않습니다. 호환되는 최소 Codex 버전: 여기서는 확인되지 않음.
설치한 버전에 표시된 연결 안내를 따른 다음, 작은 작업을 실행하십시오. 의도한 에이전트가 이를 처리했는지, 그리고 산출물이 열리는지 확인하십시오. 다운로드만으로는 작동하는 연결이 확립되지 않습니다.
데스크톱 앱으로 시작하기
먼저 다운로드하고, 설치한 버전에 맞는 Codex 설정을 완료한 다음, 작은 결과를 확인하십시오. 이 경로를 따르기 위해 소스에서 OpenDesign을 빌드할 필요는 없습니다.
사용 중인 컴퓨터에 맞는 패키지를 선택하여 설치하고 앱을 여십시오.
OpenDesign 다운로드설치한 버전의 Codex 안내를 따르십시오. 로컬 Codex의 경우, 작업을 전송하기 전에 ChatGPT 로그인 또는 API 키 인증을 완료하십시오.
Codex 인증 안내 읽기수정 한 번을 포함한 전체 루프를 판단할 수 있도록 작은 브리프를 사용하십시오.
프로필 폼과 저장 확인이 포함된 설정 화면을 만드십시오. 제 디자인 규칙을 사용하십시오. 데스크톱과 모바일 너비에서 확인하십시오.
소스에서 실행하려면 기술 퀵스타트를 따르십시오. Codex에 플러그인을 설치하려면 아래 설치 항목을 이용하십시오.
Codex 디자인 워크플로우
동일한 progress-board 작업을 브리프부터 검증된 파일까지 따라갑니다. 각 단계는 사용자가 제공하는 것, Codex가 수행하는 것, OpenDesign이 기여하는 것, 그리고 확인해야 할 것을 나열합니다.
평이한 언어로 세 줄에서 여섯 줄 사이로 작성합니다. 대상 사용자, 화면의 목적, 플랫폼을 명시하십시오.
AGENTS.md를 읽습니다. 모호한 부분이 있으면 질문합니다.디자인 시스템과 몇 가지 확고한 규칙입니다. 이것이 브랜드에 맞는 결과물과 일반적인 결과물을 가르는 요소입니다.
Codex는 자체 완결형 HTML 파일을 작성합니다: 레이아웃, 스타일, 인터랙션, 안정적인 훅까지 포함합니다.
파일은 요청한 너비로 OpenDesign 내부에 렌더링됩니다. 디자인은 바로 여기서 판단됩니다.
data-od-id 대상을 노출합니다.프리뷰의 요소를 가리켜 변경을 요청합니다. 모든 수정본은 새 파일로 생성되며, 아무것도 조용히 덮어씌워지지 않습니다.
리소스
Codex가 읽도록 만든 설치 안내가 담긴 순수 텍스트 주소이며, 시각적인 튜토리얼이 아닙니다. 프롬프트를 Codex에 복사해 넣으면 항목 자체를 읽어들입니다.
https://open-design.ai/codex-plugin/ 를 읽고 설치 지침을 따라 Codex에 OpenDesign을 설치하십시오. 구성을 변경하기 전에 먼저 확인을 요청하십시오.
Codex를 위한 프런트엔드 및 디자인 시스템 플러그인으로, 각각 고유한 소스와 설정 안내를 제공합니다.
Codex가 OpenDesign에서 만들어낼 수 있는 산출물 유형이며, 유형마다 하나의 스킬이 대응됩니다.
Codex가 무언가를 생성하기 전에 연결해야 할 브랜드 토큰과 컴포넌트입니다.
덱은 별도의 가이드를 사용하며, 결과물과 워크플로가 제품 UI와 다릅니다.
제한 사항
자주 묻는 질문
작은 작업부터 시작해 왕복 과정을 판단한 다음 실제 브리프를 가져오십시오. 설정에 맞는 옵션을 선택하십시오. 이 페이지는 설정을 자동으로 감지하지 않습니다.