🧠 문과생도 Cursor AI로 만든 첫 Chrome Extension 개발기(feat. 성장피터님 덕분에 한뼘 더 성장했습니다.)

### 1. 계기와 배경 🎓

저는 개발을 전공하지 않은 문과생이에요.

하지만 요즘 AI 도구들이 워낙 잘 되어 있어서,

"기획력만 있다면 나도 뭔가 만들어볼 수 있지 않을까?" 라는 마음으로 도전했어요.

이번 프로젝트의 목표는 Chrome Extension을 직접 기획하고 개발하는 것!

---

### 2. 기획, 기획, 그리고 또 기획 ✍️

처음에는 단순히 만들고 보는 것이 목표였지만, 수익화도 염두에 두면서 생각이 깊어졌어요.

- 사용자 니즈는 뭘까?

- 기존 익스텐션들과 어떤 차별점이 있을까?

- 내가 실제로 만들 수 있을까?

그래서 평소 잘 안 쓰던 Chrome 확장 프로그램을 둘러보고 설치해서 써보고 분석했어요.

그 과정에서 “인터넷을 더 잘 쓰게 해주는 유용한 액세서리 도구” 라는 확장 프로그램의 본질을 이해하게 됐고,

제가 평소 느끼던 불편함이나 니즈들도 이미 많은 사람들이 느끼고 있고 그것을 타겟으로 개발된 많은 크롬 익스텐션 프로그램들이 있다는 걸 알게 되었어요.

그래서 대부분 이미 존재하거나 아니면 경험 없는 제가 개발하기에는 난이도가 높더라고요 😅
여기까지 크롬 익스텐션에 대한 이해와 적응을 하고 기획안을 고민하느라 총 5시간 정도를 사용한 것 같습니다.

(처음부터 엄청난 크롬 익스텐션 프로그램을 만들 수 있다면 좋겠지만 다시 한 번 생각해보니 크롬 익스텐션도 거의 사용해 보지도 않았고 개발도 해 본 적 없는 내가 바로 그렇게 하겠다고 생각하는 것 자체가 엄청난 욕심이라는 생각이 들어서 마음을 내려놓고 배우자! 하는 마음으로 바꾸어 먹었습니다.)

그래서 스스로 감당할 수 있는 수준에서 경험을 쌓고자 Claude AI와 대화하면서 하이라이터 프로그램을 선택했습니다. 이 기획안 작성에만 약 1시간 30분 정도 썼습니다.


퀵 하이라이터(Quick Highlighter) 기능 및 사용 방법

이 확장 프로그램의 주요 기능은 웹 페이지에서 텍스트를 선택하고 하이라이트 표시하는 것입니다:

웹 페이지에서 텍스트 하이라이트

• 웹 페이지에서 텍스트를 선택(드래그)

• 선택한 텍스트에 오른쪽 클릭하여 컨텍스트 메뉴 열기

• '하이라이트' 메뉴에서 원하는 색상 선택 (노란색, 초록색, 파란색, 분홍색)

하이라이트 관리

• 주소창 옆에 있는 확장 프로그램 아이콘 클릭하여 팝업 열기

• 현재 페이지에 저장된 하이라이트 목록 확인

• 하이라이트 항목 클릭시 원본 위치로 이동

• 삭제 버튼으로 하이라이트 제거 가능

• 최신순/오래된순으로 정렬 가능

---

### 3. Claude AI + Cursor AI 콤보로 개발 시작! 💻

기획은 Claude와 함께 정리했고, PRD 문서(prd.md)를 만든 뒤,

Cursor에 붙여서 To Do List를 md 파일로 만들고

“이 순서대로 만들어줘”라고 순차적 개발을 요청했습니다.
Agent와 Claude 3.7 sonnet 기능으로 진행했습니다.
그리고 중간 중간 의문점이 있을 때만 Ask 모드를 사용했고요.

- 기획안 정리: 1시간 30분

- 실제 개발(Cursor와 함께): 약 2시간

- 개발 감 익히기: 스터디장님의 영상을 빠르게 복기하면서 제대로 따라하고 있는지 확인하면서 했습니다.

그리고 마지막으로 알려주신 대로 Chrome 확장 프로그램 관리 페이지에 업로드했어요.

하나 추가로 배운 점은 크롬 익스텐션은 로고 이미지가 필요하고(3가지 사이즈로) 그게 있어야 업로드가 원활하길래 Genspark를 통해 로고 이미지 만들고 3가지 사이즈로 변환해서 icon 폴더에 넣었더니 업로드 오류가 나지 않더군요.

---

### 4. 오류와의 전쟁... 그리고 해결! ⚔️

처음엔 순조로운 줄 알았지만… 역시 에러는 피할 수 없더라고요 😅

업로드 후 여러 오류가 발생해서

- F12 눌러 Console 캡처 또는 log 파일로 저장해서

- Cursor에게 오류 내용 전달 및 해결 부탁(정중하게 부탁하다가 계속 에러가 나서 나중에는 사무적으로 약간 힘주어 말하면서 부탁했습니다. ^^)

- 수정된 코드 다시 반영

이 과정을 약 1시간 30분 반복했습니다.
(개발보다 에러 수정이 더 오래 걸리는 느낌)

하지만 AI와 함께하니까 삽질의 깊이도 얕고 빠르게 정비 가능했어요!

결국 정상 작동하는 나만의 크롬 확장 프로그램 완성!! 🎉


결과물

---

### 5. 문과생도 개발할 수 있다는 깨달음 💡

이번 경험을 통해 확실히 느낀 건,

“기획이 명확하면 개발은 AI와 함께할 수 있다”는 점이에요.

그리고 기획안이 무엇보다 중요!!!

입코딩(Vibe Coding)도 진짜 가능한 시대가 왔습니다!

Plus로 Cursor AI 사용법도 좀 더 익히게 되었습니다.
(문과생 주제에 조금 더 친숙해진 느낌이랄까요...)

---

### 6. 앞으로는 이렇게 도전할 거예요 🚀

이번 경험으로 감을 잡았으니
스터디장님께 더 배우고 크롬 익스텐션 사용도 많이 하면서
새로운 크롬 익스텐션 프로그램을 기획해서 제대로 만들어보고
public하게 배포해서 수익화도 한 번 시도해보겠습니다. 💪

마케팅과 노출이 쉽지 않겠다는 점을 깨달았습니다.
그래도 한 번 시도해보면서 성장해 가야겠죠
---

## ✅ 마무리하며

처음엔 어렵게만 느껴졌던 개발,

하지만 Cursor와 함께라면 누구나 도전할 수 있다는 걸 직접 느꼈어요.

이번 경험을 통해 “나도 할 수 있다”는 자신감과

AI 도구의 진짜 힘을 체감하게 됐습니다.

고객 unmet needs 파악 + 기획력 + AI 도구 활용 = 유용한 익스텐션 프로그램 완성!

---

성장피터 스터디장님, 신세계를 열어주셔서 감사합니다. 🙇 🥰