북마크는 브라우저 익스텐션이 필요하다

파우더 (https://pouder.site) MVP를 출시하고 지인들에게 소개하며 피드백을 받아봤습니다.

북마크라는 특성상 URL을 입력해서 저장해야하는데 기존 브라우저 북마크는 별표시 하나 누르면 저장이 되니 그 부분이 불편하다는 의견이 많았습니다. 사실 저부터 귀찮단 생각을 하니...

기존 저장 방법

• 돌아다니다 맘에드는 웹페이지 발견

• URL 복사

• 파우더로 접속

• + 버튼 눌러서 URL 폼 열기

• 복붙하여 저장

위의 귀찮은 문제 해결을 위해 크롬 브라우저 익스텐션을 만들어보기로 합니다. 익스텐션은 처음 만들어봐서 오랜만에 열나게 공부를 하니 살이 빠지는 느낌입니다.

다행히 개념을 잡으니 제작 난이도자체는 어렵지않아서 2주만에 저장용 익스텐션을 만들고 출시했습니다. 이제 브라우저를 돌아다니면서 맘에드는 페이지를 보면 바로 파우더 버튼을 눌러 저장이 가능합니다.

구현할 익스텐션 저장 방법

• 돌아다니다 맘에드는 웹페이지 발견

• 브라우저 확장 프로그램 버튼 클릭

• URL확인 후 저장

개발 진행

Next.js의 노예가된 요즘이라 익스텐션을 만들때 가장 고민했던것이 VanilaJs로 짜냐 Next.js로 짜냐를 결정하는것이었습니다. Next.js자체로는 익스텐션을 구동할 수는 없고 약간의 트릭을 써야합니다.

Static Exports (https://nextjs.org/docs/app/building-your-application/deploying/static-exports)를 통해 SSR없는 output을 만들고 필요한 js는 public 폴더에서 구동합니다.

그러나 익스텐션 프로그램 특성상 패키지만 무거워지지 Next.js를 쓰는 이점이 없다고 판단하여 생으로 스크립트를 짜기로 합니다. 익스텐션 개발이야 어렵지 않은데 개념을 잡는데 시간이 많이 들었습니다.

Supabase기반 사용자 로그인기능이 가장 중요했는데 먼저 삽질을 한분이 있어서 어렵지 않게 해결했습니다. (https://beastx.ro/supabase-login-with-oauth-in-chrome-extensions)

출시

실제 개발에서 출시까지 대략 풀로 2주정도 걸렸네요. 출시 검토요청은 최대 30일이 걸린다고 떴지만 실제로 3일만에 빠른 출시가 되었습니다. 업데이트시 추가 검토시에도 3일정도 걸리는듯하네요.

세상 이렇게 편할 수 가 없네요. 지금은 단순 저장만 되지만 추후 검색이나 AI 분석시 Streaming 효과등 고도화를 진행할 예정입니다.

익스텐션은 밑에 링크를 통해 크롬 기반 브라우저에서 설치가 가능합니다. (로그인을 위해 파우더 가입이 필요합니다.)

https://chromewebstore.google.com/detail/pouder-chrome-extension/kmchfoknmhnlbkpklahifnppeonmhcca