안녕하세요! 오늘은 데이터 통신 및 교환에 있어 전문적이며 보편적인 언어인 XML에 대해 알아볼까 합니다. 쉽게 말해, XML은 데이터를 공유하고 전송하는 데 도움을 주는 언어로 생각하시면 됩니다. 개발자든 아니든 이 글을 통해 쉽게 이해할 수 있는 XML의 개념, 중요성, 특징들을 알게 되실 겁니다. 그럼 시작하겠습니다.
XML이란?
XML 이란 eXtensible Markup Language의 약자로, HTML과 같은 마크업 언어입니다. 1998년 W3C(World Wide Web Consortium)에 의해 개발되었습니다. 이 언어는 SGML(Standard Generalized Markup Language)에서 파생되었으며, 웹 문서의 공유를 목적으로 한 HTML에 비해 데이터의 저장과 전송에 더 적합한 구조를 제공하기 위해 만들어졌습니다.
"생각해 보세요, 우리가 커다란 나무에서 여러 가지 과일을 따듯이, 그 큰 나무가 바로 SGML이라는 기술입니다. XML은 그 나무에서 따온 맛있는 한 종류의 과일이며, 특히 인터넷에서 정보를 주고받기 좋게 만들어진 과일입니다. HTML도 같은 나무의 다른 과일처럼, 웹 페이지를 만드는 데 사용됩니다."
SGML의 복잡성을 단순화하여 웹 애플리케이션에서 쉽게 사용할 수 있도록 설계된 XML은 데이터의 이식성과 호환성을 크게 향상했습니다. 하지만 HTML과는 달리 웹 페이지를 만드는 것이 아니라, 웹 페이지 외부에서 데이터 자체를 표현하고 저장하기 위해 설계되었습니다.
XML 파일 구조
XML 파일은 ". xml" 확장자를 가진 파일로, 데이터와 그 데이터의 구조를 정의하기 위해 사용됩니다. 데이터와 그 구조를 명확하게 정의할 수 있으며, 이를 효과적으로 인터넷을 통해 전송하고, 서로 다른 시스템 간에 쉽게 공유할 수 있습니다. 이는 데이터를 읽고 이해하기 쉽게 만드는 데 큰 역할을 합니다. XML 문서는 태그(tag)와 속성(attribute)으로 이루어진 계층적 구조를 가지고 있습니다.
"XML 문서를 만드는 것은 마치 큰 상자에 여러 작은 상자들을 넣고, 각 상자에 무엇이 들어있는지 적어 놓는 것과 비슷합니다. '태그'는 상자에 붙은 라벨이며, '속성'은 그 상자에 대한 추가 정보를 제공합니다. 이런 방식으로 모든 것이 잘 정리되어 있어, 필요한 정보를 쉽게 찾을 수 있습니다."
모든 XML 문서는 루트(root) 요소를 포함하며, 이 안에 여러 자식(child) 요소를 포함할 수 있습니다. 예를 들어, <book> 태그는 하나의 책을 나타내며, <title>, <author>와 같은 여러 자식 요소를 포함할 수 있습니다. XML 문서는 반드시 닫는 태그를 포함해야 하며, 대소문자를 구분합니다. 또한, XML 선언은 문서의 최상단에 위치하며, 버전과 인코딩 타입을 명시합니다.
<?xml version="1.0" encoding="UTF-8"?>
<book>
<title>XML for Beginners</title>
<author>John Doe</author>
</book>
XML 스키마와 DTD
XML 스키마와 DTD(문서 형식 정의)는 XML 문서의 구조를 정의하고,
해당 문서 내의 데이터 타입을 검증하는 데 사용됩니다.
"상상해 보세요, 당신이 건축가이고, 건물을 짓기 전에 설계도를 그립니다.
XML 스키마와 DTD는 마치 그 건물의 설계도와 같습니다.
이들은 XML 문서가 어떤 구조를 가져야 하는지, 어떤 정보를 담을 수 있는지 정확히 알려줍니다.
이런 규칙들 덕분에 모든 정보가 제자리에 있고, 오류 없이 잘 작동합니다."
DTD는 XML의 초기 버전에서 사용되었으며, 스키마는 더 강력한 데이터 타입 지원과 네임스페이스를 제공합니다.
이러한 도구를 사용함으로써, 데이터의 일관성과 정확성을 보장할 수 있습니다.
플랫폼 및 프로그래밍 언어와의 독립성
XML은 대부분의 플랫폼과 프로그래밍 언어에서 처리할 수 있는 독립적인 형식입니다. 이 독립성은 다양한 시스템 간에 데이터를 교환하는 데 있어 큰 이점을 제공합니다.
XML 활용
개발자들은 웹 서비스, 구성 파일, 데이터베이스 등에서 XML을 사용합니다. 이를 통해 데이터가 어떻게 보이고 작동해야 하는지 설명하고, 데이터 전송과 표현을 동시에 처리할 수 있습니다. 또한, XML은 많은 시스템과 애플리케이션에서 중요한 역할을 하는 핵심 기술입니다.
XML의 장점과 단점
장점
XML은 데이터의 자기 기술적(self-descriptive) 특성과 텍스트 기반 구조로 인해 인간과 기계 모두에게 읽기 쉽습니다.
또한, 플랫폼 독립적이며, 확장 가능하고, 사용자 정의 태그를 통해 유연한 데이터 표현이 가능합니다.
단점
그러나 XML은 종종 파일 크기가 크고, 파싱(parsing) 시간이 오래 걸릴 수 있는 단점이 있습니다.
이는 네트워크 대역폭과 처리 성능에 영향을 줄 수 있습니다.
최근에는 JSON(JavaScript Object Notation)과 같은 경량의 데이터 교환 형식이 인기를 얻고 있습니다.
JSON은 텍스트 기반의 구조로, 웹 애플리케이션에서의 데이터 교환에 최적화되어 있으며,
XML에 비해 더 작은 파일 크기와 빠른 파싱 속도를 제공합니다.
"XML과 JSON을 비교하자면, XML은 전통적인 편지와 같고, JSON은 이메일 같습니다.
JSON은 더 빠르고 간단한 메시지를 주고받는 데 적합하다면,
XML은 더 많은 정보와 세부 사항을 담을 수 있어서, 복잡한 데이터를 다룰 때 유용합니다."
그러나 XML은 메타데이터와 네임스페이스 지원이 뛰어나고, 보다 복잡한 문서 구조를 표현하는 데 유리합니다.
오늘은 개발자라면 꼭 알고 있어야 할 깃허브 (Github) 너무 어려워서 접근하기 힘든 깃허브지만 개발자가 꿈이 이 사라면 사용할 수밖에 없을 텐데요 오늘은 깃허브에서 이력서를 만들어보겠습니다. 깃(git)과 깃허브 (Github)에 대한 설명과 차이점은 아래 글을 참고해 주세요
저장소
먼저 깃 허브 가입을 하신 후에 저장소(Repository)를 만들어
이력서 관련 파일들을 저장하겠습니다.
먼저 깃허브에 로그인한 후 Repository
(이제 쉽게 레포라고 부르겠습니다)
에서New를 클릭하여 새 저장소를 만들어줍니다.
"Repository name"에 원하는
레포 이름을 입력해 줍니다.
저는 resume라고 입력하도록 하겠습니다.
코딩할 때와 마찬가지로 띄어쓰기
즉 스페이스바를 하지 마시고
두 개 단어 이상으로 설정하시려면
gildong-resume처럼
하이픈으로 연결해 주시길 바랍니다.
다 작성하셨다면 Add a README flie 체크 박스를
클릭하신 후
Create repository 버튼을 클릭하여
이력에서 쓸 레포를 만들어줍니다.
소스 작성 환경 만들기 VSCODE 편집기
자동으로 만들어진 레포가 열리면 그 상태에서 키보드 마침표. 를 눌러 주세요. github.dev라는 편집기가 나타납니다. 온라인에서 사용할 수 있는 Vscode 편집기입니다. 만약 작업에 능숙하시고 따로 사용하시는 편집기가 있으시다면 그걸로 사용하셔도 무방합니다. 이제 이곳에 원하는 html 소스를 작성하여 작업하면 자동으로 깃허브 레포로 파일이 업로드되고, 내용 수정 역시 즉시 반영됩니다.
소스 작성 환경 만들기2 Codeswing
Codeswing은 우리가 직접 작성한 소스가 어떻게 반영되는지 바로 확인이 가능하도록 출력해 주는 기능을 가지고 있습니다. 작업하면서 잘 노출되고 있는지 확인하기 위해 설치해 주도록 하겠습니다.
왼쪽 사이드바에서 확장 아이콘을 클릭한 후 codeswing을 검색하여 설치해 주세요. 그리고 바로 마크업 (Markup)에 들어가도록 하겠습니다. 마크업이란 웹 브라우저가 이해할 수 있도록 기호를 사용하여 구성하는 것을 말합니다.
Index.html / Codeswing
VS Code에서 명령 팔레트를 통해
Codeswing을 검색하고
CodeSwing: Initialize Workspace as Swing을
선택합니다.
그리고 HTML 파일을 만들기 위해
Basic: HTML-only를선택합니다.
정상적으로 선택했다면 편집기화면이 두 개로 나뉘면서
왼쪽에는 index.html이 나타나고,
오른쪽에는 CodeSwing화면이 나타납니다.
index.html은우리가 앞으로소스를 작성할 화면이고,
오른쪽의CodeSwing은소스를 작성하면서
결과를 확인하기 위한 화면입니다.
<html lang = "en"> -> <html lang = "ko">
index.html 화면에서 느낌표! 를 입력한 후
Enter 키를 눌러주세요.
웹 문서의 가장 기본적인 소스 코드가
자동으로 만들어집니다.
그곳에서 "en" 부분을 "ko"로 수정해 주세요.
깃은 영문 페이지로 만들어졌지만
우리는 한글로 작성할 것입니다.
<title>Document</title> <- <title>원하는 제목</title>
보이는 소스에서 <title> 태그는 웹 브라우저 탭에
표시되는 이력서 제목입니다.
Document 부분을 원하는 제목으로 바꿔주세요
html 마크업
본격적으로 html 마크업을 시작하도록 하겠습니다.
아래 소스를 복사해서 index.html 문서의
<body> 태그와 </body> 태그 사이에 삽입해 주세요
<header id="header">
<!-- 이력서 헤더 : 이름과 타이틀 작성 -->
<h1>이름</h1>
<hr>
타이틀 (예: 학생 등)
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<!-- 연락처 정보 -->
</section>
<section>
<h2>SKILLS</h2>
<!-- 자신이 잘할 수 있는 기술 -->
</section>
<section>
<h2>EDUCATION</h2>
<!-- 학력 -->
</section>
</article>
<article id="mainRight">
<section>
<h2>ABOUT</h2>
<!-- 자기 소개 -->
</section>
<section>
<h2>WORK EXPERIENCE</h2>
<!-- 경력 -->
</section>
</article>
</main>
위와 같이 Codeswing에 출력된다면
아주 잘 따라오고 계신 겁니다.
<header id="header">
<!-- 이름과 타이틀 작성 -->
<h1>이름</h1>
<hr>
타이틀 (예: 학생 등)
<hr>
</header>
<header id="header">
<!-- 이력서 헤더 : 이름과 타이틀 작성 -->
<h1>홍길동</h1>
<hr>
도적
<hr>
</header>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
body {
max-width: 960px; /* 최대 너비 */
margin: auto; /* 마진 auto - 내용을 화면 가운데 맞추기 위해 */
font-family: "Noto Sans KR", "Nanum Gothic"; /* 글꼴 - 웹 폰트 */
font-size:14px; /* 글자 크기 */
}
