YOHAN STUDIO · BUILD LOG2026-05-24

아이디어 4개를 합쳐 18일 만에 Chrome·Whale 스토어에 제출한 이야기

산발적인 아이디어 4개를 하나로 합치고, 18일 만에 v0.1.3까지 개발해서 Chrome Web Store와 Whale Store에 동시 제출했다. 바이브코더의 리얼 빌드 기록.

Chrome ExtensionVibe CodingTypeScriptManifest V3Build in Public

YOHAN STUDIO · BUILD LOG

SnapContext v0.1.3 — 맥락 캡처 확장 프로그램 빌드 여정

2026-05-24 · Yohan Baek

Manifest V3 TypeScript Vite Playwright E2E

한눈에 보기

0.1.3 최종 버전

18일 아이디어→스토어

43 E2E 통과

2 스토어 제출

채널	상태	비고
GitHub	공개	소스·Privacy·스크린샷
Chrome Web Store	심사 대기	비판매자 · host_permissions
Whale Store	리뷰 요청	한국어 listing

왜 만들었나

브라우저에서 버그를 발견하면 스크린샷을 찍고, 메모장에 URL을 복사하고, viewport 크기를 개발자 도구에서 확인하고, 그걸 다시 AI 채팅에 붙여넣는다. 매번 이 루프를 반복할 때마다 "이거 한 번에 되면 안 되나?"라는 생각이 들었다.

SnapContext는 그 짜증에서 시작됐다. 웹에서 발견한 UI 문제, 에러, 레퍼런스를 딸깍 한 번에 캡처하고, AI가 바로 이해하는 Context Pack으로 변환하는 Chrome/Whale 확장 프로그램이다.

이 글은 아이디어 4개를 하나로 합치고, 18일 만에 v0.1.3까지 개발해서 Chrome Web Store와 Whale Store에 동시 제출하기까지의 리얼 빌드 기록이다. 실패도 삽질도 다 들어있다.

4개의 아이디어가 1개가 되기까지

사실 SnapContext는 처음부터 하나의 아이디어가 아니었다. 바이브코딩 제품군(Vibe Harness Kit) 진단을 하면서 나왔던 여러 아이디어 중 4개가 "어, 이거 결국 같은 문제 아닌가?"로 수렴했다.

PageSnap Studio

웹 페이지 캡처 → 캡처 엔진 (Visible/Element/Document/FullPage)

Prompt Screenshot Annotator

스크린샷 AI 주석 → 핀 주석 (번호 핀 + 메모)

Vibe Debug Pack

디버그 정보 수집 → Context Pack (URL, viewport, UA)

Notion Context Bridge

Notion 저장 → v0.2 Pro로 이동

결국 핵심은 하나였다: 캡처 → 맥락 패키징 → AI/도구 전달을 한 번에.

다른 캡처 도구(GoFullPage, Awesome Screenshot)는 "캡처"에서 끝난다. SnapContext는 캡처한 것을 AI가 바로 이해하는 패키지로 만들어준다. 그게 차별점이었고, 4개를 합칠 이유였다.

타임라인

Phase 0 · 05-06

아이디어 수렴

4개 아이디어 통합 기획서 작성
VHK 5대 기준 검증 (독푸딩 · 시행횟수 · 요한의 업)
Cursor 첫 프롬프트 작성 (90줄 설계서)

Phase 1 · 05-07

v0.1 코어 완성

Side Panel → 캡처 3종 → 핀 주석 → Context Pack
하루 만에 코어 기능 전체 구현 (Cursor + Claude)
host_permissions로 activeTab 경고 해소 (ADR-002)

Phase 2 · 05-08

v0.1.1 배포 준비

아이콘·manifest·프롬프트 템플릿 3종
단축키 V/E/M/G/P · 캡처 히스토리
JS 번들 48.31 → 43.11 kB (−9.5%)

Phase 3 · 05-10

v0.1.2 UX + 코드 프리즈

프로그레시브 공개 UI · 2×2 캡처 그리드 · Full Page Capture
Lightbox (width-based zoom)
Playwright E2E 48개 · 수동 테스트 8/8
git init + 첫 커밋

Phase 4 · 05-24

v0.1.3 스토어 제출

E2E 43/43 · Chrome·Whale 수동 검증
GitHub 공개 · 스크린샷 5장 · ZIP 제출
CWS + Whale 동시 제출

핵심 기술 결정 3가지

Popup → Side Panel

캡처 도구에 popup은 치명적이다. 페이지 클릭하면 닫힌다. 캡처→주석→패키징 워크플로에는 Side Panel(MV3)이 맞았다. ADR-001.

activeTab 제거

Side Panel 버튼은 "탭 클릭"이 아니다. activeTab 경고가 계속 떠서 host_permissions: <all_urls>로 갔다. 심사는 까다로워질 수 있다. ADR-002.

React 없이 Vanilla TS

React 런타임만 40kB+. 전체 JS 43kB로 끝냈다. 상태 관리는 수동이지만 UI가 단순해서 버텼다.

삽질 & 교훈

⚠️ Whale 다크모드 단축키 충돌

Document Capture를 Alt+Shift+D로 썼더니 웨일 다크모드 토글이었다. 캡처 누르면 화면이 갑자기 어두워지는 기현상. Alt+Shift+M으로 바꿨다.

⚠️ Full Page scroll+stitch

Chrome API에 "전체 페이지 한 방"은 없다. 스크롤하며 이어붙이기. lazy-load, fixed 헤더, sticky — 예외가 많다. 15000px 제한 걸고 v0.1.2에서 안정화.

⚠️ SPA viewport 0×0

렌더 전에 Content Script가 돌면 viewport가 0×0. window.innerWidth/Height fallback과 UA 빈 값 방어 코드 추가.

⚠️ Notion MCP 토큰 노출

MCP 연결 설정에 토큰이 평문으로 남아 있었다. 재발급하고 env-var 방식으로 바꿨다. GitHub Push Protection에도 한번 걸렸다.

스토어 제출 — 생각보다 할 게 많더라

코드 완성이 끝이 아니었다. 스토어 제출은 그 자체로 하나의 프로젝트였다.

✅ npm run build → dist ZIP
✅ npm test 7/7 + E2E 43/43
✅ Chrome·Whale 수동 검증 (단축키, 풀페이지, 4캡처+PNG)
✅ 스토어 스크린샷 5장 (Playwright + 1280×800 프레임)
✅ PRIVACY.md
✅ GitHub 공개 (Notion 토큰 제외)
✅ Chrome Web Store ($5 · Privacy practices · 비판매자)
✅ Whale Store (한국어 listing · 리뷰 요청)

최종 결과물

🖥 화면 캡처
Alt+Shift+V

🎯 요소 캡처
Alt+Shift+E

📄 문서 캡처
Alt+Shift+M

📜 전체 캡처
Alt+Shift+G

📌 핀 주석
번호 핀 + 메모

🤖 Context Pack
프롬프트 + JSON

스택: Manifest V3 · TypeScript strict · Vite · @crxjs/vite-plugin · Side Panel API · Vanilla TS · Playwright E2E · chrome.storage.local

숫자로 보는 여정

4 → 1
아이디어 통합

18일
05-06 → 05-24

v0.1.3
4번의 버전 업

43/43
E2E 전수 통과

7 ADR
결정 기록

43.11 kB
JS 번들 (React 없음)

다음 이야기

지금은 Chrome Web Store와 Whale Store 심사 결과를 기다리는 중이다.

승인되면 스토어 URL을 README에 반영하고, E2E 테스트 전략 글을 이어서 쓸 생각이다. v0.2는 Supabase 이미지 업로드 + Notion 저장(Pro) 쪽.

SnapContext는 요한 스튜디오의 첫 번째 제품 출시다. 직접 수익보다 포트폴리오 + 기술 자산 + 빌드로그 콘텐츠 가치가 크다. 아이디어를 실행으로, 실행을 배포로 — 그 사이클을 18일 안에 돌렸다는 게 핵심이다.

다음은 같은 스택으로 AI Prompt Vault를 만들 차례다.

관련 링크

Yohan Studio · Build in Public · SnapContext v0.1.3