Question 1

Codex는 무엇을 하고, OpenDesign은 무엇을 하나요?

Accepted Answer

Codex는 에이전트입니다. 사용자의 브리프를 읽고 코드를 작성 및 실행하며 수정합니다. OpenDesign은 그 주변의 작업 공간으로, 디자인 시스템, 스킬, 미리보기, 댓글, 버전 관리되는 파일을 제공합니다. OpenDesign은 독립적인 오픈소스 프로젝트이며 OpenAI와는 관련이 없습니다.

Question 2

시작하기 전에 무엇이 필요한가요?

Accepted Answer

데스크톱 앱, 선택한 모드에 맞는 정상 작동하는 Codex 연결, 그리고 테스트할 작은 작업이 필요합니다. 호환성을 참고하십시오. 소스 빌드 요구 사항은 별도입니다. 디자인 시스템이 있으면 도움이 되며, 없다면 라이브러리에서 하나를 선택하십시오.

Question 3

OpenDesign을 이미 설치했습니다. 다음은 무엇인가요?

Accepted Answer

설치된 버전에 맞는 연결 안내를 따라 설정 섹션에 있는 간단한 테스트를 실행하십시오. 그런 다음 실제 브리프를 가져오십시오. 기술 퀵스타트에서는 별도의 소스 실행 경로를 다룹니다.

Question 4

디자인 플러그인은 이 가이드와 어떻게 다릅니까?

Accepted Answer

이 페이지는 UI 워크플로를 설명합니다. 플러그인 디렉터리는 리소스를 선택하는 데 도움이 되며, 설치 항목에는 에이전트가 따라야 할 지침이 포함되어 있습니다. 두 페이지는 서로 다른 작업을 수행합니다.

Question 5

다른 에이전트는 어디에서 볼 수 있습니까?

Accepted Answer

에이전트 허브에는 이용 가능한 에이전트 가이드가 나와 있습니다. Claude Code, Cursor, OpenCode는 위쪽의 관련 에이전트 항목에서 링크됩니다.

Question 6

Codex 디자인이 뻔해 보이는 것을 어떻게 피할 수 있나요?

Accepted Answer

Codex에 구체적인 참고 자료와 디자인 토큰을 제공하고, AGENTS.md 또는 DESIGN.md와 같은 프로젝트 지침에 브랜드 규칙을 명시한 다음, 대상 브레이크포인트에서 렌더링된 페이지를 검증하세요. 프런트엔드 디자인 스킬도 더 의도적인 시각적 방향을 제공할 수 있습니다. 결과를 직접 검토하세요. 브라우저 검사가 디자인 판단을 대체하지는 않습니다.

Question 7

Codex가 스크린샷이나 Figma 디자인으로 UI를 만들 수 있나요?

Accepted Answer

스크린샷은 구현을 위한 시각적 참고 자료로 사용할 수 있습니다. Figma 워크플로는 별개입니다. 디자인 파일 컨텍스트가 필요하거나 편집 가능한 Figma 프레임으로 왕복해야 할 때는 공식 Figma 통합을 사용하세요. 이 가이드는 편집 가능한 벡터 디자인 파일을 만드는 것이 아니라 렌더링된 웹 인터페이스를 검토하는 데 초점을 맞춥니다.

Question 8

Codex에 디자인 시스템을 어떻게 제공하나요?

Accepted Answer

시스템의 색상, 타이포그래피, 간격 및 컴포넌트 규칙을 DESIGN.md 또는 AGENTS.md와 같은 프로젝트 지침에 제공하고, Codex가 이를 따르도록 요청하세요. OpenDesign에도 인터페이스를 생성하기 전에 선택할 수 있는 디자인 시스템 라이브러리가 있습니다.

Question 9

Codex를 Figma에 연결할 수 있나요?

Accepted Answer

예. OpenAI의 Figma 통합은 Figma 디자인과 코드 사이를 오가는 작업을 지원합니다. 현재 Codex 문서를 사용해 설정하세요. 정확한 명령과 기능은 변경될 수 있습니다. 이 페이지의 기본 워크플로는 편집 가능한 Figma 파일이 아니라 HTML을 생성하고 검토합니다.

Question 10

BYOK는 OpenDesign와 함께 Codex를 사용할 때 무엇을 의미하나요?

Accepted Answer

Bring Your Own Key는 자체 OpenAI 계정 또는 API 키로 Codex를 인증하는 것을 의미하며, 선택한 모드의 청구 및 사용 약관이 적용됩니다. OpenDesign는 자격 증명을 프록시하지 않습니다. 호환성 섹션과 OpenAI의 현재 인증 지침에서 설정에 적용되는 세부 정보를 확인하세요.

Question 11

Codex UI는 Codex 앱을 의미하나요, 아니면 Codex로 구축된 인터페이스를 의미하나요?

Accepted Answer

이 표현은 OpenAI의 Codex 애플리케이션 또는 Codex 에이전트로 생성된 제품 인터페이스를 의미할 수 있습니다. 이 페이지는 후자에 관한 것입니다: Codex로 웹 인터페이스를 설계하고 검토하는 것.

Question 12

Codex가 생성한 인터페이스를 출시하기 전에 무엇을 확인해야 하나요?

Accepted Answer

렌더링된 인터페이스를 데스크톱 및 모바일 너비에서 검토하고, 모든 상호작용과 키보드 경로를 테스트하며, 포커스와 접근성을 확인하고, 결과를 브리프 및 참고 자료와 비교하세요. 성공적인 빌드나 에이전트 자체의 브라우저 확인은 첫 번째 패스에 불과합니다. 인계 전에 사람이 산출물을 검증해야 합니다.

Question 13

OpenAI Codex는 실제로 무엇인가(그리고 무엇이 아닌가)

Accepted Answer

먼저, “Codex”를 검색하는 거의 모든 사람이 헷갈리는 점을 명확히 하겠습니다. 원래의 OpenAI Codex는 2021년 코드 완성 모델로, 초기 GitHub Copilot을 구동했으며 2023년에 지원이 중단되었습니다. 이 페이지에서 다루는 것은 그것이 아닙니다. 오늘날의 Codex는 OpenAI의 에이전트형 코딩 도구로, 자연어 작업으로부터 코드를 계획하고, 작성하고, 실행하고, 검증합니다.

최신 Codex는 네 가지 형태로 제공됩니다: 터미널 CLI(Rust로 재작성되었고 Apache-2.0 라이선스), VS Code, Cursor, Windsurf용 IDE 확장, 위임된 비동기 작업을 위한 클라우드/웹 환경, 그리고 인앱 브라우저와 Computer Use가 있는 데스크톱 앱.

두 번째로 명확히 할 점은 “Codex UI” 검색이 두 갈래로 나뉜다는 것입니다. 하나는 Codex 자체의 인터페이스입니다: OpenAI가 에이전트를 실행하기 위해 제공하는 데스크톱 및 웹 앱입니다. 다른 하나는, 그리고 이 페이지에서 다루는 것은, Codex로 빌드하는 UI입니다: 제품의 컴포넌트, 레이아웃, 화면입니다.

기본 모델: 2026년 중반 기준 권장 모델은 gpt-5.5이며, gpt-5.4는 OpenAI가 프런트엔드와 computer use를 위해 명시적으로 훈련한 모델입니다.

지침 파일: Codex는 프로젝트의 AGENTS.md 파일(도구 간 표준)을 읽어 프로젝트 규칙을 확인하며, 이는 디자인 관례를 인코딩하기에 자연스러운 위치입니다.

샌드박스: 커널 수준 샌드박스(기본값 workspace-write)에서 실행되므로, UI를 편집하는 에이전트가 프로젝트 밖으로 벗어날 수 없습니다.

자격 증명: OpenAI API 키(BYOK) 또는 ChatGPT 구독(Free / Go / Plus / Pro / Business / Enterprise)

공급업체: OpenAI

CLI 라이선스: Apache-2.0, 오픈 소스

Question 14

Codex가 이제 디자인을 잘하는 이유

Accepted Answer

세 가지가 2026년 초에 수렴하여 Codex를 일반적인 코드 생성기가 아니라 진짜 디자인 도구로 만들었습니다.

프런트엔드로 훈련된 모델: OpenAI는 프런트엔드 및 컴퓨터 사용을 위해 훈련된 첫 메인라인 모델인 GPT-5.4를 출시했으며, 디자인 워크플로 전반에서 훨씬 나은 이미지 이해와 더 강력한 자체 검증을 갖췄습니다. 최종 에셋을 확정하기 전에 무드 보드와 시각적 옵션을 생성할 수도 있습니다.

공식 프런트엔드 디자인 스킬: openai/skills 카탈로그에는 진짜 감각을 강제하는 엄선된 프런트엔드 디자인 스킬이 포함되어 있습니다. 카드 없는 레이아웃, 풀블리드 히어로, 브랜드 우선 계층 구조, 절제된 모션, 최대 두 개의 서체와 한 가지 액센트 색상이며, Codex가 만들기 전에 비주얼 테제를 작성하도록 합니다. 이 프런트엔드 디자인 스킬을 추가하는 것이 Codex의 결과물을 가장 빠르게 향상시키는 단일 방법입니다.

브라우저 검증: Playwright 스킬을 사용하면 Codex가 실제 브라우저를 열고, 브레이크포인트에 맞게 크기를 조정하며, 빌드가 통과하는지만 확인하는 대신 결과물을 레퍼런스와 비교합니다.

감각은 여러분이 제공하는 세 가지 입력, 즉 디자인 시스템, 스킬, 실제 레퍼런스 이미지에서 나옵니다.

이 세 가지 뒤에 있는 교훈: Codex는 기본적으로 감각을 갖고 있지 않습니다. 제약, 디자인 시스템, 미학 스킬, 구체적인 레퍼런스를 주면 좋은 디자인을 만들어냅니다. OpenDesign는 바로 그러한 입력을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 더 자세히).

Question 15

제로에서 시작하는 디자인 작업용 Codex 설정

Accepted Answer

다음은 깨끗한 머신에서 UI를 빌드하고 검증할 수 있는 Codex까지의 전체 경로입니다.원클릭 경로를 선호하시나요? OpenDesign 데스크톱 앱 다운로드, 이 앱은 Codex를 엄선된 스킬 및 디자인 시스템 라이브러리와 함께 번들로 제공하므로, Codex를 에이전트로 선택하고 CLI 설정 없이 바로 디자인을 시작할 수 있습니다. 아래 단계는 Codex를 직접 설정하고 싶은 경우를 위한 수동 경로입니다.설정 순서: 설치 → 인증 → AGENTS.md 구성 → 프런트엔드 스킬 설치 → 브라우저 검증 활성화.디자인 규칙을 코드화하세요: 토큰, 프리미티브, 컨벤션을 AGENTS.md나 DESIGN.md에 넣고 Codex가 이를 참조하도록 하세요. 그러면 결과물이 일반적인 모습으로 기본 설정되는 대신 브랜드에 맞춰집니다.올바른 추론 수준을 선택하세요: OpenAI는 낮음~중간 추론 수준이 최고 설정보다 더 강력한 프런트엔드 결과를 자주 낸다고 언급합니다.명령과 버전별 세부 사항은 변경될 수 있으므로 현재 설정 섹션을 사용하세요.# 1. Install the Codex CLI
npm install -g @openai/codex
# or: brew install --cask codex
# or: curl -fsSL https://chatgpt.com/codex/install.sh | sh

# 2. Authenticate (ChatGPT sign-in recommended for higher limits)
codex            # then choose “Sign in with ChatGPT”

# 3. Generate project context
codex            # inside your project, run /init to create AGENTS.md

# 4. Add the official frontend skill, then restart Codex
# (in the Codex app) $skill-installer frontend-skill

# 5. Wire the Figma MCP server (optional, for design handoff)
codex mcp add figma --url https://mcp.figma.com/mcp이전 가이드의 과거 명령 예시입니다. 현재 구문은 링크된 공급업체 문서에서 확인하세요.

Question 16

Codex를 활용한 스크린샷-UI 워크플로

Accepted Answer

Codex와 함께하는 가장 효과가 큰 디자인 루프는 참조 이미지를 작동하는 반응형 UI로 바꾸고, 일치할 때까지 반복하는 것입니다. OpenAI 자체 가이드는 다섯 단계로 요약됩니다.가장 명확한 시각적 참조에서 시작하고, 하나의 히어로 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.프롬프트에서 구체적으로 작성하세요. 모호한 프롬프트는 일반적인 UI를 만듭니다.디자인 시스템을 준비하고 Codex에게 토큰과 정식 프리미티브가 어디에 있는지 알려주세요.Codex가 실제 브라우저에서 렌더링하고 브레이크포인트에 맞게 크기를 조정하도록 Playwright 대화형 스킬을 활성화하세요.Codex가 구현을 스크린샷과 다시 비교하게 하여 반복하세요. 단순히 빌드되는지 확인하는 것이 아닙니다.스크린샷을 터미널로 드래그하거나 이미지 플래그를 사용해 이미지를 제공한 다음, 구체적인 제약 조건과 함께 프롬프트하세요:두 번째 터미널에서 개발 서버를 실행하고, 프롬프트는 작고 집중적으로 유지하며, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때 Codex에게 알려주기). 그러면 각 패스가 깨끗한 기반 위에 쌓입니다.codex -i reference-desktop.png -i reference-mobile.png \
  "Implement this design in React + Vite + Tailwind + TypeScript.
   Reuse my existing design-system components and tokens.
   Match spacing, layout, and hierarchy; make it responsive.
   Use the Playwright skill to verify the UI matches the
   references and iterate until it does."이전 가이드의 과거 명령 예시입니다; 현재 구문은 링크된 공급업체 문서에서 확인하세요.

Question 17

Codex UI 디자인: 컴포넌트에서 출시되는 프런트엔드까지

Accepted Answer

Codex는 세 가지 종류의 입력으로 UI를 구축합니다: 작성된 설명, 참조 스크린샷 또는 Figma 프레임. 디자인 시스템이 컨텍스트에 있고 Playwright 스킬이 활성화되면 반응형 컴포넌트 기반 프런트엔드를 만들고 실제 브라우저에서 자체 작업을 검증합니다.스크린샷 하나를 페이지로 바꾸는 것은 데모이고, 실제 프런트엔드를 출시하는 것이 일입니다. Codex UI 디자인 작업은 단일 히어로 샷이 아니라 시스템, 재사용 가능한 컴포넌트, 반응형 레이아웃, 모든 상호작용 상태를 구축하는 것으로 다룰 때 훌륭해집니다. GPT-5.4의 더 강한 이미지 이해와 자기 검증이 이를 실용적으로 만들지만, 구조는 여전히 여러분에게서 나옵니다.컴포넌트 우선: 전체 페이지를 구성하기 전에 Codex에게 토큰에 맞춰 원자적이고 재사용 가능한 컴포넌트(버튼, 입력, 카드, 내비게이션)를 만들라고 요청하세요. 그러면 프런트엔드가 일회성 구현이 아니라 일관성을 유지합니다.기본적으로 반응형: 데스크톱과 모바일 참조를 제공하고 브레이크포인트의 이름을 지정하세요. 단일 뷰포트를 신뢰하는 대신 Codex가 실제 브라우저에서 크기를 조정하고 깨지는 레이아웃을 수정하게 하세요.모든 상호작용 상태: 호버, 포커스, 활성, 비어 있음, 로딩, 오류 상태를 명시하세요. UI가 완성된 느낌을 주고 일반적인 AI 출력이 보통 건너뛰는 상태들입니다.접근 가능한 마크업: 시맨틱 HTML, 레이블이 지정된 컨트롤, 보이는 포커스 링, 충분한 대비를 요구하고, Codex에게 빌드의 일부로 이를 확인하라고 요청하세요.컴포넌트와 그 상태를 명시적으로 프롬프트한 다음, Codex가 참조와 비교해 검증하게 하세요:좋은 프런트엔드 출력과 “AI slop”을 구분하는 패턴은 검증입니다. Codex가 UI를 렌더링하고, 브레이크포인트 전반에서 참조와 비교하고, 반복합니다. 단지 빌드가 통과하는지만 확인하는 것이 아닙니다.codex "Build a responsive pricing section in React + Tailwind + TypeScript.
   Reuse my design-system tokens and Button/Card components.
   Include hover, focus, and mobile-stacked states.
   Use the Playwright skill to check it against pricing-desktop.png
   and pricing-mobile.png at 375px and 1280px, and iterate until it matches."이전 가이드의 과거 명령 예시입니다; 현재 구문은 링크된 공급업체 문서에서 확인하세요.

Question 18

Codex로 디자인 시스템 구축하기

Accepted Answer

디자인 시스템은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다. Codex가 흔한 Inter와 보라색 룩으로 기본 설정하는 대신 여러분의 색상, 타입 스케일, 간격, 컴포넌트를 알 수 있게 해주는 방법이죠. Codex에게 기준으로 삼을 디자인 시스템을 주면, 그것이 만들어내는 모든 화면이 같은 취향을 물려받습니다.

토큰 정의하기: 색상, 타이포그래피, 간격, 반경, 그림자를 이름 있는 토큰으로 포착하세요. Codex가 화면마다 값을 새로 만들어내는 대신 재사용하는 어휘입니다.

프리미티브 확보하기: Codex가 각 컴포넌트를 다시 그리는 대신 조합할 수 있도록, 여러분의 표준 컴포넌트(Button, Input, Card, Modal)를 가리키게 하세요.

Codex가 읽는 곳에 작성하기: 에이전트가 매 실행마다 로드하는 AGENTS.md 또는 DESIGN.md에 규칙을 인코딩하세요: 히어로 카드 금지, 최대 두 개의 서체, 하나의 액센트 색상, 브랜드 우선 계층 구조.

매번 강제하기: Codex에게 새 UI를 시스템과 대조해 확인하고 이탈을 표시하도록 요청하세요. 그래야 디자인 시스템이 첫 화면 이후 쇠퇴하는 대신 실제로 유지됩니다.

반대 방향으로도 작업할 수 있습니다: Codex에게 참조 화면 몇 개를 주고 토큰과 프리미티브로 이루어진 시작용 디자인 시스템을 추출하게 한 뒤, 여러분이 다듬는 겁니다. 어느 쪽이든 시스템은 결과를 반복 가능하게 만드는 산출물입니다.

Question 19

Codex + Figma: 디자인과 코드 사이 왕복 작업

Accepted Answer

2026년 2월, OpenAI와 Figma는 공식 파트너십을 발표하며 이전의 Figma MCP 베타를 일급 양방향 통합으로 전환했습니다. 이는 양방향으로 작동합니다.

디자인 → 코드: Figma에서 프레임의 “link to selection”을 복사해 get_design_context와 함께 Codex에 붙여 넣고, 기존 컴포넌트 라이브러리를 사용해 디자인을 구현하도록 요청하세요.

코드 → 디자인: generate_figma_design 도구(“Code to Canvas”)는 실행 중인 라이브 UI를 편집 가능한 Figma 프레임으로 되돌립니다. 전체 화면, 선택한 요소 또는 전체 파일 단위로요.

Figma MCP는 원격 서버로 실행되며 속도 제한에서 면제됩니다. 한 번 추가하면 Codex, Claude Code, Cursor, VS Code 등에서 사용할 수 있습니다. 이는 OpenDesign가 조율하도록 만들어진 바로 그런 종류의 이식 가능한 멀티 에이전트 기능입니다.

Question 20

디자인 관점에서 비교한 Codex, Cursor, Claude Code

Accepted Answer

디자인 작업에는 단일한 승자가 없고, 각 에이전트는 서로 다른 강점을 지니며, 경험 많은 팀은 이들을 조합해 쌓아 올린다. 공정한 요약:

Codex — GPT-5.4 + frontend-skill 이후의 강력한 시각적 완성도; 이미지 이해 — 위임된 비동기 빌드, 샌드박스 실행, 이식 가능한 AGENTS.md 규칙

Cursor — 라이브 미리보기와 인라인 편집이 있는 시각적 빌드 앤 시 루프 — IDE 안에서 촘촘하게 반복하고 지켜보는 UI 작업

Claude Code — 구체적인 디자인 결정(헥스, 간격, 타이포)과 코드베이스 인지 UX — 프런트엔드 추론 및 대규모 컨텍스트 리팩터링

커뮤니티에서 반복적으로 나오는 평결은 취향은 사람에게서 온다는 것이다: 세 도구 모두 스킬, 레퍼런스, 제약 없이는 일반적인 미학으로 기본 설정된다. 그것이 풀어야 할 진짜 문제이며, 이는 모델 형태가 아니라 디자인 도구 형태의 문제다.

에이전트 — 디자인 강점 — 가장 적합한 용도

Question 21

Codex 디자인 플러그인 비교(OpenDesign 포함)

Accepted Answer

Codex의 디자인 능력은 거의 전적으로 무엇을 꽂아 넣느냐에 달려 있다. 오늘 Codex와 함께 사용할 수 있는 주요 디자인 플러그인과 도구, 그리고 그중에서 OpenDesign이 어디에 해당하는지는 다음과 같다:

OpenAI Product Design 플러그인 — OpenAI의 역할 플러그인: 방향 탐색, 사용자 흐름 감사, 라이브 URL에서 프로토타이핑, 스크린샷을 상호작용 가능하게 만들기, Figma 또는 Canva로 내보내기 — 아니요 — Codex 안에서 빠른 공식 디자인 작업

openai/skills frontend-skill — 선별된 미학, 카드 없는 레이아웃, 브랜드 우선 위계, 절제된 모션, 만들기 전의 시각적 테제 — 예(Apache-2.0) — 원시 출력 품질 끌어올리기

Figma 통합(MCP) — 양방향 Figma ↔ 코드: 프레임을 코드로 구현하고, 실행 중인 UI를 다시 편집 가능한 Figma로 푸시 — 아니요(공식) — Figma를 중심으로 작업하는 팀

OpenDesign — Codex를 둘러싼 개방형, 로컬 우선 디자인 레이어: 선별된 스킬 + 디자인 시스템 라이브러리, 렌더 파이프라인, 데스크톱 UI, BYOK — 예(Apache-2.0) — 자신이 소유하는 실제적이고 이식 가능한 디자인 워크플로

선택 방법: Codex 안에서 OpenAI 자체의 디자인 흐름을 원한다면, Product Design 플러그인이 방향 탐색, 흐름 감사, 라이브 URL에서의 프로토타이핑을 다룬다. 원시 출력 품질을 위해서는 프런트엔드 디자인 스킬이 가장 효과가 큰 추가 요소다. 공식 Figma 통합은 팀이 Figma를 주 무대로 삼는다면 필수적이며, 이식 가능하므로 Claude Code와 Cursor를 포함한 다른 어떤 것과도 짝지을 수 있다.

OpenDesign은 오픈 소스, 로컬 우선, BYOK를 처음부터 끝까지 갖춘 유일한 옵션이다. Codex를 선별된 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸므로, Codex를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하며 프로젝트마다 수작업으로 조립할 필요가 없고, 모든 아티팩트는 자신의 저장소에 남는다.

플러그인 / 도구 — 추가하는 것 — 오픈 소스 — 가장 적합한 용도

Question 22

코딩하지 않는 디자이너를 위한 Codex

Accepted Answer

Codex로 디자인하기 위해 엔지니어일 필요는 없습니다. 이 에이전트는 평범한 언어로 표현한 의도와 실제 레퍼런스를 받아 동작하는 반응형 UI를 돌려주므로, 프런트엔드 개발자만이 아니라 디자이너와 프로덕트 담당자에게도 진짜 도구가 됩니다. 요령은 코딩 세션이 아니라 디자인 브리프처럼 이끄는 것입니다.

평범한 언어로 설명하기: 원하는 것을 레이아웃, 위계, 톤, 느낌 같은 디자인 용어로 말하고, Codex가 그것을 마크업으로 옮기게 하세요.

레퍼런스에서 출발하기: 스크린샷이나 무드보드, 브랜드 사이트를 넣어 보세요. 원하는 룩을 제대로 잡는 데는 구체적인 레퍼런스가 아무리 많은 설명보다 낫습니다.

실제 브라우저에서 미리보기: Codex가 결과를 렌더링해 열게 해서 눈으로 판단하고, 크기를 바꿔 보고, 어긋난 부분을 짚으세요.

안전하게 반복하고 되돌리기: 에이전트는 샌드박스에서 실행되므로, 한 방향을 시도해 보고 좋은 결과는 남기고 나쁜 것은 아무것도 깨뜨리지 않고 되돌릴 수 있습니다.

Question 23

함정, 그리고 'AI 티 나는' 룩을 피하는 방법

Accepted Answer

Codex가 생성한 디자인에 대한 가장 흔한 불만은 뻔해 보인다는 것입니다. 부드러운 그라데이션, 떠 있는 패널, 지나치게 큰 모서리 반경, 과장된 그림자, 'AI가 만든 게 틀림없다'고 외치는 Inter 폰트에 보라색 조합 같은 것입니다. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃, UI 문구로 새어 나온 지시문, 사용 한도에 금방 도달하는 것 등이 있습니다.

프런트엔드 스킬 설치하기: 잘 선별된 미학 스킬은 Codex가 기본 룩 대신 실제 방향을 택하도록 강제합니다.

Playwright 검증 활성화하기: Codex가 여러 브레이크포인트에서 렌더링하고 스스로 점검하게 해서 모바일에서 레이아웃이 조용히 깨지지 않도록 하세요.

토큰과 레퍼런스 제공하기: 실제 디자인 토큰과 레퍼런스 스크린샷은 결과물 품질을 좌우하는 가장 큰 지렛대입니다.

AGENTS.md에 규칙 명시하기: '히어로 카드 금지, 서체 최대 두 종류, 브랜드 우선 위계' 같은 스타일 규칙을 에이전트가 매 실행마다 읽는 곳에 두세요.

모든 완화책이 에이전트에게 잘 선별된 디자인 컨텍스트를 주는 일이라는 점에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 것이 바로 OpenDesign이 없애 주는 수고입니다.

Question 24

BYOK: 당신의 OpenAI 키, 당신의 ChatGPT 플랜, 당신의 한도

Accepted Answer

Codex는 bring-your-own-key(BYOK) 방식입니다: 자신의 OpenAI API 키 또는 ChatGPT 구독으로 인증하며, 자격 증명은 본인에게 속합니다. 이는 비용 통제와 프라이버시에 중요합니다. 키나 작업이 제3자를 거쳐 라우팅될 필요가 없습니다.

OpenAI API 키(BYOK) — 토큰당 종량제 — 세밀한 비용 통제, 자동화 및 CI

ChatGPT 구독 — Plus / Pro / Business / Enterprise에 포함 — 일상적인 인터랙티브 디자인을 위한 더 높고 예측 가능한 한도

올바른 추론 수준을 선택하세요: OpenAI는 낮은~중간 추론이 최고 설정보다 종종 더 강력한 프런트엔드 결과를 주며 비용도 더 적게 든다고 언급합니다.

프롬프트를 작고 집중적으로 유지하세요: 짧고 구체적인 작업은 하나의 거대한 프롬프트보다 토큰을 덜 사용하고 더 깔끔한 diff를 만듭니다.

좋은 반복을 커밋하세요: 효과가 있는 패스를 저장하고 나머지는 되돌려, 매번 깨끗한 베이스를 다시 생성하는 비용을 치르지 않도록 하세요.

옵션 — 청구 방식 — 최적 용도

Question 25

OpenDesign 내부에서 Codex로 디자인하기

Accepted Answer

OpenDesign은 위 워크플로가 계속 요구해 온 오픈소스 디자인 레이어입니다. Codex를 퍼스트파티 어댑터로 취급하고, 엄선된 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸므로, Codex를 좋게 만드는 디자인 컨텍스트가 매번 수작업으로 조립되는 것이 아니라 첫 실행부터 존재합니다.

OpenDesign의 데스크톱 앱: 플러그인을 고르고, 원하는 것을 설명하면 Codex가 명령줄 없이 만들어 줍니다.

OpenAI API 키(BYOK) 또는 ChatGPT 구독으로 인증하세요. 자격 증명은 사용자의 컴퓨터에 남아 있으며 결코 저희를 통해 프록시되지 않습니다.

디자인 시스템과 스킬을 고른 다음, 일관된 취향으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.

모든 아티팩트와 DESIGN.md 파일은 호스팅된 클라우드가 아니라 자신의 저장소에 있습니다.

Codex는 OpenDesign을 로컬에 배포하고 앱 내 브라우저에서 열어, 그곳에서 캔버스를 구동합니다.

동일한 Codex 에이전트, 동일한 키에, 그 주위의 실제적이고 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. 로컬 우선이며 Apache-2.0이므로 작업이나 자격 증명에 관한 어떤 것도 사용자의 컴퓨터를 떠나지 않습니다.

하나의 Codex + OpenDesign 세션에서 나온 실제 출력물: 덱, 랜딩 페이지, 렌더링된 비디오가 모두 자신의 저장소에 저장됩니다.

OpenDesign을 설치하고 Codex를 에이전트로 선택하세요.

Question 26

OpenDesign은 OpenAI와 제휴되어 있나요?

Accepted Answer

아니요. Codex는 OpenAI의 제품이며, OpenDesign은 이를 퍼스트파티 어댑터로 지원하는 독립적인 오픈소스 프로젝트입니다.

OpenDesign에서
Codex(으)로
디자인하기.

작업에 맞는 Codex 페이지 고르기

Codex로 제품 인터페이스 출시하기

Codex 설정 확장하기

Codex로 프레젠테이션 만들기

브리프에서 인터페이스까지, Codex 디자인 작업

1디자인 브리프와 제약 조건

2누가 무엇을 하는가: 여러분, Codex, 그리고 OpenDesign

3Codex 출력: 1440px 및 390px에서의 보드

4인수인계 전 검토

그리드와 여백

시각적 계층 구조

모바일 레이아웃

인터랙션 점검

Codex가 맞는 경우와 맞지 않는 경우

Codex가 적합한 경우

다른 워크플로를 선택해야 하는 경우

시작 전 확인할 Codex 요구 사항

도구 범위OpenAI Codex, 코딩 에이전트

계정 및 인증ChatGPT 로그인 또는 API 키

시스템 및 버전데스크톱 앱 또는 소스

연결 확인성공 신호

3단계로 진행하는 Codex 설정

OpenDesign 데스크톱 앱 다운로드

Codex 연결 준비

작은 Codex 작업 하나 실행하기

Codex 워크플로: 브리프에서 검토된 HTML까지 다섯 단계

디자인 브리프

디자인 제약 조건

인터페이스 생성

미리보기

수정 및 검증

Codex 디자인 리소스

Codex에 OpenDesign 설치하기

Codex 디자인 플러그인

디자인 스킬

디자인 시스템

Codex로 슬라이드 디자인하기

Codex 한계, 수동 점검 및 폴백

Codex와 OpenDesign에 관한 자주 묻는 질문

OpenDesign에서 Codex(으)로 디자인하기.