AI와 함께한 서비스 개발기 : NotiNote 크롬 익스텐션

안녕하세요 Zack입니다.

지난 몇일간 Claude를 이용해서 크롬 익스텐션을 개발했었는데,

오늘 크롬 웹 스토어에 런칭이 되었습니다.

AI를 적극적으로 사용해서 개발한 첫 프로젝트였는데,

전반적인 사용 후기를 공유해 드릴께요.

클로드 artifacts를 보고 놀람

Artifact를 보고 충격에 빠졌죠. 이제 왠만한 코딩은 다해주겠다 싶었습니다.

AI가 가이드해주는대로 한 번 버스 타보자! 라는 생각에

일부러 익숙하지 않은 크롬 익스텐션을 골랐습니다.

기능은 크게 3가지 였는데

1. 새로운 탭을 열었을때 노트를 보여주고, 사용자가 입력한 메모를 저장한다.

2. 매 1시간 마다 크롬 웹 노티피케이션을 생성하고, 메모의 중요도를 가중치로 두고 랜덤픽한 하나의 메모를 노티로 알려준다.

3. 옵션 페이지에서 설정을 변경할 수 있게 한다.

처음엔 가볍게 새로운 탭을 열었을 때 화면부터 구성해 봤습니다.

어떻게 확장프로그램을 개발하면서 사용할 수 있는지까지 잘 알려주던구요.

다음은 웹 노티피케이션을 만드는 부분을 진행하려고 또 질문을 던집니다.

Artifect는 멋진 기능이었지만, 크롬 익스텐션을 만드는 코드는 실행을 할 수가 없으니,

어쩔 수 없이 이렇게 코드 조각으로 나왔습니다.

그 뒤로 아래와 같은 질문들을 하면서, 이 한 chat에서 무료버전에서 사용할 수 있는 토큰수를 넘겨버렸습니다.

chrome.runtime.onInstalled.addListener 이걸 어디서 불러야돼? background? content?

background는 언제 실행돼?

sendNotification은 어디서 불러야돼? popup?

Unable to download all specified images. 이 에러가 발생해

newtab에 있던 react state를 다시 열어도 그대로 유지하려면?

거의 핵심 로직들을 클로드의 가이드 아래 손쉽게 구현했고,

이제는 다시 익숙한 frontend작업들이 이어졌습니다.

초기엔 포스트잇 같은 UI를 가져갈까 해서 오른쪽 아래가 살짝 접힌 UI를 그려달라고 했는데

뭔가 접히긴 접혔는데, 반대로 접힌 ㅎㅎ

이걸로 씨름하다가 결국 이 UI를 적용하지 않기로 하면서 폐기했습니다.

한번에 해결하지는 못해도, 결국 답을 찾아감

노티가 발생하면 종소리를 내는걸 원했는데, chrome notification api에는 그런 옵션이 없었어요.
background쪽에서 Audio를 이용해 재생하려 했더니 에러가 나서 다시 Claude를 찾았습니다.

처음 답변 대로 코딩을 했지만 동작하지 않았습니다.

바로 오류 내용을 넣으니 다른 방법을 소개해 주더군요.

아티펙트는 UI뿐만 아니라 코드도 따로 보여주니깐 답변의 가독성이 더 좋아지는 것 같습니다.

AI와 함께 구현한 노티노트의 모습입니다.

옵션페이지에서 설정을 변경할 수도 있구요.

AI가 가이드하는 개발 경험, 제 점수는요?

마치 골프칠때 캐디가 있는듯한 느낌이랄까요?

처음 보는 오류를 만났을 때, 이전엔 검색하고, github, stack overflow, api documentation을 뒤졌겠죠.

클로드는 설명과 함께 코드를 생성해주니, 초행길을 네비를 따라 가는 느낌이었습니다.

실제로 지난 주 금요일에 시작해서 주말은 건너뛰고 월요일에 작업을 했으니

실제 작업시간은 2일 정도구요.

오늘은 런칭에 필요한 마켓 등록작업을 했습니다.

마켓에 등록한 영문도 역시 AI를 통해서 생성했구요.

저는 크롬 익스텐션이 솔플러가 할 수 있는 매력적인 아이템이라고 생각되어서,

계속해서 AI와 함께 만들어갈 생각입니다.

약간의 광고

지금 Gumroad에서 노티노트의 lifetime license를 무료로 판매하고 있습니다.
지속적인 업데이트 후에 유료로 전환될 예정이니, 미리 구매해 두시면

평생 무료로 사용하실 수 있습니다. 아래 링크를 눌러서 구매하세요.

노티노트 다운로드 링크는 요기