ChatGPT로 UI 디자인하는 방법.

ChatGPT로 대략적인 아이디어부터 작동하는 화면까지 UI를 완성할 수 있습니다. 다만 단계마다 잘 맞는 곳이 다릅니다. 생각은 Chat에서, 비주얼 탐색은 이미지 생성으로, 열어 보고 비교하고 배포할 실제 화면은 Codex로 만드세요.

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

짧게 답하자면

네, ChatGPT로 앱이나 웹사이트 UI를 디자인할 수 있습니다. 지금 단계에 맞는 모드를 고르세요.

Chat과 Work는 생각을 정리하고 문서를 만드는 데 좋습니다. Codex는 소프트웨어 작업을 위한 모드로, 프로젝트의 파일을 읽고 씁니다. 디자인을 실제로 만들어 주는 것이 바로 이 능력입니다. ChatGPT 데스크톱 앱에서는 제품 선택 메뉴에서 Codex를 고르세요.

1단계: Chat에서 아이디어 구체화하기

디자인이 아니라 대화로 시작하세요. 대략적인 아이디어를 브리프로 정리해 달라고 ChatGPT에 요청하세요. 누구를 위한 제품인지, 어떤 화면이 필요한지, 각 화면에 무엇이 꼭 있어야 하는지를 담습니다.

책을 더 많이 읽고 싶은 사람들을 위한 습관 관리 앱을 디자인하고 있어. 한 페이지짜리 디자인 브리프 작성을 도와줘: 타깃 사용자, 가장 중요한 화면 5개, 각 화면에 보여 줄 내용, 가능한 비주얼 스타일 3가지(각각 한 문장 설명). 불명확한 점이 있으면 먼저 질문을 최대 3개까지 해 줘.

브리프는 보관해 두세요. 이후 모든 단계에 붙여넣어 같은 맥락에서 시작하게 됩니다.

2단계: 이미지로 비주얼 탐색하기

누군가 코드를 쓰기 전에, 목업 이미지는 스타일을 확인하는 저렴한 방법입니다. ChatGPT의 이미지 모델은 읽을 수 있는 텍스트가 들어간 인터페이스 이미지에 강하고, 최신 버전인 GPT Image 2.6에는 레퍼런스 이미지, GIF, SVG 내보내기가 추가되었습니다. Chat에서는 이미지를 요청하기만 하면 됩니다. Codex에서는 프롬프트에 $imagegen을 넣어 이미지 생성 스킬을 직접 호출하세요.

$imagegen 이 브리프의 홈 화면을 비주얼 스타일별로 하나씩, 목업 이미지 3장으로 만들어 줘. iPhone 화면, 390×844, 실제 같은 텍스트와 숫자가 들어간 사실적인 UI, 기기 프레임 없이. 세 장 모두 콘텐츠는 똑같이 하고 스타일만 바꿔 줘.

이 이미지들은 명세가 아니라 무드 보드로 보세요. 생성된 이미지의 작은 텍스트와 정확한 간격은 여전히 확인이 필요합니다. 또 Codex에서 이미지를 생성하면 일반 요청보다 사용량 한도가 3~5배 빨리 줄어드니, 수십 장이 아니라 몇 장으로 탐색하세요.

3단계: Codex로 실제 화면 만들기

이미지는 화면이 어떻게 보일 수 있는지를 보여 줍니다. HTML 파일은 클릭하고, 크기를 바꾸고, 한 줄씩 고칠 수 있는 진짜 화면입니다. Codex로 전환해 프로젝트 폴더를 열고 화면을 코드로 요청하세요.

첨부한 브리프와 내가 고른 목업 이미지를 바탕으로, 홈 화면을 390×844 크기의 단일 HTML 파일로 만들어 줘. 인라인 CSS와 시스템 폰트를 써 줘. 그다음 같은 콘텐츠로 대안 방향 두 가지를 별도 파일로 만들어 줘. 하나는 더 대담하게, 하나는 더 차분하게.

마음에 든 목업 이미지를 첨부하면 Codex가 레이아웃과 분위기를 맞출 수 있습니다. 화면마다 단일 파일로 만들면 모든 버전을 옮기기 쉽고 수정도 간편합니다.

4단계: 여러 방향을 나란히 비교하기

브라우저 탭을 하나씩 넘기며 세 디자인을 평가하면 느립니다. 나란히 놓으세요.

• 플러그인 없이: 세 화면을 한 줄로 보여 주는 비교 페이지를 하나 만들어 달라고 Codex에 요청하세요.
• 캔버스 플러그인으로: Codex Design은 Codex에 캔버스를 더해, 화면들을 라이브 HTML로 레퍼런스 이미지 옆에 나란히 보여 줍니다. 프롬프트 하나로 설치하세요.

그다음 방향을 하나 고르거나 마음에 드는 부분을 조합하세요. “대담한 버전의 헤더에 차분한 버전의 카드”는 좋은 다음 지시입니다.

5단계: 구체적인 피드백으로 다듬기

요소와 변경 사항을 짚어 주세요. “좀 더 눈에 띄게”라고 하면 에이전트는 무엇을 해야 할지 모릅니다. 이렇게 말하면 됩니다.

차분한 방향을 다듬어 줘:
- 연속 기록 카운터가 가장 먼저 눈에 들어오게 해 줘.
- 카드 패딩은 16px로 줄이고, 활성 상태에는 포인트 색상 하나만 써 줘.
- 나머지는 모두 그대로 유지해 줘.

폰트 크기나 색상 톤처럼 설명하는 것보다 직접 하는 편이 빠른 변경은 HTML을 직접 수정하거나, Codex Design 캔버스에서 요소를 선택해 속성 패널에서 조정하세요.

6단계: 디자인을 프로덕션 코드로 바꾸기

방향이 확정되면 실제 앱에서 사용하는 프레임워크, 컴포넌트, 색상으로 다시 구현해 달라고 Codex에 요청하세요. HTML 목업이 명세가 됩니다.

승인된 홈 화면을 우리 SwiftUI 앱에 구현해 줘. 레이아웃과 간격은 home-calm.html에 맞추고, 색상은 Theme.swift의 것을 쓰고, 기존 카드 컴포넌트를 재사용해 줘.

더 좋은 결과를 얻는 팁

• 실제 크기를 알려 주세요. 휴대폰은 390×844, 데스크톱 페이지는 1440×900.
• 실제 콘텐츠를 쓰세요. 그럴듯한 이름, 숫자, 날짜를 넣으면 더미 텍스트가 가리던 레이아웃 문제가 드러납니다.
• 여러 안을 요청하세요. 일부러 다르게 만든 세 가지 방향이 하나를 조금씩 바꾼 열 가지보다 낫습니다.
• 디자인 스킬을 추가하세요. Taste Skill 같은 스킬을 쓰면 Codex가 타이포그래피와 레이아웃에 더 뚜렷한 관점을 갖게 됩니다. UI 디자인에 좋은 Codex 스킬 추천을 참고하세요.

자주 묻는 질문

ChatGPT가 앱을 대신 디자인해 줄 수 있나요?

화면을 디자인하고 만들 수 있습니다. Chat은 화면 기획을 돕고, 이미지 생성은 어떻게 보일 수 있는지 보여 주고, Codex는 작동하는 코드로 작성합니다. 어느 방향으로 갈지, 무엇을 바꿀지, 언제 완성인지는 여전히 직접 결정합니다.

ChatGPT용 UI 디자인 플러그인이 있나요?

네. 플러그인은 ChatGPT 데스크톱 앱의 Chat, Work, Codex와 Codex CLI에서 작동합니다. Codex Design은 Codex에 비주얼 캔버스를 더하는 UI 디자인 플러그인입니다. OpenAI 플러그인 디렉터리에는 Figma로 작업하는 팀을 위한 Figma 플러그인도 있습니다.

UI 디자인에는 ChatGPT와 Codex 중 무엇을 써야 하나요?

둘 다 ChatGPT입니다. 아이디어와 브리프는 Chat에서 다루고, 실제 파일이 필요할 때 Codex로 전환하세요. 열어 보고, 비교하고, 수정하고, 코드베이스로 옮길 수 있는 화면이 생깁니다.

더 읽어 보기

• Codex로 UI 디자인하는 방법브리프부터 프로덕션 코드까지, Codex 6단계 워크플로 전체.
• UI 디자인에 좋은 Codex 스킬 추천Codex의 디자인 감각을 높여 주는 스킬과 설치 방법.