본문 바로가기
비개발자를 위한 개발 상식

XML이 뭔데? HTML이랑 뭐가 다른데? feat. JSON은 또 뭐임?

by keynotion 2023. 10. 8.
반응형

프로그래밍 입문자라면 반드시 마주하게 되는 개념이 XML이다. 어린 시절 윈도우 기본 메모장으로 HTML 태그 한 번 쯤 끄적여 본 사람이라면 분명 엄청난 혼란이 올 것이다.(내가 그랬다) 뭔가 아는 내용인 것 같긴 한데 이유를 알 수 없이 이해가 안되는 구조다. 왜 그럴까?

XML은 HTML과 달리, 데이터를 담는 그릇이기 때문이다. 데이터를 주고 받는 관점으로 다시 바라봐야 한다. 사용자의 클라이언트에서 서버에 요청하여 DB를 조회한 결과물 데이터의 모음일 수도 있고, 사용자 입장에서 서버로 보내는 요청 데이터 모음일 수도 있는 것이다.

한편, HTML은 최종 사용자가 마주하는 화면(웹 브라우저, 모바일 등)에 어떻게 보여줄 것인가에 대한 시각적인 문서 양식이다. 파워포인트 파일을 예로 들면, "첫 번째 슬라이드의 왼쪽에는 사각형 박스를 보여주고, 두 번째 슬라이드의 오른쪽 아래에는 동그라미를 보여준다." 와 같은 느낌이랄까? HTML은 사용자가 서버로 보낼 일이 없다. 즉, 태생적으로 데이터를 실어 나르는 목적의 문서가 아니다. XML과 그 단어만 비슷할 뿐, 목적과 사용 방법이 다른 별개의 양식이다.

 

그래서, HTML과 XML은 뭐가 다른데?

HTML이 파워포인트라면, XML은 엑셀이다.

HTML과 달리, XML은 사용자가 정의하기 나름이다. 문서의 목적에 맞게 직접 생성하여 작성한다. HTML에 대한 개념을 어느 정도 아는 사람이 XML을 처음 접하면 가장 어려운 점이 바로 이것이다. HTML처럼 특정한 규칙이 있는 문서일 것이라는 예상을 하기 때문이다. XML은 알파벳, 한글 자음 모음 같은 존재이다. 어떤 것이든 담을 수 있는 백지의 메모장 같다. HTML이 파워포인트라면, XML은 엑셀이랄까?

가장 큰 차이는 "사전에 정의된" 규칙인지 여부이다. HTML은 표준에 정의된 태그 조합이 이미 있다. 반드시 그것만을 사용해서 문서를 제작해야 올바르게 사용자 화면에 표시된다. 화면 어딘가에 이미지를 표시하기 위해서는 반드시 <img> 태그를 사용해야만 하는 것이다. 즉, HTML 문서를 제작할 때에는 태그를 직접 만들 수 없다. 현재의 표준인 HTML5에서, 대략적인 태그 규칙은 아래와 같다.

  • <header> 문서의 최상위 제목을 의미
  • <body> 문서의 내용을 의미
  • <h1>~<h6> 제목 구분이며, 1~6 단계로 갈 수록 하위 제목을 의미
  • <a> 하이퍼링크
  • <img> 이미지
  • <div> 요소를 그룹화하여 묶어주는 역할
  • <p> 문단을 의미

 

언제 HTML을 쓰고, 언제 XML을 써야 할까?

HTML은 일반적으로 웹 언어로 알려져 있다. 프레젠테이션이라고 비유한 것 처럼, 텍스트 기반의 문서를 바탕으로 그림 형식으로 표시하는 것이다. 프레젠테이션의 목적은 클라이언트에서 동작하는 웹 애플리케이션(일종의 프로그램)을 만드는 것이다. 가장 많이 사용되는 것이 CSS와 JavaScript 프로그래밍 언어를 함께한 HTML이다.

한편, XML은 데이터 통신에 사용된다. 여러 시스템, 서비스, 프로그램 등 애플리케이션 간 데이터 교환에 사용한다. 서버의 데이터베이스 조회 후 전달되는 데이터가 될 수도 있고, 클라이언트에서 제출하는 사용자 입력 데이터가 될 수도 있다. XML과 유사한 개념으로 JSON이 있는데, 최근에는 속도가 빠른 JSON을 많이 사용하는 추세다. JSON을 이해하고 나면 관련 데이터 양식인 YAML도 함께 자연스럽게 이해가 된다.

앞으로 이어질 네 개의 포스팅에서, JSON, YAML, XML을 순차적으로 다루고자 한다. 이것들을 모두 읽고 나면 HTML과는 전혀 다른 세 가지의 개념을 소프트웨어 개발 관점에서 이해하게 될 것이다. 기대해도 좋겠다.

댓글