OpenAI Codex로 아름다운 프론트엔드 구축하기

채널 아이콘
OpenAI 구독자 1,760,000명

요약

이 영상은 OpenAI Codex를 프론트엔드 개발 파트너로 활용하는 방법을 소개합니다. 화이트보드 스케치나 스크린샷을 Codex에 제공해 3D 글로브 UI부터 반응형 여행 로그 대시보드까지 자동으로 생성·검증하는 과정을 시연합니다. Codex CLI, IDE 확장, 클라우드 API를 통해 언제든 멀티모달 작업을 수행하며, 데이터를 시각화하는 대시보드 구축 사례까지 공유해 실전 활용 방안을 제시합니다.

주요 키워드

Codex 멀티모달 프론트엔드 3D 글로브 화이트보드 스케치 Pull Request Playwright 오픈 데이터 대시보드 ChatGPT

하이라이트

  • 🔑 Codex는 텍스트뿐 아니라 시각적 검증까지 가능한 멀티모달 AI 동료입니다.
  • ⚡️ 화이트보드 스케치를 사진으로 찍어 ChatGPT에 전달하면 Figma 수준의 UI 구현 코드를 생성합니다.
  • 🌟 3JS 기반의 3D 회전 글로브를 자동으로 생성하고 즉시 PR(Pull Request)을 받아 볼 수 있습니다.
  • 🚀 데스크톱·모바일 뷰를 동시에 처리해 반응형 디자인 오류를 사전에 검증합니다.
  • 📌 NYC 택시 오픈 데이터를 로드해 Codex로 대시보드를 설계한 실제 사례를 소개합니다.
  • 📈 나이프 스케치부터 높은 충실도의 화면 구현까지 원하는 만큼 세밀하게 지시 가능합니다.
  • 🤖 Codex CLI, IDE 확장, 클라우드를 활용해 언제든 코드 생성과 검증 작업을 전송할 수 있습니다.

용어 설명

Codex CLI

터미널에서 Codex 모델에 직접 명령을 보내는 커맨드라인 인터페이스

멀티모달 기능

텍스트와 이미지를 모두 처리해 시각적 검증을 수행하는 AI 능력

에이전틱 코딩

AI가 자율적으로 코드를 생성하고 실행·검증하는 자율적(Agentic) 워크플로우

3JS

JavaScript 기반 3D 렌더링 라이브러리로, 브라우저에서 3D 그래픽을 구현할 때 사용

Pull Request(풀 리퀘스트)

버전 관리 시스템에서 코드 변경을 리뷰하고 병합 요청하는 기능

Playwright

브라우저 자동화 및 테스트를 위한 마이크로소프트 오픈소스 도구

ChatGPT

GPT 기반 채팅 인터페이스로, Codex 작업 지시와 통합해 사용

Figma

UI/UX 디자인을 위한 협업 디자인 플랫폼

[00:00:04] Codex 및 멀티모달 기능 소개

Roman이 Codex CLI, IDE 확장, 클라우드 등 다양한 환경에서 Codex를 활용해 코드 작성과 시각적 검증까지 수행하는 멀티모달 기능을 소개합니다.

로만이 Codex를 소개하며 AI 팀원으로서 다양한 환경에서 활용할 수 있는 멀티모달 기능의 강력함을 설명합니다.
연구팀의 채닝이 등장하여 모델이 시각적으로 자신의 작업을 검증하고 반복 개선할 수 있는 능력에 대해 설명합니다.
기존 여행 앱 데모를 보여주며 Codex로 더 나은 결과를 만들 수 있다고 제안하고, 홈 화면 개선 아이디어를 화이트보드로 스케치합니다.
[00:00:52] 데모 앱 살펴보기(원더러스트)

이전 데모 앱 원더러스트를 예로 들어 목적지 탐색 화면과 챗봇 어시스턴트 기능을 시연하며 Codex의 기본 역할을 확인합니다.

타임라인 정보가 없습니다.

[00:01:16] 홈 화면 디자인 구상(화이트보드)

화이트보드 위 아이디어 스케치 사진을 ChatGPT에 전송해 3D 회전 지구본, 좌우 화살표 탐색, 도시 상세 정보 노출 등 홈 화면 UX를 구상합니다.

스케치한 앱 화면을 사진으로 찍어 ChatGPT를 통해 Codex 작업으로 전송하고, 3D 지구본과 상호작용 기능을 포함한 구체적인 재디자인 요청을 작성합니다.
[00:01:44] Codex에 디자인 작업 요청하기

스케치를 기반으로 Codex에 '3D 지구본·여행 로그 화면' 디자인 작업을 지시해 CLI와 클라우드에서 자동으로 코드 생성 및 PR 제출하는 과정을 보여줍니다.

작업을 전송한 후 여행 로그라는 추가 화면 아이디어를 논의하며 사용자 통계와 대륙별 체크리스트 기능을 제안합니다.
대화 참여자들이 여행 앱에 대륙 체크리스트, 개인적으로 마신 와인병 수, 찍은 사진 수 등의 재미있는 통계 요소들을 추가하는 아이디어를 논의합니다.
트래블 로그라는 새로운 화면을 앱에 추가하라는 구체적인 지시사항을 Codex에게 전달합니다. 이 화면은 사용자를 위한 재미있고 흥미로운 통계들의 대시보드 역할을 하며, 모바일 반응형과 일관된 디자인을 요구합니다.
[00:03:01] 멀티모달 활용 실제 사례 공유

Codex 멀티모달 기능을 활용해 스크린샷 또는 Playwright로 실행 중인 웹 앱을 확인하게 하고, 자체 작업 검증 및 수정하는 실제 워크플로우를 공유합니다.

Codex 멀티모달 기능의 실제 사용 사례에 대한 질문이 제기되고, 개발자가 일반적으로 변경사항을 요청하고 결과를 검토하는 워크플로우를 설명합니다.
Codex가 대부분 올바른 작업을 수행하며 때로는 예상보다 더 잘 작동한다고 설명합니다. 필요시 스크린샷을 찍어 피드백을 제공하는 방법도 소개합니다.
풀타임 프론트엔드 개발자들이 Playwright MCP를 사용하여 모델이 브라우저를 열고 작업 중인 애플리케이션을 직접 확인하며 자체 작업을 검토할 수 있는 고급 기능을 설명합니다.
클라우드 환경에서 표현력이 풍부하고 유연한 도구 세트를 제공하여 목표 달성을 지원하며, MCP를 통해서도 동일한 기능을 사용할 수 있다고 설명합니다.
에이전틱 코딩 기능의 놀라운 활용 가능성에 대해 언급하며, 클라우드 컨테이너와 로컬 도구 모두에서 사용할 수 있는 유연성을 강조합니다.
데이터를 활용한 설득의 중요성과 화이트보드 작업의 한계를 지적하면서, Codex를 통한 데이터 시각화 솔루션의 필요성을 설명합니다.
사용자들이 Codex를 활용하여 복잡한 데이터나 코드베이스를 분석하고 시각화를 제공하거나 일회용 웹 애플리케이션을 만드는 실제 사용 사례를 소개합니다. 이러한 결과물은 스크린샷으로 공유할 수 있는 실용적인 가치를 제공합니다.
뉴욕시 택시 데이터를 활용한 대시보드 구축 실험에 대해 논의하며, 모델이 다양한 테마와 데이터 표현 방식으로 흥미로운 결과를 만들어냈다고 설명합니다.
[00:04:46] 오픈 데이터 기반 대시보드 생성

뉴욕시 택시 오픈 데이터를 컨테이너에 로드해 Codex로 대시보드를 생성한 사례를 소개합니다. 데이터 시각화, 테마 적용, 일회성 웹 앱 구축까지 시연합니다.

멀티모달 기능의 유연성을 강조하며, 간단한 스케치부터 상세한 디자인까지 다양한 수준의 입력으로 원하는 결과를 얻을 수 있음을 설명합니다.
화이트보드에서 요청했던 3D 지구본 작업을 확인하며, Three.js를 사용한 애니메이션과 텍스처가 포함된 완성된 결과물을 발견합니다.
[00:05:38] 디자인 결과 확인 및 리뷰

PR을 로컬에서 체크아웃해 실행하며 3JS로 구현된 3D 지구본 애니메이션과 여행 기록 화면의 데스크톱·모바일 뷰 반응형 디자인을 검증합니다.

PR을 로컬에서 테스트한 결과, 3D 지구본이 정확히 회전하고 탐색 툴팁과 어시스턴트 버튼까지 포함된 완전히 작동하는 인터페이스임을 확인합니다.
여행 잠금 화면 작업 결과를 검토하며, 앱 디자인과 일치하는 여러 옵션과 데스크탑 및 모바일 뷰를 모두 고려한 반응형 디자인을 제공받았음을 확인합니다.
화면에서 벗어난 영역에서도 오류나 겹치는 부분을 확인할 수 있으며, 다크모드나 반응형 등 다양한 조건에서 원하는 만큼 스크린샷을 찍어 테스트할 수 있다고 설명합니다.
내부 팀에서 실제로 컴포넌트를 라이트모드, 다크모드, 반응형, 다양한 크기로 테스트하고 있으며, 디자인 팀의 체크포인트를 프롬프트에 포함시켜 PR 전에 자동으로 확인할 수 있다고 합니다.
멀티모달리티의 다른 활용 방안에 대해 질문하자, 브라우저 도구를 통해 웹사이트와 웹 애플리케이션을 볼 수 있는 능력을 언급하며, 모바일과 데스크톱 애플리케이션까지 확장할 계획이라고 답합니다.
코덱스의 멀티모달 기능 투어를 마무리하며, GP5 코덱스의 멀티모달과 에이전트 기능으로 백엔드뿐만 아니라 프론트엔드 코딩에서도 모델이 자신의 작업을 확인할 수 있게 되었다고 설명하고 chatgpt.com/codex 방문을 안내합니다.
[00:07:58] 정리 및 다음 단계 안내

멀티모달과 에이전틱(자율적) 코딩 기능이 결합된 GP5 Codex로 프론트엔드 개발 루프를 완성하고, Codex와 협업하기 위한 시작 링크를 안내합니다.

타임라인 정보가 없습니다.

안녕하세요 여러분, 저는 로만입니다. Codex는
어디서든 코딩할 때 함께할 수 있는
AI 팀원입니다. 컴퓨터에서 Codex CLI나
IDE 확장 프로그램으로 사용하든,
웹이나 모바일 폰에서 언제든지
작업을 보낼 수 있는 Codex 클라우드든 말이죠.
하지만 오늘 특히 집중해보고 싶은 강력한 기능은
바로 멀티모달 기능입니다.
모델이 시각적 이해 능력과 함께
자신의 작업을 시각적으로 검증할 수 있을 때
훨씬 더 마법 같은 일이 일어납니다.
오늘은 모델 훈련에 참여한 채닝과 함께
자세한 이야기를 들어보겠습니다.
안녕하세요, 저는 Codex 연구팀의 채닝입니다.
저희가 집중해온 주요 목표 중 하나는
모델이 멀티모달 기능을 활용할 수 있는
더 많은 도구를 제공해서
더 나은 소프트웨어 엔지니어가 되도록 하는 것입니다.
제가 제 작업을 검토하고
시각적으로 예상대로 보이는지 확인하는 것처럼,
모델도 그런 능력을 가져서
빠른 반복 작업을 할 수 있기를 원합니다.
정말 멋지네요. 실제 예시를 통해
어떻게 작동하는지 살펴볼까요?
좋습니다. 지난번 개발자 데이에서 소개한
데모 앱 중 하나가 있습니다.
목적지를 찾아볼 수 있는 화면 하나와
장소를 입력할 수 있는
어시스턴트 화면이 있습니다.
바로 이렇게요. 해리스, 뭘 알고 싶으세요?
정말 멋지지만, Codex로 더 나은
결과를 만들 수 있을 것 같습니다.
이제 다음 단계로 끌어올릴 수 있는
능력이 생겼으니까요.
그래서 함께 화이트보드를 사용해
이 홈 화면을 어떻게 더
매력적으로 만들 수 있을지 생각해보면 어떨까요?
좋습니다. 3D 지구본을 넣을 수 있을 것 같은데요.
오케이.
사용자가 지구본을 회전시키면,
탐험할 수 있는 장소들을 볼 수 있고.
좌우로도 이동할 수 있게 하면 좋을 것 같아요.
맞습니다. 각 도시에 대한
추가 세부 정보도 보여주면 좋겠네요.
정확히요. 도쿄 같은 곳 말이죠.
그리고 목적지에 유용한
모든 세부 정보들도 포함해서요.
물론이죠.
좋은 시작점이 될 것 같네요, 그렇죠?
맞습니다.
여기 스케치한 앱을 간단히
사진으로 찍어보겠습니다.
ChatGPT로 가보겠습니다.
네. Codex 작업을 추가하고, 사진을 넣은 다음
원하는 내용을 설명하면 됩니다.
Wonderlust의 홈 화면을 재디자인해서
왼쪽에 3D 회전 지구본을 보여주고,
오른쪽에는 목적지 세부 정보를 표시합니다.
사용자가 지구본을 유동적으로
탐색할 수 있어야 하고, 핀을 클릭하면
목적지를 볼 수 있어야 합니다.
그리고 키보드의 좌우 화살표 키도
매핑할 수 있습니다. 핀을 클릭하면
목적지를 보여주고요.
그리고 키보드의 좌우 화살표도
매핑하면 됩니다.
좋아요! 이제 Codex에 전송하겠습니다.
완벽해요. 잘 해낼 수 있을 거예요.
완벽합니다. 작업을 전송하는 동안
앱에 추가 화면도 만들 수 있겠네요.
여행 로그 같은 이름으로 부르면 어떨까요?
오케이.
통계와 모든 정보를 보여주는
대시보드 같은 거 말이죠.
모든 대륙을 포함하려면
완전한 체크리스트를 만들 수도 있겠네요.
좋은 아이디어입니다.
>> 오, 좋아요. 정말 마음에 들어요. 대륙 체크리스트요.
체크리스트.
>> 개인적으로 마신 와인병 수도 넣을 수 있겠네요.
>> 좋은 아이디어네요. 그럼 와인병 수.
>> 맞습니다.
>> 네.
>> 어, 찍은 사진 수도 추가해볼까요.
>> 좋아요.
>> 파이차트나 적절한 형태로 표현해 보죠.
의미 있게 만들어보겠습니다.
>> 좋습니다. 앱에 트래블 로그라는 화면을 하나 더 추가해 주세요.
사용자를 위한 재미있고 흥미로운 통계들의
대시보드 같은 느낌으로 말이에요.
앱이 모바일에서도 반응형으로 작동하도록 하고
디자인도 다른 화면들과 일관성을 유지해 주세요.
좋습니다. 그리고 이걸 바로
Codex에 보내겠습니다.
>> 이제 작업하도록 하겠습니다.
>> 작업이 진행되는 동안,
혹시 이미 Codex 멀티모달 기능을
사용해 본 예시 하나나 둘 정도
설명해 주실 수 있을까요?
>> 네, 기꺼이요.
>> 좋습니다. 보통 제가 시작하는 방식은
먼저 변경사항을 만들어서
Codex에게 작업을 요청하는 거예요.
대부분의 경우 올바른 작업을 해주죠.
때로는 제가 예상했던 것보다
더 잘 해주기도 합니다.
때로는 몇 가지 수정이 필요할 때가 있어서
스크린샷을 찍어서
다시 앱에 보내기도 합니다.
취미가 아닌
풀타임으로 프론트엔드 개발을 하는
다른 사람들의 경우
Playwright MCP를 사용하고 있어요.
실제로 Claude가 브라우저를 열고
웹 앱을 볼 수 있는 기능과 같은 방식으로
도구를 제공하는 거죠.
그들의 작업 루프에서 모델이
작업 중인 애플리케이션을 직접 확인하고
자신의 작업을 검토할 수 있게 됩니다.
>> 예를 들어 로컬에서 Codex CLI를 사용할 때
그 기능을 사용할 수 있고
Codex Cloud도 방금 보낸 작업에 대해
동일한 작업을 수행하겠군요.
>> 정확합니다. 그리고 클라우드에서는
표현력이 풍부하고 유연한 도구 세트를 제공해서
목표를 달성할 수 있도록 하죠.
MCP를 통해 동일한 작업을 수행하면
같은 결과를 얻을 수 있습니다.
>> 네. 정말 놀라워요.
이런 에이전틱 코딩 기능을
어떻게 활용할 수 있는지 말이에요.
클라우드 컨테이너든
이런 도구들과 함께 로컬에서든 말이죠.
혹시 직접 실험해 본
예시가 있다면 보여주실 수 있을까요?
궁금하거든요.
>> 네. 많은 경우에
누군가를 설득하려고 할 때가 있죠.
가장 좋은 방법 중 하나는
많은 데이터를 제시하는 것입니다.
화이트보드에서 작업하고
그래프 같은 걸 만들어서
발전시켜 나가면 좋겠지만
그런 방식으로 데이터를
제시하기는 어렵거든요.
그래서 실제로 많은 사람들이
최근에 사용하고 있는 사례는
Codex가 데이터를 분석하거나
매우 복잡한 코드베이스를 깊이 파고들어서
시각화를 제공하거나 내용을 정리해서
때로는 일회용 웹 애플리케이션을
만들어주는 거예요.
그냥 단일 페이지 형태로
아티팩트를 계속 보관할 필요도 없지만
스크린샷을 누군가와
공유할 수는 있는 거죠.
정말 흥미로운 사용 사례네요.
사실 우리가 시작하기 전에
모델에게 많은 공개 데이터를 제공했습니다.
뉴욕시에서 실제로 택시 정보를
공개하거든요. 도시 내 승차
정보 같은 것들 말이에요.
그래서 저는 실제로 그 데이터를
컨테이너에 로드해서 모델이
대시보드를 구축하도록
훈련시켰습니다. 결과적으로
꽤 흥미로운 결과가 나왔어요.
적어도 다양한 테마와
구조화하고 데이터를
표현하는 다양한 방법들이요.
네. 기본적으로 원하는 만큼의
정확도를 추가할 수 있게 해줍니다.
화이트보드에서처럼
아주 얇은 스케치를 그려도
모델이 세부사항을 채워줍니다.
만약 아주 구체적인 스크린샷을
찍어서 내 컴포넌트가
이런 모양이었으면 좋겠다고
입력하면, 그것을 구현하기 위해
최선을 다할 거예요.
네. 냅킨 스케치부터
피그마 목업까지 모든 것이
가능합니다.
음.
이것을 확인할 필요가 없어요.
로컬에서 실행할 필요도 없고요.
그냥 최상위 레벨에서 어떤 디자인을
좋아하는지 보고 거기서부터
반복할 수 있어요.
이제 돌아가서 화이트보드에서
보낸 두 가지 작업을
확인해볼까요?
첫 번째는 3D 지구본을 만들어달라고
요청한 것인데, 실제로 만들어진 것 같네요.
와.
로그를 보니, 네, Three.js를
가져왔고, 실제로 이것을
애니메이션으로 만들어 모든 것을 구축했습니다.
지구본이 어떻게 보여야 하는지
텍스처까지 있어요.
저에게는 유망해 보이는데,
애니메이션이 실제로 작동하는지
정말 궁금하네요. PR을 로컬에서
확인해보시겠어요?
네, PR을 생성했습니다.
네.
터미널에서 체크아웃한 다음
개발 서버를 시작하면 됩니다.
오 세상에.
좋습니다.
정말 놀라워요. 아, 지구본이
우리가 말한 대로 정확히 돌아가고 있어요.
심지어 위에 툴팁까지
넣기로 결정했네요.
탐색하는 방법을 알려주는.
정말 놀랍네요. 그리고 하나를 클릭하면,
정말이지,
작동합니다. 그리고 어시스턴트를
여는 버튼까지 있어요.
이제 우리가 추가하고 싶었던
여행 잠금 화면을 확인해보고
Codex가 무엇을 만들어냈는지
봅시다.
몇 가지 옵션을
제공했네요.
음, 이건 정말 좋네요. 아,
앱의 디자인과 정말 잘 맞네요.
모바일 뷰는 어떤가요? 음,
우리가 반응형으로 만들어달라고
요청했고, 실제로 여기에
두 개의 스크린샷을 찍었어요.
하나는 전체 데스크탑
해상도나 일반적인 데스크탑
해상도이고, 다른 하나는
일반적인 모바일 뷰입니다.
좋은 점은 전체 화면을
촬영했다는 것입니다. 비록 그것이
폴드 위 영역에 없더라도,
오류가 있는지 혹은 겹치는 부분이 있는지 확인할 수 있어요.
다른 모든 것에도 적용할 수 있을 것 같은데요.
예를 들어 다크 모드에서도 잘 작동하는지 확인해달라고 하면,
원하는 만큼 스크린샷을 찍을 수 있을 거예요.
맞아요.
내부적으로 사람들이 정확히 그렇게 사용했어요.
컴포넌트를 라이트 모드, 다크 모드,
반응형, 다양한 크기로 테스트했죠.
디자인 팀에는 확인해야 할 여러 지점들이 있어서
모든 것이 잘 보이는지 확인하고 싶어하거든요.
그래서 실제로
이런 모든 것들을 확인하고 싶다고
프롬프트에 포함시켜서
PR 전에 체크하도록 할 수 있어요.
PR 전에 체크하도록 할 수 있어요.
PR 전에 체크하도록 할 수 있어요.
멀티모달리티와 관련해서
흥미롭게 생각하시는 다른 것들은 무엇인가요?
어떤 것들을 고민하고 계신지요?
네, 저희가 처음 제공한 도구 중 하나가
브라우저 도구였어요.
웹사이트와 웹 애플리케이션을
볼 수 있는 능력 말이죠.
다른 많은 멀티모달 소프트웨어 개발
작업들이 있다고 생각해요.
빠른 반복 루프에서 자신의 작업을
확인할 수 있는 것이 중요할 거예요.
그래서 저희는 모바일 엔지니어링이나
데스크톱 애플리케이션까지
어떻게 할 수 있을지 살펴보고 있어요.
웹은 사실 루프가 작동하는지
확인하기 위한 개념 증명이었어요.
감사합니다, 제니.
천만에요. 이것은 코덱스의
멀티모달 기능에 대한 간단한 둘러보기였습니다.
모델들이 자신의 작업을 확인할 수 있을 때
더 잘 수행한다는 것을 알고 있습니다.
이전에는 백엔드 코드에서만
그렇게 할 수 있었습니다.
하지만 이제 GP5 코덱스의
멀티모달 및 에이전트 기능을 활용하여
프론트엔드 코딩에서도 이를 구현했습니다.
이것이 여러분이 코덱스와
창의적인 파트너로 협력할 수 있는
아이디어를 제공하기를 바랍니다.
시작하려면 chatgpt.com/codex로 가세요.
시청해 주셔서 감사합니다.