⑧ 웹앱에서 JSON은 어떻게 사용될까? API 데이터를 이해하는 가장 쉬운 방법

API 다음에 JSON을 이해해야 하는 이유

앞선 글에서 API를 설명하면서 웹앱이 외부 서버와 요청(Request)​과 응답(Response)​을 주고받는 과정을 살펴봤습니다.

그렇다면 한 가지 질문이 남습니다.

API가 데이터를 주고받는다면, 그 데이터는 어떤 형태로 전달될까요?

웹 개발을 처음 접하면 이 부분에서 JSON이라는 용어를 만나게 됩니다. API 문서를 확인하거나 AI에게 코드를 만들어 달라고 요청했을 때도 JSON이라는 표현이 반복해서 등장합니다.

JSON은 JavaScript Object Notation의 약자로, 구조화된 데이터를 표현하기 위한 텍스트 기반의 데이터 교환 형식입니다. 국제 인터넷 표준인 IETF의 RFC 8259에서는 JSON을 가볍고 텍스트 기반이며 특정 프로그래밍 언어에 종속되지 않는 데이터 교환 형식으로 정의하고 있습니다.

쉽게 표현하면 JSON은 서로 다른 프로그램이 데이터를 주고받을 때 이해하기 쉬운 형태로 정리해 놓은 규칙이라고 볼 수 있습니다.

API가 데이터를 전달하는 통로라면 JSON은 그 통로를 통해 전달되는 데이터의 대표적인 표현 방식입니다.

웹앱에서 JSON은 어떻게 사용될까

---

JSON은 어떤 모습일까?

JSON을 이해하기 위해 가장 간단한 형태부터 살펴보겠습니다.

{
  "name": "홍길동",
  "age": 30,
  "email": "hong@example.com"
}

처음 보면 프로그래밍 코드처럼 보이지만 구조는 어렵지 않습니다.

중괄호 { } 안에 데이터를 넣고, 각각의 데이터는 이름과 값의 형태로 구성합니다.

여기에서 "name"은 데이터의 이름이고 "홍길동"은 그 값입니다.

"age"는 이름이고 30은 값입니다.

이러한 구조를 키(Key)와 값(Value)의 쌍​이라고 이해하면 됩니다.

즉,

"name"  → "홍길동"
"age"   → 30
"email" → "hong@example.com"

처럼 하나의 데이터를 구분해서 표현할 수 있습니다.

JSON은 문자열, 숫자, 불리언(Boolean), null, 객체, 배열 등을 표현할 수 있습니다. IETF의 JSON 표준에서도 이러한 기본 값과 객체·배열의 구조를 명시하고 있습니다.

---

JSON이 필요한 이유는 무엇일까?

프로그램마다 데이터를 저장하고 표현하는 방식이 다를 수 있습니다.

웹앱은 JavaScript로 만들어졌을 수 있고, 서버는 다른 언어를 사용할 수 있으며, 데이터베이스 역시 별도의 시스템으로 구성되어 있을 수 있습니다.

이때 서로 다른 프로그램이 데이터를 주고받으려면 공통적으로 이해할 수 있는 형식이 필요합니다.

JSON은 이러한 상황에서 사용하기 좋은 형식입니다.

예를 들어 쇼핑몰 웹앱에서 상품 정보를 가져온다고 가정해 보겠습니다.

서버가 다음과 같은 데이터를 JSON으로 반환할 수 있습니다.

{
  "productName": "간호사복",
  "price": 59000,
  "stock": 12
}

웹앱은 이 데이터를 받아서 화면에 다음과 같이 표시할 수 있습니다.

간호사복
59,000원
재고 12개

사용자는 JSON을 직접 볼 필요가 없습니다.

JSON은 프로그램 사이에서 데이터를 전달하기 위한 형식이고, 웹앱은 전달받은 데이터를 사람이 보기 좋은 화면으로 변환합니다.

이 차이를 이해하는 것이 중요합니다.

JSON 자체가 화면을 만드는 것이 아니라, 화면을 만드는 데 필요한 데이터를 전달하는 역할을 하는 것입니다.

---

API와 JSON은 어떤 관계일까?

앞선 글에서 API를 프로그램끼리 데이터를 주고받는 창구라고 설명했습니다.

이 관계를 택배에 비유하면 이해하기 쉽습니다.

• API → 데이터를 주고받는 통로
• JSON → 통로를 통해 전달하는 데이터의 형식
• 웹앱 → 데이터를 요청하거나 전달받는 프로그램
• 서버 → 요청을 처리하고 데이터를 반환하는 프로그램

예를 들어 웹앱에서 사용자 정보를 요청하면 다음과 같은 흐름이 만들어집니다.

웹앱
 ↓
API 요청
 ↓
서버
 ↓
데이터 처리
 ↓
JSON 응답
 ↓
웹앱
 ↓
화면에 사용자 정보 표시

MDN 역시 JSON을 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용하는 형식으로 설명하고 있으며, 서버에서 클라이언트로 데이터를 전달하거나 반대로 클라이언트에서 서버로 데이터를 전달하는 상황을 예로 들고 있습니다.

따라서 API와 JSON을 같은 것으로 생각하면 안 됩니다.

API는 데이터 교환을 위한 인터페이스이고, JSON은 그 과정에서 데이터를 표현하는 형식 중 하나입니다.

이 차이를 이해하면 API 문서를 볼 때도 훨씬 수월해집니다.

---

JSON의 핵심은 '구조'다

JSON을 처음 접했을 때 { }, [ ], : 같은 기호 때문에 복잡하게 느껴질 수 있습니다.

하지만 몇 가지 구조만 이해하면 대부분의 JSON을 읽을 수 있습니다.

객체(Object)

중괄호 { }로 표현합니다.

{
  "name": "홍길동",
  "age": 30
}

여러 개의 데이터를 이름과 값의 형태로 묶어 놓은 구조입니다.

배열(Array)

대괄호 [ ]로 표현합니다.

[
  "사과",
  "바나나",
  "오렌지"
]

여러 개의 값을 순서대로 담을 때 사용합니다.

객체 안에 배열이 들어갈 수도 있고 배열 안에 객체가 들어갈 수도 있습니다.

예를 들어 상품 목록은 다음처럼 표현할 수 있습니다.

{
  "products": [
    {
      "name": "상품 A",
      "price": 10000
    },
    {
      "name": "상품 B",
      "price": 20000
    }
  ]
}

이 구조를 처음 보면 복잡해 보이지만 실제 의미는 단순합니다.

상품 목록이라는 배열 안에 여러 상품 정보가 들어 있는 것입니다.

이처럼 JSON은 단순한 데이터부터 여러 단계로 구성된 복잡한 데이터까지 하나의 규칙으로 표현할 수 있습니다.

---

웹앱 JSON 데이터 흐름

JSON과 JavaScript 객체는 같은 것일까?

여기서 초보자가 특히 많이 혼동하는 부분이 있습니다.

JSON과 JavaScript 객체는 겉모습이 상당히 비슷하지만 같은 것은 아닙니다.

예를 들어 JavaScript에서는 다음과 같이 객체를 작성할 수 있습니다.

const user = {
  name: "홍길동",
  age: 30
};

반면 JSON에서는 속성 이름을 큰따옴표로 표현합니다.

{
  "name": "홍길동",
  "age": 30
}

또한 JSON에서는 함수와 같은 JavaScript의 기능을 데이터로 표현할 수 없습니다.

MDN은 JSON이 JavaScript 문법과 유사하지만 별도의 데이터 형식이며, 함수나 정규식과 같은 일부 JavaScript 데이터 유형은 JSON으로 직접 표현할 수 없다고 설명합니다.

따라서 "JSON은 JavaScript 객체와 똑같다"라고 이해하면 정확하지 않습니다.

---

이번 글에서 기억해야 할 핵심

JSON을 처음 배우는 단계에서는 모든 문법을 외우는 것보다 다음 세 가지를 이해하는 것이 중요합니다.

첫째, JSON은 데이터 형식입니다.

웹앱과 서버처럼 서로 다른 프로그램이 구조화된 데이터를 주고받을 때 활용할 수 있습니다.

둘째, API와 JSON은 다릅니다.

API는 프로그램이 서로 기능이나 데이터를 요청할 수 있도록 정해 놓은 인터페이스이고, JSON은 데이터를 표현하는 형식입니다.

셋째, JSON은 구조가 중요합니다.

객체 { }, 배열 [ ], 키와 값의 관계만 이해해도 실제 API 응답을 읽는 데 필요한 기본적인 틀을 잡을 수 있습니다.

 

JSON은 실제 웹앱에서 어떻게 사용될까?

 

실제로 웹앱을 개발하다 보면 다음과 같은 코드를 자주 만나게 됩니다.

const data = await response.json();

또는

const jsonData = JSON.parse(text);

반대로 데이터를 서버로 전송할 때는 다음과 같은 코드도 등장합니다.

JSON.stringify(data);

처음 보면 json(), parse(), stringify()가 모두 비슷해 보여 무엇이 다른지 이해하기 어렵습니다.

하지만 이 세 가지를 "문자열로 전달되는 JSON 데이터를 프로그램에서 사용할 수 있는 형태로 바꾸는 과정"으로 이해하면 훨씬 간단해집니다.

---

JSON 데이터는 왜 변환해야 할까?

JSON은 기본적으로 텍스트 기반의 데이터 형식입니다.

예를 들어 서버가 다음과 같은 JSON을 반환한다고 가정해 보겠습니다.

{
  "name": "홍길동",
  "age": 30
}

이 데이터가 네트워크를 통해 전달된 뒤 JavaScript 프로그램에서 사용되려면 애플리케이션이 해당 내용을 해석해야 합니다.

JavaScript에는 이 작업을 위한 JSON.parse()가 제공됩니다.

const text = '{"name":"홍길동","age":30}';

const user = JSON.parse(text);

console.log(user.name);

여기서 중요한 것은 JSON.parse()의 역할입니다.

JSON 형식의 문자열을 JavaScript에서 사용할 수 있는 값이나 객체로 변환하는 것입니다.

MDN 역시 JSON.parse()를 JSON 문자열을 분석해 JavaScript 값이나 객체를 생성하는 메서드로 설명합니다. 유효하지 않은 JSON을 전달하면 SyntaxError가 발생합니다.

---

JSON.parse()는 언제 사용할까?

JSON.parse()는 JSON 문자열을 JavaScript 데이터로 변환해야 할 때 사용합니다.

예를 들어 서버에서 JSON 문자열을 받았다고 가정해 보겠습니다.

const jsonText = '{"product":"간호사복","price":59000}';

const product = JSON.parse(jsonText);

console.log(product.product);
console.log(product.price);

변환이 완료되면 product.product, product.price처럼 객체의 속성에 접근할 수 있습니다.

즉, 다음과 같은 흐름입니다.

JSON 문자열
     ↓
JSON.parse()
     ↓
JavaScript 객체
     ↓
웹앱에서 데이터 사용

이 구조를 이해하면 AI가 생성한 코드에서 JSON.parse()가 등장했을 때도 그 역할을 추측할 수 있습니다.

---

JSON.stringify()는 반대 역할을 한다

그렇다면 반대로 JavaScript 객체를 JSON 형태로 만들어 서버에 보내려면 어떻게 해야 할까요?

이때 사용하는 것이 **JSON.stringify()**입니다.

MDN에 따르면 JSON.stringify()는 JavaScript 값이나 객체를 JSON 문자열로 변환하는 메서드입니다.

예를 들어 웹앱에서 사용자가 입력한 상품 정보를 서버로 보내야 한다고 가정해 보겠습니다.

const product = {
  name: "간호사복",
  price: 59000
};

const jsonText = JSON.stringify(product);

변환 결과는 다음과 같은 문자열이 됩니다.

{"name":"간호사복","price":59000}

전체적인 흐름은 다음과 같습니다.

JavaScript 객체
     ↓
JSON.stringify()
     ↓
JSON 문자열
     ↓
API 요청
     ↓
서버

따라서 JSON.parse()와 JSON.stringify()는 서로 반대 방향의 변환을 담당한다고 이해하면 쉽습니다.

기능변환

JSON.parse()	JSON 문자열 → JavaScript 값
JSON.stringify()	JavaScript 값 → JSON 문자열

---

웹앱의 API 통신에서는 어떻게 사용될까?

이제 API와 JSON을 연결해 보겠습니다.

사용자가 웹앱에서 상품 등록 버튼을 눌렀다고 가정합니다.

웹앱 내부에는 다음과 같은 JavaScript 객체가 있을 수 있습니다.

const product = {
  name: "간호사복",
  price: 59000,
  stock: 20
};

이 데이터를 API 서버에 전달하려면 JSON 형태로 변환해서 요청 본문에 넣을 수 있습니다.

const response = await fetch("/api/products", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(product)
});

여기서 핵심은 JSON.stringify(product)입니다.

JavaScript 객체를 JSON 문자열로 변환한 뒤 서버로 보내는 역할을 합니다.

서버는 전달받은 JSON 데이터를 해석하고 필요한 작업을 수행한 뒤 다시 JSON 형태의 결과를 반환할 수 있습니다.

사용자 입력
    ↓
JavaScript 객체
    ↓
JSON.stringify()
    ↓
API 요청
    ↓
서버
    ↓
데이터 처리
    ↓
JSON 응답
    ↓
JSON.parse() 또는 response.json()
    ↓
JavaScript 데이터
    ↓
화면 표시

이것이 웹앱에서 JSON이 사용되는 대표적인 흐름입니다.

---

response.json()은 JSON.parse()와 같은 것일까?

AI가 생성한 웹앱 코드를 살펴보면 다음과 같은 형태를 자주 볼 수 있습니다.

const response = await fetch("/api/products");
const data = await response.json();

여기서 response.json()을 보고 JSON.parse()와 같은 기능이라고 생각하기 쉽습니다.

두 기능은 관련되어 있지만 동일한 메서드는 아닙니다.

response.json()은 Fetch API의 Response 객체가 제공하는 메서드입니다. HTTP 응답의 본문을 읽고 JSON으로 해석한 뒤 그 결과를 Promise로 반환합니다. MDN도 Response.json()이 응답 본문을 JSON으로 읽어 JavaScript 객체 등으로 변환하는 과정이라고 설명합니다.

반면 JSON.parse()는 이미 가지고 있는 JSON 문자열을 직접 분석하는 JavaScript 메서드입니다.

따라서 다음처럼 구분하면 됩니다.

fetch()
   ↓
HTTP 응답
   ↓
response.json()
   ↓
JavaScript에서 사용할 수 있는 데이터

반면,

JSON 문자열
   ↓
JSON.parse()
   ↓
JavaScript 데이터

입니다.

실제 웹앱에서는 fetch()와 response.json()이 함께 사용되는 경우가 많기 때문에 AI가 생성한 코드를 이해하려면 이 차이를 알아두는 것이 좋습니다.

---

JSON 오류는 왜 발생할까?

JSON은 문법이 단순하지만 정해진 규칙을 지켜야 합니다.

예를 들어 다음 JSON은 올바른 형식입니다.

{
  "name": "홍길동",
  "age": 30
}

하지만 다음과 같이 작성하면 문제가 발생합니다.

{
  "name": "홍길동",
  "age": 30,
}

마지막 30 뒤에 불필요한 쉼표가 있기 때문입니다.

또한 JSON에서는 문자열을 일반적으로 큰따옴표로 표현해야 합니다.

{
  "name": "홍길동"
}

다음과 같이 작은따옴표를 사용하면 유효한 JSON이 아닙니다.

{'name': '홍길동'}

MDN의 JSON.parse() 문서에서도 후행 쉼표와 작은따옴표를 사용하는 JSON은 SyntaxError를 발생시키는 대표적인 잘못된 문법으로 설명하고 있습니다.

따라서 AI가 생성한 JSON을 사용하다 오류가 발생했다면 먼저 괄호, 쉼표, 따옴표가 올바르게 작성되었는지확인하는 것이 좋습니다.

---

JSON은 데이터베이스와 어떻게 연결될까?

웹앱을 만들면서 JSON을 이해해야 하는 또 다른 이유는 데이터베이스와 API 사이에서도 JSON이 자주 사용되기 때문입니다.

앞서 살펴본 Supabase를 예로 들어보겠습니다.

데이터베이스에는 사용자의 정보나 주문 내역이 테이블 형태로 저장될 수 있습니다.

웹앱이 Supabase를 통해 데이터를 조회하면 애플리케이션에서는 그 결과를 JavaScript 객체나 배열 형태로 다룰 수 있습니다.

개념적으로 보면 다음과 같은 구조입니다.

데이터베이스
      ↓
Supabase API
      ↓
JSON 형태의 데이터
      ↓
웹앱
      ↓
화면에 표시

예를 들어 주문 목록을 조회하면 여러 개의 주문 객체가 배열 형태로 구성된 데이터가 반환될 수 있습니다.

[
  {
    "orderNo": "10001",
    "customer": "홍길동",
    "amount": 59000
  },
  {
    "orderNo": "10002",
    "customer": "김영희",
    "amount": 72000
  }
]

웹앱은 이 데이터를 이용해 주문 목록이나 관리자 화면을 구성할 수 있습니다.

따라서 데이터베이스 → API → JSON → 화면이라는 흐름을 이해하면 웹앱의 데이터 처리 구조를 훨씬 쉽게 파악할 수 있습니다.

---

AI 웹앱 개발에서 JSON이 중요한 이유

생성형 AI를 이용해 웹앱을 개발하면 JSON은 더욱 자주 등장합니다.

AI에게 특정 기능을 구현해 달라고 요청하면 API 요청 코드, 응답 데이터, 설정 파일 등에서 JSON 구조를 사용하는 경우가 많습니다.

특히 다음과 같은 기능을 구현할 때 JSON을 자주 만나게 됩니다.

• 외부 API 연동
• AI API 호출
• 데이터베이스 조회
• 사용자 정보 전달
• 상품 및 주문 데이터 처리
• 설정 파일 작성
• API 응답 처리

따라서 JSON을 이해하면 AI가 생성한 코드를 그대로 복사하는 수준에서 벗어나 코드가 어떤 데이터를 주고받는지 확인할 수 있게 됩니다.

이것은 AI와 함께 개발할 때 중요한 차이입니다.

코드를 전부 직접 작성할 필요는 없더라도, 데이터가 어떤 형태로 이동하는지는 이해해야 오류가 발생했을 때 원인을 찾거나 AI에게 정확한 수정 요청을 할 수 있기 때문입니다.

---

핵심 정리

JSON을 실제 웹앱에서 이해하기 위해서는 다음 네 가지를 기억하면 됩니다.

1. JSON.parse()

JSON 문자열을 JavaScript에서 사용할 수 있는 값으로 변환합니다.

2. JSON.stringify()

JavaScript 객체나 값을 JSON 문자열로 변환합니다.

3. response.json()

Fetch API의 HTTP 응답 본문을 JSON으로 읽어 JavaScript에서 사용할 수 있는 형태로 반환합니다.

4. JSON의 역할

API, 데이터베이스, 외부 서비스 사이에서 구조화된 데이터를 전달하는 대표적인 형식입니다. JSON은 특정 프로그래밍 언어에 종속되지 않는 텍스트 기반 데이터 교환 형식이라는 점이 핵심입니다.

 

2026.07.09 - [AI 활용] - AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다

AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다

 

2026.08.05 - [AI 웹앱 제작기] - AI 웹앱 제작기 ⑤Git과 GitHub는 무엇이 다를까?

AI 웹앱 제작기 ⑤Git과 GitHub는 무엇이 다를까?