Video: 드디어 모든 브라우저 자동화 고민을 해결해줄 구세주가 탄생했습니다.
Channel: 코드팩토리
Duration: 13m 52s
Source: subtitle (auto, ko)
Transcript:
자, 오늘은이 화면에 보이는이 개전 운투를 제가 소개를 해 드릴 건데요. 약속드리는데 여러분 바이브 코딩 인생에서 가장 짧고 가장 유용한 영상이 될 겁니다. 자, 플레이라이트와 컴퓨터 그리고 크롬 자동화 툴들에 고통받고 계셨던 분들 오늘 제가 전부 다 구제해 드리겠습니다. 무료 브라우저 이골라이트 제가 소개해 드리도록 할게요. 자,이 AI 브라우저의 가장 큰 문제는요. 여러분들도 느끼셨겠지만 진심으로이 AI와 사람 그리고 그 중간을 중계해 주는 완벽한 브라우저가 없다라는 거예요. 자, 그게 왜 그런지는 써 본 분들은 이미 다 느꼈을 겁니다. 우리가 뭐 플레이라이트 같은 거를 사용할 수가 있기는 하지만 막 마우스 커서 나가고 막 자꾸 컨트롤 가져가고 브라우저 막 새로 실행하고 기존에 실행했던 거 정리도 안 하고 에이전트끼리 막 서로 오너십 뺏고 막 이게 한두 번은 그러려니 하는데 우리 AI가 계속 발전하고 LRM이 똑똑해지면서 우리가 병렬로 프로젝트를 많이 돌릴수록 계속 서로 간섭을 하다 보니까 정말 그냥 머리 터질 것 같은 상황이 많이 생겨요.

여러분도 그랬을 거예요. 자, 근데 지금 보이는이 이골라이트를 쓰게 되면은요.이 각각 AI별로 공간을 완전 독립적으로 넣어 주고요. 자, 그리고 여기서 보이는 것처럼 그냥 하나의 브라우저 실행 프로그램 안에서 우리가 컨트롤 할 수 있기 때문에 포커스를 가져가지도 않고요. 독립적으로 알아서 배정된 저희가 이따가 얘기를 해 드릴 건데 스페이스라는 공간에서 클로드를 쓰든 코덱스를 쓰든 아니면 뭐 키미를 쓰든 뭘 쓰든 각각 세션에 배정된 공간 안에서만 작업을 하기 때문에 전혀 개입이 없어요. 자, 그래서 제가 보기에 AI랑 함께 활용하기에 가장 완벽한 브라우저 중 하나인 이고라이트 한번 리뷰해 보도록 하겠습니다. 자, 일단 코덱스를 한번 켜 볼게요. 저 같은 경우에는 어, 올카를 굉장히 잘 쓰고 있어서 올카에서 보통 작업을 하게 되는데 조금 확대해서 여러분 잘 볼 수 있도록 코덱스가 됐던 아니면은 클로드가 됐든 둘 다 제가 실행이 되는 걸 이제 보여 드릴 건데 여러분이 인터넷에서 이골 라이트라고 검색하고서이 창에 들어가면은요.

공식 페이지 들어가면은 바로 다운로드를 받을 수가 있거든요. 자, 여기 다운로드 for 맥이라고 나오죠. 그렇죠? 자, 이거 다운 받으면은 실행을 했을 때 바로 여러분이 이미 설치한 모든 환경에 스킬들이 생깁니다.이고 브라우저라는 스킬이 생겨요. 자, 보여 드릴게요. 자, 클로드에서 우리가 슬래시하면이고 했을 때이고 브라우저 있죠? 또는 여러분이이고 브라우저 접근 확인해 줘. 이렇게 요청을 해도 우리가 바로 볼 수가 있습니다. 자, 접근 정상입니다라고 이렇게 나오는 거를 볼 수가 있죠. 자, 그럼 우리가 한번 사용을 시작을 해 볼 건데. 자,이 똑똑한이고 브라우저의 장점 우리가 한번 조금 얘기를 해 보면은 자, 우리가 코덱스나 클로드 코드를 사용을 해도이 자체적으로 우리가 서치를 할 수 있는 그러니까 그냥 컬 요청하는 거죠. 자, 그런 기능이 존재합니다. 그렇죠? 근데 그런 기능은 당연히 인터랙션 할 수가 없고요. 우리가 보통은 뭐 크로드 앱 같은거나 아니면은 코덱스 앱 같은 거 쓰면인 브라우저 사용하는 경우도 있고 크롬 같은 거에다 플레이라이트 연결해 가지고 사용하는 경우도 있죠.

그런 경우에는 이제 자바스크립트 사용이 가능해지고요. 자, 자바스크립트 우리가 사용할 수 있어야 되는 이유는 뭐 로그인된 대시보드의 필터를 뭐 조작을 하거나 그러니까 API가 없는 것들, 처음 보는 서비스에서 우리가 사용성에 대한 문제를 찾거나 여러 단계로 구성된 예약 절차 같은 걸 우리가 직접 AI가 실행하도록 하려면은 브라우저 안에서 우리가 실제로 조작할 수 있는 기능이 필요하단 말이에요. 자, 그래서 이런 자동화를 위해서 보통은 우리가 이미 존재하고 있는 크롬 브라우저에다 플레이라이트 같은 걸 붙여 가지고 사용을 하고 그랬었죠. 자, 근데 이골라이트는 실제로 크롬 브라우저의 엔진을 그대로 사용한 브라우저 그 자체예요. 네. 그래서 우리가 틀게 되면은요. 굉장히 익숙한 이런 화면이 뜨는데 예를 들어서 우리가 구글닷컴을 접속을 하게 되면 실제로 구글을 이렇게 뜹니다. 그러니까 여러분이 일반적으로 쓰는 브라우저와 다를게 한 개도 없어요. 크롬의 확장 프로그램이 아니고요. 독립적인 프로그램으로 어 크로미엄을 실행하고 있는 겁니다.

자, 그리고이 친구 같은 경우에는 우리가 반복적으로 작업을 할 수 있도록, 효율적으로 작업을 할 수 있도록 지금 여기도 보면은 제가 교육 환경 정보 시스템에 지금 로그인을 해 가지고 제가 조작을 시켰는데 뭐 쿠키라든가 로그인 세션 확장 프로그램이라든가 아니면 브라우저 환경 같은 브라우저 환경 같은 것들을 우리가 그대로 유지해서 사용을 할 수가 있어요. 그래서 매번 새로운 세션이 생기는 개념이 아니라 우리가 일반적으로 크롬에서 우리가 어떤 페이지를 이동을 하면은 정보가 다 남아 있는 것처럼 이골 라이트도 똑같이 그걸 가능하게 해 줍니다. 그래서 뭐 캡처 같은 거 우리가 해야 되는 것들이 있잖아요. 그런 것들 우리가 미리 로그인 해 두면은 여기도 지금 캡처가 나왔는데 여기에 제가 미리 로그인 해 놓고 등록을 해 두면은 캡처 같은 걸 이제 더 이상 할 필요가 없어진다라는 거죠. 자, 가장 핵심이이 스페이스라는 기능인데 오른쪽 위에 보면은요. 저는 이렇게 4라고 써져 있고 로딩이 돌고 있는 거 보시죠?

자, 로딩이 돌고 있는 거는 지금 어, 제가 실행하고 있는 AI가 붙어 있다라는 뜻이에요. 그래서 러닝이라고 나오고요. 지금 조작을 하고 있고 제 응답을 지금 기다리고 있는 상황이라고 보시면은 돼요. 자, 여기에 재밌는게 어떤 한 곳에 들어가면은요.이 안에서 테이크 오버를 누르게 되면은이 브라우저를 그냥 제가 컨트롤하는 것처럼 쓸 수가 있고요. 여기서 우리가 리턴 에이전트를 이렇게 또 누르게 되면은 알아서 또 AI가 접근할 수 있도록 제 커는 이제 상관이 없고 여기 보이는 것처럼 매물지도 열기라고 돼 있는데 커서 따로 있죠. 그죠? 우리 AI가 LM이 알아서이 브라우저를 여기에 지금 연결된 LM만이 브라우저를 사용할 수 있도록 허가를 해 주고 있는 상황이라고 보시면은 돼요. 자, 그래서 우리가 다른 툴을 사용했을 때 가장 큰 페인포인트 중 하나인 포커스가 나가는 거랑 공간들이 여러 개의이 윈도우가 생겨 가지고 화면 배치를 갉아먹는 그런 상황들을 해결을 해 준다라는 거죠. 자, 그리고 거기에다가 내가 개인으로 쓸 수 있는 공간은 항상 따로 나눠져 있어 가지고 자, 여기에서 제가 그냥 하고 싶은 작업은 제 스페이스 안에서 하면 되고 AI는 그냥 AI가 알아서 AI 스페이스에서 작업을 하면 된다라는 거예요.

자, 그럼 우리가 한번 실제로 써 볼 건데 자, 코덱스 두 개 틀고 클로드 하나 틀어 볼게요. 아, 아니다. 그록 한번 틀어 보겠습니다. 그록에서도 제가 이거 브라서 접근 확인해 보라. 그러니까 자, 스킬 써 가지고 잘 접근하는 거를 볼 수가 있죠. 그러니까 어떤 애가 됐든 다 쉽게 접근할 수가 있다라는 겁니다. 자, 그럼 여기서 우리가 한번 작업을 해 볼 건데. 자, 저는 이미 브라우저에다가 제 유튜브 계정을 연결 해 놨어요. 뭐 당연한 얘기죠. 자, 그렇기 때문에 자, 로그인된 유튜브 스튜디오에서 최근 28일간 개신의 영상 10개의 조회수 노출 클릭과 평균 시청 지속 시간을 확인해 줘라고 이야기를 할 겁니다. 자, 우리가 유튜브 스튜디오에서 가져올 수 있는 정보들을 GCP를 통해서 API를 써서 뽑아올 수 있는 경우로 있지만 못 하는 경우도 되게 많아요. 자, 그런 경우에는 결국에 우리가 자동화를 이렇게 돌려야 되는데 그때 굉장히 쉽게 우리가 실행을 할 수 있게 된다라는 거죠. 자, 상과 좋은 영상 세 개와 개선이 필요한 영상 세 개를 구분하고 어쩌고 해 달라라고 하나 할 거고요.

제가 바로 실행 안 할 겁니다. 세 가지를 동시에 실행할 거예요. 그리고 이게 얼마나 편리한지 여러분들한테 보여 드리겠습니다. 자, 두 번째는 클로드에게 시킬 건데 자,이고 브라우 사용해서 9월 7일 서울에서 도쿄로 가는 오전 직항편을 찾아줘. 수화물이 20kg 이상이 포함이 되고 일정 변경이 가능한 운인만 비교해 줘. 가장 저렴한 항공편을 선택해서 테스트용 승객 정보를 입력하고 결제 직전에 멈춰. 예약과 결정을 절대 확정하지만 자, 이거는 당연히 우리가 뭐 API 같은 걸로 할 수가 없겠죠. 뭐 존재할 수도 있는데 굳이 그거를 찾아가지고 우리가 할 정도의 노력이 필요한 사업화가 가능한 아이템 자체가 아닙니다. 그죠? 자, 그런 경에 우리가 브라우저로 자동화를 하면은 좋은데 마찬가지로 우리가이고 브라우저 사용해서 한번 진행을 해 볼게요. 자, 세 번째는요. 자, 이렇게 요청을 해 보도록 할게요. 마찬가지로이고 브라우저 사용해서 자, 우리이고 브라우저이 공식 사이트를 디버깅하라고 한번 요청을 해 보겠습니다.

자, 여러분 사이트 서비스 디버깅하셔도 되고요. 테스트 계정으로이 서비스를 처음 사용하는 사용자처럼 탐색을 해주고 주요 기능들 전부 다 확인해 주고 데스크탑 사이즈, 모바일 사이즈 전부 다 확인해 주고 정해진 스크립트 없이 뭔가 잘못된 부분이 있으면은 다양한 실험을 해보고서 스크린샷 남기고 나한테 리포트 해 달라고 한번 얘기를 해 보겠습니다. 자, 그래서 세 개의 프롬프트 이렇게 준비를 했고요. 우리가 전부 다 동시에 실행해 볼게요. 실행 실행 그리고 실행. 자, 그러면은 여러분이 원래 플레이 같은 거를 쓰면은 예상하는게 뭐예요? 자, 브라우저 세 개 뜨겠죠? 그럼 벌써 막 커서 나가고 막 컨트롤 가려고 하고 막 뭐가 된다 안 된다 난리가 나는데 지금 제가 이렇게 가만히 냅두면은요. 아무것도 지금 화면 위로 올라오는게 단 하나도 없습니다. 이미이고 브라우저 커맨드를 실행을 했는데도 아무런 반응도 없죠. 자, 그 이유가 뭐냐? 자, 이렇게 스페이스가 나눠져 있기 때문에 원래네 개였죠. 제가 원래 관리하고 있었던네 개 브라우저에서 추가로 이렇게 세 개가 뜬 거를 볼 수가 있어요.

자,이 첫 번째 거 한번가 볼게요. 자,이 친구 이제 황공편 찾는 거네요. 그죠? 자, 여기서 보면은 실제 타이핑하는 것도 다 보이고요. 커서가 어디에 있는지까지 보입니다. 자, 도쿄 도라고 검색을 했는데 지금 한 곳 잘못돼 가지고 아마 알아서 이제 디버 할 겁니다. 자, 이렇게 검색을 하기 시작하는 거를 볼 수가 있어요. 자, 여기서 테크오버를 누르게 되면은요. 저희가 이제 컨트롤을 가져가 가지고 확인할 수가 있게 되고요. 언제든지 사람이 통제권을 갖고서 멈추고 내가 작업을 할 수 있도록 설계가 돼 있습니다. 자, 마찬가지로 우리가 자, 유튜브가 보면은요. 제 유튜브 계정 이미 로그인 해 놨기 때문에 이렇게 알아서 유튜브 계정 들어가 가지고 확인하려고 하는 거를 볼 수가 있고요. 지금 여기에서 문제가 생긴게 제 이메일이 잘못됐거든요. 그래서 제가 직접 들어가서 로그인을 해서 사용해야 되는 계정을 보여 줄게요. 자, 제가 테이 컨트롤에서 로그인을 시켰거든요. 자, 그러면은 이제 자, 제 계정을 이렇게 코드 팩토리로 전환을 하고서 리턴투 에이전트 버튼을 누르게 되면은 알아서 AI가 다시 엑세스를 이렇게 가져갑니다.

그래서 이제 제 계정에 들어가서 영상들을 확인하려고 하는 거 볼 수 있죠. 자, 세 번째 한번 볼게요. 자, 세 번째 같은 경우에는 실제로 클릭들을 다 해 보면서 지금 작동이 되는지 안 되는지 전부 다 확인을 하고 있습니다. 자,이 과정 속에서 여러분이 여러분의 작업을 하고 싶으면 그냥 이렇게 여러분의 스페이스에 들어가서 작업을 돌려 주시면 되고요. 자, 여기서 하는 작업들은 전혀 우리 실행되고 있는이 일곱 개의 쓰레드에 아무런 영향도 가지 않습니다. 자, 그리고 독립적으로 굉장히 잘 실행되고 있기 때문에 자, 이렇게 진행도 독립적으로 알아서 잘 돌아가는 걸 볼 수가 있죠. 자, 리포트가 나오기 시작을 했어요. 자, 개시 8월 17일부터 7월 21일까지 나왔는데 조회수별로 이렇게 쫙 정리가 됐고요. 어떤 개선이 필요한지 뭐 이런 것까지 전부 다 확인을 해 주는 거를 볼 수가 있어요. 사실 저는 진짜 요즘 도움을 되게 많이 받고 있는데 그 유튜브 스튜디오에서 보여주는 차트들이 되게 많아요. 근데 그런 것들은 엑세스가 안 되거든요.

API에서. 그래서 우리가 이골라이트 같은 거를 쓰게 되면은요. 어떤 구간에 어떤 부분 때문에 이탈이 일어나는지까지 분석을 할 수 있어서 굉장히 유용합니다. 자, 그래서 이런 식으로 잘 나오는 걸로 볼 수가 있고요. 자, 원래 일곱 개였는데 작업이 끝나니까 알아서 지금 한 칸 정리한 거 볼 수 있죠? 그죠? 그래서 지금 여섯 개밖에 없습니다. 자, 오른쪽 위에도 이렇게 여섯 개라고 잘 뜨고 있는 거를 볼 수가 있고요. 그래서 정리까지 완벽하게 잘한다라는 거를 볼 수가 있어요. 자, 도쿄 어 비행기 지금 찾고 있는데 네, 역시나 작동 잘하고 있고요. 자, 테스트 아직까지도 잘 돌리고 있는 걸 확인할 수가 있죠. 예, 진짜 너무 좋습니다. 이거 어떻게 더 표현을 해 드려야 될지는 모르겠는데 심지어 무료이기 때문에 여러분 지금 당장 받아 가지고 일단 써 보기만 하시면은 얼마나이 바이브 코딩 삶이 바뀌는지 느끼실 수가 있을 거예요. 자, 테스팅 끝났고요. 자, 보니까 데이터 수집 메시지가 실제와 다르다라고 나오는 부분이 있고 윈도우즈 대기열의 빈출이 사일하게 페일한다라는 것들이고 뭐 이렇게 잘 다양하게 들어가 있는 거를 볼 수가 있어요.

자, 그래서 제가 테스팅할 때 이라이트가 특히나 좋았던 거는 뭐냐면요. 여러 페이지들을 우리가 테스트를 해야 될 때 사실 이게 브라우저 같은 경우에는 일대일로 붙잖아요. 그죠? 그래서 병렬로 하기가 힘들단 말이에요. 그런데 이걸 라이트 같은 경우는 그냥 쓰레드 여러 개 파 가지고 뭐 예를 들어서 한 여섯 개 쓰겠다라고 하면은 페이지들 다 리스터하게 한 다음에 여섯 개의 그룹으로 나눠라 페이지들을라고 하고서 각각 쓰레드에다가 우리가 브라우저 자동화 프롬프트를 넣어 버리면은요. 테스트하는 엔드투 엔드 테스트하는 시간이 16분로 줄어듭니다. 근데 알아서 독립적인 스페이스가 생기기 때문에 서로 개입도 안 하고 굉장히 우리가 그냥 LLM에 통합이 돼 있는 것처럼 우리가 사용자 경험을 가져갈 수가 있어요. 엄청나죠. 자, 마찬가지로 자, 우리가 항공편들도 전부 다 찾아냈고요. API 없이도 우리가 브라우저 그냥 자동화를 했기 때문에 API 없이도 이렇게 쉽게 우리가 최적화된 티켓들을 찾을 수 있는 거를 확인할 수가 있어요.

자, 우리가 한번 정리를 해 보자면 이골라이트가 강력한 굉장히 명확한데 우리가 이미 알고 있는 경로를 뭐 C에서 반복 검증하는 일들은 일반적인 테스트툴, 플레이라이트 같은 친구들이 훨씬 더 잘하는게 맞아요. 자, 그건 그냥 그대로 두면 되죠. 자, 왜냐면은 그 친구들을 우리가 그냥 코드로 저장을 해 놓고서 한번에 헤드레스로 다다닥 쏴 버릴 수가 있으니까요. 자, 그런데 이걸라이트가 제공해 주는이 편의성들은 정말 명확하다라는 겁니다. 자, 로그인된 실제 브라우저에서 우리가 매번 달라지는 상황을 여러 에이전트가 서로 방해하지 않고서 작업을 할 수 있도록 해 주는게 이글라이트가 가장 크게 해결해 주는 문제점이라는 거죠. 자, 그래서 단순히 그냥 웹을 검색하는 거 아니라 우리가 실제로 사용하던이 기록이 있는 브라우저 안에서 서로 방해하지 않고서 일을 하도록 우리가 시킬 수가 있고요. 오늘 제가 유튜브 분석하는 거랑 그리고 항공권 찾는 거랑 엔드엔드 테스트 한번 제가 보여 드렸는데 이거 외에도 여러분이 그냥 기본 브라우저를 이골라이트를 쓰게 되면은 어떤 에이전트를 쓰든 정말 백그라운드에서 브라우저 툴들이 돌고 있는 것처럼 경험을 하게 될 겁니다.

지금 보여 드린 것처럼 한 번도 브라우저가 제 커서를 뺏어 가지도 않았고요. 자, 이거라이트 어, 크롬 익스텐션이 아니라 실제 독립된 프로그램을 우리가 설치해서 사용을 해야 되기 때문에 여러분이 직접 제 영상 링크에 있는 영상 설명과 고정, 댓글에 있는 링크에 들어가 가지고 다운 받으시면 되고요. 무료입니다. 네, 무료이기 때문에 그냥 한번 써 보세요. 혹시라도 경험이 안 좋다라고 하면 그냥 앞플 남겨 주시면 됩니다. 진짜 근데 삶이 바뀔 거예요. 저는 이거밖에 안 써요. 이제 자, 제가 오늘 준비한 영상 여기까지고요. 영상이 좋았다면 구독과 좋아요, 알림 설정에 하이보이까지 해주시면 제가 더욱 더 좋은 영상으로 여러분을 찾아뵙도록 하겠습니다. 쏘as지.