소개
웹 분야는 전혀 해본 적이 없는 비 개발자와 비슷한 수준의 현직 개발자입니다.
성장 피터님의 '크롬 익스텐션 만들기'가 과연 가능할 까 싶었는데 OT를 하고 난 이후
자신감이 생겼습니다.
생성하는 방법은 의외로 간단해서 Cursor AI를 이용하면 충분히 될 것 같아서 도전을 해봅니다.
평소에 네이버 웨일 브라우저를 즐겨서 사용합니다.
이유는 퀵서치 기능이 내장되어 있다는 겁니다. 텍스트를 드래그하면 간단한 팝업이 실행되고 자동 번역 또는 검색을 합니다.
더 보기를 하면 사이드 바에 다양한 기능이 구현되어 페이지를 벗어나지 않고 빠르게 검색할 수 있는 게 장점입니다.
아쉽게도 크롬 브라우저는 이 기능이 없어 직접 만들어서 사용해 보기로 했습니다. 기왕 구현하는 김에 AI에서 검색한 내용을 보여주는 게 좋을 것 같아 Gemini API를 이용했습니다.
진행 방법
AI 툴은 Cursor AI를 이용했고 API는 Gemini 1.5-flash를 연 결했습니다.
ChatGPT를 이용해서 PRD 문서를 만들고 작업을 진행했습니다.
성장 피터님이 공유해 준 PRD Builder을 이용해서 개발 문서를 만들어 봅니다.
아래의 조건에 맞는 PRD를 만들어 주세요.
1. 네이버 웨일 브라우저의 퀵서치 기능을 구현하고자 합니다.
2. 페이지에서 특정 텍스트를 드래그 하면 아이콘이 실행됩니다.
3. 사용자가 아이콘을 클릭하면 팝업 형태로 검색결과를 표시합니다.
4. 검색은 Gemini API를 이용합니다.
5. 팝업에서 더보기를 누르면 사이드 패널을 실행하고 세부 내용을 표시합니다.
# 팝업의 답변의 예시는 아래와 같습니다.
'감성' 텍스트를 드래그 합니다.
답변 :
- 한글의미 : 외부 자극에 대한 주관적인 느낌
- 한자표기 : 感性 (느낄 감, 성품 성)
- 영어 번역 : 문맥에 따라 Emotion, Sentiment,
PRD를 만들고 Cursor AI에게 todo.md 파일을 만들도록 지시합니다.
PRD.md를 분석하고 todo list를 만들어 보세요. todo.md 파일을 생성합니다.
Cursor AI에게 todo 리스트를 참고해서 만들어 달라고 지시하면 됩니다.
그전에 가장 중요하게 해야 할 게 있습니다 User Rules를 세팅하는 겁니다.
공유해 주신 덕분에 잘 사용하고 있습니다.
todo 리스트를 이용해서 개발을 진행해 줍니다. 폴더와 관련 파일을 자동으로 만들어 줍니다.
mode는 Agent로 하고 Claude 3.7을 선택했습니다.
일단 구현이 잘 되는지 모르겠지만 제작한 프로젝트를 확장 프로그램에 등록했는데 문제는 없습니다.
단계별로 기능을 하나씩 구현합니다. 처음에는 Agent 모드로 진행하다가 소스가 길어져서 Ask 모드를 변경하면서 진행했습니다. 생각한 데로 잘 만들어졌습니다.
개발한 기능은 텍스트를 선택하면 아이콘을 자동으로 띄우고 클릭하면 팝업창이 실행됩니다.
번역과 검색 탭으로 구분했고 단순한 번역과 부가 설명까지 참고할 수 있도록 했습니다.
문제는 지금부터 발생됩니다.
더 보기 버튼으로 사이드 패널 실행을 하는데 소스가 꼬이기 시작하면서 구현이 되지 않습니다.
어느 순간에는 아이콘 클릭 기능까지 작동 안 해서 프로젝트를 새로 만들었습니다.
PRD 문서를 만든 덕분에 두 번째 만들 때는 짧은 시간(1시간?) 안에 만들었습니다.
두 번째 만들 때는 소스를 리팩토링하고 기능별로 파일을 생성하게 했습니다.
사이드 패널에 구글 페이지 구현이 되지 않는 부분은 개발 문서를 참고 시켰습니다.
@google sidePanel 문서를 참고하고 사이드 패널 검색에 google.com 페이지 를 표시하는 방법을 수정하세요.한참을 검색하고 고민하더니 소스를 수정해 줍니다.
이렇게 하니 기능이 제대로 구현이 되었습니다. 탄력을 받더니 유튜브 검색도 한번에 해결을 해버립니다.
사이드 패널에서 콘텐츠를 클릭하면 또 다른 문제가 발생합니다. 이건 다음 과제로 남기고 이번 주 진행은 여기까지입니다.
결과와 배운 점
경험은 무시할 수 없다고 개발 문서를 보는 습관입니다. 우연히 발견했지만 개발 문서 첨부하는 기능은 꽤 좋은 것 같습니다.
Cursor AI에서 Agent 모드로 진행하면 소스를 바로 수정해버리기 때문에 되돌리기가 쉽지가 않습니다. 중요한 기능 구현할 때마다 백업을 했는데 이것도 귀찮아서 Visual Studio Code와 연동해서 되돌리기(Undo, Ctrl+z) 기능을 이용했습니다.
사이드 패널에서 콘텐츠 차단을 해결해야 하는데 웹쪽 개발은 아직 어렵네요. 공부를 더해야겠습니다. 다음 과제는 API를 직접 등록하고 배포까지 해보면 좋겠습니다.