첫 확장프로그램 만들기 — 웹페이지 분석기 + 다크 모드 토글 (30분 실습)
웹페이지 분석기 + 다크 모드 토글 확장프로그램을 처음부터 끝까지 30분 안에 만들어봅니다. manifest, popup, content script, background, 메시지 패싱, 스토리지까지 실제 코드로 전부 경험하는 실전 튜토리얼입니다. (5부작 시리즈 4편)
개발 관련된 내용과 테스트한 내용을 정리합니다.
웹페이지 분석기 + 다크 모드 토글 확장프로그램을 처음부터 끝까지 30분 안에 만들어봅니다. manifest, popup, content script, background, 메시지 패싱, 스토리지까지 실제 코드로 전부 경험하는 실전 튜토리얼입니다. (5부작 시리즈 4편)
manifest.json, Popup, Background Service Worker, Content Script — 확장프로그램의 4가지 구성 요소를 해부하고, 이들이 메시지로 소통하는 방법을 코드 예시로 설명합니다. 공식 문서를 읽을 수 있는 지도를 손에 쥐게 되는 편입니다. (5부작 시리즈 3편)
확장프로그램으로 할 수 있는 일 12가지, 할 수 없는 것의 경계선, 그리고 난이도별 프로젝트 아이디어 25개를 한 번에 정리합니다. 이 글을 다 읽으면 당신이 만들 첫 확장프로그램의 윤곽이 잡힙니다. (5부작 시리즈 2편)
확장프로그램은 HTML/CSS/JS로 만드는 작은 웹앱입니다. Chromium 생태계, Manifest V3, 기술 스택, 수익 구조까지 — 브라우저 확장프로그램을 시작하기 전에 알아야 할 모든 판을 먼저 그려봅니다. (5부작 시리즈 1편)
Redash는 SQL 쿼리를 작성하고 시각화하여 대시보드로 공유하는 도구입니다. 50+ 데이터 소스를 지원하며 Docker로 셀프호스팅할 수 있습니다.
PostHog는 제품 분석, 세션 녹화, 기능 플래그, A/B 테스트를 통합한 올인원 플랫폼입니다. Mixpanel/Amplitude 대안으로 Docker로 셀프호스팅할 수 있습니다.
Matomo는 Google Analytics와 가장 유사한 오픈소스 웹 분석 플랫폼입니다. e커머스, 목표 전환, 태그 매니저를 지원하며 Docker로 셀프호스팅할 수 있습니다.
Umami는 가장 심플하고 가벼운 오픈소스 웹 분석 도구입니다. 쿠키 없이 GDPR을 준수하며, Next.js 기반의 깔끔한 UI를 Docker로 쉽게 셀프호스팅할 수 있습니다.
Plausible은 쿠키 없이 GDPR을 준수하는 프라이버시 친화적 웹 분석 도구입니다. 1KB 미만의 가벼운 스크립트로 사이트 속도에 영향 없이 Docker로 셀프호스팅할 수 있습니다.
Apache Superset은 Airbnb에서 개발한 엔터프라이즈급 데이터 시각화 플랫폼입니다. 40+ 차트 타입, SQL Lab, 대시보드를 제공하며 Docker로 셀프호스팅할 수 있습니다.
Metabase는 누구나 SQL 없이 데이터를 시각화할 수 있는 오픈소스 BI 도구입니다. Docker로 쉽게 셀프호스팅하고, 다양한 데이터베이스를 연결하여 대시보드를 구축할 수 있습니다.
Linkwarden은 협업 기능을 갖춘 현대적인 북마크 관리자입니다. 각 링크의 스크린샷, PDF, HTML 아카이브를 자동 생성하고, Docker로 쉽게 셀프호스팅할 수 있습니다.
Shiori는 Go로 작성된 가벼운 오픈소스 북마크 관리자입니다. 웹 페이지를 저장하고 오프라인 아카이브를 자동 생성하며, Docker로 쉽게 셀프호스팅할 수 있습니다. Pocket의 심플한 대안입니다.
Wallabag은 Pocket/Instapaper 대안 오픈소스 “나중에 읽기” 앱입니다. 웹 페이지를 저장하고 광고 없이 깨끗하게 읽을 수 있으며, Docker로 쉽게 셀프호스팅할 수 있습니다.
SiYuan은 프라이버시 우선 개인 지식 관리 시스템으로, 블록 기반 편집과 양방향 링크를 지원합니다. Docker로 셀프호스팅하면 Obsidian/Notion 대안으로 브라우저에서 접근 가능한 노트 시스템을 구축할 수 있습니다.
Joplin은 E2E 암호화를 지원하는 오픈소스 노트 앱입니다. Joplin Server를 Docker로 자체 호스팅하면 여러 기기 간 안전한 동기화가 가능하며, Evernote의 완벽한 대안이 됩니다.
Docusaurus는 Meta에서 개발한 React 기반 문서 사이트 생성기입니다. 마크다운/MDX 지원, 버전 관리, 다국어, 검색 기능을 기본 제공하며, Docker로 쉽게 개발 및 배포할 수 있습니다.
Crater는 Laravel과 Vue.js로 구축된 현대적인 오픈소스 인보이스 및 비용 관리 플랫폼입니다. 깔끔한 UI, 결제 게이트웨이 통합, iOS/Android 앱을 제공하며 Docker로 쉽게 자체 호스팅할 수 있습니다.
Invoice Ninja는 프리랜서와 중소기업을 위한 오픈소스 인보이스 관리 플랫폼입니다. Stripe/PayPal 결제 통합, 클라이언트 포털, iOS/Android 앱을 제공하며 Docker로 쉽게 자체 호스팅할 수 있습니다.
Dolibarr는 중소기업과 프리랜서를 위한 경량 오픈소스 ERP/CRM입니다. 고객관리, 인보이스, 재고, 프로젝트 관리 기능을 제공하며, Docker로 몇 분 만에 설치할 수 있습니다.
Odoo는 CRM, E-commerce, 회계, 재고, POS 등 80개 이상의 비즈니스 앱을 제공하는 올인원 플랫폼입니다. Docker로 빠르게 설치하고 필요한 모듈만 선택적으로 활성화하여 맞춤형 비즈니스 솔루션을 구축할 수 있습니다.
ERPNext는 회계, 재고, CRM, HR, 제조, 프로젝트 관리를 통합한 완전한 오픈소스 ERP 솔루션입니다. Docker Compose로 쉽게 설치하고 SAP/Oracle ERP 수준의 기능을 무료로 사용할 수 있습니다.
REST API 백엔드, 프론트엔드 웹 애플리케이션, 데이터 파이프라인 세 가지 도메인에 맞춘 완결된 하네스 템플릿을 제공한다. 각 템플릿은 CLAUDE.md, 에이전트 정의, 스킬 파일, 의존성 규칙, 테스트 전략을 포함하며, 복사 후 프로젝트에 맞게 커스터마이징하여 사용할 수 있다. 하네스는 프레임워크가 아니라 패턴이며, 프로젝트와 함께 진화한다.
하네스의 물리적 구조는 오케스트레이터(CLAUDE.md), 전문 에이전트 정의(agents/.md), 스킬 파일(skills//skill.md), 상태 추적(feature-list.json, progress.md)의 네 계층으로 구성된다. 각 파일은 독립적이지 않고 서로 참조·연결되어 하나의 시스템을 이루며, 에이전트가 역할을 나누고, 규칙을 따르고, 일관된 품질을 유지하며 작업할 수 있는 환경을 만든다.
OpenAI(인간 코드 0줄로 100만 줄 프로덕션 구축), Anthropic(장기 실행 에이전트의 세션 간 기억 문제 해결), Stripe(주당 1,000+ PR을 기존 품질 기준으로 운영)는 서로 다른 질문에서 출발했지만, 환경 중심 설계, 점진적 작업, 기계적 강제, 피드백 채널 제공이라는 동일한 원칙에 수렴했다. 조직의 맥락에 따라 세 모델을 선택적으로 조합하는 것이 가장 효과적이다.
하네스 엔지니어링의 다섯 가지 주요 안티패턴은 천 페이지 매뉴얼(과도한 규칙), 과도한 제어 흐름(절차 정의), 도구 과다 제공, 실패를 모델 탓으로 돌리기, 하네스 오버엔지니어링이다. 공통 해결 원칙은 에이전트가 실수할 때마다 그 실수를 구조적으로 불가능하게 만드는 해결책을 코드로 반영하는 것이며, 하네스는 완성되는 것이 아니라 실패를 연료로 진화하는 것이다.
하네스 구축은 규모에 맞게 단계적으로 접근해야 한다. Level 1(개인)은 CLAUDE.md + pre-commit 훅 + 기존 테스트 유지로 30분이면 충분하다. Level 2(소규모 팀)는 아키텍처 테스트, CI 파이프라인, 계층적 CLAUDE.md를 추가한다. Level 3(조직)은 엔트로피 점수 산출, 건강도 게이트, 주간 자동 리포트까지 확장한다. 핵심은 현재 규모에서 가장 아픈 문제를 해결하는 수준으로 도입하는 것이다.
피드백 루프는 에이전트가 코드 작성 결과를 직접 확인하고 자율적으로 수정하는 순환 구조를 만드는 하네스의 네 번째 기둥이다. Puppeteer 기반 E2E 테스트로 사용자 관점 검증, 관찰 가능성 스택으로 로그·메트릭 직접 쿼리, 단계별 CI 파이프라인으로 모든 피드백을 통합한다. 에이전트에게 “눈과 귀”를 제공함으로써 코드 수준이 아닌 실행 수준의 품질을 보장한다.
엔트로피 관리는 아키텍처 제약이 잡아내지 못하는 불일치 — 코드 중복, 패턴 불일치, 죽은 코드, 문서-코드 괴리 — 를 자동으로 탐지하고 정리하는 하네스의 세 번째 기둥이다. jscpd, knip, AST 기반 유사 함수 스캐너, 문서-코드 일관성 검증 스크립트를 CI/CD와 스케줄링된 워크플로우로 통합하여 코드베이스의 건강을 지속적으로 유지한다.
아키텍처 제약은 컨텍스트 엔지니어링이 ‘안내’하는 것을 ‘강제’로 전환하는 하네스의 두 번째 기둥이다. 의존성 방향 테스트, 순환 의존성 감지, 커스텀 린터 규칙, pre-commit 훅, 데이터 경계 파싱 강제를 통해 에이전트의 판단과 무관하게 규칙이 지켜지는 구조를 만든다. 핵심 철학은 불변 규칙은 기계적으로 강제하되 구현 방식은 자유롭게 두는 것이다.