Enjoy Life비개발자를 위한 바이브 코딩 첫걸음
close AI에게 지시사항을 전달하면 제품이 완성되는 ‘바이브 코딩’의 시대다. 과거에는 개발자가 알고리즘을 직접 구상하고 손으로 코드를 입력해야 했지만, 이제는 AI에게 “자동 주식 매매 알고리즘”이나 “상품 관리 쇼핑몰” 같은 요구사항을 전달하고 만들어 달라고 명령만 해도 그럭저럭 쓸 만한 제품이 나온다. 개발 장벽이 낮아지면서 많은 사람들이 바이브 코딩으로 일상 속 불편함을 해결할 서비스를 직접 구현해 출시하고 있다.
하지만 바이브 코딩의 진짜 문제는 제품을 출시한 이후에 드러난다. 간단한 기능을 만들 때는 잘 동작하던 AI가 코드가 길어지고 복잡해질수록 점점 이상한 결과물을 만들어내기 때문이다. 이는 바이브 코딩 자체의 문제라기보다는 지시 방식의 문제에 가깝다. 회사에서 팀장이 두루뭉술하고 광범위한 지시를 내리면 아무리 뛰어난 팀원이라도 결과물이 중구난방이 되는 것과 같은 이치다. 직장에서 좋은 성과를 내기 위해 명확한 지시가 필요하듯, AI에게도 이해 가능한 구체적인 지시를 전달해야 원하는 결과를 얻을 수 있다.
이에 본 글에서는 AI에게 적절한 지시사항을 전달하기 위해 필요한 기초적인 개발 지식과 원활한 바이브 코딩을 돕는 여러 AI 기술을 소개하고자 한다. 이를 통해 비개발자도 단순한 MVP 제작에 그치지 않고, 자신만의 거대한 프로젝트를 완성할 수 있도록 안내하려 한다. (어디까지나 본인도 비개발자이며, 비개발자를 위한 가이드임을 미리 밝힌다.)
바이브 코딩을 위한 기본 개념
우선 바이브 코딩을 하기 위해서는 자신의 컴퓨터를 개발용으로 설정해 줄 필요가 있다. 개발하고자 하는 프로그램에 따라 관련 언어나 도구를 설치해야 하는 것인데, 게임 개발을 위한 유니티부터 웹사이트 개발을 위한 Node.js, 백엔드 서버 구축을 위한 파이썬 등이 대표적이다.
평소 개발과 접점이 없던 비개발자라면 당연히 생소하고 어렵게 느껴지는 것이 당연하다. 하지만 AI시대인 만큼 새롭게 배우는 것에 대한 걱정은 할 필요 없다. 별도의 환경 구축 없이 바로 바이브 코딩을 할 수 있는 여러가지 플랫폼이 존재하기 때문이다.
바이브 코딩 가장 빠르게 시작하기
Google AI Studio, v0, Replit 등 다양한 바이브 코딩 플랫폼이 존재한다. 복잡한 개발 환경 세팅 없이 AI에게 요청 사항을 입력하고, 완성된 결과물을 바로 배포할 수 있도록 구성되어 있는 편리한 서비스들이다. 워낙 직관적이다 보니 별도의 추가 설명 없이도 바로 사용할 수 있다. 그저 자신의 생각대로 만들어 달라는 요청을 하기만 하면 된다.
급하게 홈페이지가 필요하다면 홈페이지에 들어갈 내용들을 정리하고 고객들이 홈페이지를 봤을 때 어떤 느낌을 받기를 원하는지 프롬프트로 전달해 주는 것 만으로 충분하다. 오랜 시간을 투자하지 않고도 즉시 사용할 수 있는 수준의 홈페이지를 만들어 준다.
코딩에 대한 두려움 없이 IT 서비스를 만드는 즐거운 경험을 선사하기에, 직접 서비스를 제작해 보며 코딩에 관심을 가지게 되는 계기가 될 수는 있지만 이러한 웹서비스 기반 바이브 코딩은 앞서 언급한 바와 같이 코드가 점점 길어지고 프로젝트가 커질수록 AI가 거대한 프로젝트를 혼자 감당하지 못하고 오류를 발생시키기 시작한다.
이러한 한계를 극복하려면 개인 PC에 AI를 직접 연결하고 파일 읽기를 비롯한 여러 권한을 부여해 개발 정확도를 높여야 한다. 결국 더 고차원적인 프로그램을 제작하기 위해서는 컴퓨터에 직접 개발환경을 구축해주어야 하는 것이다.
AI에게 컴퓨터를 맡기는 통로, 터미널
터미널(Terminal)은 비개발자라면 한 번도 사용해보지 않은 경우도 많다. 터미널은 그래픽 요소 없이 인간과 컴퓨터가 직접 소통하는 창구다. 그래픽 환경(GUI)에서 설정하는 것보다 터미널로 직접 명령을 내리는 편이 개발 과정에서 훨씬 효율적인 경우가 많아, 개발자들은 터미널을 자주 활용해 왔다.
마침 터미널은 그래픽 제어가 필요 없기 때문에, AI가 컴퓨터를 제어하기에 최적의 조건을 갖추고 있다. 터미널을 통해 AI 에이전트에게 명령을 내리면, 로컬 PC를 사람 대신 직접 조작하여 원하는 목적을 달성해 준다.
한편 터미널은 컴퓨터의 운영체제에 따라 프로그램을 설치하는 방식이 조금씩 다르다. 명령어를 입력해 컴퓨터를 조작한다는 본질은 같지만, 처음 시작할 때 이러한 차이 때문에 헷갈려하는 경우가 많으므로 먼저 짚고 넘어가고자 한다.
Windows를 쓰고 있다면 시작 메뉴에서 "PowerShell"이라고 검색해보자. 예전에는 "명령 프롬프트(cmd)"라는 걸 썼지만, 요즘은 더 다양한 기능을 가진 PowerShell을 기본으로 쓴다고 생각하면 된다.
Mac을 쓰고 있다면 응용 프로그램 폴더의 유틸리티 안에 있는 "터미널" 앱을 열거나, Command와 Space를 같이 눌러 나오는 검색창에 "터미널"이라고 쳐보면 된다.
예전에는 각 프로그램의 공식 홈페이지에 들어가 설치 파일을 직접 내려받아 실행하는 방식을 주로 써왔지만, 터미널 환경에서는 명령어 한 줄만 입력해도 웹에서 설치 스크립트를 가져와 프로그램을 바로 설치할 수 있다. 앞으로 진행할 개발 환경 셋팅과 AI 도구 설치 역시 이 터미널 창구(Windows는
irm, Mac은 curl)를 활용해 진행한다. 우리가 AI 에이전트에게 코딩을 맡길 때도 결국 이 터미널 위에서 모든 게 이루어지기 때문에, 터미널을 열 수 있고 명령어를 입력할 준비가 되었다면 개발 환경 셋팅을 위한 기본 준비는 끝났다고 봐도 좋다.
목적에 맞는 개발 언어 알아두기(AI에게 맡기기)
개발 환경을 세팅할 때는 목적과 분야에 따라 필요한 언어나 프로그램이 달라진다. 웹 서비스의 경우 데이터베이스, 백엔드, 프론트엔드, 웹 서버 환경 등을 종합적으로 설치해 줄 필요가 있다. 가장 널리 쓰이는 웹 서비스 분야는 초보자도 접근하기 쉬운 JavaScript(Node.js, React)나 Python, Java 등이 기본이 된다.
모바일 앱 개발에서는 iOS의 Swift나 Android의 Kotlin, 크로스 플랫폼 개발을 위한 Flutter(Dart)가 주로 쓰인다. 데스크톱 앱 분야는 C#(.NET)이나 Electron(JavaScript)이 사용되며, 게임 개발 분야에서는 유니티(Unity)와 C#, 고성능 그래픽 중심의 언리얼 엔진(Unreal Engine)과 C++ 등이 대표적이다.
뭐가 뭔지 잘 모르겠어도 걱정할 필요는 없다. 결국 이 모든 프로그램들도 컴퓨터 내의 문제를 해결하기 위해 존재하는 것이다. 이러한 환경 구축 과정을 AI에게 대신 설치해 달라고 요청해 보자. 이를 위해서는 먼저 AI를 설치하여 나의 PC 제어권을 전달 해 주어야 한다.
컴퓨터 조작용 AI : Agent CLI
AI가 컴퓨터를 조작하기 위해서는 Agent CLI라는 전용 AI 모델을 사용해야 한다. 여기서 CLI(Command Line Interface)란 텍스트 명령어를 직접 입력해 컴퓨터를 제어하는 터미널 환경을 의미한다. CLI 환경의 에이전트를 설치해 개인 PC의 환경 설정부터 도움을 받으며 진행하면, 코딩에 대한 진입장벽이 한층 낮아지는 것을 체감할 수 있다.
대표적인 Agent CLI 서비스로는 OpenAI의 Codex CLI, Anthropic의 Claude Code, Google의 Antigravity CLI 등이 있다. 본인이 구독 중인 서비스 중 하나를 선택해 설치해도 좋고, 세 가지 모두 설치해서 성능을 비교해 보는 것도 좋다. 각각의 설치 페이지 링크를 아래에 공유해 둔다.
Codex CLI
- windows
- mac
Calude Code
- windows
- mac
Antigravity CLI
- windows
- mac
Agent CLI 이 설치가 되면 각 Agent모델별 실행명령어를 통해 Agent CLI을 동작시킬 수 있다. 실행된 CLI 환경에서 에이전트에게 개발 목적과 필요한 환경 설정을 요청하면, 안내 절차에 따라 손쉽게 설치를 진행할 수 있다. 아래는 환경 구축을 위해 에이전트에게 직접 입력한 프롬프트다.
여기서 마크다운(Markdown, .md)이란 텍스트 기반의 간편한 문서 작성 양식으로, 개발 문서나 프로젝트 안내서(README)를 작성할 때 표준처럼 사용되는 파일 형식이다. 구조화된 목차와 가이드를 깔끔하게 보여주기 때문에 설치 절차를 기록하고 따라가기에 적합하다.
AI가 생성해 준 마크다운 파일의 내용을 차근차근 확인하며 설치를 진행해 보자. 아래는 에이전트가 작성해 준
install.md 파일의 내용을 그대로 옮겨온 내용으로 AI의 친절한 가이드를 살펴보며 필요한 프로그램들을 설치해 보자.Django (Backend) + Next.js (Frontend) CLI 설치 및 GitHub 연동 가이드
본 문서에서는 Backend(Python/Django)와 Frontend(Node.js/Next.js) 기술 스택의 필수 런타임 설치부터 CLI(명령줄 인터페이스) 환경에서의 프로젝트 생성, 연동, 그리고 GitHub 원격 저장소(Repository) 연동까지의 전체 절차를 다룹니다.
1. 시스템 필수 런타임 및 Git CLI 설치
각 운영체제(OS)의 CLI 패키지 관리자를 통해 Python, Node.js, 그리고 Git을 설치합니다.
🪟 Windows (PowerShell / Command Prompt)
💡 설치 완료 후 PowerShell 창을 닫고 다시 열어야git,python,node명령어가 정상 인식됩니다.
🍎 macOS (Terminal - Homebrew)
⚙️ Git 최초 환경설정 CLI
git 설정은 github.com 에서 계정을 생성해주어야 한다.
2. Backend (Python & Django) CLI 구축
1) 프로젝트 디렉토리 생성 및 이동
2) Python 가상환경(venv) 생성 및 활성화
3) Django 및 필요 패키지 CLI 설치
4) Django 프로젝트 및 앱 초기화
3. Frontend (Node.js & Next.js) CLI 구축
1) Frontend 디렉토리 이동 및 Next.js 앱 생성
상위 디렉토리(
my-web-app)로 이동 후 create-next-app을 CLI 옵션으로 비대화형(Non-interactive) 생성합니다.4. Backend & Frontend CORS 연동 설정
Next.js(
http://localhost:3000)에서 Django REST API(http://127.0.0.1:8000)로 HTTP 요청을 보낼 수 있도록 Django 설정 파일(backend/config/settings.py)을 수정합니다.backend/config/settings.py 파일 수정 항목
5. GitHub 연동 및 버전 관리 (Git CLI)
프로젝트 루트 디렉토리(
my-web-app)에서 통합 Git 저장소를 초기화하고 GitHub 원격 저장소와 연동하는 절차입니다.1) 루트 디렉토리 이동 및 Git 저장소 초기화
2) .gitignore 파일 생성 (필수)
가상환경(
.venv), 데이터베이스(db.sqlite3), node_modules, 환경 변수 파일(.env) 등이 GitHub에 올라가지 않도록 최상위 폴더(my-web-app)에 .gitignore 파일을 작성합니다.CLI로 .gitignore 생성 (PowerShell 또는 Bash):
3) 첫 번째 커밋(Commit) 작성
4) GitHub 저장소 연결 및 Push
Git CLI 방식 (GitHub 웹사이트에서 레포지토리 직접 생성 후)
- GitHub에서
my-web-app이름으로 새 저장소 생성 (README 생성 체크 해제)
- 터미널에서 아래 명령어 실행:
5) 지속적인 변경사항 커밋 및 Push 예시
6. CLI 한 눈에 보는 빠른 시작 (Quick Start)
🔍 연동 상태 검증 CLI 명령어
구문 | CLI 명령어 | 설명 |
Git 상태 확인 | git status | 변경된 파일 및 추적 상태 확인 |
원격 저장소 확인 | git remote -v | 연결된 GitHub URL 확인 |
커밋 로그 확인 | git log --oneline | 커밋 히스토리 확인 |
GitHub CLI 접속 상태 | gh auth status | GitHub CLI 인증 상태 확인 |
IDE
위와 같은 설치 절차를 마무리했다면
my-web-app 폴더에 python과 node.js 환경을 기반으로 한 백엔드, 프론트엔드 환경이 설정되었다. 이제 본격적인 개발을 진행할 수 있게 된것이다. 본격적인 개발을 진행하기 위해서는 통합된 개발환경, IDE가 필요하다.
IDE(Integrated Development Environment, 통합 개발 환경)란 코드 작성, 편집, 디버깅, 빌드 등 개발에 필요한 모든 과정을 하나의 프로그램에서 처리할 수 있도록 만든 개발용 소프트웨어다. CLI가 터미널 명령어로 소통하는 텍스트 중심의 환경이라면, IDE는 시각적인 그래픽 인터페이스(GUI)를 통해 코드 구조를 직관적으로 파악하고 관리할 수 있게 돕는다. 최근에는 AI 에이전트가 에디터 내부 깊숙이 통합되어, 복잡한 다중 파일 수정과 리팩토링까지 스스로 수행하는 'AI-native IDE'가 대세로 자리 잡고 있다. 대표적인 AI IDE 서비스들은 다음과 같다.Cursor
VS Code를 이용했던 사용자라면 익숙한 개발 환경을 그대로 제공하면서도, 다양한 AI 모델(Claude, GPT, Gemini 등)을 선택해 코드 수정 및 멀티 파일 편집(Composer)을 자율적으로 수행하는 가장 대표적인 AI IDE다.
Windsurf (by Codeium)
AI 에이전트 엔진인 Cascade를 기반으로 작동하며, 개발자가 지시한 작업을 스스로 계획하고 여러 파일에 걸친 코드 수정 및 명령어 실행을 연속적으로 처리해 주는 에이전트 중심의 IDE다.
Google Antigravity IDE
구글의 Gemini 모델을 기반으로 다중 에이전트 병렬 실행, 시각적 아티팩트 검증, 프로젝트 단위 자동화를 지원하는 구글의 차세대 에이전트 퍼스트(Agent-First) 개발 환경이다.
IDE를 설치하고 터미널 환경에서 설치했던
my-web-app 폴더를 열어 IDE의 AI에게 요청한다면, 프로젝트 폴더의 파일들을 읽어서 처리해준다. 드디어 코드를 조회하고 변경사항을 확인하고 디버깅 하며 AI 바이브 코딩을 통한 장기적이고 체계적인 프로그램 관리가 가능해진 것 이다. 추가적인 AI SKILL 설정
IDE 설치까지 완료했다면, 이제 본격적인 '바이브 코딩(Vibe Coding)'을 시작할 때다.
이제 AI에게 요청하면 그 결과물로 생성된 파일들이 제공되며, 이를 직접 선택하여 코드 변화를 눈으로 확인할 수 있다. 또한 이해되지 않는 부분은 AI와의 질의응답을 통해 내 수준에 맞춘 개별 학습도 가능하다. 기존 웹 형태의 바이브 코딩 툴에서는 경험할 수 없었던 유연함과 확장성이 로컬 PC 환경에 직접 개발 환경을 구축함으로써 비로소 실현되는 것이다.
하지만 PC 환경에 환경을 구축했다고 해서 바이브 코딩의 모든 가능성을 100% 끌어쓰고 있는 것은 아니다. 로컬 바이브 코딩을 즐기다가 슬슬 답답함이나 한계를 느낄 때, 아래 소개할 추가 스킬들을 활용하면 그 답답함을 깔끔하게 해소할 수 있다.
AI 에이전트를 한 단계 더 업그레이드해 줄 핵심 요소인 Markdown(md) 기반 작업 방식, Skill, 그리고 MCP(Model Context Protocol)를 알아보자.
Markdown을 통한 AI 지침 설정
AI 에이전트는 컨텍스트(맥락)를 바탕으로 작동한다. 프로젝트 루트 디렉터리에 특정 Markdown 문서들을 배치해 두면, AI는 매 요청마다 이 문서들을 참조하여 개발자가 원하는 규칙과 맥락에 맞춰 코드를 생성한다.
- 개발 지침 작성 (
.cursorrules또는CLAUDE.md)
AI가 코드 스타일, 프레임워크 규칙, 하지 말아야 할 행동을 준수하도록 AI의 영역을 설정하는 파일이다.
(예: "TypeScript strict 모드 준수", "Tailwind CSS 사용", "기존 API 엔드포인트 수정 금지")
- 구조 정의 및 프로젝트 가이드 작성 (
docs/architecture.md)
프로젝트의 폴더 구조와 데이터 흐름, 핵심 기술 스택을 정리해 두는 문서다. AI가 전체 구조를 파악해 뜬금없는 위치에 파일을 생성하거나 중복 코드를 작성하는 것을 방지한다.
- Obsidian과 연동한 일관된 코드 컨벤션 관리
개인 지식 관리 도구인 Obsidian에 코딩 스타일 가이드, 자주 쓰는 디자인 시스템 토큰, 도메인 용어집(Glossary) 등을 정리해 두고, 해당 노트 폴더를 개발 환경과 동기화(또는 심볼릭 링크 처리)한다. Obsidian의 노트들을 AI의 참조 문서로 지정하면 프로젝트나 AI 모델이 바뀌어도 나만의 일관된 코드 스타일을 유지할 수 있다.
Agent Skill: 반복 작업을 자동화 하는 전용 도구
Skill은 AI 에이전트에게 "특정 상황에서 어떤 절차로 일을 처리해야 하는지"를 가르치는 실행 레시피(매뉴얼)다. 많은 개발자들이 작업중 필요한 스킬들을 만들어서 공유해둔 사이트들도 많이 존재한다.
- 핵심 개념: 프롬프트를 매번 길게 입력할 필요 없이, 미리 정의된
SKILL.md문서를 호출하여 컴포넌트 생성, 코드 리뷰, 테스트 실행 등 복잡한 워크플로우를 한 번에 실행한다.
- 주요 Skill 생태계 및 저장소:
- Cursor Skills: Cursor 환경 내
.cursor/skills/디렉터리에 수록하여 커스텀 명령어로 활용. - Anthropic Skills Repository: Anthropic 공식 GitHub 저장소(
anthropics/skills)에서 제공하는 검증된 스킬 모음. - Skills Share Platform (
skills.sh): 오픈소스 기반으로 커뮤니티가 제작한 다양한 에이전트 스킬을 탐색하고 내 프로젝트에 손쉽게 등록할 수 있는 사이트.
- 추천 필수 Skill 세트:
/write-tests: 새로 작성된 코드에 대해 자동으로 단위 테스트(Unit Test)를 작성하고 검증까지 수행하는 스킬./code-review: 보안 취약점, 성능 병목, 코드 컨벤션 위반 여부를 프로젝트 지침에 맞춰 자동으로 체크해 주는 스킬./create-component: 프로젝트 내 UI 라이브러리와 폴더 구조 규칙에 맞게 필요한 파일들을 한꺼번에 보일러플레이트로 생성해 주는 스킬.
MCP (Model Context Protocol): 외부 데이터와 AI의 연결고리
MCP(Model Context Protocol)는 Anthropic이 제안한 오픈 표준 규격으로, AI 에이전트가 로컬 PC 및 외부 서비스의 데이터에 안전하게 접근하여 소통할 수 있도록 만들어주는 'AI 전용 API 통로'다.
- MCP의 필요성: 기존 AI는 프로젝트 외부의 파일 시스템, 데이터베이스, 외부 웹 서비스에 직접 접근할 수 없었으나, MCP 서버를 연결하면 AI가 직접 외부 데이터베이스를 조회하거나 Figma의 디자인 값을 불러오는 등의 작업이 가능해진다.
- 자주 사용되는 대표적인 MCP 서버:
- Filesystem MCP: 지정된 로컬 폴더에 대한 안전한 읽기/쓰기 권한을 제어하며 제공하는 기본 서버.
- GitHub MCP: GitHub 저장소의 Issue, Pull Request, Commit 내역을 AI가 직접 조회하고 관리할 수 있게 연결하는 서버.
- Postgres / Supabase MCP: 데이터베이스에 연결하여 테이블 스키마 조회, SQL 쿼리 테스트 및 최적화 안을 도출할 수 있게 지원.
- Playwright MCP: AI가 브라우저를 직접 띄워 웹 페이지를 클릭 및 탐색하며 UI 테스트 및 E2E 테스트를 자동 수행할 수 있게 돕는 서버.
- Figma MCP: Figma 디자인 파일의 레이아웃 및 디자인 토큰 정보를 직접 읽어와 코드로 변환할 때 정밀도를 대폭 향상시키는 서버.
바이브 코더로서의 협업자세
AI 기술이 비약적으로 발전함에 따라, 기획과 디자인부터 백엔드 및 프론트엔드 개발에 이르기까지 기존 IT 직군 간의 경계가 한층 무너지고 있음을 피부로 느낀다. 혼자서도 하나의 멋진 서비스를 빠른 시간 안에 만들어낼 수 있는 시대가 되었지만, 기존 조직이나 팀 환경에서 개인의 R&R(Role & Responsibility)을 존중하면서 소통하는 문제는 또 다른 중요한 이슈로 다가오고 있다.
이때 가장 피해야 할 대화 방식은 "AI한테 부탁하니까 몇 분 만에 다 만들어주던데요?"와 같은 일방적인 커뮤니케이션이다. 이러한 태도는 동료 직군의 전문성을 경시하는 것처럼 보일 수 있으며, 코드나 디자인의 내막을 제대로 이해하지 못한 채 결과를 과신하는 인상을 주기 쉽다.
대신 바이브 코더로서 진정 필요한 자세는 AI가 생성한 결과물의 기술적 배경과 맥락을 깊이 이해하려는 노력이다. AI가 도출한 코드나 아키텍처를 사전에 면밀히 검토하고, "AI를 활용해 다양한 접근 방식을 먼저 시도해 보았고, 그중 구조적으로 가장 안정적이라 판단한 안을 정리해 왔습니다"라고 대화를 시작하는 편이 훨씬 건강하다.
이처럼 AI의 조력을 받되 스스로 기술적 주도권과 동료에 대한 존중을 유지한다면, 각자의 전문적인 영역을 침범하지 않으면서도 폭발적인 시너지를 만들어낼 수 있을 것이다. 기술을 도구 삼아 더 가치 있는 도전을 이어가는, 모두의 즐겁고 건강한 바이브 코딩을 응원한다.