Codex Design vs Google Stitch 비교.

Google Stitch와 Codex Design은 둘 다 AI가 생성한 화면을 캔버스에 올려 줍니다. 차이는 그 캔버스가 어디에 있느냐입니다. Stitch는 Google Labs의 독립 디자인 도구이고, Codex Design은 결과물을 실제로 구현할 코딩 에이전트인 Codex에 캔버스를 더해 줍니다.

2026년 11월 6일 업데이트 · 6분 분량

짧게 답하자면

둘 다 AI로 UI를 탐색하기 좋은 방법입니다. 코딩 에이전트를 쓰지 않는다면 Stitch가 시작하기 쉽습니다. 브라우저 탭을 열고 화면을 설명하기만 하면 됩니다. 이미 Codex로 개발한다면 Codex Design이 더 맞습니다. 디자인이 코드 옆에 있고, 같은 대화가 그대로 구현까지 이어지기 때문입니다.

• Google Stitch를 고르세요. 별도 설정 없이 브라우저에서 디자인하고 싶거나, 음성으로 이야기하듯 아이디어를 풀어 가고 싶거나, Google AI Studio나 Antigravity에서 작업을 이어갈 계획이라면.
• Codex Design을 고르세요. 이미 Codex를 쓰고 있고, 모든 디자인을 내 컴퓨터의 라이브 HTML 페이지로 두고 시각적으로, 또 대화로 다듬은 뒤 같은 에이전트가 구현하게 하고 싶다면.

각 도구는 무엇인가

Google Stitch는 Google Labs의 디자인 도구입니다. Google은 이를 “AI 네이티브 소프트웨어 디자인 캔버스”라고 부릅니다. 텍스트, 음성, 이미지로 인터페이스를 설명하면 디자인 에이전트가 무한 캔버스에 하이파이 화면을 만들어 줍니다. 화면을 이어 클릭할 수 있는 프로토타입으로 만들고, 디자인 규칙을 DESIGN.md 파일로 관리하고, 작업물을 Google AI Studio와 Antigravity로 내보내거나 Netlify로 게시할 수 있습니다. Stitch에는 다른 도구와 연결하는 MCP 서버와 SDK도 있습니다.

Codex Design은 저희가 만든 Codex용 독립 플러그인입니다. Codex가 디자인한 화면을 라이브 HTML 페이지로, 목업 이미지와 레퍼런스 옆에 놓아 주는 로컬 캔버스를 더해 줍니다. 요소를 선택해 사이드바에서 폰트, 색상, 간격을 바꾸거나, Codex에 요청해 계속 다듬을 수 있습니다. 캔버스 프로젝트는 내 컴퓨터에 저장됩니다.

나란히 비교

두 제품 모두 빠르게 바뀝니다. 이 비교는 2026년 11월 6일 기준 각 제품의 공식 사이트와 문서를 반영했습니다.

Google Stitch를 고르는 경우

다음과 같은 경우에는 Stitch가 더 낫습니다.

• 코딩 에이전트를 쓰지 않는다. Stitch는 브라우저 탭에서 실행됩니다. Codex Design을 쓰려면 컴퓨터에 플러그인을 지원하는 Codex, Codex CLI, Node.js가 필요합니다.
• 말하면서 생각하는 편이다. Stitch 캔버스에 말을 걸어 디자인 피드백을 받고 실시간으로 수정할 수 있습니다.
• 클릭 가능한 프로토타입이 빨리 필요하다. Stitch는 화면을 이어 직접 눌러 볼 수 있는 흐름으로 만들고, 다음에 올 화면도 대신 생성해 줍니다.
• Google 생태계에서 일한다. 디자인을 Google AI Studio와 Antigravity로 내보낼 수 있고, Netlify 게시로 바로 웹에 올릴 수 있습니다.
• 기존 사이트에서 시작하고 싶다. Stitch는 어떤 URL에서든 디자인 시스템을 추출할 수 있습니다.

Codex Design을 고르는 경우

• 이미 Codex로 개발한다. 캔버스가 코드를 쓰는 에이전트 안에 있으므로 디자인과 구현 사이에 내보내기 단계가 없습니다. 같은 대화에서 Codex에 선택한 방향을 구현하라고 요청하세요.
• UI 그림이 아니라 HTML이 필요하다. 모든 화면이 라이브 HTML 페이지이며, 요소 인스펙터와 페이지 버전 기록이 있습니다.
• 레퍼런스와 방향을 비교한다. Codex가 생성한 목업 이미지와 내가 모은 레퍼런스를 HTML 화면 옆에 놓을 수 있습니다.
• 작업물을 내 컴퓨터에 두고 싶다. 캔버스 프로젝트는 로컬에 저장됩니다. 다만 Codex에 공유한 컨텍스트는 Codex가 처리합니다.
• 요금이 단순했으면 한다. 별도의 API 키나 토큰 지갑이 없습니다. 캔버스 프로젝트 1개는 무료이고, Pro는 월 $5로 프로젝트 무제한입니다. Codex 이용 권한과 플랜 한도는 그대로 적용됩니다.

함께 쓰기

Stitch와 Codex는 디자인 시스템 형식을 공유합니다. DESIGN.md는 Stitch에서 시작되었고, Codex는 가리켜 주면 DESIGN.md 파일을 읽습니다. Stitch 프로젝트에서 파일을 내보내 저장소에 추가하면, Codex가 캔버스에서 디자인하는 화면도 같은 색상, 타이포그래피, 간격을 따릅니다. DESIGN.md: Codex에 디자인 시스템 알려 주기를 참고하세요.

자주 묻는 질문

Codex Design은 Google Stitch의 대안인가요?

Codex를 쓴다면 그렇습니다. 둘 다 설명을 바탕으로 캔버스에 UI를 생성합니다. Stitch는 브라우저에서 쓰는 독립 도구이고, Codex Design은 Codex에 캔버스를 더해 디자인과 코드를 한곳에 둡니다. Codex를 쓰지 않는다면 Stitch가 더 직접적인 선택입니다.

Stitch에서 만든 DESIGN.md 파일을 Codex에서 쓸 수 있나요?

네. DESIGN.md는 Google Labs의 오픈 형식이며 Stitch에서 내보내고 가져올 수 있습니다. 파일을 프로젝트에 넣고 Codex에 따르라고 요청하세요. 형식과 설정 방법은 DESIGN.md 가이드에서 다룹니다.

Codex Design은 Codex에 더해 추가 비용이 드나요?

Codex Design은 캔버스 프로젝트 1개까지 무료이고, Pro는 월 $5로 프로젝트 무제한입니다. 모델 사용량은 포함되지 않습니다. Codex가 생성하는 것은 평소처럼 Codex 플랜의 사용량으로 계산됩니다. 요금제를 참고하세요.

더 읽어 보기

• DESIGN.md: Codex에 디자인 시스템 알려 주기Google Labs의 DESIGN.md 형식, 예시, Codex가 따르게 하는 방법.
• Codex로 UI 디자인하는 방법복사해 쓸 수 있는 프롬프트가 포함된 6단계 워크플로.
• AI로 UI 목업 만드는 방법문장 하나에서 와이어프레임, 하이파이 목업까지.