바이브코딩을 시작하면 금방 이런 모양의 글자를 만나게 됩니다.
{
"name": "바이브공장장",
"weeks": 2,
"online": false,
"tools": ["Claude Code", "Next.js", "Supabase"]
}이게 JSON(제이슨)입니다. JavaScript Object Notation의 줄임말인데, 이름은 잊으셔도 됩니다.
7.1왜 알아야 하나요?
AI에게 코딩을 맡기면 직접 코드를 쓸 일은 줄지만, JSON은 계속 눈에 띕니다.
- 설정 파일: package.json, 그리고 다음 장에서 다룰 MCP8장 설정도 JSON입니다.
- 데이터: 서버가 화면에 보내 주는 데이터, 외부 서비스(API15장)가 돌려주는 응답 대부분이 JSON입니다.
- 에러 확인: "응답이 이상해요"를 해결하려면 JSON을 읽을 줄 알아야 어디가 틀렸는지 보입니다.
읽을 수만 있으면 AI가 만든 결과를 확인하고, 원하는 걸 정확히 요청할 수 있습니다.
7.2규칙은 딱 여섯 가지
1. { } 중괄호는 "묶음"입니다. 한 가지 대상에 대한 정보를 모읍니다. 2. 안에는 "이름": 값 쌍을 씁니다. 이름은 항상 큰따옴표로 감쌉니다. 3. 쌍과 쌍 사이는 쉼표로 나눕니다. 마지막 쌍 뒤에는 쉼표를 쓰지 않습니다. 4. 값이 글자면 큰따옴표("바이브공장장"), 숫자면 따옴표 없이(2) 씁니다. 5. 참/거짓은 true, false. 값이 없으면 null입니다. 6. [ ] 대괄호는 "목록"입니다. 여러 개를 순서대로 나열합니다.
묶음 안에 묶음을, 목록 안에 묶음을 넣을 수도 있습니다.
{
"cohort": "10월 1기",
"students": [
{ "name": "김바이브", "paid": true },
{ "name": "이코딩", "paid": false }
]
}"10월 1기에 학생이 두 명 있고, 김바이브 님은 결제했고 이코딩 님은 아직"이라는 뜻입니다. 코드를 몰라도 읽히죠?
7.3자주 하는 실수 세 가지
- 마지막 쉼표: "paid": true, } 처럼 끝에 쉼표가 남으면 에러가 납니다.
- 작은따옴표: 'name' 은 안 됩니다. JSON은 큰따옴표만 씁니다.
- 주석: JSON 안에는 // 메모 를 쓸 수 없습니다.
7.4AI에게 이렇게 말해 보세요
- “이 JSON이 무슨 뜻인지 한 줄씩 설명해 줘”
- “이 JSON에서 문법 오류 찾아서 고쳐 줘”
- “회원 정보를 JSON 예시 3개로 만들어 줘”
특히 마지막처럼 예시 데이터를 JSON으로 먼저 만들어 달라고 하면, 화면을 만들 때 어떤 데이터가 오갈지 AI와 내가 같은 그림을 보게 되어 결과물이 훨씬 정확해집니다.
8장에서는 JSON 설정 몇 줄로 Claude에게 새로운 도구를 쥐여 주는 MCP를 알아보겠습니다.
— 7장 끝 —