그록 자동화 확장프로그램 - 바이브 코딩으로 크롬 확장 그록 자동화툴 프로그램 만들기

 

제작 동기: 반복 작업에서 벗어나기

최근 Grok의 이미지 생성 및 영상 변환 기능이 강력해지면서 많은 작업을 하고 있습니다.

하지만 grok.com/imagine 페이지에서 이미지를 하나씩 업로드하고, 영상 변환을 기다렸다가 다시 다운로드하는 과정은 상당한 인내심을 요구합니다. 만약, 100개의 영상을 만든다면 이 과정을 100번 반복해야 합니다.

또한, 다운로드시 순차적으로 저장되지 않을 뿐더러 파일명을 순차적으로 일일히 바꾸는 것 또한 상당히 귀찮은 일입니다. 그래서 이 단순하고 반복적인 업무 시간을 줄이기 위해 AI와 대화하며 바이브 코딩으로 크롬 전용 확장 프로그램을 제작해 보았습니다.

프로젝트의 핵심: 바이브 코딩 프롬프트

이 툴의 핵심은 자동화 제작으로 인해 사용자 경험을 높이는 것이었습니다. 순차적으로 이미지를 첨부한뒤 프롬프트를 입력한 후 영상 생성이 완료되면 지정된 폴더에 오름차순 넘버링으로 저장되는 옵션까지 자동화를 목표로 삼았습니다.

작업 방법

1.먼저 사용한 툴은 제미나이의 Canvas를 이용하여 제작하게 되었습니다.

2.제가 AI에게 던진 첫 번째 설계 프롬프트는 다음과 같습니다.

"Grok.com에서 이미지 업로드, 영상 변환, 다운로드 과정을 자동화하는 크롬 확장 프로그램을 만들어줘. 우측 사이드 패널에서 작동해야 하며, 최대 100개의 이미지를 드래그 앤 드롭으로 처리하고 줄바꿈된 프롬프트와 매칭되어야 해."

단순한 명령이었지만, AI는 이를 바탕으로 크롬 확장 프로그램의 기본 구조인 manifest.json부터 사이드 패널 UI 구현을 위한 HTML/JS 코드를 순식간에 생성해 주었습니다.

그리고 AI가 생성한 파일은 다음과 같습니다.

생성되는 파일 목록

1. manifest.json: 확장 프로그램의 권한과 기본 설정을 담당합니다.

2. sidepanel.html: 사용자에게 보여지는 UI (Tailwind CSS 포함)와 조작 로직이 포함된 메인 파일입니다.

3. background.js: 확장 프로그램 아이콘 클릭 시 사이드 패널이 열리도록 하는 서비스 워커입니다.

4. content.js: 실제 https://www.google.com/url?sa=E&source=gmail&q=grok.com 웹페이지 내에 삽입되어 클릭, 텍스트 입력, 다운로드 등을 자동화하는 스크립트입니다.

시행착오와 해결 과정

그리고 항상 바이브 코딩은 한 번에 완벽한 결과를 내놓지는 않습니다. 제작 과정에서 몇 가지 기술적 난관이 있었고, 이를 AI와 실시간으로 소통하며 해결했습니다.

• DOM 요소 인식 문제: Grok 사이트의 업데이트로 인해 입력 프롬프트와 버튼의 셀렉터(Selector)가 잡히지 않는 오류가 있었습니다. 실제 페이지의 개발자 도구를 열어 오류 코드와 태그들을 AI에게 전달했고, AI는 더 견고한 querySelector 로직을 다시 짜주었습니다.

• 비동기 처리와 딜레이: 영상 변환이 완료되기 전에 다음 단계로 넘어가는 문제가 발생했습니다. 이를 해결하기 위해 랜덤 지연(Random Delay) 기능을 추가하여 15~20초 사이의 유연한 대기 시간을 설정, 봇 탐지를 우회하고 안정성을 높였습니다.

• 사이드 패널 유지: 브라우저를 이동해도 작업이 끊기지 않도록 chrome.sidePanel을 최적화하는 과정을 거쳤습니다.

추후 사이트 업데이트로 인해 입력 태그와 버튼 태그가 바뀌게 되더라도 Ai에게 변경된 태그만 잘 전달한다면 추후에도 사용하는 데는 문제가 없을 것으로 보입니다.

'WK Grok Automation'의 주요 기능

완성된 툴은 단순한 매크로 이상의 성능을 보여줍니다.

'WK Grok Automation' 크롬 확장 프로그램

• 사이드 패널 인터페이스: 브라우저 우측에 상주하며 언제든 작업을 제어할 수 있습니다.

• 일괄 프로세싱: 이미지 100장과 프롬프트 리스트를 한 번에 넣으면, 툴이 알아서 순차적으로 작업을 수행합니다.

• 프롬프트 대기열: 실시간으로 상태 표시를 확인하고, 전체 몇개를 활성화 했는지 알 수 있습니다.

• 실시간 로그 시스템: 현재 영상이 몇 퍼센트 변환되었는지, 대기열에 몇 개가 남았는지 하단 로그창을 통해 실시간으로 확인할 수 있어 매우 직관적입니다.

• 정지: 중단하고 싶을때 언제든지 멈출 수 있습니다.

마치며: 바이브 코딩이 가져온 변화

예전 같으면 개발자에게 의뢰하거나 아니면 독학으로 며칠 밤을 새우며, 공부해야 했을 크롬 확장프로그램 툴 제작을 단 몇 시간 만에 끝냈습니다.

사실 오류 수정을 위한 AI 대화 때문에 1시간 넘게 걸리게 되었지만, 대화 시간을 빼면 30분도 채 걸리지 않는 시간이었습니다. 저는 수동으로 영상 변환 버튼을 누르는 대신, 자동화 툴을 켜두고 다른 창의적인 업무에 집중할 수 있게 되었습니다. 코딩을 몰라도 프롬프트 구조만 짤 수 있다면, 누구나 자신만의 업무 도구를 만들 수 있는 시대가 왔음을 알려주는 계기가 되었습니다.