6 개월 만에 Vibe Coding이되는 방법
완전한 curriculum 및 자원과 가이드
원본 제목 : 6 개월의 전문가 Vibe Coder가되는 방법
에 의해 원래: Avid
Peggy Block Beats의 사진
편집기 프레스 : Vibe Coding은 단순히 "AI가 코드를 작성"하지만 온라인 제품에 아이디어에서 완벽한 건설. 진정한 효과적인 방법은 Vague의 요구를 반복하지 않고 모델이 마술이 될 때까지 기다리지 만 계획, 신속한, 검토 및 배포를 배울 수 있습니다。
로드맵은 Vibe Coding을 6개월로 돌파했습니다. 먼저 웹, Git 및 기본 기술 창고를 완료하기 위해 Cursor, Claude Code와 같은 도구를 취득했습니다. 그런 다음 팁, 컨텍스트 엔지니어링, MCP, RAG, 테스트, 안전 및 생산 배포를 배우게 됩니다. 그것의 핵심은 초심자 전통적인 프로그래머를 만들지 않습니다, 그러나 진짜 신청을 만들기 위하여 AI를 체계적으로 사용하는 제품 아이디어가 있는 사람을 돕기 위하여。
초보자를위한 가장 중요한 권고 중 하나는 커리큘럼을 살펴 볼뿐만 아니라 그것을 계속합니다. 작은, 조작, 접근 가능하고 이기적인 프로젝트는 매달 완료되어야 합니다. 실제 진행은 당신이 배운 몇 가지 과정을 통해 제공되지만 실제로 제품을 출판하는지 여부。
다음은 원본 텍스트입니다:
Vibe Coding은 작은 트위터 실험에서 가장 존경받는 빌더의 기술 중 하나가되었습니다。
나는 단지 첫 번째 1 % Agenic Coder가되는 방법을 파업。
이른 입구 창은 여전히 열려 있지만 실제로 일을하는 사람들에게만 속합니다。
문제는 대부분의 초보자가 시작할 수있는 아이디어가 없습니다. 그들은 일반적으로: 커서를 다운로드, vague 아이디어를 입력, 그리고 그 뒤에는 왜 메시입니다; 읽는 countless YouTube 자습서, 그러나 결코 진짜로 일을; 힌트를 구성하는 방법을 이해하지 않고 복잡한 도구로 점프, 또는 배치。
결과는 일반적으로 동일합니다 : 반 완성 된 데모, "repairing Bugs의 죽음주기 및 새로운 버그"와 실제 온라인 제품의 부재。
가이드는 이 문제를 해결하기위한 것입니다. 그것은 2025-2026에 대한 입증 된 리소스와 함께 월별 세부 도로지도입니다. 모든 기술을 덮어 실제 제품을 제공하기 위해 완전히 제로베이스에서 성장해야합니다. Vibe Coder. 매달 이정표와 각 기술에는 자원 링크가 있습니다。
우리가 시작하기 전에 하나의 규칙이 있습니다 : 모든 것은 손으로 수행됩니다。
그것은 독서에 관하여 아닙니다, 사람들이 그것을 하는 것을 보는 것에 관하여 입니다, 그것은 진짜로 오프닝 공구에 관하여, 그(것)들을 고치고, 마지막으로 그(것)들을 간결합니다。
Vibe Coding, 그것은 무엇입니까
"Vibe Coding"라는 단어는 AI 연구자 Andrej Karpathy가 제안했습니다. 그는 AI에 완전히 위탁되는 프로그램 접근을 설명하기 위하여 그것을 이용합니다: AI에서 각 제안을 받아들이고, 부호를 수동으로 검토하고, 결국 결과를 설명하는 모든 주의를 집중해서, 오히려 사람에 있는 논리를 쓰기 보다는。
실제로, 그것은 당신이 자연 언어로 원하는 소프트웨어를 설명하는 것을 의미, 그리고 그 다음 AI 생성, INVERT, 테스트 및 당신을 위해 코드를 복구。
그러나 대부분의 초보자는 한 가지를 무시하는 경향이 있습니다 : Vibe Coding은 수동 대기하지 않습니다, 그것은 마술이 아닙니다. 그것은 근본적으로 인간적인 의도를 가동 소프트웨어로 변형시키는 구조화 과정입니다。
산출의 질은 입력의 질에 거의 완전히 달려 있습니다: 당신의 힌트, 상황 문서, 계획 기능 및 AI 산출 내용을 검토하는 당신의 능력. 이 입력을 마스터는 전체 게임의 핵심입니다。
2026년까지 Vibe Coding 도구는 두 가지 넓은 범주로 나뉩니다
AI 애플리케이션 빌더 : e.g., Loveable, Bolt 및 Reprit. 이러한 도구는 호스팅 및 배포를 포함하여 설명에 따라 전체 스케일 응용 프로그램을 생성 할 수 있습니다. 그들은 비 기술적인 사용자 및 빠른 트랙 프로토 타입 개발자를 향해 동쪽으로 향하고 로컬 구성 환경을 요구하지 않습니다。
AI 프로그래밍 IDE : e.g. Cursor 3.0, 클로드 코드 및 윈드 서핑. 이러한 도구는 개발 환경에서 임베디드되고 개발자가 준비, 디버그 및 이더넷 코드에 도움을 줍니다. 그들은 기술적인 기초를 필요로 하고, 그러나 심각한 생산 수준 발달에 있는 더 높은 통제 그리고 수용량 모자를 제공합니다。
이 도로 맵은 세계로 가져갈 것입니다 : 모든 도구가 더 잘 작동하도록 기본 기술을 사용하여 특수화로 이동하기 전에。
월 1 : 기본 용량, 모든 Vibe Coder해야합니다
이번 달의 목표는 AI가 더 이상 검은 상자처럼 보이지 않는 코드를 생성하는 개념 수준에서 소프트웨어가 작동하는지 이해하는 것입니다, 그리고 그것은 그것을 직접하기에 더 지능적입니다。
Vibe Coder의 가장 일반적인 실수는 이번 달을 완전히 건너 뛰는 것입니다. 그들은 도구를 열고, 다음 vague 힌트를 작성하고 결과를보고 혼란을 얻고, 그 다음 지역 사회가 자주 "사격"을 호출하는 것을 떨어졌다 : AI를 해결하기 위해 버그, AI 새로운 버그를 생성하고 재활용 할 수 있습니다。
사이클을 탈출 할 수있는 사람들은 보통 충분한 기본 지식을 가지고있다. 그들은 단순히 AI의 출력에 응답하지 않습니다, 그러나 그들은 그것을 읽고 그것을 안내 할 수 있습니다。
프로그래머가 될 필요가 없습니다. 스마트한 질문과 명백한 실수를 찾을 수 있도록 충분한 개념의 기초를 가지고 있어야 합니다。
우리는 어떻게 작동합니까
웹 제품을 구축하기 전에 개발중인 인프라를 이해해야합니다. 대부분의 Vibe Coding 제품은 웹 응용 프로그램입니다. 이것은 기본 클라이언트가 무엇인지 알 필요가 -- 서버 모델, 백 엔드와 브라우저를 통신하는 방법, URL은 무엇을, 그리고 API는 무엇인가。
자료:
MDN 웹 문서 : 웹 작업 방법
링크 :https://developer.mozilla.org/en-US/docs/Learn/Web 작업 시작
이것은 Mozilla가 유지 한 브라우저, 서버 및 HTTP의 가장 명확하고 가장 권위있는 해석 중 하나입니다。
MDN: HTTP 개요 (무료)
링크 :https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
GET과 POST의 차이를 설명, 상태 코드 (200 OK, 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Server Error) 그리고 왜 이러한 팁이 응용 프로그램에 나타납니다。
RET API 튜토리얼 (무료)
링크 :https://restfulapi.net/ - 한국어
짧고 실용적이며 직접 적용 가능합니다. 학습 후, API를 호출 할 때 Vibe Coding을 통해 작성된 각 백엔드에 무슨 일이 있었는지 이해할 수 있습니다。
이해해야 할 사항 :
당신은 페이지 끝 렌더링에 URL을 입력, 중간에 무슨 일이
앞에와 뒤 끝 사이 구별: 정면 끝은 사용자가 보고 뒤에 오는 공용영역은 서버 논리 및 데이타베이스입니다
API는 무엇입니까, 요청은 무엇입니까, 응답은 무엇인가
HTTP 상태 코드는 의미와 그들이 응용 프로그램을 디버깅 할 때 나타내는 것
"environmental variable"이란 무엇이며, 키가 코드를 직접 쓸 수 없습니다。
Git 및 GitHub: 당신의 시간 기계
이것은 전체 가이드의 가장 중요한 실용적인 기술 중 하나입니다. 모든 심각한 Vibe Coder는 Git를 사용합니다。
Git없이, 나쁜 AI 힌트는 작업의 시간을 파괴 할 수 있으며 다시 방법은 없습니다. Git로, 각 정상 상태는 당신이 언제든지 돌려보낼 수 있는 체크 포인트일 것입니다。
Git는 선택하지 않습니다. 모든 시간의 AI 나사를 효율적으로 구축하거나 있는지 결정합니다。
학습 방법은 주문을 작성하려고하지 않지만 먼저 모델을 이해하는 것입니다. Git은 시간이 지남에 따라 파일 변경을 추적하고이 역사에서 앞으로 나아갈 수 있습니다. 당신이 이해하면, 주문은 자연스럽다。
자료:
Vibe Coders에 대한 Git : 실제로 Matter
링크 :https://www.youtube.com/watch?v=ADEFvP5Gw5c
Vibe Coder를 위해. 실제 Next.js 프로젝트를 통해 guit add, Git part, git push, git pull, branch 및 roll back에 대해 이야기하십시오。
Vibe Coders 용 Git 및 GitHub (무료 가이드, DeepakNess.com)
링크 :https://deepakness.com/blog/git-for-vibe-coders/
이 가이드는 2025 년 말에 AI 보조 개발자를 위해 예정되어 있으며, 매일 15-20 분마다 제출을 포함하여 Vibe Coder의 Git 워크플로를 덮고 AI 세대 변경을 수락하기 전에 git diff로 변경할 수 있습니다。
Git Blanching 알아보기 (무료, 대화 형)
링크 :https://learkitbranching.js.org/
Branching과 merging을 이해하기 위해 가장 좋은 시각 도구 중 하나는 환경을 구성 할 필요없이 브라우저에서 직접 실행할 수 있습니다。
GitHub Skills (무료, 대화형)
링크 :https://skills.github.com/
GitHub에서 직접 진행된 GitHub 공식 대화식 코스。
에 초점:
그것은 좋은 아이디어를 좋아하지 않습니다, 그것은 좋은 아이디어입니다, 그것은 좋은 아이디어입니다
새로운 기능을 시작하기 전에 새로운 지점 만들기
guit 로그를 사용하여 역사와 guit 뒤집기와 unmodified
.gitignore 파일을 생성하고 첫 번째 푸시 전에 .env 파일을 추가합니다
AI로 실험할 때 기능적인 분지를 사용하십시오: 우선 분지를 창조하고, 그 후에 분지를 병합하십시오。
규칙은 이제부터, 모든 프로젝트는 예외없이 GitHub 창고에 있어야합니다。
기본 HTML, CSS 및 JavaScript 랜덤
프론트 엔드 개발자가 될 필요가 없습니다. AI에 의해 생성 된 구성 요소를 이해하고 div, 버튼, onclick 및 usestate의 일반적인 용어를 이해해야합니다。
그것은 일주일에 걸릴 것입니다, 하지만 당신은 많은 시간을 절약할 수 있을 때 인터페이스의 특정 부분의 AI 수정。
자료:
Odin 프로젝트: 기초 (무료, 자기 학습)
링크 :https://www.theodinproject.com/paths/foundations
인터넷에서 최고의 무료 기본 코스 중 하나입니다. 당신이해야 할 모든 HTML Foundations, CSS Foundations 및 JavaScript Basics. 중간 속도는 대략 1-2 주 걸립니다。
freeCodecamp: 무료 웹 디자인
링크 :https://www.freecodecamp.org/learn/2022/responsive-web-design/
브라우저 연습을 기반으로 구성할 필요가 없습니다. Odin 프로젝트를 보완할 수 있습니다。
JavaScript.info (무료 참조)
링크 :https://javascript.info/
현재 가장 명확한 JavaScript 문서 중 하나입니다. AI가 이해할 수없는 코드를 생성하면 참조로 사용할 수 있습니다. JavaScript 해석의 MDN과 동일합니다。
에 초점:
HTML: 요소, 속성, 임베디드 관계, 페이지 구조
CSS: 선택기, Flexbox, 그리고 왜 인터페이스는 스타일을 나타냅니다
JavaScript: 변수, 함수, 배열, 객체 및 async/await의 의미
React 기초: 구성 요소는 무엇이고, props와 state는 무엇입니까。
기술 및 스틱을 선택하십시오
초보자의 가장 일반적인 오류 중 하나는 프레임 워크의 일정한 전환입니다。
AI 모델은 오픈 코드에 훈련되었습니다. 그들은 차문 기술 보다는 대중 적이고 및 잘 문서화한 기술 막대기에 현저하게 잘 실행합니다. 더 대중적인 기술 창고는, 관련 커리큘럼, 케이스 및 훈련 자료, AI 산출의 더 높은 질입니다。
2026년에, Vibe Coder 초심자에 추천된 기술 창고:
프론트엔드: React, Next.js (App Router);를 통해 사용
스타일: 꼬리바람 CSS
데이터베이스 + 인증: Supabase (Postgres 데이터베이스, 인증, 스토리지, API를 통해 모든 사용)
배포: Vercel
언어: TypeScript 또는 JavaScript에 Prefer。
이 기술 창고는 AI 지원 개발을 위해 완전히 호스팅되는 시동기에 친절하, 그리고 당신은 서버 인프라를 관리하고 완전한 전체적인 더미 제품을 풀어 놓기 없이 데이타베이스에서 온라인으로 갈 수 있습니다。
또한 세계에서 가장 일반적인 기술 집 중 하나이므로 AI 도구는 매우 익숙합니다。
자료:
Next.js 공식 과정: Next.js (무료, 대화형)
링크 :다운로드
공식 대화형 코스는 단계별로 완벽한 대시보드 응용 프로그램을 구축합니다. 앱 라우터 버전은 2024 년에 업데이트되었으며 여전히 적용됩니다。
테일러 CSS Docs (무료)
링크 :https://tailwindcs.com/docs
Tailwind는 독립 최초의 CSS 프레임 워크입니다. 그것은 고품질입니다. 교육 데이터의 고밀도로 인해, tailwind 코드의 AI 세대는 일반적으로 대부분의 다른 스타일 시스템보다 잘 작동합니다。
Supabese Docs: 시작하기
링크 :https://subbase.com/docs/guides/getting-stard.com/
Supabese는 Postgres 데이터베이스, 라인 보안 정책, 식별 (mailbox, 소셜 로그인, 한 번 암호) 및 파일 저장을 제공하여 간단한 JavaScript SDK를 통해 액세스 할 수 있습니다。
Vercel: 시작하기
링크 :https://vercel.com/docs/getting-stard-with-vercel
GitHub 창고를 Vercel에 연결하고 매번 배포합니다. 전체 구성은 약 5 분 정도 소요됩니다。
월 1 이정표
달의 끝에, 당신은 할 수 있어야합니다:
API가 무엇인지 설명하고 브라우저가 요청을 시작했을 때 무슨 일이 있었는지
Git 저장소 만들기, 코드를 제출, 지점을 만들고 GitHub에 밀어
AI에 의해 생성 된 React 구성 요소를 읽고 대략적인 구조를 이해
기본적으로 Next.js 프로젝트를 만들고 npm run dev로 로컬로 실행하십시오
static 페이지는 GitHub 저장소를 연결하여 Vercel에 배포되었습니다。
월 2 : 도구의 마스터리, 커서 3.0, 클로드 코드 및 빌더 생태학
이번 달의 목표는 핵심을 마스터하고 다른 도구가 맞는 것을 이해하고 첫 번째 완벽한 프로젝트를 완료하는 것입니다。
이번 달부터 Vibe Coding은 실제로 운영 단계에있었습니다. 2026 년에 사용할 수있는 도구는 이미 매우 강력하지만, 그들은 그들을 사용하는 방법을 알고 사람들을 보상하고 "마법"으로 치료하는 사람들을 처벌합니다。
전체 공구 차트 이해 (2026)
2026년까지, Vibe Coding은 분명히 성숙되었습니다. 다음은 5 월 2026만큼 이해하는 모든 주류 도구의 상태입니다。
AI 프로그래밍 IDE
기술적인 건축업자에 반 기술적인 적합。
커서 3.0
풀 파워 AI-First 편집기. 무료 / 프로 버전 $20 월. Agents Windows, Parallel Clouds Agent, Composer 2, Marketplace, 내부 브라우저를 지원합니다。
Claude 코드
나는 Agenic 프로그래밍 및 전체 코드 라이브러리 이유에 좋다. 사용법에 따라, 그것은 또한 달 당 $20에 Claude Pro를 통해 사용될 수 있습니다. 현재 CLI, VS Code 플러그인, 데스크톱 응용 프로그램 및 Webend를 지원합니다。
윈드 서핑
제한된 예산으로 비즈니스 사용자 및 개발자에 더 적합합니다. 무료 / 프로 버전 $ 15 월. Cascade 에이전트는 2025 년 $ 2.4 억에서 Google에 의해 인수되었습니다。
프로젝트
모든 IDE에서 일일 지원을 제공합니다. 무료 / 프로 버전 $ 10 월. VS Code, Jetbrains, Neovim, Xcode 등의 환경 개발 지원。
제품정보
고급 오픈 소스 사용자를 위해. 도구 자체는 무료이며 API 토큰으로 지급됩니다. Claude, GPT-5.5, Gemini 또는 로컬 모델을 연결하는 VS Code 플러그인입니다。
Google의 방사성
더 많은 대리인 평행한 건축을 위한 적합. 정해진 가격. 11월 2025일, Gemini 3을 따르는 "Manager View"가 병렬 에이전트를 관리하기 시작했습니다。
코드 없음 / 전체 애플리케이션 빌더
Zero Base 사용자 및 빠른 프로토타입 개발을 완료하는 데 적합합니다。
인기있는
비 기술적인 배경 설립자 및 React UI 빌드에 적합합니다. 무료 / 프로 버전 $ 25 월. 완벽한 React + Supabase 전체 집 응용 프로그램을 생성 할 수 있습니다。
다운로드
로컬 구성 없이 웹 애플리케이션을 빠르게 생성합니다. 무료 / 프로 버전 $29 매월. 브라우저에서 완전히 실행되며, 스타터가 신속하게 시작할 수 있습니다。
베셀 v0
UI 구성 요소를 생성하는 적합. 무료 버전 / 월 $ 20. 개발자에 의해 더 적합, 지원 GitHub 동기화 및 Vercel에 직접 배포。
팟캐스트
건설 및 호스팅을 통합합니다. 무료 버전 / 월 $ 20. 가장 완벽한 기능, Agent 3은 브라우저에서 직접 응용 프로그램을 구축하고 배포 할 수 있습니다。
기초 44
CODELESS 내부 공구 발달에 적합. 무료 버전 / 월 $ 20. 비 기술적인 건축업자를 위해, AI 보조 신청 및 뒤 최후 기능을 제공합니다。
자주 묻는 질문
기술 배경이없는 초보자라면, Loveable 또는 Bolt.new로 시작할 수 있습니다。
개발자라면 현재 작업 흐름에 AI를 통합하려면 Cursor 3.0 또는 GitHub Copilot을 선택할 수 있습니다。
터미널에 사용되는 경우, 전체 코드 라이브러리 컨트롤을 원하면 Claude Code를 선택할 수 있습니다。
예산에 민감한 개발자라면 윈드 서핑을 위해 $ 15를 선택할 수 있습니다。
팀과 엔터프라이즈 수준의 응용 프로그램을 구축하려고하면 Windsurf에 의해 Google에 인수되고 고려할 수 있습니다。
지원하다
readmap.sh: 10 최고의 비디오 전략 2026
링크 :https://roadmap.sh/vibe-coding/best-tools
이것은 2026을위한 최고의 도구의 커뮤니티 기반 목록입니다。
BuildMVPFast: 10 베스트
링크 :https://www.bildmvpfast.com/blog/best-vibe-coding-tools-2026
완벽한 결정 트리 및 공구의 해체, 2026에 의해 확인 된 가격 정보。
2026 Vibe 작업 도구 비교 (무료, Technically.dev)
링크 :https://technical.dev/posts/vibe-coding-tool-comparison
Reflit, V0, Loveable 및 Bolt는 프로젝트와 비교되었습니다。
Vibe Coding: 왜 우리는 Liveable와 놀이쇠에 윈드 서핑을 전합니다
링크 :https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable
실제 웹 프로젝트를 기반으로 4 도구의 팀 평가는 4 월 2026에서 수행 및 출판되었습니다。
Cursor 3.0: 완전한 remodel
Cursor 3.0은 2 4 월 2026에 출시되었으며, Anyshe가 2023에 VS Code를 기반으로 한 가장 중요한 업데이트가되었습니다。
"AI 함수는 파일 편집기" 도구에 superimposed 하지만 에이전트와 건물 소프트웨어에 대 한 통합 된 작업 공간이 되었습니다。
Cursor 3.0.00 새로운 기능
윈도우
완전히 새로운 독립 공용영역은 Cmd/Ctrl+를 통해 열 수 있습니다 이동 + P →AgentsWindow는 평행한에 있는 다수 AIAgents를 실행하기 위하여. 에이전트는 같은 시간에 로컬 기계, 클라우드 환경, SSH 또는 Git 작업 스트림에서 실행할 수 있습니다。
컴파일러 2
Cursor 's self-study forward 프로그래밍 모델, 다중 문서 코드 편집 및 이력 훈련에 전념。
클라우드 시대
원격 클라우드 샌드박스에 에이전트를 실행합니다. 당신은 임무를 시작하고 나중에 다시 와서 결과를 확인 할 수 있습니다. 엔터프라이즈 호스팅 클라우드 및 에이전트는 3 월 25, 2026에서 온라인으로 왔습니다。
내부 브라우저
통합 브라우저는 에이전트가 실제 렌더링을 직접 볼 수 있으며 수동 스크린 샷을 사용하지 않고 자체 수정을 테스트 할 수 있습니다。
Cursor 마켓
Skills, Subagents, MCP Servers, Hooks 및 Rules를 감싸는 원클릭 플러그인을 설정합니다. 사용 가능한 플러그인은 AWS, Figma, Linear, Stripe, Vercel, Datadog, Snowflake 등을 포함합니다。
디자인 모드
브라우저에서 렌더링 된 UI 요소에 직접 클릭하고 드래그 할 수 있으므로 AI가 정밀도로 해당 부분을 편집합니다. 더 이상 단어의 구성 요소의 위치를 설명 할 필요가 없습니다。
회사연혁
이 기능은 3 월 5, 2026에 게시되었습니다. 시간 임무, 슬랙 메시지, 선형 문제, GitHub 사건 및 PagerDuty 경고와 같은 외부 이벤트에 의해 유발 될 수있는 영구 에이전트입니다. 에이전트는 클라우드 샌드 박스를 시작하고 MCP를 사용하여 임무를 수행 할 수 있습니다。
새로운 Diffs 보기
낱말 수준 변화 검토, 임시 저축 및 잡아당기기 요구의 창조를 지원하고, 전체 과정은 의제 Windows 안에서 행해질 수 있습니다。
/worktree 명령
작업은 독립 Git worktree에서 실행하여 에이전트가 주요 지점을 오염시키는 것을 방지합니다。
/best-of-n 명령
여러 모델에서 동일한 작업을 실행하고 최고의 결과를 반환합니다。
지원하다
Cursor Changelog: 3.0 (공식, 무료)
링크 :https://cursor.com/changelog/3-0/ - 한국어
커서 3.0。
Datacamp : 커서 3이란 무엇입니까
링크 :https://www.datacamp.com/blog/cursor-3
커서 3.0의 경우. 각 새로운 기능의 가장 완벽한 텍스트 중 하나, 에 게시 7 4월 2026。
Cursor 3 경제 코딩에 대한 모든 변경
링크 :https://www.youtube.com/watch?v=HTKGyLar8AU
아르헨티나 Windows, Composer 2, 내장 브라우저, 병렬 에이전트 및 마켓 플레이스의 완벽한 데모。
Cursor 튜토리얼 2026 : 15 분에서 AI 코딩을 알아보기
링크 :https://www.nxcode.io/resources/news/cursor-tutorian-beginners-2026
Composer, Agent Mode 및 Cloud Age를 다루는 초심자를위한 단계별 가이드。
AI로 빠른 빌드 : Cursor 3 vs Google Antigravity
링크 :https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026
Cursor 3.0을 Google의 새로운 AI IDE Antigravity와 비교합니다。
Claude Code: 전체 저장소를 이해하는 Actic Coding 도구
Claude Code는 Anthropic에서 시작된 endogene Agenic 프로그래밍 도구입니다。
오픈 파일 주위에 주로 작업하는 IDE 도구와 달리, Claude Code는 여러 파일에 걸쳐 전체 코드 라이브러리를 읽을 수 있습니다, 명령을 실행, Git 작업을 처리하고, 모든 단계에서 당신의 승인을 요청。
이제 4개의 환경에서 사용할 수 있습니다: 터미널 CLI, VS Code 플러그인, Jetbrains IDE 및 데스크톱 애플리케이션。
시작하기
한 달에 $ 20 이상의 Claude Pro 구독이 필요하며 MacOS, Linux 또는 Windows 11의 터미널을 사용해야합니다。
npm을 통해 설치:
@antropic-ai/claude 코드
다른 Organiser
cd ~/projects/my-app & 클로드
탐험 팁 시작:
이 프로젝트는 무엇입니까?
이것은 Claude가 모든 것을 변경하기 전에 코드 라이브러리를 분석 할 수 있습니다。
Core Workstream: Excelre 계획 코드
Excellore: 탐험
Shift + 탭을 두 번 눌러 플랜 모드를 입력합니다. Claude는 문서를 읽고 질문에 대답하지만 아무것도 변경하지 않습니다. 이 모델은 프로젝트 구조, 트랙 데이터 흐름, 코드 라이브러리 구조를 빗을 이해할 수 있습니다。
계획: 계획
Plan Mode에서 Claude가 현실화 계획을 만듭니다. 당신은 그것을 검토해야합니다, 그것을 미세 조정하고 동의하지 않는 그 부품을 카운터. "앞으로"만 확인 후。
코드: 코드
정상 모드로 다시 잘라. Claude는 계획, 전시 diff로 기능하고 각 단계에 당신의 승인을 요구할 것입니다。
위원회: 제출
diff 검토, 테스트를 실행, 다음 명확한 제출으로 완료。
CLUDE.md는 무엇입니까
CLUDE.md는 Claude Code를 말하는 프로젝트 루트 디렉토리의 Markdown 파일입니다
당신의 프로젝트는 어떻게 작동합니까
어떤 계약이 수행되어야한다
어떤 주문이 실행되어야한다
변경할 수 없습니다。
실행할 수 있습니다:
@claude /init에
초기 버전을 생성하고 프로젝트 상황에 따라 사용자 정의 할 수 있습니다。
지원하다
bilder.io : Claude 코드를 사용하는 방법
링크 :https://www.bilder.io/blog/how-to-use-claude-code
현재 가장 완벽한 Claude Code Presbyterians 과정은 설치, 계획 모드 워크플로우, CLADE.md 설정 및 모범 사례 중 하나이며, 4 월 2026에 출판되었습니다。
비 기술 초보자를위한 전체 클로드 코드 자습서 (YouTube, 무료)
링크 :https://www.youtube.com/watch?v=bqJziWAEn40
Claude Code에서 응용 프로그램을 구축하기위한 단계별 비디오 자습서, 프로그래밍 경험없이, 4 월 2026에서 출판되었습니다。
클로드 코드 전체 과정; 4 시간
링크 :https://www.youtube.com/watch?v=QoQBzR1NIqi에
현재 구성에서 제품 출시 및 판매까지의 전체 과정을 다루는 가장 완벽한 Claude Code 비디오 코스 중 하나입니다。
초보자를위한 클로드 코드 Tutorian 2026 (무료 가이드, Dev.to)
링크 :https://dev.to/ayyazzafar/claude-code-tutorian-for-beginners-2026-from-establishment-to-building-your-first-project-1ma
텍스트 세션, 설치, 최종 구성 및 첫 번째 프로젝트의 건설。
Claude Code 시작하기: 연구자의 설정 가이드
링크 :https://paulgp.substack.com/p/getting-stard-with-claude
그것은 특히 충분한 특정, 컨텍스트 창 관리, 그리고 이기적인 알림의 원리를 이해하는 것이 적절합니다。
OpenSaaS.sh : 2026 년 Saas Vibe 코드에 가장 좋은 방법
링크 :https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
Saas Vibe Coding의 소개 : Claude Code + Structured SaaS Template + LLM 친절한 문서 (llms.txt). 또한 배경 개발 서버를 실행하는 방법을 포함하므로 Claude는 실시간 로그와 Chrome DevTools MCP를 통해 브라우저를 자동화하는 방법을 볼 수 있습니다。
월 2 이정표
달의 끝에, 당신은 할 수 있어야합니다:
다른 프로젝트 유형에 적합한 도구 선택
Cursor 3.0. , 클라우드 에이전트를 통해 작업을 수행 할 Genents 창
코드를 작성하기 전에 Claude Code의 Plan Mode로 계획하십시오
모든 항목에 대한 CLAUDE.md 파일을 설정합니다
빌드 및 배포 적어도 하나의 전체 프로젝트, 제대로 실행할 수있는 웹 응용 프로그램 및 라인에 실제 URL。
월 3 : 힌트, 컨텍스트, 구조 및 안정적인 출력의 예술
이번 달의 목표는 Vibe Coding의 핵심 기술을 가지고 있으며, 이는 힌트를 작성하고 컨텍스트를 관리하고 AI를 활성화하여 궁극적 인 첫 시도에서 실제로 원하는 것을 할 수 있습니다。
Vibe Coding 기술의 전체에서 Hints는 가장 활용한 기술입니다. 당신의 hints가 vague인 경우에, 공구 자체는 거의 불평합니다. 좋은 힌트를 가진 정규적인 공구는 항상 vague hint를 가진 최고 공구 보다는 더 낫습니다。
괜찮아, Vibe 코딩, 힌트 작업은 어떻게
새로운 좋은 힌트의 차이는 거의 완전히 구조에 있습니다。
newcomers 말한다:
로그인 페이지를 추가합니다。
주인은 말한다 :
앱/로그인/페이지의 로그인 페이지를 만듭니다. tsx, lib/subabase.ts의 기존 Supabase 남쪽 채널을 사용하여. 양식 스타일은 app/signup/page.tsx를 따릅니다. 메일박스와 비밀번호 입력 박스를 포함, 버튼 제출, 잘못된 로그인 바우처에 대한 오류 팁을 처리. 다른 문서를 수정하지 마십시오。
이전은 사용 가능한 구성 요소를 생성 할 수 있습니다, 다른 문서를 파괴, 또는 현재의 코드 라이브러리에 inconsistent 모델 소개. 후자는 프로젝트 구조와 일관성있는 진정한 운영 구성 요소를 생산할 가능성이 더 높습니다。
좋은 힌트는 보통 4개 부품으로 이루어져 있습니다:
대상 : 이 기능은 무엇입니까
Context: 어떤 문서는 관련이 있습니까? 현재 프로젝트란
공급 능력: 변경할 수 없습니다? 어떤 모델이 따라야 하나요
출력 형식 : 최종 결과는 무엇입니까
지원하다
Anthropic: Interactive Prompt Engineering Tutoric (무료, GitHub)
링크 :https://github.com/antropics/prompt-eng-interactive-tutorian
이것은 Jupyter 노트북에서 Claude API를 통해 실행하도록 설계된 운동을 포함하는 9 차터 상호 작용하는 과정입니다. 최고의 손에 힌트 엔지니어링 코스 중 하나입니다。
ProptingGuide.ai (무료)
링크 :https://www.promptingguide.ai/
기본 팁, 생각 체인, 몇 샷 예, Agenic 경고에 기술의 전체 내용을 커버하고 지속적인 기초에 업데이트합니다。
r/PromptEngineering: 궁극적인 Vibe 기호화 가이드 (무료, Reddit)
링크 :https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the multimate vibe 코딩 가이드/
Vibe Code의 8een 운영 경험, AI 편차를 처리하는 방법을 포함하여, 여러 기능 사이의 일관성을 유지하는 방법, 그리고 "Common AI Mistakes" 문서를 만드는 방법。
Roadmap.sh : Vibe Coding 모범 사례
링크 :https://roadmap.sh/vibe-coding/best-practices
Vibe Coding 도구에서 꾸준한 결과를 얻을 수 있도록 연습의 10 가지 규칙을 제공합니다. 이는 2026에 업데이트되었습니다。
Appwrite: 완전한 Vibe 작동 가이드 2026 (무료 가이드)
링크 :https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025
Vibe Coding을 사용하는 승객의 완전한 설명, 명확한 메시지를 작성하는 방법 및 도구보다 오히려 빌더로 제어를 유지하는 방법。
PRP FRAMEWORK: 계획, 다음 팁
"살균"의 가장 일반적인 원인은 어떤 계획없이 기능의 개발의 직접 시작입니다。
AI는 무언가를 끊는 부호를 썼습니다; 당신은 그것을 고르고, 다른 것을 끊었습니다; 그리고 그 후에 전체적인 과정은 내려갔습니다。
이 솔루션은 정말 간단합니다 : 코드 단어를 작성하기 전에 계획을 작성합니다。
PRP 프레임 워크:
Vibe Coding 도구를 열기 전에, 하나의 문서에 세 가지 질문에 대답 :
누구
대상 사용자는 누구입니까? 어떻게 편안합니까
어떻게 해결하나요
1개의 문장에 있는 명확한 핵심 가치。
성공은 무엇을 좋아합니까
특정, 테스트 가능한 기준을 작성합니다。
그런 다음 Claude 또는 ChatGPT에 대한이 문서를 손으로하고 전체 제품 수요 문서 또는 PRD로 확장하십시오. 이 PRD는 Cursor 또는 Claude Code의 오프닝 구문이 될 것입니다。
이 습관은 실제로 제품을 게시 할 수있는 "사람들"과 "사람들은 죽음의주기에서 잡았다."。
특히 Claude Code에서 Shift + Tab을 Plan Mode로 두 번 누릅니다. Claude는 문서가 생성되거나 수정 될 수 있음을 나타냅니다. 이 함수는 경계 상황이나 구조가 결정에 고려되어야합니다. 당신은 의심스러운 요소를 정제 할 계획을 검토하고 확인 후 "앞으로"라고 말해야합니다。
llms.txt: AI-readable 문서를 위한 표준
Vibe Coding의 가장 가치있는 기술 중 하나는 llms.txt입니다。
라이브러리, 프레임 또는 프로젝트 루트 디렉토리 아래에 배치되는 일반 텍스트 Markdown 파일로 프로젝트가 올바르게 사용하는 데 필요한 정확한 상황에 맞는 AI 도구를 제공합니다。
그것은 브라우저 읽기에 액세스하고 최적화 된 대부분의 라이브러리 문서의 문제를 해결합니다. AI 모델은 HTML, JavaScript의 문서 페이지 및 탐색 메뉴에서 잘 작동하지 않습니다. Allms.txt는 이러한 모든 방해를 제거하고 컨텍스트 창에 배치 할 수있는 깨끗하고 구조화 된 집중된 API 참조로 모델을 제공합니다。
allms.txt는 어디에 있습니까
대부분의 주류 라이브러리는 이제 llms.txt를 게시합니다. 예를 들면:
https://docs.subabase.com/llms.txt
이 URL을 Claude Code, Cursor 또는 ChatGPT로 붙여넣을 수 있으며, 다음과 같이 말하십시오. 이 문서를 먼저 읽고,이 라이브러리에서 기능을 빌드하는 데 도움이됩니다。
llms.txt를 가지고 있지 않는 라이브러리의 API 문서의 사본을 생성 할 수 있습니다: 문서의 복사, Claude에 붙여 넣기, 다음 말한다: 문서를 정리하십시오 clear llms.txt 형식, 카테고리, 방법, 필요한 매개 변수 및 예제를 포함. 5,000개의 토큰 안에 통제됩니다。
OpenSaaS 기술 볼트, 클로드 코드 + 오픈 SaaS 보일러 플레이트, 보일러 플레이트와 Wasp 프레임 워크 모두에 대한 llms.txt를 사용합니다. Claude Code가 어떤 기술 창고보다이 구성에서 훨씬 안정적인 코드를 생산할 수 있는 이유 중 하나입니다。
지원하다
llms.txtOfficial 표준
링크 :https://llmstxt.org/
모든 llms.txt 문서의 라이브러리 및 프레임 워크를 나열하는 공식 규정。
OpenSaas : Vibe에 가장 좋은 방법은 2026 년 사스를 코드
링크 :https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
이것은 llms.txt, SaaS Boilerplate 및 Claude Code를 2026년 가장 안정적인 Vibe Coding 구성 중 하나로 결합하는 방법입니다。
Cursor 규칙 및 CLAUDE.md : AI에 장기 명령
Cursor 규칙 및 CLAUDE.md 문서는 Vibe Coding에서 가장 낮은 사용률을 가진 관행 중 하나이지만 가장 높은 출력입니다。
AI가 각 세션의 시작 부분에 읽을 수 있는 내구성 명령 파일입니다. 그들은 프로젝트, 계약, 기술 볼트를 정의하고, AI가 할 수없는 것을 정의합니다。
큐서 설정 2026
Cursor는 .cursor/rules/catalogue를 가진 이전 단 하나 .cursorrus 파일을 대체하고 분리된 .mdc 파일 관리 규칙을 채택합니다。
규칙에는 4 가지 활성 모드가 있습니다
항상 적용
각 대화는 상황에 관계없이로드됩니다。
자동차 부착 (글로벌)
예를 들어 *.tsx 파일에 매칭 모드를 지정할 때 자동으로 활성화됩니다。
Agent 요청 (설명에 따라)
AI는 임무 설명을 기반으로 적용 할 때 판단。
수동 (@rule-name)
힌트에 명시적으로 인용하는 경우에만。
좋은 규칙 세트는 무엇입니까
(a) .cursor/index.mdc 문서는 프로젝트 단면도, 기술 창고 및 100개의 선 안에 포함될 것을 제안되는 일반적인 계약 설명하기 위하여
.cursor/rules/에 있는 몇몇 분리되는 .mdc 파일을, 입증과 같은 특정한 상황에 대응하는, 데이타베이스 모드, UI 성분, 등 창조하십시오
CLUDE.md 파일을 루트 디렉토리에 넣어 Claude Code에 대한 동일한 정보를 작성합니다。
지원하다
Vibe Coding 아카데미 : 커서 규칙 완전 가이드 + 15 템플릿
링크 :https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
이것은 .mdc 형식, 4개의 활성화 형태 및 15개의 일반적인 기술 더미를 포함하는 Cursor 규칙에 가장 상세한 2026 가이드의 한개입니다。
CLUDE.md 및 커서 규칙 : 멀티 사랑 (YouTube, 무료)
링크 :https://www.youtube.com/watch?v=Ia54BXaci5o
Cursor 및 Claude Code의 다중 계층 규칙을 설정하는 방법에 대한 심층 토론, 실제 사례를 포함. 비디오는 mid-2025에서 출시되었지만 여전히 완전히 적용 가능합니다。
Cursor (YouTube, 무료)에서 SKILLS.md를 만들고 사용하는 방법
링크 :https://www.youtube.com/watch?v=DfL5 zbWGc
Cursor의 기술 시스템에 대한 소개는 2 월 2026에 발표되었습니다. Content overwrite를 만드는 방법. 에이전트가 슬래시 명령으로 호출 할 수있는 커서 / 스킬 / 파일。
Cursor Directory (무료, 커뮤니티)
링크 :https://cursor.directory/ 한국어
지역 사회 공헌을위한 규칙 문서의 카탈로그, 대형 기술 상점을 덮고. 기술 스택을 일치하는 규칙 파일을 선택하고 그 후에 사용자 정의하십시오。
굉장한 커서 규칙 (무료, GitHub)
링크 :hTTPS://github.com/PatrickJS/awesome-cursorrules
선택된 고품질 규칙 문서의 저장소, 프레임 워크에 의해 분류 및 지속적으로 업데이트。
Synch 코딩 규칙 : 커서, 클로드 코드 및 윈드 서핑
링크 :https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude
더 고급 접근법: 자동적으로 하드 링크로 모든 AI 도구에 마스터 규칙 파일을 동기화。
Spec-Driven 발달: Vibe Coding 직업적인 격상시키기
Spec-Driven 개발, SDD라는 사양 중심 개발, Vibe Coding가 실제 프로젝트를 입력하고 확장 할 필요가있는 전문 접근법입니다。
이 접근법은 DeepLearning의 Jetbrains에 의해 공식적으로 도입되었습니다. AI 코스 2026. 그것은 어떤 에이전트가 코드를 작성하고 코드 저장소에 직접 넣어 전에 구조 사양 문서 정의 시스템을 통해 수행해야하는 것을 강조합니다。
Vibe Coding는 일반적으로 프로젝트의 세 번째 달의 주위에 벽을 충돌합니다. 모델은 이전 결정에 반대하는 코드를 생성하기 시작합니다. 컨텍스트 축적; 충돌 패턴은 출현 시작; 그리고 죽음 주기 따르기。
Spec-Driven 개발은 specs, i.e. 사양 문서를 허용하여이 문제를 해결하기 위해 노력합니다. 단일 알림보다 프로젝트의 실제 소스가되기 때문입니다。
SSD 워크플로우
관련 문서
모든 코드가 나타나기 전에 시스템의 동작을 정확하게 설명합니다. 이 기능은 외부에서 무엇을, 그것이 입력, 수출, 경계 및 제약. 그것은 세부 사항에 대해 아니에요, 그것은 관찰 가능한 행동에 대한 것입니다。
견적 요청
AI Agent에 대한 사양 문서를 작성하여 구조화 된 요구 문서를 생성합니다. 그리고 당신은 시험: 그것은 모든 것을 덮는가? 쥐 또는 개정이 필요합니까
디자인 문서
AI는 특정 코드, 테스트 및 문서 작업을 포함하는 기술 계획으로 승인 된 요구 사항을 번역합니다. 첫 번째 줄을 작성하기 전에 계획을 검토해야합니다。
지원하다
AI는 명세 문서에 근거를 둔 부호를, VAGUE HINT에 근거를 두지 않습니다. 논리, 처리 등, 과시 행동은 모델 상상력보다 오히려 사양 문서에서 결정되어야한다。
생성 및 실행 테스트
사양 문서가 이미 입력, 출력 및 경계를 식별하기 때문에, 테스트 예제는 사양 문서에서 직접 생성 할 수 있습니다。
SSD를 진짜로 효과적인 문서 구조를 만드십시오
죄송합니다
건물과 왜 건물이 무엇인지 설명합니다。
· .md
핵심 기술 결정 문서화。
나는 모른다
성과의 순서에 있는 subproject 단계。
사양/[feature-name]/plan.md
이 기능을 위한 번호 작업 힘。
사양/[feature-name]/requirements.md
이 기능의 범위, 키 결정 및 컨텍스트。
사양/[feature-name]/validation.md
통합을 위한 성공과 조건을 위한 기준。
SSD를 사용할 때, 순수 Vibe Coding을 사용할 때
Vibe Coding는 프로토 타입, 실험, 개념의 증거 또는 방향이 도로지도의 3-4 개월에서 탐구되는 경우에 사용될 수 있습니다。
함수가 장기 유지 보수를 필요로 하는 경우, 프로젝트는 두 번째 기여자를 포함하거나, 기능적인 행동이 상업적 또는 법적 영향, SDD를 사용해야 합니다。
타협 경로는 SDD, i.e. 임무, 기술 및 아키텍처와 "소변"을 실행하는 것입니다. 이러한 국경 내에서 특정 작업은 Vibe Coding로 수행됩니다。
지원하다
데이터 과학 : Vibe Coding에서 Spec-Driven 개발
링크 :https://towardsdatascience.com/frum-vibe-coding-to-spec-diven-development/
이 시간에 가장 상세한 SSD 실무자 가이드 중 하나는 완전한 문서 구조, 계획 →implement →validate 반복을 포함하고, spec 작업 흐름을 Claude Code 기술로 자동화하는 방법。
GitHub Spec Kit (무료, 오픈 소스)
링크 :https://github.com/github/spec-kit
GitHub 공식 오픈 소스 사양 구동 툴킷. 템플릿을 제공, CLI를 지정하고, /specify, /plan 및 /tasks를 포함한 Claude Code, GitHub Copilot 및 Gemini CLI와 함께 사용할 수있는 구조화된 명령을 지정합니다. 30 다중 인코딩을 지원합니다。
GitHub 블로그: Spec-Driven 개발 시작
링크 :https://github.blog/ai-and-ml/generative-ai/sec-driven-development-with-ai-get-stard-with-a-new-open-source-toolkit/
Spec Kit의 사용에 대한 GitHub 공식 소개에는 4 단계가 포함되어 있습니다. Spectify Plan Tasks 구현, 지정된 CLI를 설치하는 방법, /speckit.constitution과 프로젝트 관리 원칙을 구축하는 방법。
Jetbrains 과정 : 코딩 능력과 Spec-Driving 개발
링크 :https://www.deplearning.ai/courts/spec-driven-development-with-coding-agents/
방법론 커리큘럼의 형성. 완전한 계획, 현실화, 검증 주기를 커버하고, Claude Code의 재사용 가능한 기술로 SSD 워크플로를 자동화하는 방법。
테스트 콜: Vibe Coding에서 Spec-Driven 개발 (무료 가이드)
링크 :https://testcollab.com/blog/from-vibe-coding-to-spec-diven-development
특정 도구를 바인딩하지 않는 SDD 해석 기사는 실제 사례를 포함하고 CLUDE.md, Cursor Rules 및 GitHub Copilot PRD 워크플로우가 동일한 하단 패턴을 달성하는 방법을 설명합니다。
Red Hat : Vibes, Specs, Skills 및 Ages; AI Coding의 4 빌
링크 :https://developmenters.redhat.com/articles/226/03/30/vibes-specs-kills-agents-ai-coding
더 진보 된 프레임 워크 : vibe로 탐구, 정확도를 보장하기 위해 spec을 사용, 기술로 씰 재사용 에이전트 기능, 그리고 anagent 작업을 실행. 이것은 이해 직업 중 하나 AI는 더 완전한 정신 모형의 발달을 지원합니다。
각 전문가 수준의 Vibe Coder에 의해 사용되는 18 관행
이 관행은 r/ClaudeAI와 r/PromptEngineering 공동체에서 직접 옵니다 그리고 2025년에서 2026년까지 선행자의 경험으로 검증되었습니다。
상세한 시각으로 시작하세요
모든 도구를 열 전에 원하는 모든 것을 작성합니다。
Git 및 분기의 대규모 사용
각 기능 실험은 새로운 지점을 만듭니다。
동기화 폴더
/docs 또는 /interdictions 디렉토리를 작성하여 아키텍처, 구성 요소 및 Markdown 파일로 결정을 기록합니다。
여러 단계로 Dismantling 기능
한 번에 AI를 묻지 마십시오. 3 ~ 5 개의 힌트로 구별합니다。
context가 너무 길 때 새로운 대화를 시작합니다
장기적인 대화는 산출 질을 감소시킵니다. 새로운 기능을 개발할 때 세션을 재시작할 수 있습니다。
모든 힌트는 특정 파일 인용
AI를 정확히 알고있는 파일을 찾습니다。
너무 많은 상황에 플러그가 없습니다
대부분의 관련 문서를 언급하고 뒤에 모든 것을 남길 수 없습니다。
기존 부품에 대한 참조
AI를 요청하면 새로운 구성 요소를 만들 때, 기존 구성 요소에 스타일을 참조합니다。
Gemini 3.5 Pro의 두 번째 검사기
Gemini에 생성 코드를 복사하여 보안 루프홀이나 나쁜 패턴을 확인합니다。
서비스 수준에서 항상 검증 및 깨끗한 데이터
클라이언트에 의해 제출된 데이터를 절대로 신뢰하십시오。
서버의 키
환경 변수를 사용하여 API Key를 front-end 코드로 넣지 마십시오。
Visible 처리 오류
콘솔에서 오류 정보를 복사하고 AI로 붙여 넣습니다。
수리가 3 번 실패하면, 힌트를 다시 나타낼 수 있습니다
같은 문제 힌트를 사용하여 AI를 묻지 마십시오。
AI가 로그를 추가하자
디버깅 할 때, 추측하지 마십시오. console.log를 키 노드에 추가하려면 AI를 요청하십시오。
명확한 범위
모든 힌트에 삽입 : "나는 요청하지 않은 것을 수정하지 마십시오."
"Common AI Mistakes"파일 유지
AI에 의해 한 반복 된 오류를 기록하고 새로운 기능을 시작할 때 인용합니다。
첫 번째 계획, 코드가 없습니다
항상 AI가 계획을 부여하고 그 다음 그것을 찬성합니다。
AI가 이상한 코드를 설명하자
당신이 전혀 이해하지 않는 코드를 수락하지 마십시오. 진행하기 전에 AI가 설명합니다。
마일스톤 3
달의 끝에, 당신은 할 수 있어야합니다:
(b) 구조화 된 힌트를 작성하고 첫 번째 시도에서 꾸준한 출력을 얻을
PRP 프레임 워크를 사용하여 어떤 응용 프로그램을 구성하기 전에 계획을 완료하십시오
설정 커서 규칙과 CLAUDE.md 모든 항목
(b) 위의 18 전문가 연습의 맞춤 응용
일반적인 AI 실수 파일은 프로젝트에 사용할 수 있습니다。
월 4 : 온라인 제품에 아이디어에서 실제 프로젝트를 구축
이 달의 목표는 아이디어에서 실제 URL에 2-3 전체 프로젝트를 구축하는 것입니다. 이 프로젝트는 컬렉션이 될 것입니다。
커리큘럼, 데모, 실제 제품 사이의 간격은 대부분의 Vibe Coder가 영구적으로 멈추는 곳입니다. Real 제품은 예상치 못한 방식으로 문제를 일으키는 사용자를 가지고 있으며 데이터베이스 및 인증을 필요로하며 모바일 엔드에서 기능을해야합니다. 달의 초점은 그 간격을 채우고 있었다。
1. 실제 값의 프로젝트
사용자 정의 추적기를 잊어, 날씨 응용 프로그램을 잊어. 최고의 Vibe Coding 프로젝트는 종종 좁은, 매우 수직 제품으로 특정 그룹의 특정한 통증 지점을 해결할 수 있습니다。
이들은 진짜 아이디어입니다 : 그들 중 일부는 2026 년에 독립적 인 개발자에 의해 변환되었습니다. 그들 중 일부는 실제로 만들어졌습니다. 아무도 단일 템플릿 항목입니다。
1 차: 실제 손으로 시작 (월 3-4)
이 프로젝트는 보통 주말에 만들 수 있는 실제 사용 시나리오와 더불어 단 하나, 명확하 커트, 다만 데모, 그러나 진짜로 유용합니다。
Reddit Diss 트랙 생성기
이 도구는 PraW (Python Reddit API wraper)를 통해 Reddit API를 연결하고 게시물의 모든 의견을 추출하고 최고의 sarcasms 및 표현을 식별하고 LLM과 연결하고 궁극적으로 텍스트 transliteration 및 기본 오디오 편집을 통해 .wav 파일을 출력합니다。
그것은 이상한, 그것은 재미, 그것은 파괴에 좋은, 그것은 트위터에주의를 얻는 프로젝트의 종류입니다。
학습할 수 있습니다: 타사 API 통합, LLM 체인 통화, 오디오 파일 생성。
AI 회의 Brief 발전기
회의가 시작되기 전에 사용자는 회사의 이름을 입력하고 회의의 목적. 이 도구는 공식 및 링크드 인 정보의 회사의 네트워크를 캡처하고, 당신과 서로 사이에 최근 전자 메일 교환을 읽습니다 (Gmail API를 통해) 한 페이지 회의 브리핑을 생성하고 말하기 포인트, 키 위험 및 권고를 포함하는。
배울 수 있습니다: 여러 소스 데이터 캡처, 힌트 링크, API 인증。
유동성: 컨설턴트 및 클라이언트 관리자를 위해, 달 당 $19. 주당 5개 이상의 고객 통화가 있는 분들에게 특히 적합합니다。
내가 들었던 첫 번째 시간입니다
이 도구는 GitHub API와 GitHub 저장소를 연결합니다. 가장 최근의 통화를 매주 기준으로 읽습니다. 어떤 변화가 추출되고 자동으로 명확하고 클라이언트 중심의 업데이트 로그를 준비했습니다。
개발자는 일반적으로 changelogs를 쓰고 싶지 않으며이 도구는 이것을 자동화 할 수 있습니다。
학습할 수 있습니다: GitHub API, 구조화된 LLM 출력, 적시 작업。
대상 사용자는 매우 명확합니다 : 독립적 인 설립자 및 개발 팀。
프리랜서 Chaser
과다한 지불을 복구하기 위해 실패를 해결하기 위해 Freelancers를 위해 설계된 도구입니다。
Stripe를 통합하거나 수동으로 기록 된 송장 데이터를 사용할 수 있습니다. 시스템은 자동으로 polite를 전송하지만 사전 설정 일정에 따라 진보적 인 지불 경고. 더 긴 송장은 과다, 더 강한 톤과 모든 가동의 기록입니다。
Resend/Nodemailer, cron time job, Stripe webbook 처리를 통해 메일을 보낼 수 있습니다。
이 도구는 첫눈에 원하는 라이브러리입니다。
StickyCanvas: 노트북 공구는 Notion를 싫어합니다
이것은 제작자가 매일 사용하는 실제 프로젝트입니다。
그것은 아주 간단한 화포이고, 사용자는 끌고 스티커를 해방합니다. 폴더를 얻을 수 없습니다: %s: %s 그것의 가득 차있는 가치 제안은 충분히 간단합니다。
메뉴 없음, 명령 없음, 복잡성의 표기 없음. 그냥 캔버스와 몇 노트。
학습할 수 있습니다: 드래그 앤 드래그 앤 드롭, 캔버스 및 로컬 스토리지。
이 프로젝트는 한 주말에 온라인으로 할 수 있습니다。
두 번째 : 관심을 끌 수있는 작업 그룹 프로젝트 (4-5 개월)
이 프로젝트는 데이터베이스, 사용자 인증 및 실제 디자인을 요구하여 제품 사고를 입증합니다。
특정 산업 사람들을위한 수직 AI 채팅 기계
이것은 보편적 인 채팅 로봇이 아니지만, 채팅 로봇은 특정 비즈니스 지식 기지를 훈련。
수직 영역 선택 : 치과 클리닉, 자동 수리 상점, 부동산 중개인, 요가 갤러리. 예약, 가격 질문 및 자주 묻는 질문, 판매 배포 서비스를 판매 할 수있는 채팅 로봇 구축。
일부 독립적 인 개발자는 이러한 수직 프로젝트가 단일 하위 시장에서 한 달에 $ 850-3200을 생성 할 수 있다고 응답했습니다。
학습할 수 있습니다: RAG 파이프, Supabese 벡터 검색, 임베디드 위젯, 멀티텐트 구조。
Proposal 버전 추적기
그것은 프리랜서 및 에이전트에 대 한 도구는 클라이언트에 보내 판매 제안의 모든 버전을 추적。
그것은 어떤 판이 열리고, 얼마나 클라이언트가 지켜지고, 클라이언트가 제안을 다시 열 때 통지를 보낼 수 있습니다. 클라이언트에 의해 제안의 재개는 보통 그들이 심각하게 다시 생각하기 시작한다는 것을 의미합니다。
당신은 다음과 같이 해석 할 수 있습니다: DocuSign 분석, 제안을 위해 특별히 만들었습니다。
You can learn: PDF 업로드 및 저장, 이메일 오프닝 추적, 실시간 알림, Supabase 데이터베이스 디자인。
스크린 샷 - 투 - 사실 소모품
사용자 업로드 랜딩 페이지, 경쟁력있는 응용 인터페이스, 또는 Figma 디자인과 같은 임의 UI 스크린 샷。
이 도구는 GPT-5.5 또는 Claude와 같은 시각적 모델에 스크린 샷을 보내고, 원래 레이아웃과 스타일에 맞게 깨끗한 React +Tailwind 구성 요소를 생성한다。
배울 수 있습니다 : 시각적 모델 API, 이미지 업로드, 멀티 모듈 모델의 구조 출력。
이 도구는 개발자에게 정말 유용합니다. 한 달에 25-dollar 가격을 쉽게 지원할 수 있습니다。
Water Pipeline / 인프라 맵 도구
이것은 Vibe Coding subreddit에 실제 프로젝트입니다: 도시 또는 유틸리티 팀이 파이프 및 수선을 그리는 상호 작용하는 매핑 도구는 유지 보수 역사, 비용 및 유지 보수 로그 및 날짜 또는 위치에 의해 검색 및 화면을 추가합니다。
그런 주문을 받아서 만들어진 조작상 공구는 수시로 몇몇 특성이 있습니다: 수직, 다소 보링, 그러나 극단적으로 유용한. B2B 구매자는 그런 공구를 위해 지불하는 것을 망설이지 않을 것입니다。
Mapbox 또는 Leaflet을 사용하여지도 렌더링, Supabase, Heavy form UI, 업로드 파일에 Geospatial 데이터를 저장할 수 있습니다。
Gamified 가족 Chore 앱
프로젝트의 제작자는 처음에 게시 할 계획이 없었다, 단순히 집에 그것을 필요로하기 때문에, 주말에 그렇게했다. 한 달에 100 개 이상의 가족이 이미 사용 중입니다。
신청은 가족 구성원에게 가구 chores를 할당, 부모가 설정한 인센티브를 잠금 해제 할 수있는 임무의 완료 후 포인트를 얻을. 기술 창고는 FastAPI + PostgreSQL + PWA입니다。
그것은 간단한 경험입니다: 당신이 실제로 직면 한 문제를 위한 제품을 건설하기 위하여。
그것은 빠르고 더 현실입니다. 사용자 중 하나이기 때문에 다른 실제 사용자는 쉽게 찾을 수 있습니다。
고급 : 실제 용량 증명 복잡한 프로젝트 (5-6 개월)
이 프로젝트는 합리적인 구조, 컨텍스트 엔지니어링 및 멀티 컨퍼런스 건설을 필요로하기 위해 충분히 복잡합니다. 모든 제품은 데모가 아닌 실제 제품이 될 수 있습니다。
VC투자자 CRM
이것은 벤처 투자자 또는 천사 투자자를 위해 설계된 거래 트랙입니다。
기업가 프로젝트 거래, 관리 관계의 역사, 자동 포장업 대화, 그리고 주장의 정의에 따라 LLM 투자와 포인트 회사。
주요 통찰력은 Salesforce, HubSpot과 같은 기존 CRM이 투자자에게는 마케팅 팀을 위해 설계되었습니다. 정신 모델은 완전히 다릅니다。
기존 도구에 의해 무시되는 특정 그룹에 대한 제품의 건설은 가장 가능성이 높은 소득 생성 경로 중 하나입니다。
농구 관리 시뮬레이션 Game
전체 브라우저 측면 농구 사업 시뮬레이션 게임, 실제 프로젝트 케이스는 azario.floot.app입니다。
플레이어는 자신의 농구 팀을 설정할 수 있으며 훈련 프로그램을 통해 플레이어를 업그레이드하고 실시간 시장에서 다른 플레이어와 거래하고 실시간 포인트를 통해 게임을 시뮬레이션 할 수 있습니다。
당신은 배울 수 있습니다: 복잡한 국가 관리, 게임 시뮬레이션, 다중 사용자 실시간 데이터, 순위。
이러한 프로젝트는 실제 엔지니어링 ambitions를 보여줄 수 있습니다。
AI-Powered Speech Therapy 앱 (Aphasio)
Cursor를 사용하여 포스트-traumasis로 사람들을 위해 구축하는 iPhone 응용 프로그램입니다。
응용 프로그램은 AI-generated 언어 훈련을 제공, 사용자는 단어와 문장을 읽고, 응용 프로그램은 발음을 듣고, 다음 동적 성능에 어려움을 조정。
창조자는 가족이 정말로 그것을 필요로했기 때문에 이것을했습니다。
You can learn: 음성 인식 API, 자기 적응 연습 발생, 이동 끝 건설, 프로세스 추적 클라우드 스토리지。
정말 의미 있는 프로젝트의 종류입니다。
Vital Impairments에 대한 PDF 접근성 도구
이 AI 도구는 시각적으로 불임 된 사람을위한 진짜 접근 가능한 버전으로 PDF를 변환합니다。
기본 텍스트 추출은 아니지만 복잡한 테이블과 차트의 번역으로 인기있는 언어 설명, 임베디드 사진을 생성, 합리적인 독서 순서를 추가하고 액세스 HTML 또는 EPUB 버전을 수출。
배울 수 있습니다: PDF 파싱 (PyMUPDF 또는 PDFplumber), 그래픽 설명을위한 다중 모듈 AI, HTML 출력에 액세스。
이 방향은 SaaS 유동성에 대한 잠재력이 아니라 자금 조달 또는 기관 조달을받을 수도 있습니다。
프로젝트 discovery에 대한 리소스
r/vibecoding: 당신의 최고 프로젝트(무료, Reddit)
링크 :https://www.reddit.com/r/vibecoding/comments/1rl5ccj/show 저에게 당신의 최고 vibe 부호화한 프로젝트/
Real 커뮤니티 디스플레이는 이미 온라인 Vibe Coding 프로젝트입니다. 영감에 적합하고 프로젝트의 범위와 어려움의 진정한 그림을 볼 수 있습니다。
r/vibecoding: 당신의 가장 유일한 영상 프로젝트는 무엇입니까? (무료, Reddit)
링크 :https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what is your host unique vibecoded project/
Diss 트랙 데이터베이스, PDF 접근성 도구 및 30 일 이내에 생산 된 Geospatial 데이터베이스를 포함한 몇 가지 정말 이상한 혁신적인 프로젝트가 있습니다。
DodoPaments : 2026 (무료 가이드)에 대한 30 수익성있는 마이크로 SaaS 아이디어
링크 :https://dodopayments.com/blogs/micro-saas-ideas-2026
시장 크기, MRR 잠재력, 시작 비용 및 유동성 경로를 포함하여 30 인증 마이크로 SaaS 아이디어를 제공합니다. 각 프로젝트는 독립적인 개발자를 위해 적당합니다。
SuperFrameworks: Vibe 코딩은 팁 포인트를 히트
링크 :https://subscriptionworks.com/articles/vibe-coding-pint-what-founders-need-to-know
목록 7 특정 하위 시장, 독립적 인 개발자는 실제 수입 수치와 함께 Vibe Coding 제품을 통해 매월 $ 500-3200을 벌었습니다。
IdeaProof : 2026 년 솔로 재단을위한 50 마이크로 - SaaS 아이디어 (무료)
링크 :https://ideaproof.io/lists/micro-saas-ideas
각 아이디어에는 기술적인 어려움 등급, 시작 비용 추정 (US$ 1000-15000) 및 시장 별 간격 분석이 포함됩니다. 오늘 가장 많은 작업 아이디어 중 하나입니다。
Cursor Forum: 2025년 커서 구축 (무료, 커뮤니티)
링크 :https://forum.cursor.com/t/bilt-with-cursor-in-2025-share-your-projects/147737
Cursor 공식 포럼에서 프로젝트 디스플레이. 그들은 진짜 프로젝트, 진짜 건축업자이고, 그들은 어디에 정직합니다。
Plan-Review-Fix Cycle: 전문 건설 접근법
newcomers Vibe Coder의 대부분은 "tips, Picks, take"의 루프를 사용합니다。
그것은 20의 선을 위해 유용할 수 있었습니다, 그러나 진짜 제품에 있는 진짜 기능인 경우에, 그것은 catastrophic 실패입니다。
Professionals use Plan-Review-Fix loops, 와 함께 3 다른 역할: 당신, 코드 에이전트, 그리고 독립적 인 AI 검토자。
작업스트림
첫 번째 계획。
어떤 코드를 작성하기 전에, 그것을 만들거나 수정하는 AI 목록을하자, 이는 기능을 추가 할 것이다, 어떤 의존도가 필요한지, 어떤 경계가 있을 수 있는지。
명확하게 말하십시오: 아무것도 쓰지 마십시오, 다만 계획을 보여줍니다。
그런 다음 플랜을 검토하고 변경합니다。
수상 경력。
계획이 승인되면 AI가 코드를 작성합니다。
이름 *。
결과 코드를 복사하고 새로운 Gemini 3.5 프로 세션에 붙여 넣으십시오. 매우 큰 컨텍스트 창이 있기 때문에 그것을 선택하십시오. 그것은 수석 보안 엔지니어 및 코드 검사기로 작동, 버그 확인, 보안 breach, 복도 패키지 이름, 나쁜 패턴。
수정하기。
reviewers '의 의견은 코드 에이전트가 결과가 깨끗해질 때까지 결정적인 방식으로 계속됩니다。
지원하다
ProjectTalk: Vibe Coding 모범 사례; Doom Loop 방지
링크 :https://www.projecttalk.org/vibe-coding-best-practices/
"Circle of Death" 및 Plan-Renew-Fix Cycle의 가장 자세한 가이드 중 하나, 실용적인 예를 포함。
5 작업 흐름을 만드는 Vibe 그것은 실제로 2026 년 선박 생산 코드
링크 :https://dev.to/dohkoai/5-vibe-workflows-that-actually-ship-project-code-in-2026-1 nmn
Claude Code, Cursor 및 Windsurf를 사용하여 실제 프로세스의 설명은 실제 생산 코드를 제공하지 않습니다. 데모. 콘텐츠는 테스트 드라이버, 컨텍스트 로딩 패턴 및 실제 비용 데이터를 포함합니다。
3입니다. 모든 Vibe Coder는 안전한 기초를 가지고 있어야 합니다
AI에 의해 생성 된 코드는 일부 재발행 및 예측 가능한 보안 문제의 대상입니다. 당신은 안전 전문가가 될 필요가 없습니다, 그러나 당신은이 모델이 존재하고 온라인에 간다 전에 검사 습관을 개발해야한다。
Vibe Code 보안 목록
API 키와 키
모든 열쇠는 .env.local에 있어야 합니다. 이 파일은 먼저 푸시하기 전에 .gitignore를 추가해야합니다. 예외는 없습니다。
서비스 검증
항상 인증 및 서비스 종료에 모든 사용자 입력을 정리합니다. AI는 종종이 단계를 건너。
인증 모드
Supabase는 기본적으로 인증을 올바르게 처리 할 수 있습니다. 인증을 사용자 정의하려는 경우, 완전히 검증 된 성숙한 라이브러리를 사용하십시오。
CORS 구성
AI가 CORS 설정이 생성 된 것을 설명하자, 왜. 잘못된 CORS 구성은 AI 일반적인 문제입니다。
감사의 의지
배포하기 전에 AI는 알려진 루프홀 의존성인지 여부를 확인 할 수있었습니다. 또는 그림 생성 된 패키지 이름이 있는지 여부. AI는 때때로 NON-EXISTENT 포장 이름을 창조합니다。
공급 업체
애플리케이션이 LLM에 사용자 입력을 전달하면 사용자는 시스템 힌트를 납치하려고 할 수 있습니다. OWASP 가이드를 읽어야 합니다。
지원하다
OWASP 정상 10 LLM 앱: Prompt 참여
링크 :https://genai.owasp.org/llmrisk/llm01-prompt-injection/
이것은 Prompt 주입을 위한 권위있는 참고이고 LLM 신청에 있는 첫번째 안전 위험입니다. 그것은 공격과 방어 모델의 직접 및 간접 주사를 다룹니다。
OWASP API 보안 탑 10 (무료)
링크 :https://owasp.org/API-Security/
보안 위험의 API 인증 목록. 이 요소는 사용자가 데이터를 수신하기 전에 이해해야합니다。
Clarifai : Vibe Coding 모범 사례 및 보안
링크 :https://www.clarifai.com/blog/vibe-coding-explained
AI 발생을위한 단계별 보안 목록, AI를 더 안전하게 만들 수있는 특정 팁。
Sycode MCP Server: 실시간 안전한 AI 코드
링크 :https://cycode.com/blog/international-cycodes-mcp-server/
Cycode의 MCP 서버는 실시간 보안 스캐너로서 Cursor 및 Windsurf에 직접 통합되어 Vibe Coding 워크플로우를 떠나지 않고 AI 생성 코드를 확인 할 수 있습니다。
4 Supabese: 당신의 전체적인 뒤 끝
Supabese는 실제 제품을 구축하기 위해 Vibe Coder의 가장 중요한 인프라 중 하나입니다。
그것은 Postgres 데이터베이스, 인증, 파일 저장 및 실시간 구독을 제공합니다, 자바 스크립트 SDK를 통해 호출 할 수있는 모든 서버 관리가 필요하지 않습니다。
지원하다
Supabese: Vibe Coder의 환경 가이드
링크 :https://subbase.com/blog/the-vibe-coders-guide-to-subbase-environments
이 문서는 Vibe Coder에 전념합니다. 콘텐츠는 개발 및 생산 환경의 설정, 데이터베이스의 마이그레이션, 초보자의 가장 심각한 오류를 다룹니다. 실제 데이터를 직접 온라인 테스트。
Supabese YouTube 채널 : Quickstart 가이드 (무료)
링크 :https://www.youtube.com/@Supabase
각 주요 기능은 인증, 데이터베이스, 저장, 실시간 기능과 같은 실질적인 비디오 가이드가 있습니다. 각 영상은 대략 5-10 분입니다。
Supabese 광부 Docs
링크 :https://supabase.com/docs/guides/development/database-migrations
데이터베이스를 직접 편집하는 것보다 모든 데이터베이스 스키마 변경을 고려하십시오. 이것은 catastrophic 자료의 손실을 피하는 열쇠입니다. 가이드에는 롤백 스크립트가 포함되어 있습니다。
5, Entrent에 대한 9 가지 모델을 실패 : 프로젝트가 잘못 될 것인가
콜롬비아의 DAPLab 연구원의 대학은 현재까지 가장 엄격한 Vibe Coding 실패 모델 연구를 발표했습니다. 같은 임무에서 그들은 Cline, Claude, Cursor, Refrit 및 v0을 분석했으며 결국 9 개의 키 오류 패턴을 발견했습니다。
가장 일반적인 두 개와 위험은 다음과 같습니다
침묵은 실패했습니다
코드가 작동하고 잘못되지는 않지만 당신이 물었는지 정확히 알 수 없습니다. 맨끝은 빨간 과실을 보고하지 않습니다, 절차는 붕괴하지 않습니다, 그들은 misbehavioural이고 보통 긴 후에 발견되고, 심지어 생산 환경을 입력했습니다。
사업 논리 실패
모델은 제대로 메커니즘을 달성했지만 진실한 의도를 잘못했습니다. 예를 들어, 직렬 카드 카운터는 지정된 상태에 따라 교체되었습니다. 총 청구서는 포함 된 세금이 포함되지 않았습니다. 이러한 실수는 실제 제품에 대 한 catastrophic 수 있습니다。
연구자가 확인 한 다른 7 가지 모델은 다음과 같습니다
오류 처리 Gap
try {...} catch(e){}와 유사한 텍스트는 오류를 완전히 삼키고 로그를 기록합니다。
Over-edit 범위
에이전트는 이동을 요청하지 않았다 파일을 수정, 다른 기능。
연락처
대화가 더 이상 성장함에 따라 모델은 점차 프로젝트 참여를 잊었다。
자기 연구 시험 표
테스트는 AI의 자신의 모조를 테스트하고 실제 행동을 테스트하지 않습니다. 결과는 100% 통행 비율입니다, 그러나 실제적인 적용은 0입니다。
Magnificent 구성 요소 확산
10 개 이상의 용도를 포함하는 600 개 이상의 행의 파일이 유지 될 수 있습니다。
규칙 블라인드
에이전트는 규칙이 아닙니다. 그것은 그 constraints에 의해 비 준수 이유를 찾을 때까지。
투명도 간격
일이 실패할 때, 현재의 도구는 열심히 할 수 있습니다 당신은 그가 잘못 갔다 어디 에이전트가하려고하는 것을 볼 수 있습니다。
룰 블라인드 영역의 경우, 연구는 CLAUDE.md를 수리하고 규정 문서는 compulsory 계약으로 권장하지 않습니다。
실패에 대한 명확한 조건을 추가해야합니다. 예를 들어:
이 테이블이 RLS 정책이 없다면 중지하고 계속하지 마십시오。
시험 6: Vibe Coder의 기술의 대부분은 Skipping 후에 regretted
구조화된 QA 과정 없이, Vibe Coding 신청은 전통적인 소프트웨어 발달의 비율 대략 3배 기술적인 부채를 축적했습니다. 이 결론은 101 AI 지원 소스의 메타 분석에서 파생됩니다。
실제 결과는 Vibe Coding 응용 프로그램은 "작업 가능한"을 보통 비용 $5,000-$30,000 전문 재 엔지니어링을 필요로하는 경우입니다。
이 솔루션은 AI를 사용 중지하지 않지만 AI를 사용하여 테스트 작성을 할 수 있습니다。
시험 우선권 Vibe Coding 방법
기능 코드를 작성하기 전에 AI는 예상 행동에 대한 테스트를 작성합니다. 기능적인 행동을 더 정확하게 정의하는 힘이 되고, 즉시 기능적인 부호의 질을 개량할 것입니다. 테스트를 실행하면 실패를 볼 수 있습니다. 그런 다음 AI는 테스트를 통과 할 수있는 코드를 작성합니다. 모든 주요 변경 후, AI는 npm 테스트를 실행합니다. 실패 시험은 반환을 방지하는 의견 반복입니다。
70/30 규칙
AI에 가장 적합하다는 결정에 대한 실용적인 가이드 라인입니다。
AI 지원을 위한 70%:
템플릿 코드, CRUD 작업, 형식 검증, 기존 코드에 대한 쓰기 테스트, 문서 작성, 명확한 모드를 기반으로 재모델링, 형식 변환 (JSON → TypeScript), 정규 표현, 원오프 스크립트。
Thirty %는 인간 주도해야한다 :
시스템 아키텍처 결정, 보안 키 코드 (인증, 암호화, 지불), 복잡 한 경쟁 조건, 새로운 문제 영역, 성능 중요 한 알고리즘, 법적 및 준수 논리。
AI에 95 %를주는 경우 아마 버그. AI로 20 %를 완료하면 많은 생산성을 낭비하는 것을 의미합니다。
지원하다
Testemat: Vibe Coders를 위한 8개의 제일 AI 테스트 공구
링크 :https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/
이것은 Vitest, Playwright 및 AI Original QA 도구를 다루는 Vibe 테스트 도구를위한 가장 완벽한 2026 지침 중 하나입니다。
Playwright + MCP (무료 가이드, Tim Deschryver)와 Vibe 테스트
링크 :https://timdeschryver.dev/blog/vibe-testing-with-playwright
Playwright MCP 서버가 Cursor 또는 VS Code Copilot에서 자연 언어로 브라우저 테스트를 작성하고 실행하는 방법을 설명합니다. Playwright's "copy as problem" 버튼 잘못된 탭에서 당신은 AI 에이전트에 실패 테스트를 직접 붙여 넣을 수 있습니다。
AI Vibe 코딩 노트
링크 :https://www.awasome-testing.com/2025/04/ai-vibe-coding-notes-fe-the-basement
이것은 TDD-first Vibe Coding에서 가장 상세한 실무자 가이드 중 하나입니다. Elements는 O1 계획의 사용을 포함, Cursor + Sonnet 4.6의 사용, 피드백 루프로 연속 실행 테스트, 그리고 생각 모델에 대한 생각에 대한 단일 파일로 코딩 라이브러리를 평평하게하는 가장의 사용。
Playwright 코겐
링크 :https://playwright.dev/docs/codegen
실행:
아니, 아니, 아니
그런 다음 정상적인 사용자와 같은 브라우저에서 응용 프로그램을 클릭합니다. Playwright는 모든 클릭을 기록하고 자동으로 Playwright 테스트 파일을 생성합니다. 브라우저 테스트를 작성하는 가장 빠른 방법 중 하나입니다。
Vitaest 공식 문서 (무료)
링크 :https://vitest.dev/
2026 Vite의 표준 모듈 테스트 프레임 워크는 Next.js 프로젝트입니다. 그것은 빠르고, Jest와 호환, 그리고 progeny는 TypeScript를 지원합니다。
월 4 이정표
달의 끝에, 당신은 가지고 있어야:
2–3 완료 및 배포 된 프로젝트, 모든 실제 URL이
적어도 하나의 프로젝트에는 사용자 인증 및 Supabese 데이터베이스가 있습니다
각 키 기능은 동기화 또는 사전 쓰기
Plan-Review-Fix Workstream은 건설 습관에 내장되어 있습니다
보안 정리는 각 predeployment를 위한 표준 단계가 됩니다
GitHub는 홈 페이지에 적어도 3개의 진짜 창고가 있습니다。
달 5: CONTEXT 기술설계와 MCP는, “우수한”와 “최고” META-SKILLS 사이에서 구별합니다
이 달의 목적은 컨텍스트 작업을 캡처하는 것입니다. 즉, 적절한 시간에 AI를 제공하여 고품질, 구조 및 지속 된 결과를 생성 할 수 있습니다。
Contextwork는 일반적인 우수한 Vibe 부호 사이에서 구별하는 열쇠입니다. 전은 종종 혼란스럽고 일관성있는 코딩 풀을 만듭니다. 후자는 깨끗하고 지속 가능한 제품을 만듭니다. 프로젝트 확장의 범위로, 컨텍스트 관리는 가장 중요한 기능이 될 것입니다。
1. context 프로젝트는 무엇입니까
CONTEXT PROJECT는 AI 컨텍스트 창을 입력하고 각 알림 중에 입력한 정보의 의식적인 형성입니다。
단일 기술이 아니라 시스템입니다. 이 시스템은 규칙 파일, 프로젝트 문서 구조, 힌트에 인용 된 파일, 코드 라이브러리가 구성되는 방법, 당신은 AI의 컨텍스트 길이 한계를 처리하는 방법。
컨텍스트가 AI, INCONSISTENT, OUTDATED 및 심지어 충돌 코드가 생성되는 경우. 좋은 컨텍스트와 AI는 프로젝트 모델에 맞는 코드를 생성하고 아키텍처를 이해하고 알려진 오류를 피합니다。
2026 컨텍스트 엔지니어링 타일
.cursor/루즈/+CLAUDE.md
프로젝트 레벨 Long-Term Directive, 3 개월 이미。
동기화 "%s"
Markdown 문서 기록 키 아키텍처 결정, 모듈 및 타사 통합。
Functional 명세 파일
각 키 함수는 어떤 것을 설명하는 Markdown 문서에 해당합니다. 시스템의 나머지에 연결하는 방법 및 제약이 무엇인지。
예제 파일
힌트의 스타일 참조로 기존 구성품을 사용합니다。
서버 backstage 개발
npm run dev as a backstage task, AI가 컴파일된 오류 및 서비스 종료 로그를 빌드 중에 실시간으로 볼 수 있도록 합니다。
MCP를 통한 브라우저 자동화
예를 들어, Chrome DevTools MCP 또는 Vercel의 경우 anent Browner는 AI가 스크린 샷없이 실제 렌더링, 콘솔 오류 및 웹 요청을 볼 수 있습니다。
지원하다
NXCode: Agency Engineering; AI-First Software Development에 대한 완전한 가이드 (무료 가이드)
링크 :https://www.nxcode.io/resources/news/regional-english-complete-guide-vibe-coding-ai-agendas-2026
2026 년 초 Karpathy는 Vibe Coding의 캐주얼 진화에서 전문 AI 보조 개발에 대한 진화를 설명하는 용어 "시법 공학"을 도입했습니다. 이 가이드는 계획 →Execute → Verify, context 구조 및 질 문인 가득 차있는 PEV 주기를 포함합니다. 에 게시 됨 3월 2026。
Master Vibe Coding에 10 GitHub 저장소 (무료 가이드, KDnugets)
링크 :https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding
가장 유용한 GitHub 창고의 선택은 컨텍스트 프로젝트, 워크플로우 템플릿, 규칙 책 구성 등을 다룹니다。
멋진 Vibe Coding (무료, GitHub)
링크 :https://github.com/filipecalegario/awesome-vibe-coding
Vibe Coding 참고, 도구, 가이드 및 리소스의 가장 완벽한 선택 목록 중 하나입니다。
MCP: 모형 Context 의정서
MCP, 전체 이름 모델 Context 프로토콜은 Anthropic이 만든 오픈 표준이며 데이터베이스, API, 실시간 데이터, 외부 문서 및 타사 서비스와 같은 외부 데이터 소스에 AI 도구를 연결할 수 있습니다。
MCP는 Cursor 3.0, Claude Code 및 Windsurf에서 지원됩니다. Cursor 3.0은 Marketplace에서 사용할 수 있습니다。
MCP를 이해하는 것은 Vibe Coding의 바닥 수준에 가고 있다는 것을 의미합니다: 대리인은 더 이상 다만 부호를 쓰고 있지 않습니다, 그러나 당신의 진짜 자료를 검색할 수 있습니다, 실제 시간에 있는 문서를 찾아서, 제삼자 서비스와 상호 작용하고 외부 시스템에 가동을 실행하십시오。
연습과 같은 MCP는 무엇입니까
Stripe MCP 서버
에이전트를 읽고 Stripe의 청구서를 작성하십시오。
인기 카테고리
개발 과정에서 실시간 데이터베이스를 상담하는 에이전트를 가져옵니다。
피그마 MCP
Cursor Agent가 디자인 파일을 읽고 그 구성 요소를 얻을 수 있습니다。
프로젝트
Agent가 문제를 만들고, PR을 열고, 스트림을 관리합니다。
Qdrant의 MCP
RAG를 지원하는 애플리케이션을 구성하는 벡터 데이터베이스에 액세스 할 수 있습니다。
지원하다
MCP 공식 문서
링크 :https://modelcontextprotocol.io/international
Mode Context Protocol의 공식 문서 및 사양。
Vibe Coding로 첫 MCP Server 구축
링크 :https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/
Cursor의 첫 번째 MCP 서버 실제 튜토리얼을 빌드하여 AI가 외부 소스에서 실시간 컨텍스트를 끌어낼 수 있습니다。
Vibe Coding와 함께 5 겨울에 MCP 서버를 구축
링크 :https://www.claranet.com/uk/blog/bild-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
가장 빠른 MCP 서버 손에 과정 중 하나입니다。
Qdrant의 MCP 서버 (무료, Qdrant)와 Vibe 코딩 RAG
링크 :https://qdrant.tech/blog/webinar-vibe-coding-rag/
Qdrant의 MCP 서버를 사용하여 Cursor 및 Claude Code를 사용하여 건설 중에 벡터 데이터베이스에 액세스하는 방법을 설명합니다。
커서 마켓 플레이스 (application)
링크 :https://cursor.com/markplace
AWS, Figma, Linear, Stripe, Vercel, Datadog 등 MCP 서버 플러그인을 검색하고 설치할 수 있으며 Cursor 3.0에 설치합니다。
3; Figma to Code: Vibe Code를 위한 디자인 워크플로우
"작업할 수 없는 제품을 원하신다면,"하지만 충분히 정교하게 보입니다. Figma →Code 워크플로우는 Vibe Coder 툴박스에서 가장 활용된 디자인 기능입니다。
텍스트로 인터페이스를 설명하는 대신 Figma의 시각적 디자인을 만들고 Figma MCP를 사용하여 AI를 사용하여 디자인 파일에서 직접 일치하는 코드를 생성 할 수 있습니다。
작업스트림
Figma MCP를 Cursor 또는 Claude 코드에 먼저 연결하십시오. Figma 플러그인은 Cursor Marketplace에 설치할 수 있습니다。
그런 다음 힌트에 Figma 파일을 인용 :
이 Figma 파일에서 디자인 토큰을 연구합니다. palettes, 글꼴 번호 및 간격을 추출하고 tailwind config로 구성합니다. 먼저 씁니다。
, 그리고 그 후에 특정한 성분을 나타납니다:
Figma 디자인에 따라 Navbar 구성품을 만듭니다. 정확한 일치 간격, 글꼴 배치 및 상태에. Taylor CSS를 사용하여 TypeScript만 사용합니다。
Gradually 블록에 의해 건설, 항상 Figma 파일에 크기와 레이아웃 논리를 인용。
중요한 권고
Figma MCP없이 초보자는 더 빠른 대안을 사용할 수 있습니다 : Canva와 페이지를 스케치합니다。
모든 건설 도구를 열기 전에, Canva의 레이아웃을 그리는 30 분. 이것은 몇 가지 질문에 대답 할 것입니다 : 각 페이지에서 무엇입니까? 내비게이션은 어디에 있습니까? 모든 블록은 포함합니까
이것은 첫번째 힌트의 진보에서 잘 불확실의 다량을 제거하고 몇 시간의 개정을 저장할 것입니다。
지원하다
Figma MCP + 커서 : 새로운 AI 디자인 시스템 WorkFlow
링크 :https://www.youtube.com/watch?v=09VgyFFLraw
Figma를 Cursor에 연결하는 방법의 완벽한 데모, 가져오기 디자인 토큰, 그리고 정확하게 Figma 사양을 충족하는 구성 요소를 생성. 에 게시 됨 11월 2025。
Claude Code x Figma MCP: 디자이너의 플레이북
링크 :https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers
디자이너로서 그의 능력에서 Vibe Coding의 100 일 수행하고 Figma → Claude Code → Production React 구성 요소의 매끄럽게 버전을 요약했습니다. 표준 토큰을 추출하고 응답 블록을 생성합니다。
뚱 베어 확인 (공식, 무료 수준)
링크 :https://www.figma.com/laws/vibe-coding-tool/
Figma Native Vibe 코딩 도구. Figma에서 직접 자연적인 언어에 있는 UI 또는 시제품을 설명할 수 있고, 상호 작용하는 시제품을 생성하고 청결한 부호를 수출합니다. 그것은 외부 대리인을 위한 Figma MCP도 통합될 수 있습니다。
Anima: 당신의 Figma 디자인 시스템을 가진 Vibe 부호
링크 :https://www.animaapp.com/blog/design-systems/vibe-code-your-figma-design-system/
Anima에 Figma 디자인 시스템을 가져 와서 디자인 토큰을 따르는 React 구성 요소를 생성합니다. 산출은 Anima MCP를 통해 가공하는 Claude 부호 또는 Cursor에 보내질 수 있습니다。
Muzli : 디자이너를위한 완벽한 Vibe 작업 가이드
링크 :https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
AI-generated 제품에 대한 비개발자에 대한 완벽한 가이드를 구축, 디자인 시스템 힌트를 커버, 힌트의 시각 참조, Vibe Coding 구성 요소의 브랜드 일관성을 유지하는 방법。
4. 제품에 AI 기능을 추가하십시오: Vercel AI SDK
"AI 기반 제품"을 구축하고 "AI 기반 제품", Vercel AI SDK는 Next.js 기술 볼트의 빠르고 깨끗한 옵션 중 하나입니다。
지원하다
Vercel AI SDK 문서 (무료 문서)
링크 :https://sdk.vercel.ai/docs
공식 참조 문서. OpenAI, Anthropic, Google, Mistral, Groq 등 통합 인터페이스를 통해 20개의 AI 공급자를 지원하고, 현재 산출, 공구 외침 및 구조화한 발생을 지원합니다。
AI SDK V5 튜토리얼 시리즈 (Youtube, 무료)
링크 :https://www.youtube.com/playlist?list=PL4cxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO
Vercel AI SDK를 사용하여 다음.js AI 응용 프로그램을 구성하는 멀티 풀 튜토리얼. 발표의 첫 번째 세트와 프로젝트 구성의 두 번째 세트는 전체 설정 프로세스를 덮는 8 월 2025에서 출판되었습니다。
Vercel AI SDK 및 Next.js로 무료 AI 채팅 앱 구축
링크 :https://dev.to/nikolasbarwicki/bild-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-textjs-10f6
스크래치에서 AI 채팅 응용 프로그램을 스트리밍하기위한 단계별 코드 자습서를 구축하십시오。
이번 달은 무엇을 할 수 있습니까
Vercel AI SDK에 AI 기능을 추가하려면 4 개월 프로젝트 중 하나를 선택하십시오. 예를 들어: AI Auto-labels를 메모 응용 프로그램에 추가하십시오. 사용자 정의 추적기 "사용자 정의 데이터"에 AI 조수를 추가하십시오. 사용자가 과거 텍스트를 기반으로하는 AI 플래시 카드를 자동으로 생성합니다。
RG: 당신의 문서에 근거를 둔 AI 대답 질문
RAG, 전체 이름 Retrieval-Augmented General은 Retrieval Enhancement입니다. 그것은 여객 로봇, 내부 지식 은행, 문서 질문 및 대답 공구와 같은 가장 심각한 기업 수준 AI 신청의 뒤에 핵심 역량입니다。
RAG는 또한 "AI PRODUCT ENGINEER" 노선을 따르고 싶은 사람들을 위해 대중적이고 필요한 기술 중 하나입니다。
핵심 개념은 간단합니다: LLM은 훈련 자료만 가진 질문에 대답할 수 있고, 첫째로 당신의 자신의 파일에서 관련 클립을 검색하고, 그 후에 HINTS에서 그(것)들을 두고, 당신이 제공하는 정보의 기초에 모형 대답을 하십시오。
지원하다
LlamaIndex : RAG 소개 (공식 무료 파일)
링크 :https://developmenters.llamaindex.ai/python/framework/understance/rag/
5개의 중요한 단계 덮개: 선적, 색인을 붙이는, 저장, 검색 및 평가。
LlamaIndex 스타터 자습서
링크 :https://developmenters.llamaindex.ai/python/framework/getting stard/starter 예제/
30 개 이상의 라인 코드없이 실행 RAG 시스템을 구축합니다。
초보자를위한 Langchain 자습서 (2026 가이드) (Youtube, 무료)
링크 :https://www.youtube.com/watch?v=AOQyRiwydyo
완전한 2026 LangChain 과정 덮는 대리인, RAG 및 AI 행위의 자료 근거한 건축을 위한 RectAgent 기구。
Langchain 및 LlamaIndex (Youtube, 무료)와 효율적인 RAG 응용 프로그램을 구축
링크 :https://www.youtube.com/watch?v=D7YwcDJ75lQ
의 사용의 수평 비교 Langchain 과 LlamaIndex 에 RAG 장면 로 실제 코드 경우。
AI Argentina Framework를 선택하는 방법 (LlamaIndex)
링크 :https://workforcenext.in/blog/how-to-choose-ai-agent-framework/
에 게시 됨 4월 2026. 제안은 LlamaIndex를 사용하는 것이 가장 어렵지 않다면, Langchain / LangGraph는 더 넓은 생태 및 생산 수준 조직 기능을 필요로한다면。
6, 토큰 비용 및 예산 관리 : 청구서가 도착 할 때까지 아무도 알려지지 않습니다
단일 통화 수준에서 저비용 모델과 프론트 라인 모델 사이의 30 배 비용 간격이있을 수 있습니다。
GPT-5.5 또는 Claude Sonet 4.6 각 생산 응용 프로그램에 대 한 호출 하는 경우, 법안은 당신이 통지 하기 전에 달 당 $ 20에서 수백 달러에서 확장 가능성이。
Uber는 2026 년 4 개월 만 지출 한 것으로 추정되며 Claude Code 세션의 광범위한 사용으로 인해 전체 년 동안 AI 예산을 배출합니다。
수학 논리는 간단합니다: 상황의 길이는 선형으로 비용을 증가합니다. 그리고 Claude 코드가 전체 코드 라이브러리를 부여하면 곧 250,000 ~ 500,000 토큰으로 축적됩니다。
Practical 비용 관리 규칙
단단한 지출 모자를 첫째로 놓으십시오
OpenAI 및 Anthropic backstages의 월간 한도 설정은 모든 AI 기능을 온라인으로 공개합니다. 온라인에 가기 전에 그것을, 당신이 온라인에 갈 후。
Diversion 모델 by 작업 복잡성
분류, 라벨링, 요약 및 서식 작업은 claude-haiku 또는 gpt-5.5-mini를 사용하여 수행 할 수 있습니다. 더 어려운 이유를 가진 작업은 Sonnet 4.6, Opus 4.6 또는 GPT-5.5를 위해 예약됩니다。
간단한 일을 위해, 싼 모형은 거의 동일한 질의 산출을 주기 경향이 있습니다, 그러나 비용은 다른 10배일지도 모릅니다。
Claude Code에서 /compact 명령어 사용
/compact를 수동으로 실행하면 큰 작업이 시작될 수 있습니다. 클로드 코드는 일반적으로 60 % - 80 %의 컨텍스트 역사를 압축하여 다음 시간을 호출 할 수있는 토큰 수를 크게 줄입니다。
짧은 Context 창을 유지
컨텍스트의 길이를 두는 비용도 대략 두 배입니다. 새로운 기능을 개발하기 위해, 그것은 계속 오래된 것 대신 새로운 대화를 열 수 있습니다。
동일한 캐시 반복 Phrasing
Anthropic's prompt caping은 10 %의 가격으로 입력을 캐시로 청구됩니다. 이것은 시스템 힌트 또는 모든 통화를 반복하는 CLAUDE.md 파일에 대한 긴 기간 동안 상당한 절감을 이어질 것입니다。
회사연혁
월간 규모의 50 % 및 80 %가 버그 또는 루프 전화를 방지하기 위해 도달 할 때 청구 경보를 설정합니다。
지원하다
MindStudio: Claude Code의 AI Agent 토큰 예산 관리
링크 :https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/
Claude Code의 상세한 dismantling은 엄밀한 컨텍스트 제한, 구성 가능한 임계값의 자동 압축 및 비싸이먼트 예산 체크를 포함하여 토큰 예산의 처리입니다. 이 모형은 또한 어떤 LLM 제품에 적용될 수 있습니다。
HackerNews: 클로드 코드의 실제 비용
링크 :https://news.ycompinator.com/item?id=47976415
실제 프로젝트는 Claude Code 세션의 컨텍스트의 창 길이가 거의 선형적으로 비용을 푸시하고 정확한 번호를 제공합니다。
HatchWorks : 2026 년에 Vibe Coding의 Real Costa
링크 :https://chatchworks.com/blog/gendd/cost-of-vibe-coding/
Vibe Coding의 총 비용의 더 많은 후보 추정: 명백한 구독 비용은 달 당 $20-200일 수 있었습니다, 그러나 경비는 $5,000-$30,000 안전 수선, 기술적인 부채 및 직업적인 재설계가 계정으로 가지고 갔습니다. 이해하기 위해 QA와 구조화 프로세스가 투자 가치가 얼마나 많은지 판단 할 수 있습니다。
OpenAI 사용 대시보드 (공식)
링크 :https://platform.openai.com/usage
오픈 액세스 전에 매달 제한을 설정합니다. 빌링 입구, 사용 제한。
Anthropic 콘솔
링크 :https://console.antropic.com/
Claude API는 여기에서 설정해야 합니다。
달 5 이정표
달의 끝에, 당신은 할 수 있어야합니다:
AI는 항상 올바른 맥락을 얻고 있기 때문에 시작에서 프로젝트를 구성
Cursor 또는 Claude Code를 MCP를 사용하여 외부 데이터 소스에 연결하십시오
Vercel AI SDK를 사용하여 온라인 제품에 대한 통합 AI 기능
문서에 근거를 둔 질문에 대답하는 AI를 허용하는 기본 RAG 관을 건설하십시오
각 AI API 계정에 대한 활성 비용 모니터링 및 지출 캡 설정
깨끗한 /docs 구조를 유지하므로 AI 도구가 즉시 프로젝트를 이해할 수 있습니다。
달 6: 전문가 같이 배치하고 당신의 직업적인 오리엔테이션을 선택하십시오
이 달의 목적은 생산 수준 가용성을 도달하기 위해 프로젝트를 활성화하고 자신의 방향으로 선택할 수 있습니다. Real deploy, real monitoring, real profit generation, while find professional path that match your goal。
1. 생산 배치 및 환경 구성
데모와 생산 수준의 제품 간의 배포 간격은 매우 크다. 이러한 가장 중요한 것은 개발 및 생산 환경의 분리입니다。
2026 년 기술 창고의 권장 배포
웹 사이트 또는 랜딩 페이지
앞 끝은 Vercel 또는 Netlifty에서 배치되고 뒤 끝은 요구되지 않습니다. GitHub에서 배포할 수 있습니다。
인증 및 데이터베이스와 풀 스택 응용
프론트엔드, Vercel, 백엔드, Supabase. 초보자를위한 가장 권장되는 기술 창고입니다。
복잡한 백엔드 논리
프론트엔드는 Vercel을 사용하고, 백엔드는 Supabase를 사용하고, 계산 작업은 EdgeFunctions를 통해 처리됩니다. 서버 임대없이 확장 할 수 있습니다。
서버의 전체 제어
백엔드는 Fly.io 또는 Railway를 사용하고, 프런트 엔드는 어떤 옵션을 일치 할 수 있습니다. 통제는 더 강합니다, 그러나 더 복잡한。
지원하다
Supabese: Vibe Coder의 환경 가이드
링크 :https://subbase.com/blog/the-vibe-coders-guide-to-subbase-environments
생산의 안전한 배포에 대한 필수 내용은 개발 환경과 생산 환경, 데이터베이스 마이그레이션 및 롤백 전략의 차이를 다룹니다。
Jam 추가 : Vibe Code Project 배포 방법
링크 :https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/
비 기술적인 사용자를 위한 배포 가이드는 프로젝트 유형에 따라 적절한 배포를 선택할 수 있도록 돕고 4 월 2026에 게시 될 것입니다。
Vercel 및 Netlifty (YouTube, 무료)로 무료 Vibe 작업 프로젝트를 배포하십시오
링크 :https://www.youtube.com/watch?v=85JVKjW-uG0
GitHub에서 Vercel 및 Netlifty의 단계별 과정으로。
Vercel Defense 문서
링크 :https://vercel.com/docs/deproves/overview
Vercel 공식 배포 문서, 포함 미리보기 배포, 환경 변수 관리 및 도메인 이름 구성。
온라인 제품을 통제하십시오
생산 환경에서 보이지 않는 문제는 수리 될 수 없습니다. 다음 세 가지 도구는 사용자가 진행하고 응용 프로그램은 무엇을 할 수있는 완벽한 그림을 줄 것입니다。
지원하다
Langfuse (오픈 소스, 무료 수준)
링크 :https://langfuse.com/
LLM Observable 플랫폼. 그것은 모든 AI 통화를 추적합니다 : 전송 된 것은 무엇입니까, 토큰 사용, 지연, 비용 및 오류. OpenAI, Anthropic 및 Langchain 지원. 2026년까지 AI 애플리케이션을 모니터링하기위한 표준 도구 중 하나가되었습니다。
Langfuse와 AI 응용 프로그램을 모니터링하는 방법
링크 :https://www.youtube.com/watch?v=V7nutySdrgw
OpenTelemetry를 사용하여 3 월 2025에서 출판 된 현지 및 생산 환경에서 Langfuse를 구성 할 수 있습니다。
Langfuse + 무료 공식 가이드
링크 :https://langfuse.com/docs/observability/sdk/advanced-features
LLM-observable data using Langfuse. 단 하나 윤곽은 완전한 생산 감시 기술 창고를 형성할 수 있습니다。
(공식, 무료 수준)
링크 :다운로드
버그 추적을 위한 표준 도구를 적용합니다. 그것은 사용자의 피드백을 기다리고 있기 때문에 첫 번째 인스턴스에서 오류를 알리기 위해 온라인으로 사용할 수 있습니다。
Vercel Analytics (공식, 무료)
링크 :https://vercel.com/docs/analytics
Vercel의 내장 웹 사이트 분석 도구, 하나의 키로 활성화. 페이지 조회, 성능 지표 및 핵심 웹 Vitals를 볼 수 있습니다。
3. 당신의 방향을 선택하십시오
여섯 달에, 당신은 기본 기술을 가지고있다. 다음 질문은: 어떤 방향이 당신이 가고 있습니까
3개의 viable 경로가 있고, 당신은 당신의 목표를 가장 적합한 것을 선택할 필요가 있습니다。
방향 1 : 제품 빌더, i.e. Indie Hacker
사람들에게 적합 : 독립적 인 설립자, 기업가, 독립적 인 개발자 및 자신의 제품을 구축하고 판매하려는 사람들。
이것은 Vibe Code의 가장 일반적인 경로입니다. 일자리를 찾고 있지 않지만 수입을 창출하는 제품을 발행합니다。
2026 인디 해커 Polytechnic
Lovable 또는 놀이쇠: 급속한 시제품 발달 및 조기 검증을 위해
Cursor 3.0 + Claude Code: 공식 건설 및 깊이 사용자 정의
Supabase: 데이터베이스 및 인증
줄무늬: 지불
Vercel: 배포
PostHog: 사용자 분석。
2026 년 우려의 가변 응용 프로그램의 유형
SaaS 마이크로툴
단지 하나의 매우 특정 문제는 해결되었다, 구독 $5-25 한 달。
AI 래퍼
특정 LLM 기능은 명확하고, 특정한, 하위 시장 UI에서 캡슐화됩니다。
디렉토리 또는 시장 플랫폼
메시지를 얻을 수 없습니다: %s %s。
기업 사내 도구
현재 작업의 자동화는 양식을 사용하여 기업에 의해 수동으로 수행。
지원하다
Indie Hackers (무료 커뮤니티)
링크 :https://www.indiehackers.com/
Real Founds는 소득 데이터를 공유하고 로그와 교훈을 배운다. 그것은 정말 판매하고 가격이 책정되는 것에 대한 높은 신호 정보의 소스 중 하나입니다。
줄무늬 Docs: 지불 Quickstart
링크 :https://stripe.com/docs/payments/quickstart
Stripe Checkout을 한 번 지불 및 구독하는 방법에 대한 공식 가이드. AI를 가질 수 있습니다 "달에 X 달러의 통합을 구독"그리고이 가이드를 사용하여 생성을 확인합니다。
PostHog 시작하기
링크 :https://posthog.com/docs
오픈 소스 제품 분석 도구. 당신은 사용자 행동을 추적 할 수 있습니다, funnels를 변환, 유지 및 기능 스위치, 그래서 당신은 정말 작동을 알고。
방향 2: AI 제품 엔지니어
인구에 적합: AI 제품의 발달을 위한 시작 회사 또는 기술 회사에 들어가는 사람。
이 방향으로 작품의 컬렉션
"chat with your docs" 제품。
사용자는 10-20 PDF 파일을 업로드하고 이러한 문서에 근거한 질문에 대한 권한을 적용하고 인용 된 소스와 답변을 얻을 수 있습니다. 풀 스케일 응용 프로그램, 배포 및 공유해야합니다。
2026년까지, 이것은 고용주 또는 고객을 보여줄 수있는 가장 높은 신호 수집 중 하나입니다。
지원하다
LlamaIndex: RAG 투자
링크 :https://developmenters.llamaindex.ai/python/framework/understance/rag/
문서 질문에 대한 가장 빠른 경로 중 하나를 구축하고 시스템 응답。
LangChain Academy: LangGraph 소개
링크 :https://academy.langchain.com/courses/intro-to-langgrap의 장점
LangGraph는 공식적으로 무료입니다. LangGraph는 주류 대리인 프로그램 기구의 한개, 국가 관리, 기억, 인간적인 참여 반복 및 다수 대리인 협력을 커버하。
Vercel AI SDK (비교 문서 무료)
링크 :https://sdk.vercel.ai/docs
몇 가지 코드는 Next.js 응용 프로그램에 사용할 수 있으며 스트리밍 채팅, 구조화 된 생성 및 도구 통화 기능을 추가 할 수 있습니다. 20개 이상의 AI 공급자를 위한 지원。
에이전시 AI에 Vibe 코딩 : 프로그램의 다음 진화
링크 :https://www.youtube.com/watch?v=LHAvPwolz8U
이 지역의 개요는 임의의 Vibe Coding에서 자율 계획, 구현 및 검증 가능한 구조화 된 시스템에 이동하는 방법에 대한 개요입니다. 이것은 일 시장이 움직이는 방향입니다。
MindStudio: 기관 엔지니어링이란
링크 :https://www.mindstudio.ai/blog/what-is-attic-engineering/
Vibe Coding에서 Agency Engineering의 전환에 대한 명확한 설명. 2026 년까지 많은 고용주가 모집 된 능력의 패러다임이었습니다。
방향 III: AI 자동화 자문
인구에 적합: 기업을 즉시 봉사하고 싶은 사람, freelancers를 포함하여, 컨설턴트 또는 기관 서비스 회사를 설치하고 싶은 사람들。
기업은 비싼, 반복, 수동 프로세스를 대체할 수 있기 때문에 AI 자동화를 위한 진짜 돈을 지불하는 것을 기꺼이 합니다. 이것은 Vibe Coding 기술에 가장 빠른 지불 경로 중 하나입니다。
가장 일반적인 가치있는 자동화 장면
AI 메일 분류 및 자동 응답
잠재적인 클라이언트 검열 및 개별화된 outreach
문서 추출 및 처리
지식 기반 고객 로봇
CRM 데이터 완료 및 정리
청구서 및 계약 처리。
지원하다
n8n Documentation (무료, 오픈 소스)
링크 :https://docs.n8.io/
Visualized 워크플로우 자동화 도구, 원래는 AI 노드를 지원합니다. Slack, Gmail, Notion, HubSpot, Airtable 등 400개 이상의 통합에 LLM을 연결할 수 있습니다. 호스팅 버전은 완전 무료입니다。
9n 풀 코스; 6 시간 (유튜브, 무료)
링크 :https://www.youtube.com/watch?v=QoQBzR1NIqi에
초급부터 고급까지 AI 워크플로우 자동화를 덮는 풀 n8n 코스。
이름 *
링크 :https://www.make.com/
Visualized 자동화 플랫폼. 복잡한 다단계 워크플로우를 위해 Zapier보다 강력합니다。
자동화 빌더 : Vibe Coding to Agency AI (YouTube, 무료)
링크 :https://www.youtube.com/watch?v=LHAvPwolz8U
자동화된 빌더가 n8n, OpenAI 및 Vibe Coding 도구를 엔드 투 엔드 엔터프라이즈 자동화 프로세스와 결합하는 방법을 설명합니다。
이 방향으로 작품의 컬렉션
잠재적 고객 심사 및 outreach에 대한 최종 자동화 프로세스 구축 :
CSV 또는 Airtable에서 가져온 리드
LLM을 사용하여 각 잠재 고객을 연구하고 원하는 고객 이미지에 따라 일치를 결정하십시오
리드에 대한 평가 및 정렬
각각의 다른 's 음색에 개인화된 접근 메시지
모든 결과 및 상태를 작성, 원래 표로 다시 메모。
이 비즈니스가 지불 할 수있는 실제 비용 효율적인 자동화 프로젝트입니다。
Feeding: Vibe Coding와 모바일 애플리케이션 개발
모든 이전 내용이 기본적으로 웹 응용 프로그램을 구축. 대부분의 Vibe Coder는 동일했습니다。
그러나 당신의 아이디어가 모바일 응용 프로그램입니다, 이는 사용자가 휴대 전화에 설치해야하는 제품, 그것은 다릅니다. 첫 달의 시작 앞에, 이 생태를 이해하는 것이 가치가 있습니다。
2026 이동하는 끝의 순간
이동 개발은 웹 개발보다 더 어렵습니다. React Nature는 더 크고 취약한 트리에 달려 있습니다. AI는 때때로 일부 패키지 버전이 호환되었는지 가정하는 코드를 생성하지만 실제 버전은 충돌 할 수 있습니다. iOS 및 Android 시뮬레이터는 로컬 구성을 필요로하며 AI는 완전히 관리 할 수 없습니다. 모바일 UI를 테스트하면 실제 기계 또는 시뮬레이터가 웹과 같은 브라우저에서 직접 미리보기 할 수 없습니다. 엑스포는 프로세스를 크게 단순화하지만 자체 제한을 소개합니다。
모바일 응용 프로그램을 구축하려는 경우, 권장 구성은:
구조: 반응 성격 + 급행, 일 일
도구 체인: 내비게이션을위한 엑스포 라우터, 파일 경로에 따라 Next.js 앱 라우터 모델과 유사
AI 도구 : Claude Code + Cursor, React Nature를 지원하는 웹과 같은 도구
템플릿 시작: npx create-expo-app 또는 create-rn-new 구성 된 비계 생성
미리보기: 가장 빠른 피드백 루프는 2차원 코드를 통해 휴대 전화에서 Express Go App의 미리보기입니다。
지원하다
Vibe Coding 모바일 앱 0에서 시장
링크 :https://www.youtube.com/watch?v=SzmXEOozpFg
Claude Code + Cursor + React Nature + Express Router를 사용하여 Zero에서 피트니스 추적 응용 프로그램을 구축하는 방법의 완벽한 데모. 콘텐츠는 Figma-to-spec 워크플로우, Claude Code 단계와 실시간 노출을 처리하는 방법을 다룹니다。
2026년 Vibe Coding을 이용한 React Nature 앱 구축
링크 :https://blog.vibecoder.me/bild-react-nate-app-vibe-coding
Expo 프로젝트 설정에 대한 단계별 프레젠테이션, 프로젝트 간략하고 Claude Code를 사용하여 단계별 모바일 애플리케이션 구축 계획을 구현합니다。
React Nature Vibe Code SDK (무료, 오픈 소스)
링크 :https://github.com/react-native-vibe-code/react-native-vibe-code-sdk
오픈 소스 IDE는 React Nature 및 Expo 애플리케이션의 건설을 위해 천연어 팁을 통해 설계되었습니다. 모바일 엔드 개발에서 가장 가까운 도구로 이해 될 수 있습니다。
회사소개
링크 :https://docs.expo.dev/
Expo 윤곽, 대패 및 장비 API 핵심 참고. 이 문서는 AI 도구를 사용하여 브라우저에서 열 수 있음을 권장합니다。
가장 중요한 제안은 Expo 라이브러리의 예 폴더를 Google AI Studio로 붙여 넣기 위한 것입니다. 매번 Gemini가 이러한 예제를 기반으로 문서를 생성하기 위해 컨텍스트 창을 사용할 수 있도록 AI 세션을 이동하기 시작합니다. 그런 다음 힌트에 문서를 사용, 오히려 모델이 현재의 API를 알고。
모바일 단말기의 API는 빠르게 변화하고 있으며, 데이터는 일반적으로 현실 뒤에 지연됩니다。
먹이는: 완전한 공구 지도 — 2026년에 존재하는 모든 중요한 공구
이 가이드는 Cursor 3.0 및 Claude Code를 주요 도구로 추천합니다. 2026년까지, 그러나, 완전한 공구 도표는 크게 확장되고 다른 공구는 다른 시나리오를 위해 적당합니다. 더 완벽한 그림입니다。
터미널/ CLI 에이전트
Claude 코드
Anthropic의 끝 progent. 이유와 창고 수준의 작업의 전체 코드 저장소에 가장 적합합니다。
Gemini 클립
Google의 오픈 소스 터미널. Claude Code의 무료 대안은 큰 컨텍스트 창을 가지고 있습니다。
오픈코드
커뮤니티 오픈 소스 CLI Agent. 휴대용 모델, 더 유연한 비용。
공장 Droid
자율 소프트웨어 엔지니어링 에이전트, 기업 CI/CD 자동화。
그들 중, Gemini CLI는 완전히 무료이며 열리기 때문에 특별한 언급을받습니다. Gemini 3.5 Pro의 1 백만 개의 토큰 컨텍스트 창을 사용하여 Claude Code보다 더 커집니다。
임명:
웹 사이트
다음 실행:
기본 정보
사용될 수 있습니다. 컨텍스트 기반 임무에 대한 무료 대안으로 사용할 수 있습니다. 또는 작업 스트림의 네 번째 달의 "hand pasting to Gemini"단계 대신 두 번째 검토자로 사용할 수 있습니다。
OpenAI Codex, 오래된 모델 대신 새로운 클라우드 인코더 에이전트, 이제 ChatGPT의 클라우드 인코딩 에이전트로 사용할 수 있으며 다른 작업을 수행합니다. Claude Code: Codex는 클라우드에서 실행되며 로컬이 아닙니다. ChatGPT 측바를 통해 액세스 할 수 있습니다。
AI 프로그래밍 IDE 확장 목록
커서 3.0
지원 Agens Windows와 평행한 cloudsAgent. 무료 버전 / 월 $ 20。
윈드 서핑
Google이 인수 한 Cascade Agent는 더 많은 기업가입니다. 무료 버전 / 월 $ 15。
프로젝트
거의 어디서나 VS Code, Jetbrains, Xcode, Neovim. 무료 버전 / 월 $ 10。
제품정보
오픈 소스, 자신의 모델을 가져옵니다. 무료 및 API 토큰으로 지불。
Google의 방사성
여러 Agent Manager View가 있습니다. 정해진 가격。
사이트맵
처음 AI에 처음의 성능. 무료。
킬로 코드
VS Code 플러그인, 오픈 소스, 모든 주류 공급자 지원. 무료。
계속
오픈 소스 Copilot 대안, 지원 VS 코드 및 Jetbrains. 무료。
지원하다
Datacamp: 상단 15 건물 도구 2026에서 마스터 구축
링크 :https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster
2026년 가장 완벽한 도구 중 하나인 CLI Agent, AI IDE, 브라우저 빌더 및 전문 툴을 덮고 있습니다. 브라우저가 v0, Editor to Codex, Cursor의 전체 전력 시나리오 및 Claude Code로 우선 순위를 부여해야하는 간결 제안을 제공합니다。
얼티밋 바이브 코딩 가이드 (Full Court Tutorial 2026) (Youtube, 무료)
링크 :https://www.youtube.com/watch?v=KO vCL1Zhpi
3 시간 마스터 's 과정, Cursor, Codex, Antigravity, Claude Code, Loveable, Bolt, Supabese, Vercel, Figma Stitch, V0 및 MCP servvers의 일회성 적용. 로 할 수있다 2026, 그것은 가장 완벽한 단일 비디오 리소스 중 하나입니다。
풀 코스 2026 (Youtube, 무료)
링크 :https://www.youtube.com/watch?v=BpOsHF5Oj I
Codex 및 Firebase를 사용하여 같은 코드 라이브러리에서 웹 응용 프로그램, 데스크톱 응용 프로그램 및 iOS 응용 프로그램을 구축하는 방법을 설명합니다. 에 게시 됨 5월 2026. 그들은 여러 플랫폼을 커버하고 싶은 초보자에 적합하지만, 기술 상점을 자주 전환하지 않습니다。
Feeding: 참여하는 커뮤니티
가장 빠른 학습은 종종 지역 사회에서 발생합니다. 사람들이 건물이 무엇인지 실시간으로 공유합니다. 다음은 여전히 중반 2026 년 활동 한 지역 사회입니다。
Loveable Discord (무료)
링크 :https://lovable.dev/community
모든 시간대를 다루는 160,000명 이상의 회원이 2026년 가장 활발한 Vibe Coding 커뮤니티 중 하나입니다. 실시간 도움말, 주간 활동 및 온라인 프로젝트 디스플레이 채널。
r/vibecoding (무료, Reddit)
링크 :https://www.reddit.com/r/vibecoding/
Vibe Coding 커뮤니티 가더링. 여기에 프로젝트 프리젠 테이션, 도구 비교, 디버깅 도움, 그리고 실패의 실제 이야기는 YouTube에서 볼 수 없습니다。
Cursor Forum (공식 무료 커뮤니티)
링크 :https://forum.cursor.com/
Cursor의 공식 커뮤니티, 엔지니어링 팀은 읽고 응답합니다. Cursor의 "Built" 포스터는 실제 프로젝트 사례 및 실제 이해 어려움을 찾는 가장 좋은 소스 중 하나입니다。
Vibe Coders의 공공 전략 구축
링크 :https://www.youtube.com/watch?v=ke6oxy8Z7C4
Vibe Code를 위한 Open Building Strategy Guide: 게시물, 언제, 프로젝트 건설 프로세스를 타겟으로 변환하는 방법, 그리고 다음 릴리스를 가속화하는 방법。
Postiv AI : Vibe는 SaaS 파이프 라인에 코딩
링크 :https://postiv.ai/blog/vibe-coding-marking
제품 완료 후 완료 프로세스를 커버: 비즈니스 모델을 검증, 분산 전략 개발, 그리고 사용 LinkedIn 및 X 이미 온라인이 제품을 배포。
Karo Zieminski : Vibe 코딩 허브 2026 (무료, Substack)
링크 :https://karozieminski.substack.com/p/vibecoding-resources-hub
Vibe Coding, 사양 구동 개발 및 AI 지원 제품 건설, 완벽한 빌더 경로 : 기본, 생산, 안전, 디버깅 및 도구 선택. Substack에 더 완벽한 단일 페이지 리소스 센터 중 하나입니다。
0xMinds: AI-Powered 개발에 대한 완전한 가이드
링크 :https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026
데이터의 사용을 다루는 2026 가이드, 건설 워크플로의 6 단계, 즉, 최적화 된 출판물의 컨텍스트 생성, 검토 및 여러 에이전트 레이아웃 및 기본 구성 목록에 직접 액세스의 개념화。
Augment Code: Vibe Coding 대 Spec-Driven 개발 (무료 가이드)
링크 :https://www.augmentcode.com/guides/vibe-coding-vs-spec-diven-development
순수 Vibe Coding에 적합할 때 판단을 돕는 명확한 의사 결정 기구를 제공하기 위하여는 명세가 발달을 몰기 위하여 사용될 때. 이 문서는 Vibe Coding 프로젝트와 전환 모드를 식별하는 방법을 식별하는 "three-month Wall"을 설명합니다。
이 도로 맵을 실제로 사용하는 방법
이 문서를 읽는 대부분의 사람들은 진짜로 그것을 끝내지 않을 것입니다. 내용이 너무 어렵기 때문에 건설 계획보다 오히려 독서 목록으로 취급하기 때문에。
Vibe Coder, 진정한 성공 2026, 일반적으로 세 가지 일반적인 습관을 가지고:
그들은 제품을 게시, 그냥 학습하지。
매월 ' S 이정표는 배포 된 프로젝트, 실제 및 액세스 가능한 URL로 끝나지 않아 완성 된 과정보다. 6개의 불완전하지만 출판된 제품 OUTNUMBER 20 완료 과정。
그들은 공개적으로 내장。
X, LinkedIn 또는 대상 사용자 플랫폼에서 빌드 프로세스를 게시합니다. 예를 들어, "X 구축의 첫 날"과 "나는 X에있어, 이것은 내가 배운 것입니다." 이 지역의 가장 좋은 기회는 일반적으로 CV보다 가시성에서 온다。
그들은 먼저 수축하고, 그들은 넓습니다。
Cursor 또는 Claude Code와 같은 6 개월 만에 하나의 도구가 선택되었습니다. Next.js + Supabese + Vercel과 같은 기술 창고; 제품 빌더, AI 엔지니어 또는 자동화 된 컨설턴트와 같은 방향. 넓이보다 깊습니다. 실제로 3 가지를 게시하면 범위를 확장합니다。
이 문서는 6 개월 노트 및 개인 연습 경로의 기초에 저자에 의해 컴파일하고 AI Model Minimax 및 Opus 4.6에 의해 편집되었습니다。
[ 척 ]원본 링크]
