API 응답 JSON 읽는 법 - 초보자도 5분이면 구조 파악하는 완벽 가이드
중괄호와 대괄호가 뒤섞인 API 응답 화면을 보고 막막했던 적 있으신가요? JSON 구조를 한눈에 읽고 원하는 값만 골라내는 방법을 실전 예시로 정리했습니다.
방송 분석 데이터를 직접 받아보려고 API 문서를 열었는데, 응답 예시가 온통 중괄호와 대괄호로 뒤덮여 있어 어디서부터 봐야 할지 막막했던 경험이 있으실 겁니다. 후원 데이터나 시청자 통계를 외부에서 받아 쓰려면 이 JSON 응답을 읽을 줄 알아야 합니다. 다행히 JSON은 규칙이 단순해서 핵심 4가지만 알면 누구나 구조를 파악할 수 있습니다.
JSON이 무엇이고 왜 쓰는가
JSON은 JavaScript Object Notation의 약자입니다. 이름에 JavaScript가 들어가지만 실제로는 거의 모든 프로그래밍 언어와 서비스가 데이터를 주고받을 때 쓰는 공통 표준 형식입니다. 사람이 읽기 쉽고 기계가 처리하기도 편해서, 오늘날 웹 API의 응답 대부분이 JSON으로 돌아옵니다.
예를 들어 날씨 API에 서울의 날씨를 물어보면, 서버는 긴 문장 대신 아래처럼 정리된 데이터를 돌려줍니다.
{
"city": "Seoul",
"temperature": 24,
"weather": "맑음"
}도시 이름은 Seoul, 온도는 24도, 날씨는 맑음. 이렇게 이름표(키)와 값이 짝을 이루는 구조가 JSON의 핵심입니다. 한 번 이 짝짓기 규칙을 이해하면 아무리 복잡한 응답이 와도 차분히 따라 읽을 수 있습니다.
JSON 읽기의 90퍼센트는 키와 값의 짝을 찾는 일입니다. 화려해 보이는 응답도 결국 이름표가 붙은 값들의 모음일 뿐입니다.
JSON의 기본 구조 4가지
JSON을 구성하는 요소는 딱 네 가지뿐입니다. 이 네 가지가 서로 중첩되면서 복잡해 보일 뿐, 하나하나 떼어 보면 단순합니다.
| 구성 요소 | 표기 | 의미 | 예시 |
|---|---|---|---|
| 객체 | { } | 키와 값의 묶음 | {"name": "홍길동"} |
| 배열 | [ ] | 값의 순서 있는 목록 | [1, 2, 3] |
| 문자열 | " " | 따옴표로 감싼 글자 | "맑음" |
| 숫자/불리언 | 없음 | 숫자, 참/거짓 | 24, true, false |
여기서 가장 헷갈리는 두 가지가 중괄호 객체와 대괄호 배열입니다. 둘의 차이만 명확히 잡으면 됩니다.
- 중괄호 { } 는 이름표가 붙은 데이터입니다. 안에 "키": 값 형태가 들어갑니다. 무언가 한 개의 정보 덩어리를 표현할 때 씁니다.
- 대괄호 [ ] 는 여러 개를 줄 세운 목록입니다. 시청자 100명, 후원 내역 50건처럼 같은 종류가 반복될 때 씁니다.
- 대괄호 안에 중괄호가 여러 개 들어가는 경우가 가장 흔합니다. 즉 객체들의 목록이죠.
실제 API 응답 읽는 순서
이제 조금 더 현실적인 응답을 읽어보겠습니다. 후원자 목록을 요청했을 때 돌아온 응답이라고 가정합니다.
{
"status": "success",
"total": 2,
"donors": [
{ "nickname": "별빛", "count": 30 },
{ "nickname": "달님", "count": 15 }
]
}복잡해 보여도 바깥쪽부터 안쪽으로 읽으면 됩니다. 순서는 이렇습니다.
1단계: 가장 바깥 껍질 확인
맨 앞이 중괄호로 시작하니 전체는 하나의 객체입니다. 이 객체 안에 status, total, donors 세 개의 키가 있습니다.
2단계: 각 키의 값 종류 파악
status는 문자열 success, total은 숫자 2, donors는 대괄호로 시작하니 목록입니다. 여기서 donors가 실제 우리가 원하는 후원자 명단임을 알 수 있습니다.
3단계: 목록 안의 항목 들여다보기
donors 안에는 중괄호 객체가 두 개 들어 있습니다. 첫 번째는 별빛 닉네임에 후원 30개, 두 번째는 달님 닉네임에 후원 15개. 이렇게 껍질을 한 겹씩 벗기듯 읽으면 어떤 응답도 막히지 않습니다.
특정 값을 콕 집어 가져올 때는 점으로 경로를 표현합니다. 첫 번째 후원자의 닉네임은 donors 배열의 0번째 항목의 nickname, 즉 donors[0].nickname 으로 접근합니다. 배열은 0번부터 센다는 점만 주의하면 됩니다.
초보자가 자주 헷갈리는 부분
JSON 읽기에서 막히는 지점은 대부분 정해져 있습니다. 미리 알아두면 시간을 크게 아낄 수 있습니다.
- 객체와 배열 혼동: 중괄호로 시작하면 이름표로 값을 찾고, 대괄호로 시작하면 번호로 값을 찾습니다. 시작 기호만 봐도 접근 방법이 갈립니다.
- null과 빈 값: null은 값이 비어 있다는 뜻입니다. 후원자가 없으면 donors가 빈 배열 [] 로 오거나 null로 올 수 있으니, 두 경우 모두 처리해 두는 것이 안전합니다.
- 숫자와 문자열 구분: 24는 숫자지만 "24"는 문자열입니다. 따옴표가 있느냐 없느냐로 갈립니다. 계산에 쓰려면 숫자형인지 먼저 확인해야 합니다.
- 중첩 깊이: 객체 안에 객체, 그 안에 또 배열이 들어가는 경우가 많습니다. 들여쓰기를 잘 정리해 보면 깊이가 한눈에 들어옵니다.
한글이 들어간 응답에서 글자가 깨져 보이는 경우도 있습니다. 이는 인코딩 문제이거나 유니코드 표기 때문인데, 한글을 영문이나 다른 표기로 바꿔 확인해야 할 때는 텍스트 변환기 같은 도구로 빠르게 형태를 바꿔보면 원인을 좁히는 데 도움이 됩니다.
JSON을 쉽게 읽는 도구들
한 줄로 길게 늘어선 JSON 응답은 사람 눈으로 읽기 어렵습니다. 이럴 때는 보기 좋게 정렬해 주는 도구를 쓰면 구조가 단번에 드러납니다.
| 방법 | 특징 | 추천 상황 |
|---|---|---|
| 브라우저 개발자도구 | 네트워크 탭에서 응답을 트리로 표시 | 실제 웹 API 확인 |
| 온라인 JSON 포매터 | 붙여넣으면 자동 정렬과 색상 구분 | 빠른 구조 확인 |
| 코드 에디터 확장 | 접기/펼치기로 깊이 탐색 | 큰 응답 분석 |
대부분의 웹 브라우저는 F12를 눌러 개발자도구를 열고 네트워크 탭에서 API 응답을 트리 형태로 깔끔하게 보여줍니다. 별도 설치 없이 가장 빠르게 구조를 확인하는 방법입니다.
가끔 응답 값이 16진수나 2진수로 인코딩되어 오는 경우가 있는데, 이런 값을 사람이 읽는 숫자로 풀어볼 때는 진법 변환기로 변환해 두면 데이터 의미를 파악하기 한결 수월합니다.
JSON 읽기는 외워서 되는 게 아니라 구조를 보는 눈을 기르는 일입니다. 지금 당장 사용하는 서비스의 API 문서를 열어 응답 예시를 하나 골라, 바깥 껍질부터 한 겹씩 벗겨가며 직접 읽어보세요. 그리고 길게 늘어선 응답을 만나면 포매터로 정렬부터 하는 습관을 들이면, 어떤 복잡한 데이터도 두렵지 않게 됩니다.
