AJAX + JSON으로 만드는 데이터 기반 동적 웹페이지

- 10월 18, 2025

정적인 웹페이지에 지루함을 느끼셨다면? AJAX와 JSON으로 사용자와 실시간으로 소통하는 웹을 구현해보세요!

안녕하세요, 웹개발 실무와 교육 콘텐츠를 전하는 ICT리더 리치입니다. 요즘은 정적인 웹사이트보다 사용자와 상호작용이 가능한 ‘동적인 웹페이지’가 대세인데요, 그 핵심 기술 중 하나가 바로 AJAX(비동기 자바스크립트)와 JSON(데이터 포맷)입니다. 이번 포스팅에서는 두 기술을 결합해, 새로 고침 없이 데이터를 가져오고 처리하는 웹페이지를 직접 구현하는 과정을 함께 배워봅니다. 실습 예제와 함께 친절히 설명드릴 테니, 초보자도 부담 없이 따라오세요!

📌 바로가기 목차

1. AJAX란 무엇인가요? 2. JSON 포맷 이해하기 3. AJAX와 JSON의 데이터 흐름 4. 동적 웹페이지 실습 구조 5. 실전! 코드로 만드는 AJAX + JSON 6. 개발 시 유용한 팁과 도구들 7. 자주 묻는 질문 (FAQ) 8. 마무리 요약

노트북에서 AJAX JSON 테스트 중인 밝고 환한 이미지의 20대 여성

AJAX + JSON 테스트를 수행하는 웹 개발 여성의 자연스러운 모습

1. AJAX란 무엇인가요?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있게 해주는 기술입니다. 웹 애플리케이션의 사용자 경험을 개선하고, 응답 속도를 높이기 위해 널리 사용되며, XMLHttpRequest 객체나 Fetch API를 통해 비동기 요청을 수행합니다. 특히 AJAX는 UI를 실시간으로 업데이트해야 하는 SPA(Single Page Application) 구조에서 필수 기술로 자리잡고 있습니다.

2. JSON 포맷 이해하기

JSON(JavaScript Object Notation)은 서버와 클라이언트 간 데이터 교환을 위해 가장 널리 사용되는 포맷입니다. 사람이 읽기 쉽고, 자바스크립트에서 쉽게 파싱(parse) 및 처리할 수 있어 AJAX와 함께 사용할 때 강력한 조합이 됩니다.

항목	설명
형식	키-값 쌍 (key-value pair)
확장자	.json
장점	가볍고 빠르며 범용성 높음
사용 예	API 응답, 설정파일 등

3. AJAX와 JSON의 데이터 흐름

AJAX와 JSON을 함께 사용할 경우, 다음과 같은 데이터 흐름을 통해 동작합니다.

사용자가 웹페이지에서 이벤트 발생 (예: 버튼 클릭)
자바스크립트가 AJAX 요청을 서버로 전송
서버는 JSON 포맷의 데이터를 응답
클라이언트에서 JSON 데이터를 파싱하여 UI에 반영

AJAX를 통해 JSON 데이터를 주고받는 전체 흐름을 실전 코드로 확인해보겠습니다. 여기서는 사용자 데이터를 서버에서 받아와 동적으로 리스트에 렌더링하는 예제를 보여줍니다.


// HTML에 다음과 같은 리스트 영역이 있다고 가정
<ul id="userList"></ul>

// JavaScript 코드 시작
document.addEventListener("DOMContentLoaded", () => {
  // 1. 대상 DOM 요소를 가져옵니다.
  const userList = document.getElementById("userList");

  // 2. fetch()를 사용하여 외부 API 호출
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => {
      // 3. 응답이 성공적인지 확인
      if (!response.ok) {
        throw new Error("서버 오류 발생");
      }
      return response.json(); // JSON 파싱
    })
    .then(data => {
      // 4. 받아온 JSON 배열을 순회하며 리스트에 추가
      data.forEach(user => {
        const li = document.createElement("li");
        li.innerHTML = `
          <strong>${user.name}</strong> - ${user.email}<br>
          주소: ${user.address.city}, ${user.address.street}
        `;
        userList.appendChild(li);
      });
    })
    .catch(error => {
      // 5. 오류 발생 시 콘솔 출력
      console.error("에러:", error);
      userList.innerHTML = "<li>데이터를 불러오는 데 실패했습니다.</li>";
    });
});

AJAX와 JSON으로 동적 웹페이지를 구현하는 20대 여성의 직관적 인포그래픽

AJAX + JSON 기반 동적 웹페이지 구현 방법 – 여성 중심 인포그래픽

4. 동적 웹페이지 실습 구조

AJAX와 JSON을 활용한 동적 웹페이지를 만들기 위해서는 다음과 같은 구성 요소가 필요합니다. 클라이언트 측과 서버 측 모두를 이해하고 연동하는 과정에서 기술의 흐름이 자연스럽게 연결됩니다.

구성 요소	역할
HTML	기본 UI 구조 제공 (입력폼, 버튼 등)
CSS	디자인 및 시각적 구성
JavaScript	이벤트 처리, AJAX 요청 수행
서버(API)	요청에 따라 JSON 데이터를 응답

5. 실전! 코드로 만드는 AJAX + JSON

이번엔 사용자 검색 기능이 포함된 동적 UI를 구현해보겠습니다. AJAX 요청 → JSON 파싱 → 실시간 필터링 → DOM 렌더링 흐름을 모두 다룹니다.


// HTML 구조 (참고용)
// <input type="text" id="searchInput" placeholder="이름으로 검색..." />
// <div id="loading">로딩 중...</div>
// <ul id="userList"></ul>

document.addEventListener("DOMContentLoaded", () => {
  const userList = document.getElementById("userList");
  const searchInput = document.getElementById("searchInput");
  const loading = document.getElementById("loading");

  let usersData = []; // 전체 데이터 저장용

  // 1. 데이터 가져오기
  const fetchData = async () => {
    try {
      loading.style.display = "block"; // 로딩 표시
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await response.json();
      usersData = data; // 원본 데이터 저장
      renderList(data); // 리스트 출력
    } catch (err) {
      userList.innerHTML = "<li>데이터 로딩 실패</li>";
      console.error(err);
    } finally {
      loading.style.display = "none";
    }
  };

  // 2. 리스트 렌더링 함수
  const renderList = (users) => {
    userList.innerHTML = ""; // 초기화
    users.forEach(user => {
      const li = document.createElement("li");
      li.innerHTML = `<strong>${user.name}</strong> - ${user.email}`;
      userList.appendChild(li);
    });
  };

  // 3. 검색 기능
  searchInput.addEventListener("input", e => {
    const keyword = e.target.value.toLowerCase();
    const filtered = usersData.filter(user => user.name.toLowerCase().includes(keyword));
    renderList(filtered);
  });

  fetchData(); // 실행
});

6. 개발 시 유용한 팁과 도구들

AJAX + JSON 기반 개발을 할 때 활용하면 좋은 도구들을 소개합니다.

Postman: API 테스트 및 JSON 응답 확인용 도구
JSON Formatter: 브라우저 확장 기능으로 JSON 가독성 개선
Mock API (e.g., JSONPlaceholder): 실제 서버 없이도 테스트 가능

실전 코드로 알아보는 AJAX + JSON 동적 웹 구현 – 남성 중심 인포그래픽

7. 자주 묻는 질문 (FAQ)

Q AJAX는 서버 언어가 없어도 작동하나요?

AJAX는 클라이언트(브라우저)에서 작동하지만, 서버가 데이터를 반환해야 하기 때문에 서버 언어 또는 API 백엔드가 필요합니다.

Q XML 대신 JSON을 사용하는 이유는 무엇인가요?

JSON은 자바스크립트와 더 잘 호환되고, 문법이 간단하며, 데이터 용량도 작아 빠른 통신에 유리합니다.

Q AJAX 요청은 몇 번이고 반복해도 되나요?

네, 조건에 따라 여러 번 호출이 가능합니다. 단, 너무 자주 호출되면 서버에 부하를 줄 수 있어 주의가 필요합니다.

Q fetch()와 XMLHttpRequest 중 어떤 것이 더 좋은가요?

fetch()는 더 간결하고 최신 문법을 제공하여 코드 유지보수가 쉽습니다. 다만, 하위 브라우저 호환성은 확인이 필요합니다.

Q JSON 파일을 직접 서버에서 열 수 있나요?

네, JSON 파일을 정적 파일로 서버에 올려두면 URL로 접근하여 AJAX로 불러올 수 있습니다.

8. 마무리 요약

✅ AJAX + JSON은 동적 웹의 핵심입니다

오늘날의 웹사이트는 단순한 정보 제공을 넘어서, 실시간 소통과 사용자 맞춤형 경험을 제공합니다. 이를 가능케 하는 핵심 기술이 바로 AJAX와 JSON이죠. 이 둘을 적절히 활용하면 페이지 새로고침 없이도 데이터가 오가는 웹을 구현할 수 있으며, 사용자의 몰입도를 높이고 웹서비스의 수준을 한 단계 업그레이드할 수 있습니다. 이번 포스팅을 기반으로 실제 프로젝트에도 AJAX + JSON을 활용해보세요. 여러분의 웹은 점점 더 똑똑해질 것입니다!

이 블로그 검색

ICT리더 리치