웹 디자인 레퍼런스를 수집하는 Chrome Extension을 WXT + React + Supabase로 만든 개발기
바이브 코딩을 해본 사람들이라면 알 거에요. 제대로 된 디자인 레퍼런스만 던져줘도 디자인 퀄리티가 엄청 올라간다는 사실을요. 그래서 저는 디자인 시스템을 만들고 나서도 좀 더 큰 임팩트를 줄 수 있을만큼 바이브코딩의 디자인 퀄리티를 올리고 싶었습니다. 그래서 레이아웃을 모으려고 여러 사이트를 돌아다니고, 모은 레퍼런스를 어떻게 내가 만든 디자인 시스템에 적용시킬 수 있을까 고민을 많이 했습니다.
하지만 레퍼런스를 모으기만 하면 사실 의미가 없쥬???? 제가 궁극적으로 생각하는 건 이 확장프로그램으로 모은 데이터들을 자동으로 디자인 시스템이 읽게끔 만들어 기획에 맞는 적절한 레퍼런스를 선택할 수 있게끔 하는 거였어요. 지금 단계는 그 첫 단계인, "레퍼런스를 DB에 잘 분류해서 모으기" 단계에 해당합니다.
뭘 만들었나
한 줄 요약: 현재 탭의 레이아웃을 캡처해서 Supabase에 저장하는 Chrome Extension.
구체적으로는:
- Popup: 버튼 하나로 현재 페이지의 URL + 스크린샷 + 메타데이터 캡처, 카테고리 선택 후 저장
- Side Panel: 저장된 레이아웃을 갤러리로 보기, 필터링/검색/삭제
- Background Service Worker: 스크린샷 캡처 (`captureVisibleTab`)
- Content Script: OG 태그, favicon, title 등 메타데이터 추출
최종 비전은 이 데이터를 AI가 참조해서 디자인을 생성하는 건데, MVP에서는 수집 + 조회까지만 하려고 합니다.
기술 스택 선 택
WXT - Chrome Extension Framework
처음엔 순수 Manifest V3로 시작하려다가 WXT를 발견했습니다. file-based entrypoints, HMR, 자동 manifest 생성... Vite 기반이라 React + Tailwind도 바로 붙이죠.
Supabase - 백엔드 한 방에 해결
PostgreSQL + Storage + RLS를 한 서비스에서 운영합니다. 소규모 팀(2-5명)이라 인증 없이 anon role에 permissive 정책으로 갔어요.
6개 태스크, 순차 실행
전체 개발을 6개 태스크로 쪼갰어요:
Task
내용
핵심
1
Project Scaffolding
WXT + React + Tailwind + Vitest
2
Supabase Schema
layouts 테이블 + RLS + Storage
3
Data Layer
TypeScript 타입 + 서비스 함수 6개
4
Capture Logic
Background + Content Script + Messaging
5
Popup UI
카테고리 선택 + 저장 플로우
6
Side Panel UI
갤러리 + 필터 + 검색 + 삭제
Task 1-2는 병렬 가능했고, 나머지는 순차 의존성이 있었습니다.
Popup - 3초 만에 저장
Popup을 열면 자동으로:
1. chrome.tabs.query로 현재 탭 정보 가져오기
2. Background에 captureVisibleTab 요청 (JPEG quality 80)
3. Content Script에 메타데이터 추출 요청
사용자는 Page Purpose(Landing, Dashboard 등)와 Layout Type(Hero+CTA, Card Grid 등)만 선택하고 Save.
Side Panel - 내 레퍼런스 갤러리
저장된 레이아웃을 카드 그리드로 보여줬습니다. 각 카드에는 아래의 정보가 들어가있죠.
- 스크린샷 썸네일
- 사이트 제목 + URL
- Page Purpose + Layout Type 뱃지
- 삭제 버튼 (확인 후 삭제)
필터링은 두 축으로 분류합니다.
- Page Purpose: Landing, Dashboard, E-commerce, Blog/Content, Portfolio, SaaS App, Documentation, Social/Community
- Layout Type: Hero+CTA, Card Grid, Sidebar+Content, Full-width Scroll, Split Screen, Data Table, Masonry, F-Pattern
Tailwind CSS v4의 PostCSS 변경
Tailwind v4부터 PostCSS 플러그인이 tailwindcss에서 @tailwindcss/postcss로 분리되었어요.
이 사실을 모르고 작업했더니 에이전트가 30분을 헤맸습니다. tailwind v4에서부터는 v3와 다른 점이 많아서 디자인 시스템에 적용하는 데에도 꽤나 애를 먹었습니다. tailwind를 쓰시는 분들은 v3버전으로 할지, v4 버전으로 할지 기획 단계에서 고민이 필요할 거 같아요.
다음 단계
- AI 자동 분류: 저장할 때 LLM이 카테고리를 자동 추천. 하지만 이게 돈이 드니까 망설여지는 게 있습니다.
Ollama라는 로컬에서 LLM을 돌릴 수 있는 도구가 있지만 용량이 너무 크고 무거워서 이걸 사내 시스템으로 도입할 수 있을지 의문이긴 해요.
- MCP 연동: Claude Code에서 "이 사이트 같은 레이아웃 보여줘" 가능하게 만들기
- 메타데이터 확장: CSS framework 감지
