바이브 코딩에서 만나는 파일 포맷, 어떻게 구분하는가

왜 코드보다 확장자에서 먼저 막히는가

바이브 코딩을 배우는 사람들이 코드보다 먼저 막히는 곳이 있습니다. 파일 확장자입니다. .json, .yaml, .env, .md 같은 낯선 확장자가 쏟아지는 순간 '역시 난 개발자가 아니라서'라며 손을 놓습니다. 그런데 이 수십 개의 포맷은 딱 세 부류로 나뉩니다.

데이터를 담는 그릇, 화면으로 보여주는 것, 설정과 비밀. 이 세 갈래만 손에 쥐면, 처음 보는 확장자도 대략 어느 상자에 속하는지 감이 옵니다. 아래 표가 그 지도입니다.

포맷	약자 풀이	분류	한 줄 정의
CSV	Comma-Separated Values (쉼표로 구분된 값)	데이터	엑셀에서 서식만 뺀 표
JSON	JavaScript Object Notation (자바스크립트 객체 표기법)	데이터	이름표를 붙인 상자 (앱·AI의 공통어)
XML	eXtensible Markup Language (확장 가능 마크업 언어)	데이터	태그로 감싼 옛날식 데이터
HTML	HyperText Markup Language (하이퍼텍스트 마크업 언어)	화면	웹페이지의 뼈대
마크다운(.md)	약자 아님 · 'markup'을 살짝 비튼 이름	화면	기호 몇 개로 서식을 주는 글
YAML	YAML Ain't Markup Language (자기 이름을 가리키는 재귀 약자)	설정	들여쓰기로 정리한 설정
.env	environment (환경 변수)	비밀	API 키·비밀번호를 담는 금고
TXT	text (그냥 텍스트)	기타	아무 규칙 없는 맨 글자

데이터를 담는 포맷: CSV·JSON·XML

CSV는 엑셀에서 색과 서식을 다 빼고 쉼표로 칸을 나눈 순수한 표입니다. 첫 줄이 칸 이름, 다음 줄부터 데이터입니다. 쇼핑몰 주문 내역이나 설문 결과를 내려받으면 대개 CSV이고, AI에게 그대로 넘겨 분석시키기 좋습니다.

JSON은 오늘날 프로그램끼리 데이터를 주고받는 사실상의 표준입니다. 각 값에 이름표가 붙어 있고, 상자 안에 상자를 넣는 중첩이 가능합니다. AI API의 응답, 앱의 설정, 데이터베이스 결과가 거의 다 JSON이라, 바이브 코딩을 하면 제일 자주 마주칩니다.

XML은 같은 데이터를 여닫는 태그로 감싼 옛날 방식입니다. 관공서나 은행의 오래된 시스템에서 여전히 쓰이고, 흥미롭게도 엑셀 파일(.xlsx)을 뜯어보면 그 안이 XML로 되어 있습니다. 새로 만들 때는 대개 더 가벼운 JSON을 고릅니다.

세 포맷을 같은 주문 한 건으로 나란히 놓으면 생김새가 한눈에 들어옵니다.

orders.csv

order_id,name,price,qty,status
1001,Americano,4500,2,paid
1002,Cafe Latte,5000,1,paid
1003,Cold Brew,5500,3,pending
1004,Espresso,4000,1,cancelled

response.json

{
  "customer": { "id": "sh", "name": "SH Consulting", "vip": true },
  "orders": [
    { "item": "Americano", "price": 4500, "qty": 2 },
    { "item": "Cold Brew", "price": 5500, "qty": 3 }
  ],
  "total": 25500,
  "paid": true
}

order.xml

<order id="1001" status="paid">
  <customer>SH Consulting</customer>
  <items>
    <item qty="2">
      <name>Americano</name>
      <price>4500</price>
    </item>
    <item qty="3">
      <name>Cold Brew</name>
      <price>5500</price>
    </item>
  </items>
  <total>25500</total>
</order>

보여주는 포맷: HTML·마크다운

HTML은 브라우저가 화면을 그리는 설계도입니다. <h1>은 제목, <p>는 문단, <button>은 버튼처럼, 태그가 '이건 무엇이다'를 지정합니다. 바이브 코딩으로 만든 웹사이트나 이메일 뉴스레터가 모두 HTML이고, 뼈대는 HTML·꾸밈은 CSS·동작은 자바스크립트가 한 세트로 움직입니다.

마크다운(.md)은 #이나 - 같은 간단한 기호로 서식을 표현하는 글입니다. 배우는 데 5분이면 충분하고, 기호가 붙은 채로 읽어도 알아볼 수 있으며 렌더하면 깔끔한 문서가 됩니다. GitHub의 README, AI 챗봇의 답변, 노션 메모가 대부분 마크다운입니다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SH Consulting</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>We help teams adopt AI.</p>
    <ul>
      <li>Corporate training</li>
      <li>Vibe coding</li>
    </ul>
    <button>Contact us</button>
  </body>
</html>

README.md

# Project Title

A short intro paragraph goes here.

## Install

- npm install
- npm run dev

## Features

- First feature
- Second feature
- Third feature

> A blockquote looks like this.

**Bold**, *italic*, and a [link](https://sh.consulting).

설정과 비밀: YAML·.env

YAML은 JSON과 같은 데이터를 괄호 대신 들여쓰기로 정리한 포맷입니다. 사람이 읽기 편해서 배포 설정이나 앱 환경 설정에 자주 쓰입니다. 다만 띄어쓰기 한 칸이 틀리면 통째로 깨지니 들여쓰기를 조심해야 합니다.

.env는 API 키나 비밀번호 같은 민감한 값을 코드와 분리해 담는 파일입니다. AI 서비스를 붙일 때 키를 넣는 곳이 바로 여기입니다. 철칙이 하나 있습니다. .env는 절대 공개 저장소에 올리면 안 됩니다. 열쇠를 통째로 남에게 내주는 사고가 되기 때문입니다. 그래서 보통 .gitignore로 제외해 둡니다.

config.yaml

app:
  name: my-app
  port: 3000
  debug: false

database:
  host: localhost
  port: 5432
  name: shdb

features:
  - login
  - search
  - export

users:
  - name: sh
    role: admin
  - name: guest
    role: viewer

.env

# Server
PORT=3000
NODE_ENV=production

# AI / external API keys
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx
AZURE_OPENAI_ENDPOINT=https://example.openai.azure.com

# Database
DATABASE_URL=postgres://user:pass@localhost:5432/shdb

확장자만 봐도 감 잡는 법

핵심 감각은 단순합니다. CSV·JSON·XML·YAML은 데이터, 즉 내용물입니다. HTML·마크다운은 보여주는 글과 화면입니다. .env는 비밀입니다. 확장자만 봐도 '이건 데이터구나, 화면이구나, 설정이구나' 하는 감이 오면 그걸로 충분합니다.

AX(AI 전환)의 관점에서 이 감각은 생각보다 중요합니다. 비개발자가 AI로 무언가를 만들 때 실제 장벽은 코드 문법이 아니라 낯선 파일에 대한 막연한 두려움인 경우가 많습니다. 확장자를 세 부류로 나눠 보는 지도를 손에 쥐는 순간, 낯선 파일이 더 이상 무섭지 않아집니다. 바이브 코딩은 바로 그때부터 진짜 시작됩니다.