바이브 코딩을 위한 필수 기본 지식 — 코드 몰라도 이것만 알면 된다
바이브 코딩을 위한 필수 기본 지식 — 코드 몰라도 이것만 알면 된다
바이브 코딩(Vibe Coding)은 AI에게 자연어로 지시하여 코드를 작성하는 방식입니다. 코드를 직접 쓸 필요는 없지만, AI에게 정확한 지시를 내리려면 기본 개념은 알아야 합니다."블로그를 만들어줘"까지는 쉽습니다. 하지만 "도메인 연결이 안 돼", "HTTPS 설정해줘", "포트가 충돌해" 같은 상황에서 무슨 말인지 이해하지 못하면 AI와 대화가 막힙니다.글은 비개발자를 위한 최소한의 기본 지식을 정리합니다. 깊이 있는 기술 설명이 아니라, 비유와 그림으로 핵심만전달합니다.
1. IP 주소 — 인터넷 세계의 집 주소
한 줄 요약
인터넷에 연결된 모든 컴퓨터에는 고유한 번호(IP 주소)가 있다.
비유로 이해하기
현실 세계에서 친구 집을 찾으려면 주소가 필요합니다.
서울시 강남구 테헤란로 123
인터넷 세계에서도 마찬가지입니다. 모든 서버(컴퓨터)에는 숫자로 된 주소가 있습니다.
123.45.67.89
이것이 IP 주소(Internet Protocol Address)입니다.
알아야 할 것
| 개념 | 설명 |
|---|---|
| IPv4 | 123.45.67.89 형태 (가장 흔함) |
| localhost | 127.0.0.1 — 내 컴퓨터 자신을 가리키는 특별한 IP |
| 공인 IP | 외부에서 접근 가능한 IP (서버에 필요) |
| 사설 IP | 내부 네트워크에서만 사용 (192.168.x.x 등) |
AI에게 이렇게 프롬프트를 줘보세요
"서버의 공인 IP 주소를 확인해줘"
"localhost:3000으로 접속해서 동작하는지 확인해줘"
"현재 서버 IP가 뭔지 알려줘"
2. 도메인 — IP를 사람이 읽을 수 있는 이름으로
한 줄 요약
도메인은 IP 주소에 붙이는 사람이 기억하기 쉬운 이름다.
비유로 이해하기
IP 주소: 123.45.67.89 (기억하기 어려움)
도메인: blog.example.com (기억하기 쉬움)
친구 집 주소가 "서울시 강남구 테헤란로 123"인데, 우리는 그냥 "철수네 집"고 부릅니다. 도메인은 IP 주소의 별명입니다.
도메인 구조
blog.flyerschal.com
| | |
| | +-- TLD (최상위 도메인: .com, .kr, .io 등)
| +---------- 도메인 이름 (구매한 이름)
+----------------- 서브도메인 (자유롭게 설정)
하나의 도메인을 사면 서브도메인은 무제한 무료로 만들 수 있습니다:
blog.flyerschal.com— 블로그api.flyerschal.com— API 서버home.flyerschal.com— 홈페이지
DNS란?
DNS(Domain Name System)는 도메인을 IP 주소로 변환하는 시스템입니다.
브라우저: "blog.example.com 찾아줘"
DNS: "그건 123.45.67.89야"
브라우저: "고마워, 123.45.67.89로 갈게"
비유: 전화번호부입니다. "철수"를 검색하면 "010-1234-5678"이 나오듯이.
도메인은 어디서 사나?
도메인은 도메인 등록 업체서 구매합니다. 연간 1~2만원 정도입니다.
| 업체 | 특징 | 가격대 |
|---|---|---|
| 가비아 | 한국 1위, 한글 지원 | .com 연 1.5만원~ |
| Cloudflare | 원가 판매, DNS 무료 | .com 연 $9.77 |
| Namecheap | 해외 인기, 가격 저렴 | .com 연 $8.88~ |
구매 후 해야 할 것:1. DNS 설정— 도메인이 서버 IP를 가리키도록 A 레코드 추가 2. SSL 인증서— HTTPS를 위한 인증서 발급 (Let's Encrypt 무료)
AI에게 이렇게 프롬프트를 줘보세요
"도메인 flyerschal.com의 DNS에 A 레코드를 추가해줘.
IP는 123.45.67.89로 설정하고, blog 서브도메인도 같은 IP로 추가해줘"
"Let's Encrypt로 SSL 인증서를 발급하고 Nginx에 HTTPS 설정해줘.
도메인은 flyerschal.com이야"
3. 포트 — 하나의 서버에서 여러 서비스를 구분하는 번호
한 줄 요약
포트는 하나의 IP 주소에서 여러 서비스를 구분하는 문 번호다.
비유로 이해하기
아파트 한 동에 여러 가구가 있듯이, 하나의 서버에서 여러 서비스가 돌아갑니다.
123.45.67.89 (아파트 동)
+-- :80 (101호) -> 웹 서버
+-- :443 (102호) -> HTTPS 웹 서버
+-- :3000 (201호) -> 블로그 앱
+-- :3001 (202호) -> 홈페이지 앱
+-- :5432 (301호) -> 데이터베이스
자주 쓰는 포트 번호
| 포트 | 용도 | 설명 |
|---|---|---|
| 80 | HTTP | 일반 웹 (암호화 없음) |
| 443 | HTTPS | 보안 웹 (암호화) |
| 3000 | 개발 서버 | Next.js, React 등 기본 포트 |
| 5432 | PostgreSQL | 데이터베이스 |
| 22 | SSH | 서버 원격 접속 |
443(HTTPS)과 80(HTTP)은 브라우저가 자동으로 붙여주기 때문에 보통 생략합니다.
https://blog.example.com=https://blog.example.com:443
AI에게 이렇게 프롬프트를 줘보세요
"블로그는 포트 3000, 홈페이지는 포트 3001로 실행해줘"
"포트 3000이 이미 사용 중이야. 어떤 프로세스가 쓰고 있는지 확인하고 종료해줘"
"Docker에서 호스트 14001 포트를 컨테이너 3000 포트로 매핑해줘"
4. HTTP vs HTTPS — 데이터를 주고받는 규칙
한 줄 요약
HTTP는 평문 통신, HTTPS는 암호화 통신. 반드시 HTTPS를 사용해야 한다.### 비유로 이해하기
HTTP = 엽서 -> 배달하는 사람이 내용을 볼 수 있음
HTTPS = 밀봉 편지 -> 받는 사람만 내용을 볼 수 있음
HTTP로 로그인하면 비밀번호가 그대로 노출됩니다. HTTPS는 SSL/TLS 암호화로 중간에서 볼 수 없게 합니다.
HTTP의 동작 방식
웹은 요청(Request)과 응답(Response)반복입니다:
브라우저: "GET /posts 페이지 줘" (요청)
서버: "여기 있어, HTML 코드야" (응답, 200 OK)
브라우저: "POST /login 로그인할게" (요청)
서버: "로그인 성공! 토큰이야" (응답, 200 OK)
꼭 알아야 할 HTTP 상태 코드
서버가 보내는 응답 번호입니다. 바이브 코딩하다 보면 자주 만납니다:
| 코드 | 의미 | 보통 이럴 때 |
|---|---|---|
| 200 | 성공 | 정상 동작! |
| 404 | 찾을 수 없음 | URL을 잘못 입력했거나 페이지가 없을 때 |
| 500 | 서버 에러 | 코드에 버그가 있을 때 |
| 502 | Bad Gateway | Nginx가 뒤쪽 서버에 접속 못할 때 |
HTTPS 인증서
HTTPS를 쓰려면 SSL 인증서가 필요합니다. Let's Encrypt를 사용하면 무료이고 자동 갱신됩니다.
AI에게 이렇게 프롬프트를 줘보세요
"Let's Encrypt로 SSL 인증서를 발급하고 자동 갱신 설정해줘"
"502 에러가 나고 있어. Nginx 로그를 확인하고 원인을 찾아줘"
"API 요청이 404를 반환해. 라우트 설정을 확인해줘"
5. 프론트엔드 vs 백엔드 — 보이는 것 vs 보이지 않는 것
한 줄 요약
프론트엔드는 사용자가 보는 화면, 백엔드는 데이터를 처리하는 뒷단.
레스토랑 비유
| 프론트엔드 (홀) | 백엔드 (주방) | |
|---|---|---|
| 누가 보나? | 손님이 봄 | 손님이 안 봄 |
| 하는 일 | 메뉴판, 주문 접수, 서빙 | 요리, 재료 관리, 레시피 |
| 기술 | React, Next.js, CSS | Node.js, Python, DB |
| 위치 | 브라우저 (사용자 기기) | 서버 |
실제 예시: 블로그
프론트엔드가 하는 일:
- 글 목록을 예쁘게 보여주기
- 버튼 클릭 시 다음 페이지로 이동
- 다크 모드 전환
- 모바일에서 레이아웃 조정
백엔드가 하는 일:
- 글 데이터를 데이터베이스에서 가져오기
- 새 글 저장하기
- 로그인 처리
- 이미지 업로드 처리
풀스택(Full-stack)이란?
프론트엔드 + 백엔드를 한 번에 처리는 것입니다. Next.js 같은 프레임워크는 하나의 프로젝트에서 둘 다 가능합니다. 바이브 코딩에서는 대부분 풀스택 프레임워크를 사용합니다.
AI에게 이렇게 프롬프트를 줘보세요
"블로그 메인 페이지에 최신 글 5개를 카드 형태로 보여줘.
카드에는 제목, 날짜, 요약이 포함되고, 클릭하면 상세 페이지로 이동해"
"게시글 작성 API를 만들어줘.
POST /api/posts 엔드포인트로, 제목과 내용을 받아서 DB에 저장해"
"로그인한 사용자만 글을 작성할 수 있도록 인증 미들웨어를 추가해줘"
6. 프록시와 리버스 프록시 — 중간에서 전달하는 역할
한 줄 요약
리버스 프록시는 사용자 요청을 받아 적절한 서버로 전달하는 중간 역할다.
비유로 이해하기
리버스 프록시 = 호텔 프런트 데스크``` 손님(사용자): "301호에 연결해주세요" 프런트(Nginx): "네, 연결해드리겠습니다" -> 301호(블로그 서버)로 전달 -> 302호(API 서버)로 전달 -> 303호(홈페이지 서버)로 전달
손님은 프런트 데스크만 알면 됩니다. 방 번호(포트)를 직접 알 필요 없습니다.
### Nginx가 하는 일
사용자 요청 Nginx가 분배
blog.example.com --> 블로그 컨테이너 (:3000) home.example.com --> 홈페이지 컨테이너 (:3001) api.example.com --> API 컨테이너 (:3002)
하나의 서버(IP)에서 여러 서비스를 운영할 수 있는 이유가 바로 리버스 프록시덕분입니다.
### 리버스 프록시의 부가 기능
| 기능 | 설명 |
|------|------|
| SSL 처리 | HTTPS 암호화/복호화를 Nginx에서 처리 |
| 로드 밸런싱 | 여러 서버에 요청 분산 |
| 보안 | 실제 서버 IP 숨기기 |
### AI에게 이렇게 프롬프트를 줘보세요
"Nginx에 blog.flyerschal.com을 추가하고, 블로그 컨테이너(포트 3000)로 프록시 설정해줘. SSL도 적용해줘"
"502 에러가 나는데 Nginx 설정을 확인해줘. 프록시 대상 컨테이너가 실행 중인지도 확인해줘"
---
## 7. 컨테이너와 Docker — 앱을 상자에 넣어 어디서든 실행
### 한 줄 요약
> Docker 컨테이너는 앱 + 실행 환경을 나의 상자에 패키징한 것이다.
### 비유로 이해하기
사할 때 짐을 박스에 넣는 것과 같습니다.
박스 없이 이사: 물건이 흩어짐, 깨짐, "이거 어디 있었더라?"
박스에 넣어 이사: 필요한 것이 다 들어있음, 어디든 옮기면 바로 사용 가능
Docker 컨테이너는 앱 + Node.js + 라이브러리 + 설정을 모두 하나의 상자에 넣습니다. 이 상자를 어떤 서버에 옮겨도 똑같이 실행됩니다.
### 핵심 용어
| 용어 | 비유 | 설명 |
|------|------|------|
| Image (이미지) | 설계도 | 앱을 실행하기 위한 모든 것이 담긴 템플릿 |
| Container (컨테이너) | 실제 집 | 이미지를 실행한 인스턴스 |
| Dockerfile | 설계 도면 | 이미지를 만드는 레시피 |
| docker-compose | 마을 설계 | 여러 컨테이너를 한 번에 관리 |
### 왜 Docker를 쓰나?
1. 환경 일관성— "내 컴퓨터에서는 되는데" 문제 해결
2. 격리— 서비스끼리 영향 없음
3. 쉬운 배포— 이미지 빌드 후 서버에서 실행하면 끝
4. 확장— 컨테이너를 여러 개 띄우면 트래픽 분산
### AI에게 이렇게 프롬프트를 줘보세요
"이 Next.js 프로젝트를 Docker로 실행할 수 있게 Dockerfile과 docker-compose.yml을 만들어줘"
"docker compose up -d로 실행했는데 컨테이너가 바로 종료돼. docker logs로 에러를 확인하고 수정해줘"
"현재 실행 중인 컨테이너 목록을 확인하고, 블로그 컨테이너가 정상인지 체크해줘"
---
## 8. 이 모든 것이 연결되는 흐름
지금까지 배운 개념이 실제로 어떻게 연결되는지 봅시다.
### 사용자가 블로그에 접속할 때 벌어지는 일
-
사용자가 브라우저에 blog.example.com 입력
-
DNS가 도메인을 IP로 변환 blog.example.com -> 123.45.67.89
-
브라우저가 123.45.67.89:443으로 HTTPS 요청 (443은 HTTPS 기본 포트)
-
Nginx(리버스 프록시)가 요청을 받음 "blog.example.com이니까 블로그 컨테이너로 보내자"
-
Nginx -> Docker 컨테이너(포트 3000)로 전달
-
컨테이너 안의 앱(Next.js)이 처리
- 프론트엔드: HTML/CSS/JS 생성 (화면)
- 백엔드: 데이터베이스에서 글 목록 조회
-
응답이 사용자 브라우저로 전달 HTTP 200 OK + HTML 페이지
-
브라우저가 화면을 렌더링 사용자가 블로그를 봄!
---
## 바이브 코딩 실전: AI에게 프로젝트 시작을 요청하는 법
기본 개념을 알았으니, 실제로 AI에게 프로젝트를 시작하라고 요청하는 프롬프트를 봅시다.
### 블로그 만들기
블로그를 만들고 싶어.
기술: Next.js + PostgreSQL + Prisma 기능: 글 목록, 글 상세, 카테고리, 태그, 검색 디자인: 다크 테마, 노션 스타일, 모바일 대응 배포: Docker로 패키징, Nginx 리버스 프록시
먼저 프로젝트 구조를 잡고, DB 스키마부터 시작해줘.
### 도메인 연결하기
blog.flyerschal.com 도메인을 블로그에 연결해줘.
현재 상태:
- 서버 IP: 123.45.67.89
- 블로그 컨테이너: 포트 3000에서 실행 중
- Nginx가 이미 설치되어 있어
해줘야 할 것:
- Nginx에 blog.flyerschal.com 서버 블록 추가
- Let's Encrypt SSL 인증서 발급
- HTTP -> HTTPS 리다이렉트
- 프록시 설정 (443 -> 3000)
### 에러가 났을 때
블로그에 접속하면 502 에러가 나와.
현재 환경:
- Nginx -> Docker 컨테이너 (blog-blue:3000)
- docker ps로 확인하면 컨테이너는 실행 중
확인해줘:
- Nginx 에러 로그
- 컨테이너 로그 (docker logs)
- Nginx에서 컨테이너로 네트워크 연결이 되는지
---
## 바이브 코딩할 때 자주 겪는 문제와 해결법
| 상황 | 무슨 뜻? | AI에게 뭐라고 해야 해? |
|------|---------|---------------------|
| "도메인 연결이 안 돼요" | DNS 설정 문제 | "DNS A 레코드가 서버 IP를 가리키는지 확인해줘" |
| "HTTPS가 안 돼요" | SSL 인증서 문제 | "Let's Encrypt 인증서를 다시 발급해줘" |
| "포트 충돌이에요" | 같은 포트를 두 서비스가 사용 | "포트 3000을 누가 쓰고 있는지 확인하고 변경해줘" |
| "502 에러가 떠요" | 프록시-백엔드 연결 문제 | "Nginx 로그 확인하고 백엔드 연결 상태 체크해줘" |
| "컨테이너가 죽었어요" | Docker 컨테이너 오류 | "docker logs로 에러 확인하고 재시작해줘" |
| "내 컴퓨터에서는 되는데" | 환경 차이 | "Docker 이미지를 다시 빌드하고 환경변수 확인해줘" |
| "DB 연결이 안 돼요" | 데이터베이스 접속 문제 | "DATABASE_URL 환경변수와 DB 컨테이너 상태 확인해줘" |
---
## 마치며
바이브 코딩은 코드를 쓰는 능력아니라 시스템을 이해하는 능력핵심입니다.
이 글에서 다룬 8가지 개념을 알고 있으면:
- AI에게 정확한 지시를 내릴 수 있고
- 에러 메시지를 해할 수 있고
- 문제가 생겼을 때 디서 막혔는지파악할 수 있습니다
완벽하게 이해할 필요는 없습니다. "아, 이게 이런 거구나" 정도면 충분합니다. 나머지는 AI가 해결해줍니다.
**핵심은 대화입니다.** 기본 개념을 알아야 AI와 대화가 됩니다.
