비개발자용 시작
이 가이드는 풀타임 개발자가 아닌 분을 위한 안내입니다. 동작하는 확장 프로그램을 직접 띄우는 순간까지 한 단계씩 따라가게 짜여 있습니다. 도중에 막히면 06-troubleshooting.md을 옆 탭에 켜두고 같은 증상을 찾아 보면 됩니다.
어떤 분을 염두에 두고 썼나
섹션 제목: “어떤 분을 염두에 두고 썼나”이 base를 집어 드는 분 중에는 풀타임 개발자가 아닌 경우가 적지 않습니다. 그래서 톤이 손을 잡듯 친절하게 잡혀 있습니다. 다만 가정하는 학습 수준이 하나 있습니다.
터미널을 한 번이라도 열어 봤고, AI 와 코딩해 본 경험이 있다는 가정입니다. 명령을 한 줄씩 풀어 적기는 하지만, “터미널이 뭔지”, “git 이 뭔지”, “Node 가 왜 필요한지” 처음부터 풀어 주지는 않습니다. 그 자리는 이 매뉴얼이 가르치는 자리가 아니라, 옆 탭에 무료 학습 자료(YouTube 의 git/터미널 입문, MDN 의 Node.js, Anthropic 의 Claude Code 빠른 시작)를 두고 봐 주시면 됩니다.
다음 세 가지를 가정합니다.
- 터미널, git, Node 의 이름과 대략의 쓰임은 알고 있습니다. 그 위에서 명령을 한 줄씩 풀어 적습니다.
- 첫 실행에는 Supabase나 자체 서버 같은 외부 서비스가 필요 없습니다. 기본 백엔드 모드는
console-log이고, 이 모드에서는 결과가 브라우저 콘솔에 찍히기만 합니다. - 코드는 AI가 씁니다. 이 가이드에서는 Claude Code를 씁니다. 어떤 확장을 만들고 싶은지만 알면 됩니다.
이미 익숙한 부분이 있다면 그 단계는 훑고 넘어가도 됩니다. 다만 한 번씩은 눈으로 지나가 두는 편이 좋습니다. 기대와 다르게 동작하는 자리를 만났을 때 어디로 돌아와야 하는지가 머릿속에 남기 때문입니다.
처음 보는 단어가 단계마다 누적되면, 매뉴얼이 가르치는 본 자리(AI 가 흔들리는 자리 안전망, 컨텍스트 복구, 시나리오 검증)에 도달하기 전에 지치게 됩니다. 그 자리가 이 base 의 본체이니, 입구 단계에서 막힘이 누적된다 싶으면 학습 자료부터 한 번 정리하고 돌아오는 편이 빠릅니다.
단계 안내
섹션 제목: “단계 안내”| 단계 | 무엇을 하나 | 대략 시간 |
|---|---|---|
| 1 01-prerequisites.md | Node, git, Chrome, Claude Code 설치 | 처음이면 20~40분 |
| 2 02-clone-and-install.md | base 받기와 의존성 설치 | 5~10분 |
| 3 03-first-run.md | ”프로젝트 세팅” 입력 후 console-log 모드로 첫 실행 | 15~30분 |
| 4 04-real-backend.md (선택) | Supabase 또는 자체 서버 연결 | 30분~1시간 |
| 5 05-customize-design.md (선택) | 디자인 톤 입히기 — Figma URL 자동 동기 또는 한 단어 톤 | 15~30분 |
| 6 06-troubleshooting.md | 자주 막히는 자리 모음 | 필요할 때만 |
| 7 07-automated-safety-net.md | base가 자동으로 챙겨주는 안전망 이해 | 10분 |
| 8 08-when-ai-gets-stuck.md | AI 워크플로 자체가 막힌 자리 풀기 | 필요할 때만 |
| 9 09-distribution.md (선택) | 사용자에게 배포 | 30분~2시간 |
| 10 10-staying-up-to-date.md (선택) | base 업데이트를 내 코드에 가져오기 | 한 사이클당 10~30분 |
이미 Node와 git, MV3 manifest가 익숙한 분이라면 전문가용 매뉴얼이 더 짧은 호흡으로 같은 base를 풉니다.
막혔을 때
섹션 제목: “막혔을 때”가장 먼저 볼 자리는 06-troubleshooting.md입니다. 첫 실행에서 흔히 부딪히는 자리는 거의 거기에 정리돼 있습니다.
거기에도 같은 증상이 없으면 에러 메시지를 그대로 복사해서 Claude Code에 붙여 넣고 “이거 어떻게 고쳐?” 라고 물어 보세요. 다음에 시도할 만한 한 수가 보통 따라옵니다.
그래도 풀리지 않으면 GitHub 이슈를 열거나 팀 Slack에 글을 올립니다. 세 가지를 함께 적어 주세요.
- 어디서 막혔는지 (어느 파일, 어느 명령)
- 에러 메시지 전체
- 환경 정보 (운영체제, Node 버전, Chrome 버전)
처음 한 번이 가장 느립니다. 환경이 한 번 잡히고 나면 다음 확장을 만들 때는 1단계를 통째로 건너뛰게 되고, 전체 흐름이 눈에 띄게 짧아집니다.
매뉴얼은 어디까지, base 는 어디부터
섹션 제목: “매뉴얼은 어디까지, base 는 어디부터”이 단계 표가 다루는 자리는 base 가 자동으로 챙겨주는 자리, 즉 자동 안전망과 컨텍스트 복구, 시나리오 검증, 라이선시 업데이트 채널 같은 차별점입니다. 매뉴얼 본문은 무료로 풀려 있고, 옆 탭에 두고 따라가시면 됩니다.
실제 base 코드와 .claude/ 풀셋(에이전트, 스킬, 훅)은 Solo 1인 라이선스 + 1년 업데이트 채널 형태로 곧 풀립니다. 가격과 결제 채널이 정해지면 이 페이지와 랜딩에 같이 안내합니다. 매뉴얼을 따라가다 “이 자동화가 박혀 있는 실제 코드가 어디에 있나” 가 궁금해지는 시점이 오면, 그 자리가 라이선스를 받아 fork 하는 자리입니다.