🚀 비개발자의 크롬 확장프로그램 도전기: GPT와 커서(Cursor)로 시간 단축하기

안녕하세요! 😊 저는 비개발자로서 AI를 활용하며 다양한 자동화를 시도하고 있어요. 하지만 기존에는 시간이 너무 많이 걸리고, 끈기가 필요한 작업들이 많았어요. 중간에 포기하는 분들도 종종 봤고요.

그러던 중 성장피터님의 ‘커서를 활용한 크롬 확장프로그램 만들기’ 스터디를 청강으로 듣게 되었고, GPT와 커서를 활용하면 시간을 단축하고 효율을 높일 수 있다는 사실을 깨달았어요! 🤩
이 게시글에서는 GPT로 PRD(제품 요구사항 문서)를 생성하고, 커서로 실제 실행한 과정을 공유하려고 합니다.

🛠 1. GPT를 활용한 PRD(제품 요구사항 문서) 생성

스터디에서는 먼저 GPT를 활용해 크롬 확장프로그램의 PRD를 자동 생성하는 방법을 배웠어요.
아래처럼 명확한 요구사항을 프롬프트에 입력하면, GPT가 자동으로 PRD를 만들어줍니다.

📌 입력한 프롬프트:

아래 조건에 맞는 PRD 만들어주세요.  
1. 사이드 패널에서 열리는 크롬 익스텐션  
2. 단축키(cmd+\) 버튼으로 사이드 패널이 열리고 닫힘  
3. H1으로 "Fast Translator" 라고 되어 있음  
4. 입력 Field(Form)와 출력 Field가 있음  
5. 입력 field에 한글을 입력하면 출력 필드에 바로 영어로 번역됨  
6. 입력 필드에 영어를 입력하면 출력 필드에 바로 한글로 번역됨  
7. DeepL API 로 작동, API 키는 코드에 하드코딩  

📑 GPT의 PRD 응답 내용 (요약)

💡 Fast Translator - Chrome Extension

✅ 프로젝트 개요:
Fast Translator는 사이드 패널에서 동작하는 번역기 크롬 확장프로그램입니다.
사용자는 Cmd + \ 단축키를 눌러 패널을 열고, 텍스트를 입력하면 자동으로 번역됩니다.

✅ 핵심 기능:

✅ 기술 스택:

• 플랫폼: Chrome Extension (Manifest V3)

• 프론트엔드: HTML, CSS, JavaScript

• 번역 API: DeepL API

• 단축키 등록: manifest.json에서 설정

⚡ 2. 커서(Cursor)에서 실행하기

이제 GPT가 생성한 PRD를 바탕으로 커서(Cursor)를 활용하여 직접 실행해 보았습니다.

📌 커서에서 실행한 과정:
1️⃣ GPT가 만든 PRD 내용을 todo.md에 정리
2️⃣ 커서에서 manifest.json을 생성하여 확장프로그램의 기본 구조 설정
3️⃣ popup.html과 popup.js를 작성하여 UI 및 번역 기능 구현
4️⃣ 실제 번역 기능을 테스트하고 오류 수정

📷 (스크린샷: 커서에서 실행하는 장면 추가)

ALT

한국 음악과 함께 검은 색 스크린의 스크린 샷

결과적으로, GPT로 빠르게 PRD를 작성하고, 커서에서 실행하며 개발 프로세스를 시각화할 수 있었습니다. 아직은 여기까지만 배웠지만 금방 활용 가능할거라고 확신합니다.

🎉 3. 경험하면서 느낀 점

✅ 1) "비개발자도 충분히 할 수 있다!"
막연했던 개발 과정이 GPT와 커서를 활용하면서 훨씬 쉬워졌어요.

✅ 2) 자동화의 위력!
기존에는 기능을 하나하나 정의하고 문서를 작성하는 데 많은 시간이 걸렸어요.
하지만 GPT가 초안(PRD)을 생성해 주니, 개발에 바로 집중할 수 있었습니다.

✅ 3) "실패해도 괜찮다!"
처음에는 코드 오류도 나고, 실행이 안 되기도 했지만,
한 걸음씩 수정해 나가면서 배우는 과정 자체가 즐거웠어요.

💡 4. 여러분도 도전해 보세요!

비개발자도 AI와 자동화를 활용하면 충분히 원하는 서비스를 만들 수 있습니다.
혹시 시작이 막막하셨다면, GPT와 커서를 활용한 크롬 확장프로그램 제작을 한번 시도해 보세요!

📌 다음 목표:
✔ 스트림릿에서 배포하기
✔ 커서에서 더 다양한 자동화 테스트 진행하기
✔ DeepL API 키를 안전하게 관리하는 방법 학습하기