Build with Perception Agents — Emile Baizel & Shruti Arora, Amazon AGI Lab

한 줄 핵심

Amazon AGI Lab의 perception agents 워크숍은 브라우저·화면을 사람이 이해하듯 인식하고, 시각적 주석과 검증을 통해 코딩 에이전트와 연결해 실제 UI 변경과 검증까지 자동화하는 방법을 보여준다.

시간별 요약

1. 0:00
   Emile Baizel과 Shruti Arora 소개 Amazon AGI Lab은 초기 고객과 함께 제품을 생산 환경에 올리고, 고객 피드백을 평가와 모델 학습에 반영하는 일을 중심으로 움직인다. 이번 워크숍은 Amazon Nova Act와 perception agents를 소개하고, 실습으로 이어진다.
2. 1:50
   협업, 인식, 신뢰성 에이전트는 단순한 자동화 상자가 아니라 목표를 이해하고 사고 과정을 공유하는 팀원처럼 설계되어야 한다. 브라우저뿐 아니라 여러 시각적 화면을 환경으로 보고, 실패하면 쓸 수 없을 정도로 신뢰성이 중요하므로 시뮬레이션 환경과 실제 사용 사례를 바탕으로 학습시킨다.
3. 3:40
   Amazon Nova Act를 활용한 브라우저 워크플로 Amazon Nova Act는 자연어로 브라우저 작업을 실행하고, 폼 입력·탐색·검색·인간 승인 호출까지 지원하는 AWS 서비스다. 콘솔에서 실행 궤적과 바운딩 박스를 확인할 수 있고, MCP server와 skill, playground까지 제공되어 워크플로 자동화를 쉽게 시작할 수 있다.
4. 5:43
   클릭을 넘어 화면을 이해하기 컴퓨터 사용형 에이전트는 버튼을 눌러 주는 수준을 넘어, 화면이 무엇을 의미하는지 사람처럼 이해해야 한다. API가 없는 업무 화면도 많기 때문에, 시각적 화면 자체를 이해하고 점·클릭·설명만으로 협업하는 방향이 필요하다.
5. 7:43
   결정론적 시각 주석 visual annotation은 웹페이지에서 요소를 가리키고 바꾸고 싶은 내용을 적은 뒤 JSON과 프롬프트를 내보내는 도구다. 모델 추론과 무관하게 동작하는 결정론적 도구이며, 코딩 에이전트가 실제 변경을 수행하는 입력으로 쓰인다.
6. 8:25
   디자인과 사용자 흐름 검증 visual verification은 CSS 스타일, 디자인 제약, 로그인·결제 같은 사용자 흐름이 의도대로 유지되는지 점검한다. Gherkin 파일과 디자인 아티팩트를 기준으로 코딩 에이전트가 사이트를 검증하고 보고서를 생성한다.
7. 9:23
   프런트엔드 피드백 시나리오 프런트엔드 엔지니어가 디자인팀과 협업하며 시각적 피드백을 주고받는 과정을 가정하면, 피드백을 직접 에이전트에 넘겨 반복 수정하는 흐름이 큰 시간을 절약한다. 사람이 일일이 합의하고 고치는 대신, 수정 요청을 모아 한 번에 반영하는 방식이 핵심이다.
8. 12:52
   그리기, 요소 선택, 핀 놓기 Chrome 확장인 visual annotator는 페이지 위에 직접 그리거나, 요소를 찍거나, 지도처럼 핀을 놓는 세 가지 방식으로 주석을 남길 수 있다. 주석은 다운로드해 팀에 전달하거나, AI 친화적 프롬프트로 바꿔 에이전트에 바로 보낼 수 있다.
9. 13:46
   디자인 명세와 검증 보고서 생성 visual verification skill은 설치형 스킬로 동작하며, 디자인 색상·폰트·흐름 같은 검증 기준을 다룬다. 첫 실행 때는 사이트를 크롤링해 링크와 콘텐츠를 파악하고 Gherkin 형식의 사용자 흐름을 만들어 다음 검증에 사용한다.
10. 15:26
    두 핵심 프리미티브 연결하기 이번 워크숍의 핵심은 주석과 검증이라는 두 도구를 실제 사용 사례에 맞게 엮는 방법이다. GitHub 워크숍 리포지토리를 따라가며 쉬운 경로와 중간 난이도 경로, 보너스 과제까지 선택해 직접 구현하게 된다.
11. 18:29
    워크숍 저장소 찾기 워크숍은 GitHub의 perception agents workshop 저장소에서 진행되며, Nova Act API key도 필요하다. 화면에 가려진 앞 세 글자는 ACE이므로 이를 넣어 키를 완성할 수 있다.
12. 19:26
    팟캐스트 랜딩 페이지 과제 과제는 팟캐스트 랜딩 페이지를 수정하는 프런트엔드 개발 상황을 가정한다. 참가자는 Chrome 확장, UI verification skill, Nova Act SDK, Nova Act MCP server를 이용해 주석부터 적용, 검증, 보고서 생성까지의 루프를 완성해야 한다.
13. 22:15
    쉬운 경로와 중간 경로 워크숍은 정확한 절차를 따라가는 easy mode와 더 많은 판단이 필요한 medium mode로 나뉜다. 각각 15분과 30~35분 정도를 예상하며, 빨리 끝내면 보너스 과제도 시도할 수 있다.
14. 23:22
    Nova Act와 UI 검증 스킬 설치 과정에서 보이는 Claude Code 관련 항목은 Nova Act skill과 Nova Act UI verification skill이라는 두 별도 기능 때문이라고 정리된다. 문제가 있으면 진행 중 질문을 하라고 안내하며, 두 스킬을 각각 구분해 쓰는 점이 강조된다.
15. 24:47
    해결 과정을 따라가기 워크숍은 Chrome 확장과 AI 에이전트가 함께 움직이도록 단계별로 구성되어 있다. 이후 단계에서는 변경 요청을 에이전트로 넘기고, 검증까지 이어지는 실제 동작을 구현하게 된다.
16. 25:25
    확장 프로그램과 코딩 에이전트 연결 주석 정보가 코딩 에이전트로 전달되려면 둘 사이를 잇는 agent bridge가 필요하다. 이 브리지가 annotations를 받아 에이전트에 넘기고, 변경 적용 뒤 UI 검증까지 이어지게 만든다.
17. 26:21
    확장 권한과 버튼 연결 Chrome extension의 manifest.json에는 로컬호스트 요청을 허용하는 host permissions를 추가해야 한다. content.js에는 apply changes 버튼을 만들고, Nova Act SDK로 검증을 실행하며, 보고서 생성과 열람까지 연결하는 코드가 들어간다.
18. 27:45
    페이지 변경 적용하기 확장에 새로 생긴 apply changes 버튼을 누르면 선택한 페이지 수정이 코딩 에이전트로 전달된다. 실제 예시에서는 게시일이나 페이지 텍스트를 바꾸고, 백그라운드에서 에이전트가 변경 작업을 시작한다.
19. 29:24
    로그, 검증, 보고서 실행 로그와 Nova Act의 추적 정보는 모델이 무엇을 보고 어떤 결정을 했는지 보여준다. 변경이 끝나면 검증 단계가 자동으로 실행되고, 시간이 걸린 뒤 최종 보고서를 확인할 수 있다.
20. 31:35
    데모 중 느린 Wi‑Fi 데모 중 네트워크가 느려지자, 바로 다음 발표자가 대신 등장해 다른 주석 방식을 시연한다. 기술 데모에서는 환경 문제를 우회할 수 있는 대체 진행 계획이 필요함을 보여준다.
21. 32:02
    B 대화로 디자인 피드백 보내기 B 웨어러블과 B CLI를 이용하면 실제 디자인 회의 대화를 그대로 주석 입력으로 바꿀 수 있다. 대화 내용이 전송되면 추천이 생성되고, 이를 적용하면 UI 수정과 Nova Act 검증까지 이어진다.
22. 36:52
    Duck 팟캐스트와 검증된 변경 참가자가 팟캐스트를 Duck 스타일로 바꾸고 농담을 추가하는 데모를 보여준다. 변경이 끝난 뒤 검증 플로우까지 통과하면서, 인간이 결과를 직접 보지 않아도 에이전트가 실제로 작업을 완료할 수 있음을 확인한다.
23. 40:00
    대화를 Jira 백로그로 바꾸기 B 대화의 요약을 활용해 현재 작업 중인 저장소에 맞는 백로그 항목을 만들고 Jira에 넣는 구상이 제시된다. 대화 맥락과 코드베이스를 함께 넣으면, 회의 내용을 실행 가능한 작업 항목으로 자동 변환할 수 있다.
24. 41:37
    Sidekick과 프로젝트 계획 Sidekick 같은 내부 도구를 이용해 메모·뉴스레터·아이디어를 수집하고, 프로젝트별 전략·다음 단계·참조를 정리하는 흐름이 소개된다. B 기기와 결합하면 회의나 아이디어를 캡처해 프로젝트 전략 업데이트로 연결할 수 있다.
25. 46:59
    기록된 UI 피드백 통합 아이디어 Jam MCP로 녹화한 콘솔 로그와 네트워크 요청을 가져와 UI/UX 피드백의 질을 높이는 구상이 나온다. 이런 기록 데이터를 proxy와 LLM, Nova에 연결하면 비개발자 피드백도 실제 구현 변경으로 이어질 수 있다.
26. 49:54
    청중 아이디어와 투표 참가자들은 QR 코드를 통해 자신만의 활용 아이디어를 제출하고, 현장에서 투표로 상위 아이디어를 고른다. pixel judge, 엔드투엔드 테스트, 브레인스토밍 캔버스, 실시간 공동 UI 디자인 같은 아이디어가 실제 수상으로 이어진다.
27. 54:04
    시각적 인간-에이전트 협업 이번 워크숍의 핵심은 인간과 에이전트의 협업이 점점 더 시각적이고 상호작용적인 방식으로 바뀌고 있다는 점이다. Nova Act와 GitHub 자료를 통해 perception agent를 직접 시작할 수 있고, 피드백 링크로 세션도 마무리된다.

실무 인사이트

• 시각적 주석과 검증을 분리해 두면, 변경 의도는 사람이 빠르게 남기고 실제 적용과 확인은 에이전트가 맡는 협업 구조를 만들 수 있다.
• 브라우저·화면 작업은 API 유무와 무관하게 자동화할 수 있으므로, 사내 도구나 레거시 웹 UI에도 바로 적용 가능한 자동화 패턴으로 확장하기 좋다.
• 회의·디자인 피드백·아이디어 캡처를 대화형 입력으로 받아 백로그나 작업 지시로 전환하면, 비개발자도 개발 흐름에 자연스럽게 참여할 수 있다.