바이브코딩 무료 도구 추천 5가지 2탄 — 오늘 바로 깔아 쓰는 AI 코딩 도구

기준: 2026년 11월 8일 깃허브 API · README · npm · zed.dev에서 확인, 같은 날 윈도 11(Node.js 24.13)에서 직접 실행 · zed-industries/zed 별 94,113개(GPL-3.0, v1.27.0) · vercel-labs/agent-browser 별 46,545개(Apache-2.0, v0.41.2) · storytold/craft-anything 별 19,864개(MIT 또는 Apache-2.0, v0.5.0 알파) · meta/astryx 별 14,222개(MIT, v0.7.11 베타) · ranxianglei/billion-context 별 4,476개(MIT + 출처 표시 조건, v0.1.212) · 다섯 개 합계 179,220개

AI가 코드를 짜 주는 것 자체는 이제 어렵지 않습니다. 막히는 곳은 그다음입니다. 어디서 열어 고칠지, 만든 화면은 왜 늘 비슷해 보이는지, 진짜 돌아가는지는 누가 확인할지, 대화가 길어지면 AI가 앞 내용을 잊는 문제까지요. 이 글에서는 이 막히는 곳을 하나씩 맡는 무료 도구 5개를 작업 순서대로 정리했습니다. 다섯 개 모두 11월 8일에 이 컴퓨터(윈도 11)에 직접 깔아 돌려 보고, 그 출력과 화면을 함께 실었습니다. 지난 1탄(AI 코딩 스킬 추천 5가지)에 이은 2탄입니다.

다섯 도구는 각각 무엇을 맡나요?

작업 순서로 보면 편집기 → 화면 → 브라우저 확인 → 긴 대화 → 다시 만들기입니다. 바탕이 되는 편집기 하나에, 필요한 도구만 더하면 됩니다.

후보는 7개였습니다. Devvm은 맥 · 리눅스 전용이라(별 316) 윈도 사용자가 오늘 바로 쓸 수 없어 뺐고, Heirmos는 저장소 별이 적어 뺐습니다. 남은 다섯 개는 모두 윈도에서 실제로 설치 · 실행되는 것을 확인했습니다.

1. Zed — 무료로 AI를 쓰는 코드 편집기

Zed는 Atom과 Tree-sitter를 만든 사람들이 Rust로 새로 만든 코드 편집기입니다. 윈도 · 맥 · 리눅스를 모두 지원하고, 최신 버전은 v1.27.0입니다. 라이선스는 README 기준 GPL-3.0(일부 Apache-2.0)입니다.

가장 궁금한 건 요금일 겁니다. zed.dev/pricing(11월 8일 확인)에 따르면 개인(Personal) 요금제는 0달러이고 "평생 무료(forever)"로 적혀 있습니다. 내 API 키를 넣거나 외부 에이전트를 연결하면 제한 없이 쓸 수 있습니다. Zed가 직접 제공하는 AI 모델을 쓰려면 Pro 요금제(월 10달러, 5달러어치 토큰 포함)이고, 14일 무료 체험은 카드 없이 시작할 수 있습니다.

직접 Zed 1.27.0을 열어 보니 왼쪽 에이전트 창에 "Add your own keys to use AI without signing in."이라는 안내가 있었습니다. 로그인하지 않아도 내 API 키만 넣으면 바로 AI를 쓸 수 있다는 뜻입니다.

새 대화 메뉴에서 Add More Agents를 누르면 ACP Registry가 열립니다. 여기에 Claude Agent, Codex, Cline, Amp 같은 외부 에이전트가 나란히 있고, 고른 뒤 Install만 누르면 됩니다. 특정 회사의 AI 하나에 묶이지 않고, 이미 쓰고 있는 에이전트를 편집기 안으로 가져올 수 있다는 점이 장점입니다.

설치: zed.dev/download에서 받습니다(윈도 · 맥 · 리눅스). 설치 뒤 에이전트 창에서 내 API 키를 연결하거나, Add More Agents로 외부 에이전트를 설치합니다.

2. Astryx — AI가 만든 화면이 뻔할 때

AI에게 화면을 맡기면 늘 비슷한 모양이 나오는 이유 중 하나는, 빈 화면에서 매번 새로 그리기 때문입니다. Astryx는 이 순서를 바꿉니다. 템플릿에서 시작하고, 블록으로 채우고, 남은 곳만 부품을 씁니다.

Astryx는 Meta가 공개한 디자인 시스템입니다. README에 따르면 Meta 안에서 8년 동안 1만 3천 개가 넘는 앱에 쓰였고, 부품 150개 이상 · 테마 7가지를 담고 있습니다. 라이선스는 MIT이고, 지금은 베타입니다. 프로젝트에 넣으려면 React 19 이상이 필요합니다.

설치 순서는 이렇습니다.

1. npm i -g @astryxdesign/cli 로 CLI를 전역 설치합니다.
2. astryx build "만들 화면" 을 실행하면 시작할 템플릿과 필요한 부품을 골라 줍니다.
3. 프로젝트에는 @astryxdesign/core 를 넣습니다(React 19 이상).

11월 8일에 직접 설치해 보니 astryx --version 은 0.7.11이었고, astryx component --list 는 부품 174개, astryx template 은 페이지 템플릿 57개를 보여 줬습니다. astryx build "expense tracker dashboard"(지출 관리 대시보드)를 실행하자 dashboard 템플릿을 추천했습니다.

눈여겨볼 점은 전역 설치가 코딩 에이전트용 안내 파일까지 만든다는 것입니다. 설치 뒤 ~/.agents/skills/astryx/SKILL.md 가 생기고 ~/.claude/skills/astryx 에도 연결됐습니다. 이 파일에는 "start every page from a template, never from scratch(모든 페이지는 빈 화면이 아니라 템플릿에서 시작한다)", 그리고 색 값(#hex)이나 픽셀 값을 직접 쓰지 말고 부품이나 토큰으로 바꾸라는 규칙이 들어 있었습니다. 에이전트가 이 규칙을 읽고 화면을 만들게 되는 구조입니다. 지울 때는 astryx init --user --remove-agents 를 먼저 실행해 이 안내 파일부터 정리하면 됩니다.

3. agent-browser — AI가 만든 화면을 AI가 직접 확인

AI가 "다 만들었어요"라고 해도, 버튼이 진짜 눌리는지는 결국 사람이 브라우저를 열어 확인하는 경우가 많습니다. agent-browser는 이 확인을 AI에게 맡깁니다. AI가 브라우저를 열고, 화면을 글로 읽고, 번호로 버튼을 누릅니다.

Vercel Labs가 만든 도구이고, 라이선스는 Apache-2.0, 버전은 v0.41.2입니다. 윈도 x64용 실행 파일도 함께 배포됩니다. 지난번 소개한 agent-desktop이 데스크톱 앱을 조작하는 도구라면, agent-browser는 웹페이지 전용입니다.

작동 방식은 네 단계입니다.

1. agent-browser open 주소 — 페이지를 엽니다.
2. agent-browser snapshot -i — 화면을 글로 읽습니다. 버튼 · 입력칸마다 @e1 같은 번호가 붙습니다.
3. agent-browser click @e1 — AI가 그 번호를 누릅니다(입력칸이면 fill).
4. 다시 snapshot — 결과가 맞게 바뀌었는지 확인합니다.

직접 두 번 돌려 봤습니다. 먼저 agent-browser open example.com → ✓ Example Domain, snapshot -i → link "Learn more" [ref=e1], click @e1 → ✓ Done, get url → https://www.iana.org/help/example-domains 순서로 링크가 실제로 눌린 것을 확인했습니다.

다음은 할 일 앱 데모(demo.playwright.dev/todomvc)입니다. 스냅샷에서 입력칸이 textbox "What needs to be done?" [ref=e3] 로 나와서, fill @e3 "영상 대본 쓰기" 로 입력하고 press Enter 를 보냈습니다. 다시 읽은 스냅샷에 checkbox "Toggle Todo" 가 새로 생겼고, 화면에도 할 일 1개(1 item left)가 추가돼 있었습니다.

설치: npm install -g agent-browser 한 줄이고, 처음 한 번 agent-browser install 로 테스트용 Chrome(Chrome for Testing)을 받습니다. 그다음 agent-browser open example.com 으로 바로 시험해 볼 수 있습니다.

4. billion-context — 대화가 길어지면 앞 내용을 잊을 때

한 세션을 오래 이어 가면 AI가 앞에서 정한 내용을 잊어버리는 순간이 옵니다. billion-context는 오래된 대화를 접어서 요약으로 바꿔 두고, 필요할 때 다시 펼칩니다. README에 따르면 모델이 스스로 compress(접기) · decompress(펼치기) · search_context(찾기) · acp_status(상태 보기) 네 가지 도구를 불러 맥락을 관리합니다. Claude Code, Codex, Gemini CLI, Zed 등 20가지가 넘는 도구를 지원합니다.

저장소 설명에는 "10만 토큰 창이면 충분하고, 토큰을 5배 아낀다"고 적혀 있습니다. 이 수치는 저장소의 설명이고, 이번에 직접 재 보지는 않았습니다.

npm install -g billion-context 로 깔면 bili 명령이 생깁니다(bili --version → 0.1.212). bili codex 처럼 뒤에 도구 이름을 붙여 실행하면, 그 도구가 중간 프록시를 거쳐 켜지는 방식입니다. bili --help 를 보면 도구에 따라 cert-MITM(인증서를 설치해 요청을 가로채는 방식) 또는 주소를 /bili/ 로 바꾸는 방식이라고 적혀 있습니다. 도구 연결(bili plugin install)은 내 설정을 바꾸기 때문에 이번에는 실행하지 않았습니다.

라이선스는 MIT에 "제품 화면에 출처를 표시해야 한다"는 추가 조건이 붙어 있습니다(LICENSE 원문 기준, 깃허브 API에는 NOASSERTION으로 표시). 회사 서비스에 넣는다면 이 조건도 함께 확인하세요.

5. Craft Anything — 내 서비스를 새로 만들 때

Craft Anything은 웹사이트 · 앱 · 게임이 어떻게 만들어졌는지 살펴보고, 코딩 에이전트로 내 버전을 새로 만드는 도구입니다. 살펴보기(Study) → 만들기(Build) → 비교(Check) → 완성(Ready) 네 단계로, 원본과 얼마나 닮았는지 확인하며 다듬습니다. README 기준 도구는 320개이고, 아직 초기 알파(v0.5.0) 단계입니다.

윈도용 포터블 파일(v0.5.0, 체크섬 SHA256 일치 확인)로 직접 켜 보니 화면이 한국어로 나왔습니다. "무엇을 만들까요?"에서 웹사이트 · 앱 · 게임 · 처음부터 중 하나를 고르고, 원하는 것을 적으면 됩니다.

함께 들어 있는 명령줄 도구로 craft-anything-cli doctor 를 실행하니 이 컴퓨터의 Claude Code · Codex · Cursor · VS Code · Copilot CLI · Trae를 찾았고, commands 목록은 321개였습니다. 만들기 단계는 Claude Code를 먼저 지원하고, Codex · Copilot · Grok은 일부 지원입니다. 실제 빌드는 코딩 에이전트 사용료가 들어서 이번에는 돌리지 않았습니다.

기본값은 클린룸 모드입니다. 원본의 코드 · 파일 · 페이지 소스는 읽지 않고, 방문자가 보는 화면만 봅니다. README의 '책임 있는 사용' 항목은 내 것이거나 허락받은 소프트웨어에만 쓰라고 분명히 적고 있습니다. 예전에 만든 내 서비스를 새 기술로 다시 짤 때 쓰는 도구로 생각하면 됩니다.

설치: GitHub Releases에서 윈도 설치 파일(msi)이나 포터블 zip을 받고, craft-anything-cli doctor 로 내 컴퓨터의 코딩 에이전트를 점검합니다.

설치는 어떻게 하나요?

README에 적힌 설치 한 줄을 모으면 이렇습니다. agent-browser · Astryx · billion-context는 Node.js(npm)가 필요합니다.

1. Zed: zed.dev/download에서 받기 → 에이전트 창에서 내 API 키 연결 또는 Add More Agents로 외부 에이전트 설치
2. Astryx: npm i -g @astryxdesign/cli → astryx build "만들 화면" (프로젝트에는 @astryxdesign/core, React 19 이상)
3. agent-browser: npm install -g agent-browser → agent-browser install(처음 한 번 Chrome 받기) → agent-browser open example.com
4. billion-context: npm install -g billion-context → bili 도구이름(예: bili codex)
5. Craft Anything: GitHub Releases에서 윈도 msi 또는 포터블 zip → craft-anything-cli doctor

다섯 개를 다 깔아야 하나요? 어떻게 고르나요?

아닙니다. 바탕은 Zed 하나로 두고, 상황에 맞는 도구만 더하면 됩니다.

특정 AI에 묶이지 않는다는 점도 고르는 기준이 됩니다. Zed는 Claude Agent · Codex · Cline 같은 에이전트를 같은 목록에서 고를 수 있고, agent-browser와 Astryx는 어떤 코딩 에이전트와도 함께 쓸 수 있습니다. billion-context도 20가지가 넘는 도구를 지원합니다.

오늘 30분 안에 해 볼 수 있는 것은?

가장 효과가 바로 보이는 조합은 "Zed + 내 API 키 → agent-browser로 AI가 직접 확인"입니다.

1. Zed를 설치합니다(zed.dev/download).
2. 에이전트 창에서 내 API 키를 연결합니다.
3. npm install -g agent-browser 로 agent-browser를 설치하고, 처음 한 번 agent-browser install 을 실행합니다.
4. AI에게 "agent-browser로 내 화면을 열고, 추가 버튼을 눌러서 목록에 생기는지 확인해 줘"라고 시킵니다.
5. AI가 남긴 스냅샷 결과(새로 생긴 항목)로 실제로 동작했는지 확인합니다.

주의할 점은 무엇인가요?

네 가지만 기억하면 됩니다.

• AI 모델 사용료는 따로: 도구 자체는 오픈소스(4개)이거나 무료 요금제(Zed 개인)가 있지만, AI 모델 사용료는 내 API 키나 구독에서 나갑니다.
• billion-context는 회사 PC라면 확인부터: 코딩 에이전트의 요청을 중간 프록시에서 압축하고, 도구에 따라 인증서(cert-MITM) 방식을 씁니다. 회사 컴퓨터라면 먼저 보안 담당에게 확인하세요. "토큰 5배 절약 · 10만 토큰이면 충분"은 저장소 설명입니다.
• 알파 · 베타 단계: Craft Anything은 초기 알파, Astryx는 베타입니다. 중요한 프로젝트는 복사본에서 먼저 시험하세요.
• Craft Anything은 내 것에만: README의 책임 있는 사용 원칙대로, 내 것이거나 허락받은 소프트웨어에만 쓰세요.

자주 묻는 질문

다섯 개 다 완전히 무료인가요? 도구 자체는 오픈소스이거나(4개) 무료 요금제(Zed 개인)가 있습니다. 다만 AI 모델 사용료는 내 API 키나 구독에서 나갑니다. Zed가 직접 주는 AI 모델을 쓰려면 Pro(월 10달러)입니다.

윈도에서도 되나요? 됩니다. 11월 8일에 윈도 11에서 다섯 개 모두 직접 실행해 봤습니다. 후보였던 Devvm은 맥 · 리눅스 전용이라 이번 목록에서 뺐습니다.

클로드가 없어도 쓸 수 있나요? 쓸 수 있습니다. Zed는 Codex · Cline 같은 다른 에이전트도 고를 수 있고, agent-browser와 Astryx는 어떤 코딩 에이전트와도 함께 씁니다. Craft Anything의 만들기 단계만 Claude Code를 먼저 지원하고, Codex · Copilot 등은 일부 지원입니다.

한 번에 정리하면

• 바탕: 무료 편집기 Zed 하나. 개인 요금제 0달러, 내 API 키나 외부 에이전트로 제한 없이 씁니다.
• 화면: Astryx로 빈 화면 대신 템플릿부터(부품 174 · 템플릿 57, 베타).
• 확인: agent-browser로 AI가 직접 열고, 읽고, 누르고, 다시 읽어 확인합니다.
• 긴 대화: billion-context로 접고 펼치기. "5배 절약"은 저장소 설명, 프록시 · 인증서 방식이라 회사 PC는 확인부터.
• 다시 만들기: Craft Anything은 내 서비스 · 허락받은 것에만, 아직 초기 알파.

다음 편에서는 이 도구들로 앱 하나를 끝까지 만들어 봅니다.

출처

• zed-industries/zed 저장소 · README: https://github.com/zed-industries/zed (2026년 11월 8일 확인)
• Zed 요금제: https://zed.dev/pricing (2026년 11월 8일 확인)
• meta/astryx 저장소 · README: https://github.com/meta/astryx (2026년 11월 8일 확인)
• vercel-labs/agent-browser 저장소 · README: https://github.com/vercel-labs/agent-browser (2026년 11월 8일 확인)
• ranxianglei/billion-context 저장소 · README · LICENSE: https://github.com/ranxianglei/billion-context (2026년 11월 8일 확인)
• storytold/craft-anything 저장소 · README · Releases: https://github.com/storytold/craft-anything (2026년 11월 8일 확인)
• 1탄: AI 코딩 스킬 추천 5가지 — https://aitoz.ai.kr/editorial/ai-coding-skills-top5
• 영상으로 보기: AItoZ 유튜브 '바이브코딩 무료 도구 추천 5가지 2탄 — 깃허브 별 17만, 오늘 바로 깔아 쓰는 AI 코딩 도구' — https://youtube.com/watch?v=8S8sSoKSqsw