소개
이런 걸 올려도 되는 건지.. 모르겠지만 여튼 해본 걸 공유하고 저 개인적으로도 기록하려고 올려봅니다 ㅎ
크롬익스텐션 첫 사례 듣고 따라해보았습니다.
저는 원래 미디어아트를 하고 싶었으나.. 스터디가 사라지는 바람에 뭘 할지 보다가 최근에 Cursor로 뭘 하나 만들긴 했는데 그다음에 어떻게 해야 할지 몰랐던 기억이 있어, Cursor로 크롬익스텐션 개발 스터디를 한번 신청해보았습니다.
그런데 사례발표를 너무 재미있게 봐서 한번 따라해보고 싶었습니다.
하지만 여전히 뭘 만들지는 모르겠더군요.
뭘 만들지..? (진행방법)
1️⃣ 기획 아이디어 - ChatGPT
그래서 챗지피티한테 물어보았습니다.
프롬프트
간단한 크롬익스텐션을 개발해보고 싶어요. 아주 간단하게 개발할 수 있는 크롬익스텐션 아이디어를 주세요.
위 결과가 나와서 그중 2번, '포커스 모드 익스텐션'을 하기로 했습니다.
포커스모드 익스텐션을 하겠다고 하자, 지피티가 간단히 기능과 파일 구조, 코드, 실행 방법을 알려줬습니다.
이제 저는 스터디장님께서 만들고 공유해주신 GPTs PRD 빌더에 넣을 내용을 정리하고 싶었습니다. 그래서 스터디장님께서 보여주신 사례에서 PRD 빌더에 넣은 프롬프트를 봤습니다.
그런데 문득 궁금해졌습니다. 스터디장님은 사이드패널에서 열리는 크롬익스텐션으로 요구사항을 작성하셨는데, 포커스모드 익스텐션에서도 그게 좋은 걸까?
2️⃣ 아이디어 구체화
그래서 또 지피티를 일하게 했습니다. 뒷 과정은 좀 지루할 수 있으니 거두절미하고, 사이드패널 ui를 가져갈지 말지에 대한 지피티와의 논의를 이어가는 데 사용한 저의 프롬프트만 공유하겠습니다.
당신은 10년 경력의 프로덕트 매니저예요. 해당 익스텐션이 사이드패널에서 열리는 게 좋은 아이디어인지, 아니면 다른 좋은 아이디어가 있는지 알려주세요. 사용자의 ux를 고려해 익스텐션을 열고닫는 방식과 ui를 제안해주세요.
나는 개발을 모르는 경영자예요. 기획자에게 다시 묻습니다. 사이드패널 개발과 새탭 개발을 둘 다 하고 싶지만 만약 개발 시간이 오래걸린다면 mvp 수준으로 꼭 필요한 것만 만들고 싶습니다. 이에 대해 의견을 주세요.
하지만 크롬익스텐션 특성상 현재 페이지를 벗어나서 뭔가를 조작하는 건 불편한 것 같아요.
자 그러면 사이드패널만 개발하는 것으로 다시 기능과 ui를 정리해주세요.
사용자가 차단으로 지정한 사이트에 들어가면 페이지 리디렉션보다 "Focus!"라는 팝업이 뜨는 형태는 어떨까요?
지피티와 이야기나누며 결국엔 그냥 사이드패널로 하는 걸로 결정했습니다.
우선 이번 시도를 성공하는 게 목표였거든요. 가장 간단하게, 변수를 많이 두지 않고 성공시키고 싶었습니다. 왜냐면 그래야 또 해보고 싶은 생각이 계속 들 것 같았거든요. 그래서 새로운 시도를 하기보다는 적당히 조금만 변경한 것으로 해보자, 했습니다.
그리하여 지피티가 제안해준 기능, ui, 흐름과 스터디장님의 프롬프트를 참고해 PRD 생성기에 넣을 프롬프트를 정리했습니다.
아래 조건에 맞는 PRD 만들어주세요.
1. 사이드 패널에서 열리는 크롬 익스텐션
2. 단축키(cmd+\) 버튼으로 사이드 패널이 열리고 닫힘
3. H1으로 "Focus Mode” 라고 되어 있음
4. 사용자가 특정 사이트를 추가하면, 해당 사이트에 접속할 때 경고 메시지가 표시됨. 경고메시지는 “이 사이트는 포커스 모드에서 차단되었습니다” 경고메시지 아래 “30분 동안 허용” 버튼 제공.
5. 사용자가 차단한 사이트에 들어가면 팝업 나타남: “Focus!” 라는 메시지와 “30분 동안 허용”버튼, “이 사이트 차단 해제”버튼.
6. 사용자가 현재 방문중인 사이트를 원클릭으로 차단 가능
7. 사용자가 차단할 사이트 목록을 추가/삭제할 수있음.
그리고 그렇게 받은 PRD를 Cursor에 넣었습니다.
3️⃣ 제작 및 완성
스터디장님의 방식을 따라했습니다.
먼저 prd.md 마크다운 문서를 생성하고,
prd.md를 참조해 todo.md 파일을 만들어달라고 했습니다.
agent 모드로 실행했고, claude sonnet 3.7을 사용했습니다.
그런데 중간에 오류 수정을 하면서는 claude sonnet 3.7일 작동하지 않아 3.5를 사용하기도 했습니다.
manifest.jason 파일 오류, 아이콘 오류 등 몇 번의 오류를 거쳐 아래와 같이 완성했 습니다.
결과와 배운 점
실제로 사용하기에는 보완할 점이 아주 많습니다. 아니 가장 큰 문제는 보완을 해도 제가 안쓸 것 같습니다 ㅎㅎㅎ 하지만 처음에 목표로 했듯이 성공은 했다는 것에 만족합니다.
그리고 이렇게 쉽게 만들어준다니 다시금 너무 놀랍습니다.. 오류 메시지를 캡처해 넣어도 직접 오류를 수정해주는 게 정말 대단합니다.
깨달은 점은, 다음과 같습니다. 뭔가 새로운 인사이트는 아니고 기본적인 것들 같습니다.
만들고 싶은 제품이 있다면 그에 대해 명확한 상을 갖고 일을 시킬수록 좋다.
다른 ai 툴도 마찬가지지만 사람 일시키는 것과 비슷합니다. 내 마음에 들게 하려면 요구사항이 명확해야 하고, 요구사항을 명확히 해야 하려면 내가 뭘 만들지를 정확히 알아야...
코딩을 알수록 쓰기 좋은 툴이다.
몰라도 쓸 수야 있지만.. 잘 모르면 mvp 정도만 만들 수 있을 것 같습니다. 그래도 mvp라도 만들 수 있다니 대단하네요.
다음에는 만들고 싶은 걸 더 명확히 정해서 조금 더 고도화된 결과물을 만들어보고 싶습니다.
처음 올려보는 거라 이렇게 올리는 건지, 이런 내용 올려도 되는 건지 잘 모르겠네요. 보완점 있으면 알려주세요!
읽어주셔서 감사합니다.