OpenAI Sites가 스프레드시트나 프롬프트를 실시간 개인화 웹 앱으로 바꾸는 방법

John은 자신을 Sites의 리드 엔지니어라고 소개했습니다. 그는 Sites가 올해 초 출시된 웹 호스팅 서비스로 많이 알려져 있지만 그 이상이라고 말했습니다. 처음에는 연구자들을 위한 내부 웹 앱을 만들려고 OpenAI에 합류했는데, OpenAI 인프라 안에서 그런 도구를 배포하는 일이 답답했다고 합니다. 그래서 Codex에서 바로 회사 내부용 풀스택 웹 앱을 더 쉽게 배포하는 방법을 프로토타입으로 만들었습니다.

그는 이 프로토타입이 퍼진 과정을 설명했습니다. 다른 엔지니어들이 서로 공유했고, 이후 비엔지니어들도 예상치 못하게 이를 쓰기 시작하면서 회사 전체에 앱이 퍼졌습니다. 이후 팀이 꾸려졌고 그중 일부는 청중석에 있었으며, 몇 달 뒤 Sites가 출시되었습니다.

John은 Sites가 출시된 지 불과 두세 달밖에 되지 않았지만 OpenAI는 이미 800만 개의 Sites를 호스팅하고 있다고 말했습니다. 또한 OpenAI에서는 직원의 70% 이상이 자신만의 Sites를 만들고 있다고 덧붙였습니다.

그는 가장 흔한 사용 사례를 나열했습니다. 다른 사람들과 아이디어를 함께 다듬기, 슬라이드 덱을 더 인터랙티브한 프레젠테이션으로 바꾸기, 스프레드시트를 전용 UI로 대체하기, 팀마다 필요한 내부 도구 만들기 등입니다. 그는 고객 확보(go-to-market), IT, 프로덕트 매니지먼트, 디자인, 엔지니어링 직군의 사람들이 모두 프로토타입과 실운영 도구를 만들고 있다고 말했고, 자신은 특히 게임에 관심이 많다고 했습니다. 팀은 세부 사항에 얽매이지 않고 이것들을 공유하며, 이제 OpenAI에는 모든 것을 위한 사이트가 있다고 말했습니다.

John은 Sites가 사용자의 맥락, 플러그인, ChatGPT에서 실행되는 에이전트와 연결되기 때문에 내부용과 외부용 모두에서 개인화된 소프트웨어와 협업 경험을 쉽게 만들 수 있다고 말했습니다. 이어서 발표 구성을 소개했습니다. 하나의 프롬프트로 사이트 만들기, 협업적이고 개인화된 사이트 만들기, 에이전트 친화적인 사이트 만들기입니다.

Katia는 팀이 DevDay 출시 항목을 추적하려고 정기적으로 업데이트하는 스프레드시트를 관리한다고 말했습니다. 이 시트에는 DevDay의 여러 출시 항목에 대한 맥락, 각 프로젝트의 진행 상황, 그리고 다른 자산과 문서로 가는 링크가 들어 있습니다. 그녀는 이 시트가 지금 무슨 일이 일어나는지 한눈에 보기에는 좋지만, 각 프로젝트의 세부 정보를 확인하기에는 불편하고 보기에도 다소 지루하다고 말했습니다.

화면에서 그녀는 Codex에게 이 시트를 새 폴더의 출시 레이더 앱으로 바꾸고, 공유 DevDay UI 라이브러리와 Sites 시스템을 사용해 사이트로 게시하라고 요청했습니다. 그녀는 마일스톤과 확인이 필요한 항목은 첫 화면에서 출시 항목과 함께 보여야 하고, 사용자가 제품 영역별로 필터링하고, 목록·보드·캘린더 보기를 전환하며, 각 출시의 문서와 자산을 열 수 있어야 한다고 명시했습니다. 그런 다음 시트에 연결된 출시 브리프를 사용해 매일 아침 사이트를 업데이트하라고 요청했습니다.

Codex가 사이트를 만드는 동안 John은 플러그인을 설명했습니다. 그는 플러그인이 ChatGPT와 Codex가 커넥터와 스킬을 묶어 서드파티 서비스의 데이터에 접근하게 해 주는 방식이라고 말했습니다. 예를 들어 플러그인으로 Codex가 Linear에서 사용자에게 할당된 작업을 읽고, Slack 메시지를 검색하고, 사용자를 대신해 GitHub에 PR 댓글을 남길 수 있다고 설명했습니다. Codex는 플러그인으로 최신 데이터를 가져온 뒤 사이트를 업데이트할 수 있습니다.

그는 플러그인과 예약 작업을 결합하면 사용자가 잠든 동안에도 Codex가 사이트를 최신 상태로 유지할 수 있다고 말했습니다. 스레드에서 작업을 매시간, 매일 또는 매주 실행하도록 예약할 수 있고, 작업은 해당 데이터를 가진 플러그인에서 정보를 가져옵니다. 그는 Google Drive를 사용하라고 요청하는 예를 들었습니다. Sites에는 SQLite 데이터베이스도 포함되어 있어, 사이트가 보여 주는 데이터가 바뀌어도 소스 코드를 바꿀 필요가 없습니다. 작업이 데이터베이스를 직접 업데이트하면 사이트는 재배포 없이 즉시 바뀝니다. 그는 사이트용 예약 작업이 그날 출시되며, 작업과 사이트를 연결해 더 쉽게 관리할 수 있고, Codex는 관련이 있을 때 예약을 제안할 것이라고 말했습니다.

John은 ChatGPT로 로그인하기(Sign in with ChatGPT)를 기반으로 한 Sites의 내장 인증을 설명했습니다. 사이트는 익명 사용자를 위한 랜딩 페이지와 함께 인터넷에 공개할 수 있고, 링크를 통해 사용자가 ChatGPT에 로그인하면 일반 웹 앱처럼 추가 기능을 쓸 수 있습니다. 다만 게시 전에도 새 사이트는 모두 기본적으로 비공개라고 말했습니다. 사이트가 비공개이면 팀은 의도한 사람만 접근하도록 관리하며, 방문자는 먼저 ChatGPT로 로그인해야 하고, 사이트는 방문자가 본인이 맞는지 확인한 뒤에 입장을 허용합니다.

그는 그날부터 비공개 사이트에 로그인한 팀원이 자신의 ChatGPT 플러그인도 방문 중인 사이트에 가져올 수 있다고 덧붙였습니다.

John은 플러그인과 Sites를 함께 쓰면 사이트가 Drive, Slack, Linear 같은 서비스에 있는 팀원의 데이터에 직접 접근할 수 있고, 팀 내부 전용 커넥터와도 작동한다고 말했습니다. Katja는 의도된 동작을 설명했습니다. 플러그인이 구현된 사이트를 방문하면 그녀는 페이지를 처음 열 때 불러온 자신의 데이터를 보고, John이 같은 사이트를 방문하면 그는 자신의 커넥터에서 가져온 자신의 데이터를 본다고 했습니다.

John은 이것을 구현하려면 Codex에 요청하기만 하면 된다고 말했습니다. 이후 Katja는 무대 위에서 Codex가 그렇게 하는 모습을 보여 달라고 요청했습니다.

Katja는 기존 스레드에 후속 프롬프트를 보내, Codex에게 가능한 한 빨리 사이트를 배포하고 Linear 커넥터를 읽기·쓰기 권한으로 추가하라고 요청했습니다. 그녀는 각 사람이 자신에게 할당된 티켓을 관련 출시 항목과 함께 보고, 티켓의 상태나 설명을 바꾼 뒤 Linear에 다시 저장할 수 있기를 원한다고 했습니다. 그녀가 설명하는 동안에도 앱은 아직 게시 중이었습니다.

화면에서 그녀는 완성된 앱을 열고, Codex가 요청한 기능을 모두 만들었다고 말했습니다. 출시 항목, 요청한 보기 방식, 지정한 디자인 시스템이 모두 들어 있었습니다. 그녀는 John이 이야기하는 동안 몇 분 만에 만들어졌다고 말했습니다. Katja는 업데이트를 위해 단순한 스프레드시트를 쓰는 대신, 팀과 공유할 인터랙티브 사이트를 수고 없이 만들 수 있다고 말했습니다. 그녀는 이것이 단순한 데모가 아니며, 그날 훨씬 많은 출시가 있었기 때문에 OpenAI는 이 특정 스프레드시트를 사용하지 않는다고 했습니다. 다만 같은 방식이 행사 준비를 위해 회사 전체에서 쓰였다고 말했습니다.

Katja는 사이트를 특정 사람들과 공유할 수 있다고 설명했습니다. 그녀는 John을 검색해 초대 대상으로 추가했습니다. 그리고 그를 편집자로 추가하면 나중에 앱을 수정할 수 있다고 말했습니다.

그녀는 편집자 권한을 다른 종류의 접근 권한이라고 설명했습니다. 작업 공간에서 편집자 권한을 가진 사람은 누구나 호스팅된 사이트에 업데이트를 반영할 수 있다는 뜻입니다. 또한 공유 설정을 저장할 수 있다고 덧붙였습니다. 데모에서는 사이트에 연결된 예약 작업이 인터페이스에 표시되었습니다.

Katja는 이 사이트에 연결된 예약 작업이 Drive 문서 변경 사항에 따라 매일 사이트를 업데이트한다고 말했습니다. 사이트에 예약 작업이 있으면 사이트가 하나를 제안하므로, 사용자가 업데이트를 신경 쓸 필요 없이 사이트가 스스로 갱신된다는 설명이었습니다.

그다음 그녀는 사이트의 플러그인 구현을 확인했습니다. 앱은 여전히 실행 중이었지만 이제 공개되어 있었고, 그녀가 이를 열었습니다. 사이트는 이미 그녀를 로그인된 상태로 인식하고 있었습니다. 페이지에는 그녀 자신의 Linear 티켓이 표시되었는데, 그녀는 Linear 플러그인 하나만 추가한 뒤 그것을 봤다고 말했습니다.

Katja는 John에게 사이트에 접속해 보라고 요청했습니다. 그는 화면이 매우 비슷하며 실제로 같은 사이트라고 말했지만, 아래로 스크롤하자 그 자신의 티켓이 보였습니다. Katja는 이 데이터가 그가 사이트를 열 때 가져온 것이며, ChatGPT에 있는 기존 Linear 커넥터를 통해 불러온 것이라고 설명했습니다.

Katja는 API 키도, 참조할 API 문서도 필요 없는 서드파티 통합이 전혀 필요하지 않다고 강조했습니다. 이 기능은 Sites에 기본으로 들어 있으며, 각 사용자의 기존 커넥터를 활용하므로 만드는 사람이 권한이나 접근 문제를 따로 생각할 필요가 없습니다. 사이트에는 쓰기 권한도 있었기 때문에 그녀는 자신의 티켓 하나를 업데이트해 봤습니다. 티켓이 먼저 열렸고, 그녀가 상태를 바꾸고 저장하자 저장이 성공했습니다.

Katja는 ChatGPT 인앱 브라우저에서 앱을 열고 수정하고 싶다고 말했습니다. 그녀는 이 브라우저에 주석(annotations)이라는 기능이 있어서 특정 요소를 골라 바꿀 수 있다고 설명했습니다. 그녀는 그날부터 ChatGPT 인앱 브라우저에 주석 확장성(annotation extensibility)이라는 새 기능이 생겼다고 말했습니다. 이 기능으로 개발자는 모든 웹 앱 사용자를 위한 맞춤 주석을 준비할 수 있습니다. 주석은 HTML에 직접 포함되며, 맞춤 컨트롤이나 제안 프롬프트를 통해 Codex에게 사이트를 어떻게 수정할 수 있는지 알려 줍니다. 그래서 편집자는 무엇을 바꿀 수 있는지 더 쉽게 찾을 수 있습니다. 그녀는 이것이 디자인 시스템과 컴포넌트 라이브러리에 특히 유용하다고 말했습니다.

John은 편집 과정을 시연했습니다. 그는 Edit UI 버튼을 클릭해 사이트에 내장된 제안 프롬프트를 보았고, 무엇을 바꿀 수 있는지 쉽게 알 수 있었습니다. 그다음 주석 모드를 켜고 요소를 선택했습니다. 선택하자 변경 사항이 자동으로 적용되어 미리 볼 수 있었습니다. 변경을 확정하려고 그는 Codex에게 적용을 요청했고, Codex가 작업해 변경을 보냈습니다.

그는 이 옵션들이 사이트 HTML에 포함되어 있어서, 사이트를 다른 사람과 공유해 편집하게 하면 기여가 훨씬 쉬워진다고 말했습니다. 그는 플러그인으로 사이트를 더 개인화하고, 맞춤 주석으로 효과적으로 협업할 수 있다고 결론지었습니다. 이는 조직 내부에서 공유하는 내부 앱에 좋지만, 일반 대중을 위한 강력한 웹 앱이 될 수도 있다고 말했습니다.

Katja는 John을 위한 선물로 Sites로 만든 GIF Studio 앱을 소개했습니다. 그녀는 이 앱이 사용자 맞춤 GIF 상자를 만든다고 설명했습니다. 첫 단계에서 사용자는 카메라로 사진을 찍고, 앱은 디자인을 생성합니다. 그녀는 이것이 최신 이미지 모델이 탑재된 OpenAI 이미지 API를 사용해 백그라운드에서 실행된다고 말했습니다. 이것이 가능한 이유는 Sites가 개발자에게 환경 변수로 시크릿을 추가할 수 있게 해 주기 때문입니다. 이번에는 OpenAI API 키를 추가했다고 말했지만, 일반적인 풀스택 웹 앱에서 하듯이 어떤 서드파티 서비스든 통합할 수 있다고 했습니다. 이후 GIF 상자가 준비되었습니다.

두 번째 단계인 상자 채우기에서 Katja는 카탈로그를 직접 둘러볼 수도 있지만, 에이전트가 자동으로 하도록 하는 편을 선호한다고 말했습니다. 그녀는 WebMCP를 에이전트가 노출된 도구를 통해 사이트와 상호작용하게 하는 새로운 브라우저 표준으로 소개했습니다. 어떤 앱이든 WebMCP 도구를 노출할 수 있고, ChatGPT 인앱 브라우저처럼 WebMCP를 지원하는 브라우저에서 사용하면 사용자는 자신의 에이전트와 함께 라이브 앱을 업데이트하는 작업을 할 수 있습니다.

Katja는 컴퓨터 사용(computer use) 같은 방식과의 차이가 에이전트가 UI를 클릭하는 대신 도구를 통해 사이트를 쓸 수 있다는 점이라고 설명했습니다. 사용 사례에 따라 이것이 훨씬 빠르고 저렴할 수 있다고 말했습니다. 컴퓨터 사용에서는 에이전트가 클릭하고, 항목을 하나씩 열고, 메타데이터를 봐야 합니다. WebMCP에서는 에이전트가 백엔드를 직접 조회할 수 있습니다. 그녀는 WebMCP 도구를 호출하는 것이 사용자 자신의 에이전트가 행동하는 것이므로, 사용자의 데이터와 앱에 접근할 수 있다고 말했습니다.

데모에서 그녀는 에이전트에게 Slack에서 John이 좋아하는 것을 찾아보고, 위의 상자에 카탈로그에서 고른 선물 추천을 보여 달라고 요청했습니다. 에이전트는 Slack을 읽은 뒤 John이 개를 아주 좋아한다는 점을 찾아내, 개를 위한 장난감을 포함해 UI에 제안을 업데이트했습니다. 그다음 Katja는 일부 항목을 제거했습니다. 예산은 100달러 미만으로 유지하겠다고 말했습니다. 그리고 남은 항목을 장바구니에 담았습니다. 제안이 UI에 표시되므로, 그녀는 그 자리에서 에이전트와 직접 협업할 수 있다고 말했습니다.

마지막 단계에서 Katja는 개인 메시지를 쓰고 싶었지만, ChatGPT가 자신보다 이전 대화를 더 잘 기억한다고 말했습니다. 그녀는 에이전트에게 이전 대화를 바탕으로 개인화된 메시지를 만들고 그것으로 UI를 업데이트하라고 요청했습니다. 에이전트는 그녀가 마음에 들어 한 메시지를 만들었고, 그녀가 이를 확정하자 선물 상자가 준비되었습니다.

이후 John은 아이디어를 이렇게 요약했습니다. 사이트를 만들고 사용자에게 맞게 개인화하고 싶다면, 사용자의 에이전트에게 사용자에 대해 아는 내용을 바탕으로 앱에서 어떻게 행동할 수 있는지 알려 줄 수 있습니다. 그는 사용자가 웹을 탐색할 때 자신의 에이전트를 함께 가져오게 되면서 앱도 에이전트와 잘 작동하도록 만들 수 있다고 말했습니다. Sites에서는 사이트의 플러그인이 WebMCP 구현 방법을 알고 있고, 관련 있는 곳에는 자동으로 추가되기 때문에 추가 작업이 필요 없다고 덧붙였습니다.

John은 Sites로 발표 자료, 아이디어, 실험에서 자동으로 최신 상태로 유지되는 웹사이트까지 모든 종류의 경험을 만들 수 있다고 말했습니다. 하지만 Sites는 그 이상의 역량을 갖추고 있다고 했습니다. Sites는 자동으로 확장되는 풀스택 웹 앱이 될 수 있고, 인증과 데이터베이스를 갖추고 있으며, 이제 플러그인을 통해 팀원의 데이터에도 접근할 수 있습니다. 또한 사람과 에이전트 모두를 위해 최적화되어 있다고 말했습니다.

그는 에이전트 시대를 위해 만드는 개발자들에게 경험을 다시 생각하고, 맞춤 주석과 WebMCP를 추가해 사람과 에이전트 모두가 앱에 더 쉽게 기여하고 상호작용하도록 하라고 권했습니다. 발표는 감사 인사로 끝났습니다.