GPT-5.4 컴퓨터 사용 튜토리얼: 실시간 뉴스 대시보드 만들기

내부적으로 GPT-5.4는 컴퓨터 사용 에이전트 루프를 통해 동작합니다.

• 에이전트는 현재 URL과 함께 칸반 보드의 스크린샷을 받습니다.
• 모델은 시각적 레이아웃을 분석해 태스크 카드와 컬럼의 위치를 파악합니다.
• GPT-5.4는 다음과 같은 UI 액션을 제안합니다.
• 카드로 커서 이동
• 클릭 후 홀드
• 카드를 다른 컬럼으로 드래그
• 러너가 Playwright 포인터 이벤트로 이러한 액션을 실행합니다.
• 새 스크린샷이 캡처되어 모델에 다시 전송되며, 모델은 업데이트된 보드 상태를 검증합니다.

이 과정은 보드가 원하는 구성으로 반영될 때까지 계속됩니다.

이 예시가 흥미로운 점은 모델이 칸반 애플리케이션에 대한 내부 지식에 의존하지 않는다는 것입니다. 

대신 스크린샷을 바탕으로 인터페이스의 시각적 상태만으로 어디를 클릭하고, 어떤 요소를 드래그 앤 드롭할지 전적으로 판단합니다. 이는 GPT-5.4 컴퓨터 사용의 핵심 장점, 즉 개발자가 각 도구마다 커스텀 통합이나 API를 만들지 않고도 워크플로를 자동화할 수 있음을 보여줍니다.

페인트 캔버스 상호작용

페인트 시나리오는 단순한 폼 입력보다 시각적 레이아웃, 공간 추론, 정밀한 커서 제어에 의존하는 작업을 다룹니다. 이 설정에서 에이전트는 드로잉 지시를 받고 브라우저 기반 스케치 앱 안에서 직접 이를 완료해야 합니다. 

저는 에이전트에게 캔버스 곳곳에 다양한 장면을 스케치하도록 지시했고, GPT-5.4는 색상을 선택하고 올바른 드로잉 영역을 찾은 뒤 그리드를 채우는 방식으로 작업을 수행했습니다.

칸반 예시에서 핵심 과제가 구조화된 카드를 컬럼 간 이동하는 것이었던 것과 달리, 이 시나리오는 앱의 시각적 상태를 해석하고 저수준 상호작용 결정을 연속적으로 내리는 데 훨씬 더 의존합니다. 데모에서 컴퓨터 사용이 이를 수행한 방식은 다음과 같습니다.

• 커서 이동과 타깃팅: GPT-5.4는 먼저 왼쪽의 컬러 팔레트와 중앙의 픽셀 스타일 빈 캔버스를 포함한 스케치 인터페이스 레이아웃을 해석합니다.
• 도구 및 색상 선택: 사용 가능한 팔레트 옵션을 식별하고 그리기 전에 적절한 색상을 클릭합니다. 캡처된 실행에서는 모델이 색상을 전환하며 의도적으로 캔버스의 서로 다른 영역을 구성합니다.
• 캔버스 상호작용: 어떤 캔버스 API도 호출하지 않고, 특정 셀로 포인터를 이동해 반복 패턴으로 채우는 등 전적으로 UI 액션을 통해 앱과 상호작용합니다.
• 상태 검증: 각 액션 묶음 후 러너가 새 스크린샷을 캡처해 모델에 반환하고, 모델은 예상한 패턴이 캔버스에 나타나는지 확인합니다.

주목할 점은 GPT-5.4가 무작위로 클릭하지 않았다는 것입니다. 대신 스크린샷 피드백 루프를 활용해 그림이 어디에 배치되어야 하는지, 현재 선택된 색상은 무엇인지, 각 액션 이후 캔버스가 어떻게 변화했는지를 추론했습니다. 

후반 프레임에서는 빈 그리드였던 캔버스가 넓은 색상 영역을 갖춘 구조화된 구성으로 발전하는 모습을 분명히 볼 수 있어, 모델이 여러 턴에 걸쳐 진행 상황과 레이아웃을 모두 인지하고 있었음을 보여줍니다.

예약 워크플로

이 환경에서 에이전트는 시뮬레이션된 예약 웹사이트와 상호작용하며 예약 흐름을 완료하라는 요청을 받습니다. 즉, 단일 작업을 해결하는 것이 아니라 여러 UI 상태를 순차적으로 거쳐야 합니다.

이 데모에서 컴퓨터 사용이 적용된 방식은 다음과 같습니다.

• 인터페이스 이해: GPT-5.4는 현재 화면 레이아웃을 해석해 버튼, 양식 필드, 달력, 드롭다운, 확인 컨트롤을 식별합니다.
• 단계별 탐색: 옵션 선택, 다음 화면으로 이동, 폼 요소 열기 등 워크플로에서 먼저 완료할 부분을 결정합니다.
• 폼 입력: 필요한 값을 텍스트 상자에 입력하고 드롭다운이나 날짜 선택기 같은 컨트롤과 상호작용합니다.
• 턴 간 상태 추적: 각 액션 후 러너가 새 스크린샷을 캡처해 모델에 반환함으로써, 모델은 어떤 필드가 이미 완료되었고 무엇이 남았는지 확인합니다.
• 확인 및 완료: 필요한 입력을 모두 채우면 에이전트는 최종 확인 단계로 진행해 예약이 성공적으로 완료되었는지 확인합니다.

칸반, 페인트, 예약 시나리오는 모두 UI 제어를 보여주지만, 이를 보다 실용적인 애플리케이션에 적용할 필요가 있습니다. 

다음 섹션에서는 동일한 아이디어를 사용해 최근 기사를 수집하고 결과를 구조화하여, Codex 애플리케이션 내에서 노코드 워크플로로 활용 가능한 라이브 뉴스 대시보드를 만들어 보겠습니다.

3단계: GPT-5.4로 라이브 뉴스 대시보드 만들기

이번 단계에서는 동일한 컴퓨터 사용 기능을 적용해 라이브 뉴스 대시보드를 구축합니다. 목표는 사용자가 AI, 정치, 기후, 기술, 과학 등 관심 주제를 선택하면 시스템이 다음을 수행하는 소규모 대시보드를 만드는 것입니다.

• 신뢰할 수 있는 출처에서 최신 뉴스 기사 수집
• 해당 기사에서 핵심 정보 추출
• 세 가지 간결한 요약 생성
• 구조화된 대시보드 형식으로 결과 렌더링

애플리케이션을 수동으로 작성하는 대신, GPT-5.4 컴퓨터 사용 환경 안에서 Codex를 활용해 다음 프롬프트를 전달하여 기존 CUA 리포지토리 안에 바로 기능을 생성하겠습니다. 

Codex는 CUA 샘플 앱과 동일한 환경에 연결되어 있으므로, 에이전트가 저장소를 분석해 대시보드의 위치를 결정하고 UI와 로직을 자동으로 구현할 수 있습니다.

프롬프트: 

Build a live News Dashboard in this repo.
Goal:
Create a dashboard where a user can enter a topic of interest, fetch the latest important news in real time from trusted sources, and render exactly 3 structured results that are meaningful and topic-relevant.
Requirements:
- The dashboard must allow the user to type a topic such as AI, politics, climate, health, science, or tech.
- Fetch live results at request time. Do not hardcode stories.
- Use trusted sources appropriate to the topic. Prefer official or well-known outlets.
- Return exactly 3 items.
- Each item must include:
  - HEADLINE
  - SOURCE
  - SUMMARY
- Summaries must be in your own words, concise, and clearly related to the article and topic.
- Avoid low-quality results such as homepages, category pages, generic aggregator wrappers, or meaningless titles.
- Prefer direct article URLs over search/aggregator wrapper links.
- Keep the UI minimal and consistent with the repo’s existing design language.
- Reuse the existing framework/tooling. Do not add new dependencies unless truly necessary.
Implementation plan:
1. Inspect the repo and place the dashboard in the existing app structure without breaking the current console.
2. Add a topic input UI with a search action and a loading/error state.
3. Add a server-side news fetch path that:
   - maps topics to trusted source sets
   - fetches recent results in real time
   - filters out irrelevant or low-quality matches
   - resolves direct article URLs where possible
   - extracts useful metadata for headline/source/summary
4. Render the dashboard with:
   - page title
   - topic
   - date
   - intro
   - exactly 3 cards/items
   - a structured export block that can be copied into another dashboard
5. Keep the export block in this exact format:
---BEGIN DASHBOARD CONTENT---
TITLE: News Brief — [TOPIC]
DATE: [today's date]
INTRO: Top 3 [TOPIC] updates from trusted sources.
ITEM 1:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 2:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 3:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
SOURCES_USED: [comma-separated list of sites used]
---END DASHBOARD CONTENT---
Deliverables:
- A working live dashboard route in the app
- Real-time topic search
- Exactly 3 relevant results per search
- Structured export block visible in the UI
- Short run instructions
- Basic tests for parsing/formatting logic if the repo already has a test runner

이 프롬프트는 세부 구현 코드가 아닌 상위 수준의 명세로서, Codex가 기존 저장소 내에 라이브 뉴스 대시보드를 구축하도록 지시합니다. 

Codex는 먼저 프로젝트 구조를 점검해 대시보드 UI와 백엔드 로직을 추가할 위치를 파악합니다. 그런 다음 주제 입력 필드를 만들고, 신뢰할 수 있는 출처에서 실시간으로 최신 기사를 가져오며, 제목·출처·요약 같은 핵심 메타데이터를 추출하고, 관련성을 보장하도록 결과를 필터링합니다. 

마지막으로 정확히 세 개의 뉴스 항목을 깔끔하고 구조화된 레이아웃으로 렌더링해 대시보드에서 손쉽게 확인하거나 내보낼 수 있게 합니다.

GPT-5.4 컴퓨터 사용은 기능 생성 중에도 모델이 개발 환경을 관찰하고 상호작용할 수 있게 하여 이러한 워크플로를 가능하게 합니다. 

Codex는 단순한 코드 생성기에 그치지 않고, 저장소를 분석해 새 컴포넌트의 위치를 결정하며, 결과를 검증하면서 대시보드를 점진적으로 구현합니다.

워크플로에는 다음과 같은 핵심 단계가 포함됩니다.

• 저장소 점검: Codex가 프로젝트 구조를 스캔해 대시보드 UI와 지원 로직을 추가할 위치를 식별합니다.
• 사용자 인터페이스: 사용자가 AI, 기후, 기술 등 주제를 검색할 수 있는 입력 필드를 만듭니다.
• 실시간 뉴스 수집: 하드코딩 예시에 의존하지 않고 신뢰할 수 있는 출처에서 최신 기사를 수집합니다.
• 필터링과 요약: GPT-5.4가 제목, 출처, 요약 등 유용한 메타데이터를 추출해 선택한 주제와의 관련성을 보장합니다.
• 구조화된 렌더링: 마지막으로 카드 스타일 레이아웃으로 정확히 세 개의 뉴스 항목을 표시해 결과를 쉽게 훑어볼 수 있게 합니다.

참고: 최종 대시보드는 단일 프롬프트로 생성되지 않았습니다. 원하는 동작과 출력 형식을 얻기 위해 몇 차례 반복과 프롬프트 조정이 필요했습니다. 유사한 실험을 진행할 때는 프롬프트와 제약을 조정하는 과정에서 시행착오가 있을 수 있음을 예상하세요. 또한 브라우저나 시스템이 자동화된 브라우저 상호작용을 차단하지 않도록 설정해야 합니다. 이러한 제한은 컴퓨터 사용 워크플로에 지장을 줄 수 있습니다.

결론

이 튜토리얼에서는 GPT-5.4 컴퓨터 사용을 통해 전통적인 API에 의존하지 않고 실제 소프트웨어 환경과 상호작용하는 에이전트를 구축하는 방법을 살펴보았습니다. OpenAI의 CUA 샘플 앱을 사용해, 모델이 인터페이스를 관찰하고 액션을 제안하며 스크린샷으로 결과를 검증하는 컴퓨터 사용 루프를 샌드박스 시나리오로 먼저 확인했습니다.

이후 동일한 개념을 CUA 환경 내 Codex와 함께 적용해 라이브 뉴스 대시보드를 구축했습니다. 애플리케이션을 수동으로 작성하는 대신, 프롬프트를 상위 명세로 삼아 Codex가 저장소를 점검하고 대시보드의 UI와 로직을 생성하며, 신뢰할 수 있는 출처에서 최신 뉴스를 가져와 구조화된 형식으로 렌더링하도록 했습니다.

이 아이디어를 확장해 다음과 같은 에이전트를 구축할 수 있습니다.

• 내부 대시보드나 리포팅 도구 자동화
• 리서치 파이프라인 생성
• 실시간 업계 동향 추적
• 기존 저장소 내부에서 직접 새로운 제품 기능 프로토타이핑

컴퓨터 사용 모델이 계속 발전함에 따라, 소프트웨어 인터페이스와 코드베이스 모두와 상호작용할 수 있는 범용 개발·자동화 에이전트로의 가능성이 열리고 있습니다.