코덱스 이미지로 화면 만들기, 캡처 한 장으로 대시보드 복제

코덱스(Codex)에 화면 캡처 한 장을 주면 그 화면을 웹페이지 코드로 다시 만들어 줍니다. 이 글은 코덱스 이미지로 화면 만들기를 테슬라 차량 대시보드 캡처를 예로 들어, 준비물부터 요청 문장, 결과를 원본에 가깝게 다듬는 법까지 정리합니다.

캡처 한 장으로 화면을 만든다는 것

코덱스는 오픈AI가 만든 코딩 에이전트(스스로 파일을 만들고 고치며 작업을 끝까지 하는 AI)입니다. 글뿐 아니라 이미지도 입력으로 받기 때문에, 원하는 화면의 캡처를 붙이고 "이렇게 만들어 달라"고 하면 HTML·CSS·자바스크립트로 비슷한 화면을 짜 줍니다.

테슬라 대시보드처럼 배터리 잔량, 실내 온도, 문 잠금 상태, 차량 그림이 한 화면에 모인 UI는 직접 코딩하면 웹 프런트엔드 작업으로 며칠이 걸릴 만한 분량입니다. 캡처를 주는 방식은 이 과정을 "결과를 보고 고쳐 달라고 말하는 일"로 바꿉니다. 코드를 한 줄도 직접 쓰지 않고 화면을 완성하는 바이브 코딩(말로 지시해 코드를 짜게 하는 방식)의 전형적인 쓰임입니다.

준비물

• 코덱스를 쓸 수 있는 챗GPT 계정. 2026년 10월 기준으로 무료⁠·고(Go) 요금제는 데스크톱 앱에서 가벼운 모델만 쓸 수 있고, 웹⁠·CLI·VS Code 확장은 플러스 이상 요금제에 들어 있습니다. 요금제별 사용 한도는 바뀌니 공식 요금 안내를 확인합니다.
• 코덱스를 실행할 곳. 데스크톱 앱, 웹(chatgpt.com/codex), 터미널용 코덱스 CLI, VS Code 확장 가운데 하나면 됩니다.
• 만들고 싶은 화면의 캡처 이미지. 해상도가 높고 글자가 또렷할수록 결과가 원본에 가까워집니다.
• 결과를 담을 빈 작업 폴더.

코덱스에 캡처를 주고 화면 만들기

1단계. 대시보드 캡처 이미지를 코덱스에 첨부한다

데스크톱 앱이나 웹에서는 입력창에 이미지를 끌어다 놓거나 붙여 넣습니다. 터미널에서는 -i 옵션으로 이미지를 함께 넘깁니다.

codex -i dashboard.png "첨부한 이미지와 똑같은 화면을 만들어 줘"

• 확인: 입력창에 이미지가 첨부돼 미리보기가 보입니다.

2단계. 이미지와 똑같이 만들어 달라고 요청한다

가장 짧은 요청은 이 한 문장입니다.

첨부한 이미지랑 똑같이 만들어 달라

이 문장만으로도 화면은 나옵니다. 다만 파일 구성이나 화면 크기를 AI가 마음대로 정하기 때문에, 처음부터 조건을 붙이면 고치는 횟수가 줄어듭니다.

첨부한 테슬라 대시보드 캡처와 최대한 똑같은 화면을 만들어 줘.
- index.html, style.css, app.js 세 파일로 나눠 줘
- 화면 비율은 캡처와 같게 맞추고, 글꼴 크기와 여백은 캡처에서 재서 픽셀 값으로 써 줘
- 배터리 잔량, 실내 온도, 잠금 상태 같은 숫자는 app.js의 가짜 데이터로 채워 줘. 나중에 실제 데이터로 바꿀 수 있게 한곳에 모아 줘
- 로고와 상표 이미지는 넣지 말고 비슷한 모양의 도형으로 대신해 줘
- 다 만들면 브라우저로 열어 캡처와 비교하고 어긋난 곳을 스스로 고쳐 줘

• 확인: 입력창에 요청이 들어갑니다.

3단계. 요청을 보낸다

• 확인: 코덱스가 이미지를 읽고 화면 코드를 만들기 시작합니다. 작업 폴더에 HTML·CSS·자바스크립트 파일이 생깁니다.

4단계. 결과 화면을 브라우저로 열어 원본과 비교한다

index.html을 브라우저로 열고 캡처와 나란히 놓습니다.

• 확인: 배치, 색, 글자 크기가 원본과 얼마나 비슷한지 눈으로 봅니다.

원본에 더 가깝게 다듬는 요령

한 번에 똑같이 나오는 경우는 드뭅니다. 고칠 곳을 숫자와 위치로 말하면 빨리 맞춰집니다.

• "더 비슷하게" 대신 "왼쪽 차량 그림이 화면 폭의 40%를 차지하게", "온도 글자를 48px로"처럼 씁니다.
• 결과 화면을 캡처해 원본 캡처와 함께 다시 붙이고 "두 이미지에서 다른 곳을 찾아 고쳐 줘"라고 하면 코덱스가 차이를 스스로 찾습니다.
• 버튼 동작까지 원하면 "트렁크 버튼을 누르면 상태 글자가 '열림'으로 바뀌게"처럼 동작을 하나씩 추가합니다.

주의할 점

테슬라 대시보드의 화면 디자인과 로고는 테슬라의 저작물⁠·상표입니다. 똑같이 만든 화면은 개인 학습이나 내 차 상태를 보는 개인용 도구로만 쓰고, 그대로 배포하거나 판매하지 않습니다.

화면을 만든 다음 실제 차량 데이터나 버튼 동작을 연결하려면 테슬라 공식 플릿 API(Fleet API, 외부 앱이 차량 정보를 읽고 명령을 보내는 공식 통로)를 거쳐야 합니다. 이 단계부터는 실제 차에 명령이 가므로, 차가 안전한 곳에 주차돼 있고 주변에 사람이 없을 때만 시험합니다.