[퇴사로그] ep1. 노션 히스토리를 확인할 수 있는 크롬 익스텐션 개발기

왜 크롬 익스텐션인가?

회사를 떠나며 새로운 프로덕트를 만들어보고 싶었다. 빠르게 MVP를 구현하고 시장에 내놓아 PMF(Product Market Fit)를 찾을 수 있는 제품을 고민하던 중 크롬 익스텐션이 눈에 들어왔다. 개발 복잡도가 상대적으로 낮고, 배포 및 업데이트가 간단하며, 무엇보다 기존 서비스 위에서 부가가치를 제공할 수 있다는 점이 매력적이었다.

 

 

아이데이션 과정

1. 시장 기회 탐색
초기 사용자 확보를 위해 구글, 노션 등 일상적으로 사용하는 서비스들과 연동 가능한 제품을 구상했다. 이미 사용자 베이스가 확보된 플랫폼 위에서 부가 기능을 제공하면 진입장벽이 낮아질 것이라 판단했다.

2. 전문성 활용
개인적으로 노션을 사용한 지 5년이 넘었고, 업무용으로도 사용한 경험이 있어 pain point를 직접 경험하고 있었다. GPT와의 아이데이션 세션을 통해 노션 관련 익스텐션들의 기능을 분석하고 시장 공백을 찾아갔다.

3. 핵심 문제 발견
노션의 실시간 동기화는 스타트업과 팀 단위에서 널리 사용되는 강점이지만, 히스토리 기능이 이전 버전 복원만 가능하고 변경 사항 비교가 불가능하다는 치명적인 한계가 있었다. 특히 다중 사용자 환경에서 "누가 언제 무엇을 바꿨는지" 추적하기 어려운 점이 큰 문제였다.

4. 제품 로드맵 설정

히스토리 추적 기능을 MVP로 시작하여, 향후 팀 단위 협업에 유용한 기능들을 단계적으로 추가하는 전략을 수립했다. 개인 사용자부터 팀, 기업 사용자로 확장하는 bottom-up 접근법을 택했다.

 

 

 

주요 페인포인트

번호	페인포인트	설명
P1	변경 이력 확인 불가	노션의 기본 히스토리는 페이지 전체 레벨에서만 날짜·컨텐츠 로그를 제공하여, 특정 블록의 변경 사항을 추적하기 어렵다.
P2	수동 비교의 번거로움	변경 전후 텍스트를 복사·붙여넣어 수동으로 비교해야 하는 프로세스로 인한 시간 소모와 human error 발생
P3	검색·필터 기능 부재	과거 수정 내역이 누적되면 원하는 시점·수정자를 찾기 어려우며, 키워드 기반 검색 기능이 없어 정보 접근성이 떨어진다.
P4	팀 협업 가시성 부족	여러 명이 동시에 작업할 때 “누가 언제 뭘 바꿨는지” 한눈에 확인할 수 없어, 책임 소재나 최종 승인 시점 파악이 어렵다.

 

 

타겟 페르소나

1. 프로덕트 매니저 김 PM

• 스타트업 PM으로 노션을 통해 PRD, 회의록 등을 팀과 공유
• 문서 변경 사항을 추적하여 의사결정 과정을 기록하고 싶어함
• 팀원들의 피드백과 수정 사항을 체계적으로 관리하고 싶어함

2. 팀 리더 박 TL

• 개발팀 리더로 기술 문서와 스펙 문서를 노션으로 관리
• 팀원들의 문서 수정 권한을 주되, 변경 사항은 모니터링하고 싶어함
• 중요한 결정사항의 변경 히스토리를 감사 목적으로 보관하고 싶어함

 

MVP 기능 명세

ID	기능명	설명
F1	Notion 페이지 감지	Notion 도메인 로드 시 content script 자동 실행
F2	블록 단위 수집	[data-block-id] 속성으로 모든 블록의 ID·텍스트·DOM 참조 수집
F3	스냅샷 저장	팝업 버튼 클릭 시 Chrome Storage에 { time, blocks[] } 저장
F4	하이라이트 표시	변경 유형별(추가/수정) 색상·테두리 적용
F5	변경 내역 확인	팝업 “변경 내역 보기” 버튼 클릭 시 전체 문서의 diff 마크업 HTML 반환
F6	히스토리 필터	날짜/수정자/키워드 기준으로 보여줄 블록 재필터링
F7	툴팁 상세 변경 내역	data-detail 속성 + CSS로 추가·삭제·수정 텍스트 강조 툴팁 구현

 

 

개발 과정, 방법

비개발자이기에 전문 GPT 개발자님과 처음부터 끝까지 함께했다.

초반에는 VS Code에서 파일 생성부터 단계별로 상세한 가이드를 받을 수 있었지만, 후반으로 갈수록 프롬프트 히스토리가 얽혀 일관성이 떨어지고 유사한 에러가 반복되는 문제가 발생했다. 

더 복잡한 서비스 개발 시 Claude Code나 Cursor ai 사용의 필요성을 느꼈다. 

cursor에는 커서 룰 파일을 만들어 반복되는 에러들을 극단적으로 줄일 수 있는 방법이 있다고 들었다. 

 

아이디어가 정리된 상태에서 비개발자 기준으로 다음과 같은 일정이 소요되었다.

• Day 1: 기본 구조 설계 및 파일 생성, 핵심 기능 구현
• Day 2: 핵심 기능 구현 및 UI 개발, 디버깅
• Day 3: 테스트 및 디버깅, 스토어 등록 준비

총 2-3일이면 충분히 MVP를 완성할 수 있었다.

 

 

크롭 웹스토어 등록 과정

크롬 웹개발자 계정 등록비 $5를 지불하고 다음 자료들을 준비했다.

필요한 자료들은 전부 LLM의 도움을 받았다. 내 비서 최고!

• 익스텐션 아이콘 (16x16, 48x48, 128x128)
• 스크린샷 (1280x800 권장)
• 상세 설명 및 기능 소개
• 개인정보 처리방침

gpt 비서가 만들어준 등록 이미지

 

 

 

 

향후 로드맵

ID	기능명	설명
E1	팀 대시보드 & 리포트	팀원별·기간별 변경 통계 차트 및 PDF/CSV 주간 리포트 자동 발송
E2	Read Receipt	페이지·블록 단위로 누가 언제 읽었는지 서버에 기록 및 UI 표시
E3	PDF 스냅샷	히스토리 스냅샷의 PDF 다운로드 및 아카이빙 기능

 

개인 사용자는 무료로 제공하고, 팀 단위 고급 기능(대시보드, 리포트, 서버 동기화)은 구독 모델로 수익화를 고려하고 있다.

 

 

정리하며..

이번 경험을 통해 크롬 익스텐션 개발의 접근성을 확인했다.

비개발자도 AI의 도움을 받아 충분히 실용적인 제품을 만들 수 있다는 것을 체감했다.

아직 크롬 웹스토어 심사 중이고 디벨롭할 기능들도 많지만... 그래도 첫 스타트를 끊었다는 생각에 뿌듯한 기분이 든다.

 

크롬 익스텐션으로 제품 개발 감각을 익혔으니, 이제 좀 더 복잡하고 독립적인 플랫폼을 만들어보고 싶다.

특히 사용자와의 직접적인 인터랙션이 더 많은 모바일 앱이나 웹 서비스에 도전해보려 한다.

심사중이어도 미리보기 화면으로 조회가 가능하다.