Codex로 UI 디자인하는 방법.
Codex는 앱 화면과 웹페이지를 코딩할 뿐 아니라 디자인도 할 수 있습니다. 요령은 누르면 끝나는 버튼이 아니라 브리프를 건네는 디자이너처럼 대하는 것입니다. 맥락을 알려 주고, 여러 안을 요청하고, 바로 반영할 수 있는 피드백을 주세요.
2026년 11월 1일 업데이트 · 8분 분량
Codex가 UI 디자인에서 할 수 있는 일
Codex는 OpenAI의 코딩 에이전트입니다. 프로젝트 안에서 파일을 읽고 쓰고 명령어를 실행하기 때문에, UI 작업에서는 다음과 같은 일을 할 수 있습니다.
- 화면을 HTML과 CSS로 작성합니다. 단독 실행되는 HTML 파일 하나가 어느 브라우저에서나 열리는, 실제와 비슷하고 클릭도 되는 목업을 얻는 가장 빠른 방법입니다.
- 이미지를 참고해 작업합니다. 스크린샷, 스케치, 마음에 드는 레퍼런스를 첨부하고 레이아웃이나 분위기를 맞춰 달라고 하세요.
- 요청에 따라 수정합니다. Codex가 자신이 작성한 파일을 볼 수 있으니 “카드를 더 부드럽게”, “간격을 좁게”라고만 해도 충분합니다.
- 결과물을 코드베이스로 옮깁니다. 방향이 정해지면 같은 에이전트가 사용 중인 프레임워크와 컴포넌트로 다시 구현할 수 있습니다.
Codex만으로는 여러 디자인을 한눈에 볼 곳이 없습니다. HTML 파일이 각각 다른 탭에서 열리니 시안을 비교하기가 번거롭습니다. 그래서 Codex용 캔버스 플러그인인 Codex Design을 만들었습니다. 이 가이드는 플러그인이 있든 없든 따라 할 수 있습니다.
1단계: 디자인 브리프 작성하기
모호한 요청에는 뻔한 결과가 나옵니다. 좋은 브리프는 다섯 가지 질문에 답합니다. 어떤 제품인지, 누가 쓰는지, 어떤 화면이 필요한지, 어떤 느낌이어야 하는지, 그리고 화면 크기, 브랜드 색상, 폰트 같은 제약 조건입니다.
Ember & Bean이라는 커피 구독 앱의 홈 화면을 디자인해 줘. 사용자는 이미 집에서 커피를 내려 마시고, 2주마다 새로운 싱글 오리진 원두를 받아 보고 싶은 사람들이야. 홈 화면에는 다음 배송 일정, 사용자에게 맞춰 고른 원두 두 가지, 짧은 추출 팁을 보여 줘. 390×844 모바일 화면으로, 인라인 CSS를 넣은 단일 HTML 파일 하나로 만들어 줘. 폰트는 시스템 폰트를 쓰고, 외부 이미지는 쓰지 말고 원두 봉투는 CSS로 그려 줘.
단일 파일로 요청하는 것이 중요합니다. 그래야 화면마다 옮기기 쉽고, 빠르게 수정하고, 간편하게 미리 볼 수 있습니다.
2단계: 한 가지가 아니라 여러 방향을 요청하기
첫 디자인이 최선인 경우는 드뭅니다. 일부러 서로 다른 세 가지 방향을 요청하세요. 같은 아이디어의 변형이 아니라 진짜 대안들 사이에서 고를 수 있습니다.
이 화면을 세 가지 방향으로 만들어 줘. 각각 별도 파일로: A — 따뜻한 에디토리얼 스타일, 세리프 제목 B — 대담하고 어두운 스타일, 밝은 포인트 색상 하나 C — 부드럽고 차분한 스타일, 둥근 카드와 넉넉한 여백 콘텐츠는 똑같이 유지해서 시각적 스타일만 비교할 수 있게 해 줘.
3단계: 디자인을 나란히 놓고 검토하기
평가하기 전에 시안들을 나란히 놓으세요. 위계, 밀도, 톤의 차이는 탭을 하나씩 넘길 때보다 한눈에 볼 때 훨씬 잘 보입니다.
- 플러그인 없이: 각 HTML 파일을 브라우저에서 열거나, 세 화면을 한 줄로 넣은 비교 페이지를 하나 만들어 달라고 Codex에 요청하세요.
- Codex Design으로: 화면을 캔버스에 올려 달라고 Codex에 요청하세요. 라이브 HTML로 나란히 표시되고, 옆에 레퍼런스 이미지도 추가할 수 있습니다. 프롬프트 하나로 Codex Design을 설치해 사용해 보세요.
방향 하나를 고르거나, 각 시안에서 마음에 드는 부분을 짚어 주세요. “B의 배송 카드에 C의 차분한 색상”도 훌륭한 다음 브리프입니다.
4단계: 구체적인 피드백으로 다듬기
Codex는 요소와 변경 사항을 짚어 주는 피드백에 가장 잘 반응합니다. 다음 두 요청을 비교해 보세요.
- 약한 요청: “더 보기 좋게 만들어 줘.”
- 강한 요청: “인사말을 32px로 키우고, 카드 패딩을 16px로 줄이고, 배송 진행 바가 가장 먼저 눈에 들어오게 해 줘.”
C 방향을 다듬어 줘: - 인사말은 더 크게, 날짜는 더 작게. - 원두 추천보다 배송 진행 상황을 먼저 보여 줘. - 포인트 그린은 활성 상태에만 한 가지로 써 줘. - 나머지는 모두 그대로 유지해 줘.
“나머지는 모두 그대로 유지해 줘”는 거의 모든 수정 요청에 붙일 만합니다. 이미 만족한 부분까지 에이전트가 다시 디자인하는 것을 막아 줍니다.
5단계: 디테일은 직접 손보기
어떤 변경은 설명하는 것보다 직접 하는 편이 빠릅니다. 폰트 크기를 살짝 조정하거나, 색상을 세 가지 톤으로 시험해 보거나, 패딩을 몇 픽셀 바꾸는 일이 그렇습니다. HTML을 직접 수정하거나, Codex Design에서 캔버스의 요소를 선택해 속성 패널에서 폰트, 색상, 간격을 바꾸세요. 다음에 변경을 요청하면 Codex가 업데이트된 파일을 확인합니다.
6단계: 디자인을 프로덕션 코드로 바꾸기
목업은 최종 코드가 아니라 명세입니다. 방향이 확정되면 Codex에 앱 안에서 다시 구현해 달라고 하세요.
승인된 홈 화면을 우리 React Native 앱에 구현해 줘. 기존 Button, Card 컴포넌트와 theme.ts의 색상을 사용해 줘. 레이아웃과 간격은 asset/coffee-home-soft.html 목업에 맞춰 줘.
더 좋은 결과를 얻는 팁
- 실제 크기를 알려 주세요. 휴대폰은 390×844, 데스크톱 페이지는 1440×900. 크기가 없으면 레이아웃이 흐트러집니다.
- 실제 콘텐츠를 쓰세요. 그럴듯한 이름, 가격, 날짜를 넣으면 “Lorem ipsum”이 가리던 레이아웃 문제가 드러납니다.
- 말로만 하지 말고 보여 주세요. 레퍼런스 스크린샷 한 장이 형용사로 가득한 문단보다 스타일을 빨리 전달합니다.
- 토큰을 명시하세요. 브랜드 색상, 폰트, 간격 스케일이 있다면 브리프에 넣어 모든 시안이 사용하게 하세요.
- 화면 하나에 파일 하나. 수정 범위가 작아지고 검토하기도 쉬워집니다.
자주 묻는 질문
Codex가 정말 UI를 디자인할 수 있나요, 아니면 코드만 쓰나요?
둘 다 합니다. Codex는 화면을 이루는 HTML과 CSS를 작성하므로 완성된 비주얼 디자인을 만들 수 있습니다. 품질은 브리프와 피드백이 얼마나 구체적인지에 달려 있습니다.
그래도 Figma가 필요한가요?
방향을 탐색하고 시험하는 단계에서는 필요 없습니다. 공유 디자인 시스템과 핸드오프에는 여전히 Figma를 쓰는 팀이 많습니다. HTML 목업에는 이미 코드라는 장점이 있습니다.
Codex로 디자인하려면 플러그인이 필요한가요?
아니요. 이 가이드의 모든 내용은 일반 HTML 파일로도 됩니다. Codex Design 같은 캔버스 플러그인을 쓰면 여러 화면을 비교하고 다듬는 일이 더 빨라집니다.