그록 자동화 확장프로그램 - 바이브 코딩으로 크롬 확장 그록 자동화툴 프로그램 만들기
제작 동기: 반복 작업에서 벗어나기 최근 Grok의 이미지 생성 및 영상 변환 기능이 강력해지면서 많은 작업을 하고 있습니다. 하지만 grok.com/imagine 페이지에서 이미지를 하나씩 업로드하고, 영상 변환을 기다렸다가 다시 다운로드하는 과정은 상당한 인내심을 요구합니다. 만약, 100개의 영상을 만든다면 이 과정을 100번 반복해야 합니다. 또한, 다운로드시 순차적으로 저장되지 않을 뿐더러 파일명을 순차적으로 일일히 바꾸는 것 또한 상당히 귀찮은 일입니다. 그래서 이 단순하고 반복적인 업무 시간을 줄이기 위해 AI와 대화하며 바이브 코딩으로 크롬 전용 확장 프로그램을 제작해 보았습니다. 프로젝트의 핵심: 바이브 코딩 프롬프트 이 툴의 핵심은 자동화 제작으로 인해 사용자 경험을 높이는 것이었습니다. 순차적으로 이미지를 첨부한뒤 프롬프트를 입력한 후 영상 생성이 완료되면 지정된 폴더에 오름차순 넘버링으로 저장되는 옵션까지 자동화를 목표로 삼았습니다. 작업 방법 1.먼저 사용한 툴은 제미나이의 Canvas를 이용하여 제작하게 되었습니다. 2.제가 AI에게 던진 첫 번째 설계 프롬프트는 다음과 같습니다. "Grok.com에서 이미지 업로드, 영상 변환, 다운로드 과정을 자동화하는 크롬 확장 프로그램을 만들어줘. 우측 사이드 패널에서 작동해야 하며, 최대 100개의 이미지를 드래그 앤 드롭으로 처리하고 줄바꿈된 프롬프트와 매칭되어야 해." 단순한 명령이었지만, AI는 이를 바탕으로 크롬 확장 프로그램의 기본 구조인 manifest.json 부터 사이드 패널 UI 구현을 위한 HTML/JS 코드를 순식간에 생성해 주었습니다. 그리고 AI가 생성한 파일은 다음과 같습니다. 생성되는 파일 목록 manifest.json : 확장 프로그램의 권한과 기본 설정을 담당합니다. sidepanel.html : 사용자에게 보여지는 UI (Tailwind CSS 포함)와 조작 로직이 포함된 메인 파일입니다. background.js : 확장 프로그램 아이콘...