소개

어떤 워크플로우는 어디로 이동해 무엇을 선택해야 하는지 화면에서 직접 보면 더 쉽게 익힐 수 있습니다. Codex로 사용자가 웹 앱에서 각 단계를 직접 수행하면서 사용법을 익힐 수 있는 투어를 만들어 보세요.

Codex는 WebMCP 도구로 앱의 컨트롤과 상태, 문서를 확인하고 사용자가 보고 있는 화면에 맞춰 다음 단계를 안내할 수 있습니다. 아직 서비스를 연결하지 않은 사용자와 이미 설정을 마친 사용자는 시작 단계부터 다릅니다.

사용 방법

1. Codex에서 앱의 리포지터리를 열고 서비스 연결이나 폴더 추가처럼 안내할 워크플로우를 하나 선택하세요.
2. 관련 문서를 제공하고 투어가 어떤 시작 상태를 처리해야 하는지 설명하세요.
3. 이 페이지의 시작 프롬프트를 실행해 투어 대상과 UI 상태 확인 도구를 추가하고 Codex가 앱의 사용 지침을 읽을 수 있게 하세요.
4. Codex가 앱의 WebMCP 도구를 호출할 수 있는 브라우저 환경에서 플로우를 테스트하세요. Codex에 안내를 요청한 다음 각 단계를 직접 수행하세요.

첫 투어의 범위는 좁게 잡으세요. 사용자가 투어 안내에 따라 설정부터 작업 완료까지 진행할 수 있는지 확인한 뒤 다른 워크플로우를 추가하세요.

예시: Runme에서 Google Drive 폴더 추가하기

Runme에서는 노트북을 편집하고 파일 탐색기로 Google Drive 폴더를 추가하거나 파일을 찾아볼 수 있습니다. 투어는 처음 사용하는 사람이 화면에서 필요한 컨트롤을 찾고 작업 순서를 익히도록 돕습니다.

Runme에 대해 자세히 알아보려면 OpenAI에서 Codex로 반복 작업 자동화하기를 읽어 보세요.

동영상에서 Codex가 Runme의 컨트롤을 강조 표시하고 각각의 용도를 설명하는 모습을 확인하세요. 아래 스크린샷은 Google Drive 폴더 추가에 초점을 맞춘 별도의 투어를 보여 줍니다.

다음과 같이 요청하면 Google Drive 투어가 시작됩니다.

Google Drive 연결하기

Codex는 Google Drive 연결 여부를 확인합니다. 아직 연결되지 않았다면 Connect Google Drive 버튼을 강조 표시하고 사용자에게 이 버튼을 선택해 연결을 완료하도록 안내합니다.

파일 탐색기 열기

연결이 완료되면 Codex는 변경된 앱 상태에 맞춰 다음 단계인 파일 탐색기 열기를 안내합니다.

폴더 추가하기

사용자가 도구 모음을 펼치면 Codex가 Google Drive 폴더를 추가하는 컨트롤을 강조 표시합니다. 사용자는 직접 조작하면서 다음에 폴더를 추가할 때 어디를 선택해야 하는지 익힙니다.

Codex에 사용자 안내에 필요한 컨텍스트 제공하기

Runme는 투어 대상, 앱 상태, 문서라는 세 가지 컨텍스트를 제공합니다. 아래 도구 이름은 Runme에서 사용하는 이름입니다. 각 도구의 역할을 참고해 앱에 맞게 구현하세요.

Codex가 컨트롤을 찾을 수 있게 하기

각 투어 대상에 용도가 드러나고 쉽게 바뀌지 않는 data-tour-id 값을 지정하고 레이블과 설명을 추가하세요. Runme는 다음 세 가지 WebMCP 도구를 통해 Codex가 이 컨트롤을 찾아 안내할 수 있게 합니다.

• listTargets는 등록된 대상과 각 대상의 ID, 레이블, 설명을 나열합니다.
• showTourStep({ target, title?, message, placement? })는 대상을 강조 표시하고 설명을 보여 줍니다.
• dismiss는 강조 표시를 해제합니다.

이렇게 하면 Codex가 컨트롤을 찾아 용도를 설명하고, 조작은 사용자가 직접 할 수 있습니다.

상태를 확인하고 사용자의 조작 기다리기

Runme는 투어 관련 상태를 React 외부에서 관리하고 컨트롤러를 통해 제공합니다. getUiSnapshot 도구는 로그인 여부를 비롯한 현재 UI 상태를 알려 줍니다. waitForUiChange(...)를 사용하면 Codex는 사용자가 강조 표시된 컨트롤을 선택하는 등 UI에 변화가 생길 때까지 기다릴 수 있습니다.

사용자가 조작할 때마다 상태를 다시 확인하도록 Codex에 요청하세요. Codex가 안내를 표시했다는 이유만으로 다음 단계로 넘어가서는 안 됩니다. 앱에서 실제로 어떤 변화가 일어났는지 확인한 뒤 진행해야 합니다.

앱에 지침 포함하기

Runme는 Markdown 문서를 앱에 포함하고 WebMCP를 통해 제공합니다.

• readInstructionsForAIAgents는 Codex가 앱과 도구를 어떻게 사용해야 하는지 설명합니다.
• listDocumentation()은 사용 가능한 문서 페이지와 각 페이지의 설명을 나열합니다.
• getDocumentation({ name })은 선택한 페이지를 Markdown 형식으로 반환합니다.

별도의 투어용 Codex 플러그인 없이도 투어 지침과 도구를 앱과 함께 배포할 수 있습니다.

투어 검토하기

시작 상태를 바꿔 가며 같은 요청을 해 보세요. 투어가 이미 완료된 설정 단계를 건너뛰는지, 사용자가 조작할 때까지 기다리는지, UI가 바뀌면 안내도 그에 맞게 바뀌는지 확인하세요.

사용자가 한 단계를 취소한 경우와 필요한 컨트롤이 아직 화면에 보이지 않는 경우도 각각 테스트하세요. Codex는 무엇이 빠졌는지 설명하거나 현재 상태에서 수행할 수 있는 다음 단계를 선택해야 합니다. 버튼을 강조 표시했다는 이유만으로 작업에 성공했다고 알려서는 안 됩니다.

인증, 권한 확인, 사용자 조작은 기존 앱 플로우 안에서 이루어지도록 하세요. 투어는 이러한 절차를 우회하지 않고 사용자가 인터페이스를 이해하도록 도와야 합니다.

이어서 요청할 작업

첫 번째 플로우가 제대로 작동하면 같은 채팅에서 다음과 같이 요청하세요.

• “Google Drive가 이미 연결되어 있고 파일 탐색기가 닫혀 있는 상태에서 이 투어를 테스트해 주세요.”
• “사용자가 한 단계를 취소한 뒤 투어를 계속해 달라고 요청하는 경우를 처리해 주세요.”
• “기존 투어 대상과 상태 도구를 재사용해 [next workflow]에 대한 투어를 추가해 주세요.”