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