데이터 주고받는 서식(JSON)
연동 설명서와 에러 메시지에 자꾸 나오는 중괄호 덩어리예요. 프로그램끼리 데이터를 주고받을 때 쓰는 공용 양식이고, 엑셀 한 줄을 글자로 눌러 담은 것이라고 보면 돼요.
쉽게 말하면
사장님은 엑셀을 아시죠. JSON은 엑셀 한 줄을 문자메시지로 보내는 방법이에요. 엑셀 파일은 사람 컴퓨터에서는 잘 열리지만, 프로그램끼리 주고받기에는 무겁고 프로그램마다 해석이 달라요. 그래서 프로그램들은 표 한 줄을 "머리글: 내용" 꼴의 글자로 눌러 담아 주고받기로 약속했어요. 그 약속된 양식의 이름이 JSON이에요. 중괄호 { 로 시작하면 "여기부터 표 한 줄입니다"라는 신호예요.
읽는 법은 "제이슨"이에요. 이름은 어렵게 들리지만 정체는 그냥 양식이에요. 팩스로 주문서를 주고받던 시절에 거래처끼리 양식을 맞췄던 것처럼, 프로그램끼리도 데이터를 주고받으려면 양식부터 맞춰야 해요. 전 세계가 이 양식 하나로 거의 통일했어요. 그래서 결제사든 배달 플랫폼이든 AI든, 연동 설명서를 열면 전부 이 중괄호가 나와요.
| 엑셀에서 | JSON에서 | 생긴 모양 |
|---|---|---|
| 한 줄(행) | 중괄호 한 덩어리 | { … } |
| 칸의 머리글 | 키(이름) | "menu" 처럼 따옴표에 싸인 이름 |
| 칸에 적힌 내용 | 값 | "아메리카노", 2, true 같은 것 |
| 줄이 여러 개 쌓인 표(시트) | 대괄호로 묶은 목록 | [ {…}, {…}, {…} ] |
이 표 하나만 기억하셔도 절반은 끝났어요. 엑셀에서 머리글을 정해 두고 그 밑에 줄줄이 채우듯, JSON도 이름과 내용의 짝을 중괄호에 담는 것뿐이에요.
진짜로 어떻게 생겼나
카페 주문 한 건을 엑셀에 적으면 메뉴 칸에 "아메리카노", 수량 칸에 2, 포장 칸에 "예"라고 쓰겠죠. 같은 내용을 JSON으로 적으면 이렇게 돼요. { "menu": "아메리카노", "qty": 2, "takeout": true } 처음 보면 암호 같지만, 뜯어 보면 엑셀 한 줄과 똑같아요.
규칙은 세 개뿐이에요. 콜론(:)의 왼쪽은 머리글, 오른쪽은 내용이에요. 쉼표(,)가 칸과 칸을 나눠요. 그리고 글자는 반드시 따옴표로 싸요. 숫자와 true(예), false(아니오)는 따옴표 없이 그대로 써요. 이 세 규칙만 알면 어떤 중괄호 덩어리든 "아, 표 한 줄이구나" 하고 알아볼 수 있어요.
쉼표 하나만 어긋나도 기계는 이 덩어리 전체를 못 읽어요. 그때 나오는 게 "parse error"라는 에러예요.
규칙이 까다로운 대신, 맞기만 하면 세상 어떤 프로그램이든 똑같이 읽어요. 그게 이 양식의 힘이에요.
읽기 연습을 한 번만 해 볼게요. { "visits": 12, "vip": true, "memo": "얼음 적게" } 라는 덩어리를 받았다면, 방문 12회에 단골 등급이고 얼음을 적게 달라는 손님 기록 한 줄이에요. 처음엔 낯설어도 머리글과 내용의 짝으로 끊어 읽으면 엑셀 줄 읽듯 읽혀요. 여기서 좋은 소식 하나요. 이 규칙을 지키며 직접 쓰는 건 사장님 일이 아니에요. 쓰는 건 AI와 프로그램이 해요. 사장님은 중괄호를 만났을 때 겁내지 않고 알아보기만 하면 돼요.
복사할 때 따옴표가 바뀌는 함정
워드나 일부 메모 앱은 곧은따옴표(")를 둥근따옴표로 멋대로 바꿔요. JSON은 곧은따옴표만 인정해서, 문서 앱을 한 번 거쳐 온 덩어리는 멀쩡해 보여도 깨져 있는 경우가 있어요. 설명서나 에러 화면에서 바로 복사해서 바로 붙여넣고, 중간에 문서 앱을 거치지 마세요.
어디서 만나게 되나
JSON은 사장님이 찾아가서 만나는 게 아니라, 어느 날 갑자기 나타나요. 나타나는 자리는 정해져 있어요.
| 만나는 곳 | 정체 | 사장님이 할 일 |
|---|---|---|
| 연동 설명서(API 문서) | "우리한테 이 양식으로 보내면, 이 양식으로 답해 준다"는 견본 | 읽지 말고 통째로 복사해서 AI에게 줘요 |
| 에러 메시지 | 무엇이 잘못됐는지 프로그램이 남긴 기록 | 역시 통째로 복사해서 AI에게 줘요 |
| 웹훅 알림 | "결제 됐어요" 같은 소식을 담아 배달 온 쪽지 | AI가 만든 코드가 알아서 읽어요. 구경만 해도 돼요 |
| 내보내기·백업 파일(.json) | 내 가게 데이터를 눌러 담은 상자 | 잘 보관해요. 손님 정보가 들었으면 명부처럼 조심해요 |
네 곳의 공통점이 보이시나요. 전부 사람 읽으라고 나온 게 아니에요. 프로그램끼리 주고받으라고 있는 것이 사장님 눈앞에 잠깐 노출된 것뿐이에요. 그러니 해석하려고 애쓰지 마시고, 그대로 복사해서 AI에게 건네는 게 정석이에요.
중괄호를 만났을 때, 순서대로
어디서 만났든 대처 순서는 똑같아요. 이 네 단계만 몸에 익히면 JSON 때문에 막히는 일은 없어요.
- 1멈추지 않아요. 중괄호가 보였다고 잘못된 게 아니에요. 견본인지 에러인지부터 구분해요. 설명서 안에 있으면 견본, 빨간 글씨나 실패 화면과 함께 나오면 에러예요.
- 2통째로 복사해요. 앞뒤를 자르거나 요약하지 말고, 중괄호가 시작하는 곳부터 끝나는 곳까지 전부요. 잘라낸 반쪽은 AI에게도 반쪽짜리 단서예요.
- 3AI에게 상황과 함께 붙여넣어요. "결제사 설명서에 이런 게 있어" 또는 "저장 버튼을 눌렀더니 이게 떴어"처럼 언제 봤는지 한 줄만 붙이면 진단이 훨씬 빨라져요.
- 4고쳐진 다음, 같은 동작을 한 번 더 해봐요. 에러였다면 재현이 안 되는지 확인하고, 견본이었다면 연동이 실제로 도는지 확인해요. 눈으로 확인해야 끝난 거예요.
보시면 알겠지만 네 단계 어디에도 "JSON 문법을 공부한다"가 없어요. 사장님의 일은 증거를 온전히 전달하는 것이고, 해석과 수리는 AI의 일이에요. 이 분업이 정확하면 연동도 에러도 무섭지 않아요.
사장님이 실제로 겪는 장면
장면 1 · 결제사 연동 설명서를 열었더니
“응답 예시: { "status": "paid", "amount": 5000, "orderId": "A-1042" }”
고장도 암호도 아니에요. "결제가 성공하면 이런 표 한 줄을 돌려드립니다"라는 견본이에요. status는 상태(paid는 결제됨), amount는 금액, orderId는 주문 번호라는 머리글이고요. 이 견본을 그대로 복사해서 AI에게 "이 양식대로 결제 확인하는 기능 만들어 줘"라고 하면 연동의 절반이 끝나요.
장면 2 · 손님 화면에 이상한 영어가 떴다
“Unexpected token '<' ... is not valid JSON”
번역하면 "JSON이 올 자리에 엉뚱한 게 왔어요"예요. 보통 서버가 데이터 대신 오류 페이지(HTML)를 보냈을 때 나요. 가게로 치면 주문서가 올 자리에 "금일 휴무" 안내문이 온 거예요. 원인은 사장님이 못 찾아도 돼요. 이 문장을 통째로 복사해서 AI에게 붙여넣으면 AI가 어느 쪽이 잘못 보냈는지 찾아요. 에러 메시지 읽는 법과 같은 요령이에요.
증상이 보이면, AI에게 이렇게 말해요
외우실 것 없어요. 증상이 나타나면 이 표로 돌아와서 오른쪽 문장을 복사해 가세요. 어떤 경우든 에러 원문을 함께 붙여넣는 것이 핵심이에요.
| 증상 | 무슨 뜻인가 | AI에게 할 말 |
|---|---|---|
| "JSON parse error", "Unexpected token" 같은 에러 | 받은 데이터가 양식에 안 맞아서 읽기를 포기했다는 뜻 | "이 에러가 났어. (원문 붙여넣기) 응답을 JSON으로 읽다 실패한 것 같은데, 실제로 뭐가 오고 있는지 확인하고 고쳐 줘" |
| 화면에 [object Object] 라고 표시됨 | 표 덩어리를 글자로 풀지 않고 통째로 화면에 찍었다는 뜻 | "화면에 [object Object]가 보여. 데이터에서 필요한 값만 꺼내서 사람이 읽게 표시해 줘" |
| 있어야 할 값 자리에 undefined 나 빈칸 | 설명서와 다른 머리글(키 이름)로 값을 찾고 있다는 뜻 | "이 칸이 비어 보여. 응답의 실제 키 이름과 코드가 읽는 키 이름이 같은지 대조해 줘" |
| 한글이 ê°™ì 처럼 깨져 보임 | 글자를 담는 방식(인코딩)이 서로 어긋났다는 뜻 | "응답의 한글이 깨져 보여. 인코딩을 UTF-8로 맞춰 줘" |
| 연동 설명서에 중괄호 예시가 잔뜩 | 고장이 아니라 견본. 오히려 반가운 상황 | "이 설명서 예시 그대로 주고받는 연동 기능을 만들어 줘. (예시 붙여넣기)" |
원문 그대로가 최고의 재료예요
에러를 요약해서 "뭐가 안 돼"라고만 전하면 AI도 추측밖에 못 해요. 중괄호 덩어리와 에러 문장은 한 글자도 고치지 말고 통째로 붙여넣으세요. 사장님 눈에 지저분해 보이는 그 원문이 AI에게는 진단서예요.
지금은 신경 쓰지 않아도 되는 때
바이브캠퍼스 안에서 앱이나 사이트를 만들고 있는 동안에는 JSON을 몰라도 아무 지장이 없어요. 사장님이 말로 주문하면 AI가 코드를 쓰고, 그 코드가 데이터를 JSON으로 담고 푸는 것까지 알아서 해요. 주방에서 어떤 그릇에 재료를 옮겨 담는지 손님이 몰라도 되는 것과 같아요.
이 문서가 필요해지는 순간은 딱 세 가지예요. 외부 서비스를 연동할 때(결제사·예약·배달 설명서에 중괄호가 나와요), 에러 메시지에 JSON이라는 단어가 등장할 때, 그리고 데이터를 내보내거나 이사할 때(.json 파일을 받게 돼요). 그전까지는 이 문서를 닫아 두셔도 돼요. 손님 명단이 실제로 어디에 쌓이는지가 궁금한 거라면 그건 데이터베이스 이야기라서, 그 문서가 맞아요.
공부부터 하고 연동하겠다는 순서는 반대예요
JSON을 다 익힌 다음에 연동을 시작하실 필요 없어요. 연동하다 중괄호를 만나면 그때 이 문서로 돌아와서 위의 표를 보시면 충분해요. 미리 겁먹고 멈추는 것이 가장 큰 손해예요.
자주 묻는 것
- Q. 엑셀 파일을 그대로 주고받으면 안 되나요?
- 엑셀은 사람용이에요. 서식·색깔·수식까지 딸려 있어서 무겁고, 여는 프로그램마다 해석이 조금씩 달라요. JSON은 내용만 남긴 기계용 양식이라 가볍고, 어디서 열든 똑같이 읽혀요. 사람이 볼 표는 엑셀, 프로그램이 주고받을 데이터는 JSON이라고 나누면 정확해요.
- Q. .json 파일을 받았는데 열어 봐도 되나요?
- 네, 메모장으로 열어도 안전해요. 실행되는 프로그램이 아니라 그냥 글자예요. 다만 열어서 실수로 글자를 지우고 저장하면 양식이 깨져서 못 쓰게 될 수 있으니, 보기만 하고 고치지는 마세요.
- Q. true, false, null 같은 영어는 뭔가요?
- 값 자리에 오는 세 가지 약속어예요. true는 "예", false는 "아니오", null은 "비어 있음"이에요. 포장 여부 칸에 true가 있으면 포장 주문이라는 뜻이에요.
- Q. 따옴표가 왜 이렇게 많아요?
- 기계에게 "여기부터 여기까지가 글자"라고 표시해 주는 거예요. 사람은 문맥으로 알지만 기계는 표시가 없으면 몰라요. 따옴표가 하나라도 빠지면 그래서 전체가 안 읽혀요.
- Q. CSV라는 것도 있던데 뭐가 다른가요?
- CSV는 쉼표로만 칸을 나눈 더 단순한 표 양식이고, 엑셀에서 바로 열려요. 명단이나 매출표처럼 표 전체를 옮길 때는 CSV가 편하고, 프로그램끼리 실시간으로 주고받을 때는 JSON을 써요. 둘 다 "표를 글자로 담는 방법"이라는 점은 같아요.
- Q. AI가 만든 코드에서 JSON 에러가 났어요. 제가 뭘 잘못한 건가요?
- 아니에요. 이 에러의 대부분은 서버가 약속과 다른 걸 보냈거나, 설명서와 실제 응답의 머리글 이름이 달라서 생겨요. 사장님 잘못이 아니라 양쪽 프로그램 사이의 약속이 어긋난 거예요. 에러 원문을 AI에게 주면 어느 쪽이 약속을 어겼는지 찾아내요.
- Q. 중괄호 덩어리가 수백 줄인데 이걸 다 복사해요?
- 네, 길어도 통째로가 원칙이에요. AI는 긴 데이터를 읽는 데 강해요. 다만 그 안에 손님 전화번호나 카드 정보 같은 실제 개인정보가 섞여 있으면, 그 값들만 별표(***)로 가리고 붙여넣는 게 안전해요. 구조만 있으면 진단에는 충분해요.
- Q. 손님 정보가 든 JSON 파일은 어떻게 다뤄야 하나요?
- 종이 명부와 똑같이 취급하세요. 카톡방·이메일에 함부로 올리지 않고, 안 쓰게 되면 지워요. 얼마나 보관해도 되는지는 정보 종류마다 법이 달라서 여기서 단정하지 않을게요. 개인정보보호위원회의 개인정보 포털 안내에서 확인하시는 게 정확해요. 개인정보 문서도 함께 보세요.
확인해 보세요
결제사 연동 설명서에 { "amount": 5000, "status": "paid" } 라는 덩어리가 있어요. 이건 뭘까요?
하나 더
JSON의 중괄호 { } 한 덩어리는 엑셀로 치면 무엇에 가까울까요?
마지막 하나
화면에 [object Object] 라는 글자가 떴어요. 어떤 상황일까요?
직접 해보기
스튜디오에서 중괄호와 친해져 보세요
스튜디오 채팅에 "카페 주문 한 건을 JSON으로 보여 주고, 각 칸이 무슨 뜻인지 설명해 줘"라고 쳐 보세요. 방금 배운 머리글과 값이 실제로 어떻게 생기는지 눈으로 확인할 수 있어요. 코드를 쓸 필요는 없어요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
이름의 유래 · JSON은 JavaScript Object Notation의 줄임말이에요. 원래 자바스크립트라는 언어 안에서 데이터를 적던 방식이었는데, 워낙 단순하고 쓸 만해서 언어 밖으로 독립해 세계 공용 표준이 됐어요. 지금은 자바스크립트와 상관없는 프로그램들도 전부 이 양식으로 대화해요.
왜 쉼표 하나에 전체가 깨지나 · 사람은 오타가 있어도 문맥으로 알아듣지만, 기계는 일부러 그렇게 만들지 않았어요. 애매하면 반쯤 읽고 넘어가는 대신 전체 읽기를 포기하고 실패를 알리도록 설계됐어요. 결제 금액 같은 데이터를 어중간하게 읽는 것보다 확실하게 실패하는 쪽이 훨씬 안전하기 때문이에요. 대신 실패 메시지에 몇 번째 글자가 문제인지 위치가 함께 나와서, AI가 고칠 단서가 돼요.
머리글 약속(스키마), 그리고 엑셀 비유의 한계 · 주고받는 양쪽이 "머리글은 이 이름들로, 값은 이 종류로"라고 미리 맺는 약속을 스키마라고 불러요. 연동 설명서가 사실상 이 약속서예요. 엑셀로 치면 머리글 행을 먼저 정해 두는 일이고요. 다만 엑셀 비유가 안 닿는 곳이 하나 있어요. 엑셀 표는 평평하지만, JSON은 값 자리에 또 다른 표 한 줄이 통째로 들어갈 수 있어요. 주문 안에 손님 정보 덩어리가 들어 있는 식이에요. 중괄호 안에 중괄호가 보여도 놀라지 마세요. 서랍 안에 작은 서랍이 있는 것뿐이에요.
이것만 기억하세요
- ·JSON은 프로그램끼리 쓰는 공용 데이터 양식이에요. 엑셀 한 줄을 글자로 눌러 담은 것
- ·중괄호 하나가 한 줄, 콜론 왼쪽이 머리글, 오른쪽이 칸 내용이에요
- ·중괄호 덩어리와 에러는 해석하지 말고 원문 그대로 AI에게 붙여넣어요
- ·바이브캠퍼스 안에서 만들기만 할 때는 몰라도 돼요. 연동·에러·데이터 이사 때만 등장해요
- ·손님 정보가 든 .json 파일은 종이 명부처럼 조심해서 다뤄요