바이브코딩 기초 지식, IDE·깃⁠·포트⁠·API·DB 개념 한 번에

AI가 코드를 대신 써 줘도, 막혔을 때 무엇을 물어야 할지 알려면 바이브코딩 기초 지식이 필요합니다. 이 글은 AI 도구, 개발 도구(IDE), 소스⁠·빌드⁠·깃, 프런트엔드와 백엔드, 포트와 로컬호스트, 서버⁠·클라우드⁠·배포, HTTP·API, 데이터베이스를 순서대로 설명합니다. 뒷부분에는 커서와 VS Code 설치, 클로드 연결, 깃허브 가입, 클라우드플레어 첫 배포까지 손으로 따라 할 수 있는 28단계를 붙였습니다.

바이브코딩 기초 지식, 왜 알아야 하나

AI가 많은 일을 해 주는 건 맞습니다. 그래도 개발을 직접 하거나 외주로 맡겨 보면 꼭 알아야 하는 개념이 곳곳에 나옵니다. "포트가 이미 사용 중입니다", "빌드 실패", "API 응답이 비어 있음" 같은 메시지를 보고 어디가 문제인지 짐작할 수 있어야 AI에게도 정확하게 시킬 수 있습니다.

아래 순서는 실제로 프로그램 하나가 만들어져 인터넷에 올라가는 흐름과 같습니다. AI 도구로 코드를 만들고, 개발 도구에서 고치고, 깃으로 보관하고, 서버에 올리고, 화면과 서버가 API로 데이터를 주고받고, 데이터는 데이터베이스에 쌓입니다.

AI 도구: LLM과 대화형 AI

챗GPT나 제미나이 같은 것을 LLM, 즉 대형 언어 모델이라고 합니다. 엄청난 양의 글을 학습해 사람 말을 이해하고 답을 만드는 인공지능입니다.

챗GPT는 질문하고 답을 받는 대표적인 대화형 AI입니다. 개발에서는 챗GPT 화면보다 개발 전용 도구가 더 많이 거론됩니다. 제미나이 CLI, 커서(Cursor), 클로드(Claude Code), 구글의 안티그래비티(Antigravity) 같은 도구입니다. 이 도구들은 대화만 하는 게 아니라 내 컴퓨터의 파일을 읽고, 코드를 고치고, 명령을 실행합니다.

CLI: 한 줄씩 명령을 넣는 방식

CLI는 커맨드라인 인터페이스(Command Line Interface)입니다. 윈도우에서 시작 메뉴에 "cmd"라고 치면 검은 창, 명령 프롬프트가 뜹니다. 이렇게 마우스 대신 글자로 명령을 한 줄씩 입력하는 방식을 CLI라고 부릅니다. 제미나이 CLI나 클로드 코드는 이 검은 창 안에서 AI와 대화하며 개발하는 도구입니다.

IDE: 통합 개발 환경

IDE는 통합 개발 환경(Integrated Development Environment)입니다. 코드를 편집하는 화면에 실행, 오류 찾기, 컴파일과 빌드, 소스 관리까지 한곳에 모아 둔 도구를 말합니다.

• 커서: IDE 안에 AI가 처음부터 들어 있는 형태입니다. 그래서 설치만 하면 바로 AI에게 코드를 시킬 수 있어 쉽게 쓸 수 있습니다.
• 비주얼 스튜디오 코드(VS Code): 마이크로소프트가 만든 무료 개발 도구입니다. 편집, 실행, 소스 관리를 할 수 있고, 확장 기능을 붙여 기능을 늘립니다.
• 클로드 코드: VS Code에 확장(모듈)으로 설치해 쓸 수 있습니다.

정리하면 두 가지 형태가 있습니다. 기존 개발 도구에 AI 도구를 설치하는 형태(VS Code + 클로드 코드)와, 커서처럼 개발 환경과 AI가 처음부터 한 몸인 형태입니다.

프롬프트, 컨텍스트, 하네스

초기에는 프롬프트라는 말을 많이 썼습니다. 질문을 체계적으로 잘 쓰는 것이 AI를 잘 쓰는 방법이라는 뜻이었습니다.

그다음 나온 개념이 컨텍스트입니다. 질문 한 줄이 아니라 프로젝트 목적, 지금까지의 결정, 관련 파일 같은 전후 상황을 모두 전달해서 AI가 그 상황 안에서 스스로 판단하게 하는 방식입니다.

요즘은 하네스(harness)라는 말도 씁니다. AI 모델을 감싸서 파일 읽기, 명령 실행, 테스트 같은 도구와 규칙을 묶어 주는 실행 틀을 가리킵니다. 여러 에이전트가 기존 코드를 테스트하고 안전성을 점검하는 식으로 일하는 방식도 이 흐름 안에 있습니다.

AI가 주로 맡는 일은 예전 개발자의 코딩 역할입니다. 요즘은 코딩 전에 설계와 계획을 잡는 일까지 함께 합니다.

소스와 빌드

소스(소스 코드)는 프로그램의 설계 내용을 사람이 읽을 수 있는 글자로 적은 것입니다. 자바, 파이썬, 자바스크립트, HTML처럼 언어에 따라 모양이 다릅니다. AI로 개발해도 결과물은 결국 이런 언어로 된 소스입니다.

빌드는 소스를 컴파일해 실행할 수 있는 형태로 만들거나, 실행 환경과 라이브러리까지 포함해 한 덩어리로 묶는 작업입니다. 배포 서비스에서 "Build failed"가 뜨면 이 단계에서 막힌 것입니다.

버전 관리: 깃과 깃허브

소스는 주로 깃(Git)으로 관리합니다. 깃은 코드를 언제, 무엇을, 어떻게 바꿨는지 기록하는 버전 관리 프로그램입니다. 잘못 고쳤을 때 이전 상태로 되돌릴 수 있습니다.

깃허브(GitHub)는 깃으로 관리하는 소스를 인터넷에 올려 두는 서비스입니다. 회원 가입하고 로그인하면 소스를 프로젝트(저장소)별로 관리하고, 만들고, 고칠 수 있습니다.

개발 도구와 깃허브를 연결해 소스를 올릴 수도 있습니다. 소스를 올리고 내려받는 기본 명령(git add, git commit, git push, git pull)은 조금 알아 두는 게 좋습니다. AI가 대신 쳐 주더라도 지금 무엇을 하는지는 알아야 하기 때문입니다.

프런트엔드와 백엔드

프런트엔드는 사용자가 보는 화면 쪽입니다. 웹이라면 HTML, CSS, 자바스크립트로 만들고, 그 위에 리액트(React) 같은 도구를 씁니다. 앱이라면 플러터(Flutter), 리액트 네이티브(React Native) 등이 있습니다. 웹은 웹서버에 올라가야 다른 사람이 볼 수 있고, 앱은 앱스토어나 구글 플레이를 거쳐 휴대폰에 설치됩니다.

백엔드는 화면 뒤에서 데이터를 처리하는 서버 프로그램입니다. 대표적으로 자바의 스프링부트(Spring Boot), 자바스크립트의 노드JS(Node.js), 파이썬의 FastAPI가 있습니다. 서버 프로그램은 서버 컴퓨터에서 실행됩니다.

포트와 로컬호스트

서버 프로그램은 실행될 때 포트 번호를 하나 잡고 뜹니다. 한 컴퓨터에 여러 프로그램이 돌아도, 요청이 도착하면 이 번호를 보고 자기 프로그램을 찾아갑니다. 자주 보는 번호는 이렇습니다.

• 22: SSH, 서버에 원격으로 접속할 때 쓰는 통로
• 80: HTTP 웹서버
• 443: HTTPS 웹서버(주소창에 자물쇠가 뜨는 암호화 연결)
• 3306: MySQL 데이터베이스의 기본 포트

로컬호스트(localhost)는 내 컴퓨터 자신을 가리키는 이름입니다. AI 도구가 "localhost:3000에서 확인하세요"라고 하면, 내 컴퓨터에 3000번 포트로 프로그램을 띄웠다는 뜻입니다. 이 주소는 내 컴퓨터에서만 열립니다.

서버, 클라우드, 배포

내 컴퓨터에서 돌던 서버 프로그램은 실제 서버로 올라가야 다른 사람이 쓸 수 있습니다. 서버에는 데이터가 저장되고, 수많은 앱과 브라우저가 접속해 데이터를 받아 갑니다. 이 서버는 보통 내 컴퓨터가 아니라 클라우드 회사의 데이터센터에 있습니다.

• CI/CD: 코드를 올리면 자동으로 테스트(CI)하고 서버에 배포(CD)하는 것입니다. 주로 팀이나 회사에서 개발할 때 갖춰 둡니다.
• 배포 서비스: 더 간단한 방법입니다. 대표적으로 클라우드플레어(Cloudflare)와 버셀(Vercel)이 있습니다. 소스나 폴더만 넘기면 서버에 올려 주고 접속 주소(URL)를 줍니다.
• 클라우드: 서버를 제대로 갖추려면 AWS나 마이크로소프트 애저(Azure) 같은 클라우드를 씁니다. 그중 AWS가 가장 많이 쓰입니다.

서버 운영체제는 윈도우나 리눅스인데, 주로 리눅스를 씁니다.

HTTP 프로토콜

HTTP는 브라우저가 웹서버에 URL로 접속해 웹페이지를 주고받을 때 쓰는 약속(프로토콜)입니다. 기본 포트는 80이고, 암호화를 더한 HTTPS는 443을 씁니다. 요즘 웹사이트는 대부분 HTTPS입니다.

API

API는 앱이나 화면이 서버와 데이터를 주고받는 호출 방식입니다.

• GET, POST, PUT, DELETE 같은 메서드와 URL로 이루어집니다.
• GET은 데이터를 가져오고, POST는 새로 보내고, PUT은 고치고, DELETE는 지웁니다.
• 응답은 주로 JSON(중괄호로 이름과 값을 묶은 글자 형식)으로 받습니다.
• 클라이언트(앱⁠·브라우저)는 받은 응답을 화면에 보여 주거나 처리합니다.

데이터베이스

데이터베이스(DB)는 데이터를 실제로 저장하는 곳입니다. 회원 정보나 게시판 글처럼 계속 쌓이는 데이터를 넣습니다. 표 형태로 저장하는 관계형 DB(MySQL, PostgreSQL 등)는 SQL이라는 명령어로 데이터를 가져오고 저장합니다. 몽고DB(MongoDB)는 문서 형태로 저장하는 NoSQL 계열이라 SQL 대신 자체 질의 방식을 씁니다.

AI로 개발해도 이 개념들은 곳곳에서 튀어나옵니다. 오류 메시지에 포트, 빌드, API, DB라는 말이 보이면 위의 어느 단계 문제인지부터 짚어 보면 됩니다.

따라 하기 28단계

준비물

• 컴퓨터와 인터넷 연결
• 이메일 계정. 깃허브와 클라우드플레어 가입에 씁니다.
• 클로드 계정. 클로드 코드를 쓰려면 유료 요금제(Pro 이상)나 API 결제 계정이 필요합니다. 요금은 공식 안내를 확인해야 합니다.
• 배포해 볼 웹페이지 폴더. 안에 index.html이 들어 있으면 됩니다.

구간 1. 커서(Cursor) IDE 설치

1단계. 웹 검색창에 "커서 AI"라고 입력합니다

• 위치: 브라우저 검색창
• 확인: 검색 결과에 공식 사이트 cursor.com이 보입니다.

2단계. cursor.com을 엽니다

• 확인: 첫 화면에 다운로드 버튼이 보입니다.

3단계. 다운로드 버튼을 눌러 설치 파일을 받습니다

• 확인: 다운로드 폴더에 설치 파일이 생깁니다.

4단계. 받은 설치 파일을 실행해 설치합니다

• 확인: 설치가 끝나면 커서가 자동으로 열리거나 바탕화면에 아이콘이 생깁니다.

5단계. 커서를 실행합니다

• 확인: 소스를 편집하는 화면이 보입니다. 이 안에서 AI 채팅, 실행, 빌드까지 할 수 있습니다.

구간 2. 비주얼 스튜디오 코드 설치

6단계. 주소창에 code.visualstudio.com을 입력합니다

• 확인: "Download for Windows"(맥은 macOS) 버튼이 보입니다.

7단계. 다운로드 버튼을 눌러 설치 파일을 받습니다

• 확인: 다운로드 폴더에 설치 파일이 생깁니다.

8단계. 설치 파일을 실행해 설치합니다

• 확인: 사용권 동의 뒤 "설치"를 누르면 설치가 끝납니다.

9단계. 비주얼 스튜디오 코드를 실행합니다

• 확인: 왼쪽에 탐색기⁠·검색⁠·소스 관리⁠·확장 아이콘이 세로로 놓인 편집 화면이 뜹니다.

구간 3. 비주얼 스튜디오 코드에 클로드 연결

10단계. 키보드에서 Ctrl + Shift + X를 눌러 확장 화면을 엽니다

• 위치: 왼쪽 세로 아이콘 줄의 네모 블록 모양 아이콘을 눌러도 됩니다.
• 확인: 왼쪽에 확장 검색창이 나타납니다.

11단계. "Claude Code"를 검색해 설치합니다

• 주의: 게시자가 Anthropic인 항목을 고릅니다. 이름이 비슷한 다른 확장이 있습니다.
• 확인: 설치가 끝나면 편집 화면 위쪽이나 왼쪽에 클로드 아이콘이 생깁니다.

12단계. 클로드 아이콘을 눌러 로그인하고, 채팅창에 원하는 내용을 입력합니다

• 위치: 클로드 대화창. 처음 열 때 로그인 화면이 뜨면 클로드 계정으로 로그인합니다.
• 확인: 챗GPT처럼 원하는 것을 입력하면 코드를 바로 만들거나 고쳐 줍니다.

구간 4. 깃허브 가입

13단계. 검색창에 "깃허브"라고 입력합니다

• 확인: 검색 결과에 github.com이 보입니다.

14단계. github.com을 엽니다

• 확인: 오른쪽 위에 "Sign up"과 "Sign in" 버튼이 보입니다.

15단계. "Sign up"을 눌러 회원 가입합니다

• 위치: 이메일, 비밀번호, 사용자 이름을 차례로 입력합니다.
• 확인: 이메일로 온 인증 코드를 넣으면 가입이 끝납니다.

16단계. 로그인합니다

• 확인: 내 저장소(Repositories) 목록이 보이는 첫 화면이 뜹니다.

17단계. 새 저장소(프로젝트)를 만듭니다

• 위치: 오른쪽 위 "+" 버튼 → "New repository"
• 확인: 저장소 이름을 정하고 "Create repository"를 누르면 프로젝트별 소스 공간이 생깁니다. 이곳에서 소스를 올리고 고칩니다.

구간 5. 클라우드플레어에 페이지 올리기

첫 배포는 이미 가진 웹페이지 폴더를 끌어다 놓는 방식이 가장 간단합니다. 카드 등록 없이 무료 플랜으로 할 수 있습니다.

18단계. 검색창에 "클라우드플레어"라고 입력합니다

• 확인: 검색 결과에 cloudflare.com이 보입니다.

19단계. 클라우드플레어 사이트에 접속합니다

• 확인: "무료로 시작하기"(Sign up) 버튼이 보입니다.

20단계. 계정을 만듭니다

• 확인: 이메일 인증까지 마치면 계정이 생깁니다.

21단계. 로그인합니다

• 확인: 대시보드(관리 화면)가 열립니다.

22단계. 왼쪽 메뉴에서 "Workers & Pages"로 이동합니다

• 확인: 프로젝트 목록 화면이 나옵니다. 처음이면 비어 있습니다.

23단계. "Create application"을 누릅니다

• 확인: 배포 방식을 고르는 화면이 나옵니다.

24단계. Pages 쪽의 "Drag and drop your files"를 고릅니다

• 대안: 깃허브 저장소와 연결해 자동 배포하려면 Git 연결 쪽을 고릅니다.
• 확인: 프로젝트 이름을 입력하는 화면으로 넘어갑니다.

25단계. 프로젝트 이름을 입력합니다

• 확인: 이 이름이 주소(프로젝트이름.pages.dev)의 앞부분이 됩니다.

26단계. "Create project"를 누릅니다

• 확인: 파일을 올리는 화면이 나옵니다.

27단계. 올릴 페이지 폴더를 화면에 끌어다 놓습니다

• 위치: 폴더째 드래그 앤 드롭합니다.
• 확인: 폴더 안의 파일 목록이 올라갑니다.

28단계. "Deploy site"를 누릅니다

• 확인: 배포가 끝나면 접속 URL이 나옵니다. 그 주소로 들어가면 내가 올린 페이지가 바로 열립니다.

다 했는지 확인

• 커서와 비주얼 스튜디오 코드 가운데 쓸 도구가 설치돼 실행된다
• 클로드 아이콘이 뜨고 채팅창에서 요청할 수 있다
• 깃허브에 가입하고 저장소를 하나 만들었다
• 클라우드플레어에 폴더를 올려 접속 URL이 나왔다

막히기 쉬운 곳

• 클로드 확장을 설치했는데 아이콘이 안 보인다: VS Code를 껐다 켜고, 위쪽 메뉴의 "보기 → 명령 팔레트"(Ctrl + Shift + P)에서 "Claude"를 검색해 엽니다.
• 클라우드플레어 메뉴 이름이 다르다: 대시보드는 자주 개편됩니다. 왼쪽 메뉴 검색창에 "Workers & Pages"를 치면 찾을 수 있습니다.
• 배포했는데 빈 화면이나 404가 뜬다: 올린 폴더 맨 위에 index.html이 있는지 봅니다. 폴더 안에 폴더가 한 겹 더 있으면 주소 뒤에 그 폴더 이름을 붙여야 열립니다.

자주 묻는 질문

바이브코딩을 하려면 코딩 문법을 먼저 배워야 하나요?

문법을 먼저 외울 필요는 없습니다. 대신 IDE, 깃, 포트, 배포, API, DB가 각각 무엇인지 알아야 오류 메시지를 읽고 AI에게 정확히 시킬 수 있습니다. 이 글의 개념 정도면 시작하기에 충분합니다.

커서와 VS Code는 무엇이 다른가요?

커서는 AI가 처음부터 들어 있는 개발 도구이고, VS Code는 무료 개발 도구에 클로드 코드 같은 AI 확장을 따로 설치해 쓰는 방식입니다. 둘 다 편집⁠·실행⁠·소스 관리를 할 수 있으니 하나를 골라 익숙해지면 됩니다.

localhost 주소를 친구에게 보내면 열리나요?

열리지 않습니다. localhost는 내 컴퓨터 자신을 가리키는 주소라 내 컴퓨터에서만 열립니다. 다른 사람이 보게 하려면 클라우드플레어나 버셀 같은 배포 서비스에 올려 공개 주소를 받아야 합니다.

깃과 깃허브는 같은 건가요?

다릅니다. 깃은 내 컴퓨터에서 코드 변경 기록을 관리하는 프로그램이고, 깃허브는 그 기록을 인터넷에 올려 보관하고 공유하는 서비스입니다. 깃허브에 올려 두면 배포 서비스와 연결해 자동 배포도 할 수 있습니다.