오늘 방문 /누적 방문 /완성한 레슨 소개 ↗
SECONDTEAM
웹·배포
🌐 레슨

JSON — 데이터의 공용어

중괄호와 따옴표의 정체. AI·API·DB가 모두 이 형식으로 말해요. 읽을 줄만 알면 돼요.

① 오늘의 미션
"이 메뉴, 기계도 읽게 해줘"
지난 레슨에서 신청 폼이 DB와 어떻게 말하는지 배웠어요. 그런데 폼이 보낸 데이터, DB가 돌려준 데이터 — 이 둘은 대체 무슨 글자로 적혀서 오갈까요?

우리동네 반찬가게 메뉴판을 사람이 읽으면 "김치전 5,000원"이죠. 하지만 기계끼리 주고받는 메뉴판은 생김새가 달라요. 오늘은 그 공용어 — JSON을 읽는 법을 배웁니다.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇
~/my-shop
$ _
📚 「JSON — 데이터의 공용어」 레슨 내용 전체 텍스트로 훑어보기
"이 메뉴, 기계도 읽게 해줘"
지난 레슨에서 신청 폼이 DB와 어떻게 말하는지 배웠어요. 그런데 폼이 보낸 데이터, DB가 돌려준 데이터 — 이 둘은 대체 무슨 글자로 적혀서 오갈까요?

우리동네 반찬가게 메뉴판을 사람이 읽으면 "김치전 5,000원"이죠. 하지만 기계끼리 주고받는 메뉴판은 생김새가 달라요. 오늘은 그 공용어 — JSON을 읽는 법을 배웁니다.

JSON은 'JavaScript Object Notation'의 줄임말이에요. 이름에 자바스크립트가 들어가 있는데, 그럼 자바스크립트에서만 쓸까요?
맞아요. 출신은 자바스크립트지만, JSON은 웹의 공용어예요. 파이썬·자바·우리가 쓰는 Claude까지 — 데이터를 주고받을 땐 다들 JSON으로 말해요. '기계가 읽는 메뉴판 형식'이라고 보면 됩니다.

JSON은 어렵지 않아요. 한 가지 약속만 기억하면 돼요 — 모든 데이터에 '이름표(key)'와 '값(value)'을 짝지어 둔다.

메뉴 한 줄을 JSON으로
김치전, 5000원 → {"name": "김치전", "price": 5000}

읽어볼까요? 중괄호 { } 안에 두 쌍이 들어 있어요. "name"이라는 이름표에 "김치전"이라는 값, "price"라는 이름표에 5000이라는 값. 사이는 콜론 :으로 잇고, 쌍과 쌍은 쉼표 ,로 나눠요.

{"name": "김치전", "price": 5000} — 여기서 '김치전'은 따옴표로 감쌌는데 '5000'은 안 감쌌어요. 왜일까요?
정답! 글자(텍스트)는 큰따옴표로 감싸고, 숫자는 그냥 둬요. "5000"처럼 감싸면 그건 더 이상 숫자가 아니라 '5000이라고 적힌 글자'가 돼요. 이름표(key)는 항상 따옴표로 감싼다는 것도 함께 기억하세요.

가게 사장님이 메뉴를 이렇게 적었어요 — {"name": "제육볶음" "price": 7000} 뭔가 빠진 게 있어요. 기계가 이걸 받으면 어떻게 될까요?

맞아요. "제육볶음""price" 사이에 쉼표(,)가 빠졌어요. JSON은 약속이 엄격해서, 쉼표 하나·따옴표 하나만 틀려도 통째로 거부해요. 다행히 이런 문법은 우리가 외울 필요 없어요 — 쓰는 건 AI가, 우린 읽기만 하면 되니까요.

JSON을 만나면 Claude에게 사람 말로 풀어달라고 하면 돼요. 가게 폴더에서 Claude를 켜고 메뉴 한 줄을 읽혀봐요.

이 JSON 사람 말로 풀어줘: {"name":"김치전","price":5000,"soldout":false} — JSON 한 줄의 뜻을 풀어달라고 해요
보셨죠? true / false처럼 '예/아니오'를 담는 값도 있어요(따옴표 없이 씁니다). 읽다 막히면 Claude에게 풀어달라는 게 오늘의 핵심 습관이에요.

메뉴가 하나일 리 없죠. 여러 개를 줄 세워 담을 땐 대괄호 [ ]를 써요. 이걸 배열(array)이라고 불러요.

메뉴판 전체를 JSON으로
[ {"name": "김치전", "price": 5000}, {"name": "제육볶음", "price": 7000} ]

대괄호 안에 메뉴 객체 두 개가 쉼표로 나뉘어 줄 서 있어요. 중괄호 { }는 '하나', 대괄호 [ ]는 '여럿을 순서대로' — 이 둘만 구분하면 절반은 끝이에요.

김치전에 옵션을 더해봤어요 — {"name": "김치전", "option": {"size": "대", "extra": 1000}} "option"의 값이 또 중괄호 { }로 시작해요. 이게 무슨 뜻일까요?
맞아요. 이걸 중첩(nesting)이라고 해요. "option"의 값으로 또 다른 객체 { } 한 덩이가 통째로 들어간 거예요. 메뉴 안에 옵션, 옵션 안에 또 세부정보… 이렇게 상자 안에 상자를 넣듯 깊어질 수 있어요. AI 도구의 설정 파일이 이렇게 생겼답니다.

사장님이 '계란말이 6000원' 메뉴를 JSON으로 적다가 이름표와 값을 잇는 기호를 빼먹었어요. 무슨 기호일까요?

정답! 콜론(:)이에요. 이름표 : 값 — 이 한 쌍이 JSON의 기본 단위예요. 쉼표(,)는 쌍과 쌍을 나누고, 콜론(:)은 한 쌍 안의 이름표와 값을 잇는다 — 이 둘만 헷갈리지 않으면 돼요.

가게 데이터는 보통 .json 파일에 담겨 있어요. Claude에게 메뉴 파일을 만들고 읽어달라고 해봐요.

menu.json 파일을 만들어줘. 김치전 5000, 제육볶음 7000 두 메뉴를 배열로 담아줘 — 메뉴 데이터를 JSON 파일로 만들어달라고 해요
menu.json 하나가 우리 가게의 '기계용 메뉴판'이에요. 나중에 화면에 메뉴를 뿌릴 때, 코드는 사람 말이 아니라 이 JSON을 읽어서 그려요.
한 줄로
JSON은 이름표 : 값 한 쌍을 기본으로, { }로 하나·[ ]로 여럿·{ } 안에 { }로 중첩해 데이터를 담는 기계의 공용어예요. 따옴표·콜론·쉼표만 눈에 익히면, 어떤 JSON이든 읽어낼 수 있어요.
어디서 또 만나냐면
오늘 배운 이 형식 그대로 — API가 돌려주는 응답도, 설정 파일도, 우리가 쓰는 Claude 같은 AI 도구도 전부 JSON으로 말해요. 한 번 읽을 줄 알면 평생 써먹어요.
다음 레슨에서
그런데 서버가 메뉴를 돌려줄 때, JSON 본문보다 먼저 건네는 한마디가 있어요 — 200·404·500, 서버의 표정(상태코드)을 다음 레슨에서 읽습니다. 가게는 계속 자랍니다. 🌱