JSON과 데이터 구조 (JSON & Data Structures)
JSON은 데이터를 주고받을 때 가장 널리 쓰이는 텍스트 형식이고, 데이터 구조는 정보를 담는 그릇의 모양입니다. AI에게 원하는 결과물의 형태를 알려줄 때 핵심이 되는 개념입니다.
🤔 혹시 이런 경험 있나요?
AI에게 "사용자 정보를 저장하는 기능 만들어줘"라고 했더니 코드가 나왔는데, 중간에 { }, [ ], "key": "value" 같은 것들이 가득합니다. 또는 API 응답을 보니 알 수 없는 중괄호 덩어리가 쏟아집니다. 에러 메시지에는 "Unexpected token in JSON"이라고 나옵니다. 이런 상황을 이해하려면, 프로그래밍에서 데이터를 담는 방법인 JSON과 데이터 구조를 알아야 합니다.
📦 데이터 구조란?
데이터 구조(Data Structure)는 정보를 담는 그릇의 모양입니다.
실생활에서도 정보를 담는 방식이 다양합니다.
- 목록: 장보기 리스트: 순서대로 나열
- 사전: 영어 사전: 단어(키)로 뜻(값)을 찾기
- 표: 엑셀 시트: 행과 열로 구조화
프로그래밍에서도 똑같습니다. 어떤 그릇에 담느냐에 따라 데이터를 다루는 방식이 달라집니다.
🧱 프로그래밍의 기본 데이터 구조
바이브코딩에서 반드시 알아야 할 데이터 구조는 딱 세 가지입니다.
1. 변수: 이름표 붙은 상자
하나의 값을 저장하는 가장 단순한 구조입니다.
const name = "홍승협" // 문자열 (텍스트)
const age = 30 // 숫자
const isAdmin = true // 불리언 (참/거짓)2. 배열 (Array): 번호가 매겨진 목록
여러 개의 값을 순서대로 나열한 것입니다. 대괄호 [ ]로 감쌉니다.
const fruits = ["사과", "바나나", "딸기"]
// [0] [1] [2] ← 순서 번호(인덱스)는 0부터 시작
fruits[0] // "사과"
fruits[2] // "딸기"언제 쓸까요? 태그 목록, 게시글 목록, 장바구니 상품 등 "여러 개를 순서대로 나열"할 때 사용합니다.
3. 객체 (Object): 이름표가 붙은 서랍장
값에 이름(키)을 붙여서 저장하는 구조입니다. 중괄호 { }로 감쌉니다.
const user = {
name: "홍승협",
email: "hong@example.com",
age: 30
}
user.name // "홍승협"
user.email // "hong@example.com"언제 쓸까요? 사용자 정보, 설정 값, API 응답 등 "속성별로 구분되는 하나의 덩어리"를 표현할 때 사용합니다.
🔗 배열 + 객체 = 실전 데이터
하나의 JSON 안에 키, 값, 배열, 객체가 함께 조합되어 실전 데이터를 이룹니다.
실제 프로젝트에서는 배열과 객체를 조합해서 사용합니다.
// 게시글 목록: 객체의 배열
const posts = [
{
id: 1,
title: "바이브코딩 시작하기",
tags: ["AI", "코딩"],
isPublished: true
},
{
id: 2,
title: "터미널 기초",
tags: ["바이브코딩", "CLI"],
isPublished: false
}
]이 구조를 읽을 수 있으면, AI가 작성하는 코드의 데이터 흐름을 따라갈 수 있습니다. posts[0].title은 "바이브코딩 시작하기"이고, posts[1].tags[0]은 "바이브코딩"입니다.
📄 JSON이란?
JSON(JavaScript Object Notation)은 위에서 본 객체와 배열 형식을 텍스트로 표현한 데이터 교환 형식입니다.
프로그래밍 언어마다 데이터를 표현하는 문법이 다릅니다. 하지만 서로 다른 시스템이 데이터를 주고받으려면 공통 형식이 필요합니다. 그 공통 형식이 JSON입니다.
{
"name": "홍승협",
"age": 30,
"skills": ["마케팅", "데이터분석", "바이브코딩"],
"isAdmin": true
}JavaScript 객체와 비슷하게 생겼지만, JSON만의 규칙이 있습니다.
| 규칙 | JavaScript 객체 | JSON |
|---|---|---|
| 키 따옴표 | 없어도 됨 | 반드시 큰따옴표 |
| 문자열 따옴표 | 작은따옴표 가능 | 큰따옴표만 허용 |
| 마지막 쉼표 | 허용됨 | 허용 안 됨 |
| 주석 | 가능 | 불가능 |
이 규칙을 어기면 "Unexpected token in JSON" 에러가 발생합니다.
🌍 JSON은 어디에서 쓰일까요?
바이브코딩을 하면 JSON을 만나지 않는 날이 없습니다.
1. API 통신
서버와 브라우저가 데이터를 주고받을 때 JSON을 사용합니다.
브라우저 → 서버: "1번 사용자 정보 줘"
서버 → 브라우저: { "id": 1, "name": "홍승협" } ← JSON2. 설정 파일
프로젝트 설정의 상당수가 JSON 형식입니다.
package.json → npm 패키지 설정
tsconfig.json → TypeScript 설정
.eslintrc.json → 코드 스타일 규칙3. 데이터 저장
간단한 데이터를 파일로 저장할 때 JSON을 사용합니다.
scripts/data/my-post.json → 블로그 글 데이터
config/settings.json → 앱 설정4. AI와의 소통
AI에게 "JSON 형식으로 응답해줘"라고 하면 구조화된 데이터를 받을 수 있습니다.
프롬프트: "과일 3개의 이름과 가격을 JSON 배열로 알려줘"
AI 응답:
[
{ "name": "사과", "price": 1500 },
{ "name": "바나나", "price": 3000 },
{ "name": "딸기", "price": 5000 }
]🔧 JSON 다루기: 자주 쓰는 두 가지 변환
// 객체 → JSON 문자열 (보낼 때)
const data = { name: "홍길동", age: 30 }
const jsonString = JSON.stringify(data)
// '{"name":"홍길동","age":30}'
// JSON 문자열 → 객체 (받을 때)
const parsed = JSON.parse(jsonString)
// { name: "홍길동", age: 30 }보낼 때는 stringify로 문자열로 바꾸고, 받을 때는 parse로 다시 객체로 복원합니다.
JSON.stringify는 데이터를 JSON 텍스트로 변환하고, JSON.parse는 JSON 텍스트를 다시 데이터로 복원합니다. API 통신에서 이 두 함수가 항상 등장합니다.
⚠️ 바이브코딩할 때 흔한 JSON 실수
1. 마지막 쉼표 (Trailing Comma)
{
"name": "홍길동",
"age": 30, ← 이 쉼표 때문에 에러!
}JSON에서는 마지막 항목 뒤에 쉼표를 넣으면 안 됩니다.
2. 작은따옴표 사용
{ 'name': '홍길동' } ← 에러! JSON은 큰따옴표만 허용
{ "name": "홍길동" } ← 올바른 형식3. undefined 사용
{ "data": undefined } ← 에러! JSON에 undefined 없음
{ "data": null } ← null은 허용AI가 생성한 JSON에서 에러가 나면, 이 세 가지를 먼저 확인하세요.
💡 AI에게 데이터 구조를 잘 요청하는 방법
AI에게 데이터 형식을 명확히 알려주면 원하는 결과를 훨씬 정확하게 받을 수 있습니다.
나쁜 예시:
"사용자 정보 저장하는 거 만들어줘"
좋은 예시:
"사용자 정보를 이런 JSON 구조로 저장하고 싶어:
{ "name": "string", "email": "string", "age": "number", "tags": ["string"] }이 구조를 받아서 DB에 저장하는 API를 만들어줘"
원하는 데이터 구조를 JSON으로 보여주면 AI가 정확한 타입 정의, API 라우트, DB 스키마를 한 번에 만들어줍니다.
📋 30초 요약
-
배열은 순서 있는 목록
[ ], 객체는 이름표 붙은 데이터{ }입니다. 실전에서는 이 둘을 조합한 "객체의 배열"이 가장 많이 쓰입니다. -
JSON은 시스템 간 데이터 교환의 표준 형식입니다. API 통신, 설정 파일, 데이터 저장에 모두 사용되며, 큰따옴표만 허용하고 마지막 쉼표를 쓸 수 없다는 규칙만 기억하세요.
-
AI에게 원하는 결과물의 JSON 구조를 먼저 보여주면, 코드 생성 정확도가 크게 올라갑니다. 데이터의 모양을 설명할 수 있는 것이 바이브코딩의 핵심 소통 능력입니다.
JSON을 주고받는 정식 통로는 REST API 클래스에서 이어집니다.
참고 자료
이 글이 도움이 되셨다면 공유해 주세요
메신저로 바로 보내거나 링크를 복사할 수 있습니다.
다음 JSON 중 올바른 형식은 무엇일까요?
이어서 배우면 좋은 개념
REST API
서로 다른 프로그램이 인터넷을 통해 데이터를 주고받을 수 있도록 정해진 규칙으로 소통하는 방식입니다.
패키지 매니저 (npm)
다른 개발자가 만든 코드(패키지)를 쉽게 설치하고 관리할 수 있는 도구입니다. AI가 프로젝트를 만들면 가장 먼저 'npm install'을 실행하라고 하는데, 이것이 바로 필요한 패키지를 설치하는 명령어입니다.
환경 변수와 .env (Environment Variables)
프로그램이 실행될 때 참조하는 설정값으로, API 키나 비밀번호 같은 민감한 정보를 코드와 분리하여 안전하게 관리하는 방법입니다.
클로드 코드 플랜과 사용량 한도 이해하기
클로드 코드를 쓸 때 요금이 어떻게 매겨지고, 얼마나 쓰면 한도에 걸리는지를 정하는 구조입니다. 구독 플랜은 정해진 사용량이 포함되고, API 방식은 쓴 만큼 토큰 단위로 요금이 붙습니다.
관련 인사이트
- Qwen3.8 27B 로컬 실행 결과: 24GB 맥에서는 CPU로 떨어집니다Qwen3.8 27B는 알리바바 Qwen 팀이 2026년 8월 공개한 Apache 2.0 오픈 웨이트 모델입니다. 메모리 24GB 맥미니 M4 프로에 직접 설치해 돌려 보니 GPU에 올라가지 못하고 CPU로 실행됐고, 그때 측정한 속도를 그대로 정리했습니다.
- 코덱스 CLI와 클로드 코드 비교 (같은 도구를 만들게 해 봤습니다)코덱스 CLI와 클로드 코드는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 두 도구에 똑같은 규격서를 주고 같은 도구를 만들게 해서 걸린 시간, 결과물 규모, 안전장치가 어떻게 다른지 측정했습니다.
- 코덱스 CLI 사용법: 초보 블로거를 위한 GEO 인용 검사 도구 만들기 과정코덱스 CLI는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 빈 폴더에서 시작해 내 글이 AI 답변에 인용되기 쉬운지 확인하는 GEO 점검 도구가 나올 때까지, 시킬 말 전문과 명령을 그대로 정리했습니다.
- 구글 픽셀 11, Qwen3.8, 커서 인수로 본 AI 배포 경쟁AI 배포 경쟁은 같은 모델을 몇 개의 화면에 넣어 두느냐로 우열이 정해지는 경쟁입니다. 2026년 8월 12일부터 15일 사이에 나온 발표 다섯 건을 놓고, 각 회사가 모델을 어디까지 밀어 넣었는지 공식 자료 기준으로 정리했습니다.
- VS Code에서 클로드 코드 실행하기 (윈도우 화면 그대로 따라하기)클로드 코드를 설치했는데 검은 PowerShell 창이 부담스러운 분을 위해, VS Code를 설치하고 그 안 터미널에서 클로드 코드를 실행하는 순서를 화면 그림과 함께 정리했습니다. 승인 질문을 건너뛰는 bypass 모드까지 담았습니다.
- 챗GPT 리눅스 데스크톱 앱 프리뷰 정리: 설치 패키지와 지원 기능챗GPT 리눅스 데스크톱 앱은 오픈AI가 2026년 8월 11일 프리뷰로 공개한 리눅스용 공식 앱으로, ChatGPT와 Work, Codex를 하나의 앱에서 쓸 수 있습니다. 설치 패키지 4종과 테스트된 배포판, 요금 조건에서 확인된 것과 아직 확정되지 않은 것을 구분해 정리했습니다.
