ragedaisy

처음 만든 크롬 확장프로그램으로 유저 847명 모은 이야기

Notion을 하루에 열 번은 쓴다. 웹서핑하다 괜찮은 글 보면 클리핑해두는데, 공식 Web Clipper가 영 별로였다. 저장하고 나서 매번 태그 달고, 폴더 옮기고... 이 루틴이 하루에 5번씩 반복되니까 짜증이 났다.

구체적으로 뭐가 불편했냐면, 클립하면 일단 기본 데이터베이스에 저장된다. 그 다음에 Notion 열어서 그 페이지 찾아서, 태그 달고, 다른 데이터베이스로 옮기고. 이게 매번이다. 저장 버튼 한 번 누르면 끝나야 하는데 왜 이렇게 복잡한지 모르겠더라.

어느 날 "그냥 내가 만들까?" 싶었다. 확장프로그램은 한 번도 안 만들어봤는데.

일단 유튜브 튜토리얼부터 #

유튜브에서 "chrome extension tutorial" 검색해서 30분짜리 영상 하나 봤다. Manifest V3가 뭔지도 몰랐는데, 생각보다 별거 없었다. JSON 파일 하나랑 자바스크립트 몇 줄이면 기본 구조는 끝이더라.

{
  "manifest_version": 3,
  "name": "Quick Clip for Notion",
  "version": "1.0",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

manifest.json이 확장프로그램의 설정 파일이다. 여기서 권한이랑 기본 정보 설정하고, 나머지는 그냥 웹 개발이랑 똑같다. HTML, CSS, JavaScript. 별도로 배울 게 거의 없었다.

처음에 React 쓸까 하다가 접었다. 팝업창 하나 만드는데 번들러 설정하고, webpack.config.js 만지고 있을 시간에 그냥 바닐라 JS로 후딱 만드는 게 나았다. 어차피 팝업 UI가 복잡할 것도 아니고.

Notion API랑 씨름하기 #

진짜 문제는 Notion API였다.

처음에 OAuth 붙이려고 했다. 유저가 "Notion 연결" 버튼 누르면 자동으로 인증되는 그 흐름. 그런데 OAuth 쓰려면 서버가 필요하다. 콜백 받을 곳이 있어야 하니까. 서버 띄우면 월마다 돈 나가잖아. 사이드 프로젝트인데 적자 보기 싫었다.

좀 구린 방법을 썼다. 유저가 직접 Integration 토큰을 복붙하는 방식.

Notion에서 Integration 만들면 토큰이 나온다. 이걸 확장프로그램 설정 화면에 붙여넣으면 저장해뒀다가 API 호출할 때 쓴다. UX는 구린데 서버 비용 0원이니까. 처음 설정할 때만 귀찮고 그 다음부터는 문제없다. 나중에 바꾸지 뭐.

// 토큰 저장
chrome.storage.local.set({ notionToken: token });

// API 호출할 때 가져오기
const { notionToken } = await chrome.storage.local.get('notionToken');

Notion API 문서가 좀 부실하다. 공식 문서 보면 기본적인 건 나오는데, 실제로 쓰다 보면 모르는 게 많이 생긴다. "이 에러 왜 뜨지?" 싶은 게 한두 개가 아니었다. Stack Overflow랑 GitHub Issues 뒤지는 시간이 더 길었던 것 같다.

데이터베이스에 페이지 추가하는 API가 좀 복잡하다. properties 구조가 타입마다 다 다르다.

// 텍스트 속성
title: {
  title: [{ text: { content: "페이지 제목" } }]
}

// 태그 속성 (multi_select)
tags: {
  multi_select: [{ name: "태그1" }, { name: "태그2" }]
}

// URL 속성
url: {
  url: "https://example.com"
}

이거 파악하느라 3일 정도 걸렸다. 처음엔 구조를 잘못 이해해서 계속 에러 났다.

크롬 웹스토어 출시 #

개발은 일주일 정도 걸렸다. 퇴근하고 2-3시간씩 했으니까 실제로는 15시간 정도?

Chrome Web Store 개발자 등록비가 5달러다. 카드 긁고 나니까 뭔가 진지해진 느낌. 진짜 출시하는구나 싶었다.

스크린샷 준비하는 게 은근 귀찮았다. 스토어에 올리려면 스크린샷이 필수다. 1280x800 사이즈. 그냥 캡처하면 안 예쁘니까 Figma에서 목업 만들었다. 배경 넣고, 텍스트 넣고.

설명도 써야 한다. 영어로. 한국어만 하면 검색 노출이 안 된다고 해서 영어를 메인으로 쓰고 한국어를 밑에 추가했다.

제출하고 심사 기다리는 3일이 제일 길었다. 리젝당하면 어쩌나 괜히 긴장했다. 코드에 보안 문제가 있으면 리젝당한다는 글을 봐서. 그런데 그냥 한 방에 통과됨. 별거 없었다.

첫 유저 구하기 #

출시하고 나니까 좀 허무했다. 스토어에 올라갔는데 아무도 모름. 당연한 건데. 검색해도 안 나온다. 경쟁 확장프로그램들이 수두룩한데 내 건 맨 뒤에 있으니까.

레딧에 글을 쓰기로 했다.

r/Notion 서브레딧에 "내가 만든 거 써봐" 이런 식으로 쓰면 바로 묻힌다. 다운보트 맞고 끝이다. 노골적인 홍보글은 다들 싫어한다. 그래서 접근을 바꿨다.

"Notion으로 웹클리핑 어떻게 하세요?"

이렇게 시작했다. 내가 웹클리핑할 때 불편했던 점, 여러 방법 시도해본 경험, 지금 쓰는 워크플로우 설명하고. 마지막에 슬쩍 "직접 도구 만들어서 쓰고 있는데 꽤 괜찮다" 정도로 언급.

댓글에서 몇 명이 "뭔데? 링크 달라"고 해서 공유했다. 그게 첫 유저들. 한 10명 정도?

그 다음부터는 비슷한 질문 올라오면 댓글로 도움되는 답변 달고, 관련 있으면 자연스럽게 언급하는 식으로 했다. 매일 r/Notion 들어가서 새 글 확인하고. 이게 생각보다 시간이 많이 든다. 하루에 30분씩은 썼던 것 같다.

지금 상황 #

3개월 지난 지금 847명이 설치해서 쓰고 있다. 대박은 아닌데 뿌듯하다.

레딧에서 종종 "이거 좋다"는 댓글 달릴 때마다 기분 좋다. 버그 리포트 올라오면 스트레스 받긴 하는데, 그래도 쓰는 사람이 있다는 증거니까.

주간 활성 유저는 200명 정도. 설치하고 안 쓰는 사람이 많긴 하다. 그래도 200명이 매주 내가 만든 걸 쓴다니까 신기하다.

아직 무료다. 유료 기능 넣을지 고민 중이다. AI로 자동 태그 달아주는 기능 같은 거. 그런데 847명한테 갑자기 돈 내라고 하기가 좀 그래서 일단 더 키우고 생각해봐야지.

확장프로그램 만드는 거 생각보다 어렵지 않다. 웹 개발 할 줄 알면 일주일이면 기본적인 건 만들 수 있다. 진짜 어려운 건 만든 다음이다. 아무도 안 쓰는 확장프로그램은 많다. 쓰는 사람 모으는 게 더 어렵다.