프로그래밍에서 마크업 언어(markup language)라고 하면 무언가의 가격을 올리는 행위를 떠올릴 수도 있지만, 실제로는 전혀 다른 의미입니다. 마크업이란 특정한 형태의 스크립팅 언어를 사용해 데이터를 표현하는 방식을 말합니다.
이 글에서는 마크업 언어가 무엇인지, 어떻게 작동하는지, 그리고 언제 사용되는지 살펴보겠습니다. 또한 세 가지 대표적인 마크업 언어와 그 활용 사례를 함께 분석하여, 마크업의 동작 원리를 확실하게 이해하실 수 있도록 도와드리겠습니다.
마크업 언어란?
마크업 언어는 컴퓨터가 문서에 주석(annotation)을 달 때 사용하는 언어입니다. 이러한 언어는 사람이 읽기 쉽도록 설계되어 있어, 일반적으로 복잡한 프로그래밍 전문 용어 대신 표준적인 단어로 작성됩니다.
마크업 언어는 문서의 스타일과 구조를 정의하여, 컴퓨터가 해당 문서를 어떻게 표시해야 하는지 알 수 있도록 합니다.
쉽게 비유하자면, 선생님이 학생의 시험지에 '마크업', 즉 체크와 메모를 남기는 과정과 비슷합니다. 선생님은 학생이 틀린 부분에 표시를 해두어 다음에 어떻게 고쳐야 할지 알려주죠. 실제로 '마크업 언어'라는 용어는 조판(활판 인쇄) 분야에서 유래했습니다. 당시에는 문서를 조판하는 방법에 대한 지시 사항을 문서 옆에 '마크업(mark up)'으로 표기했기 때문입니다.
다만 마크업이 반드시 하나의 독립된 언어여야 하는 것은 아닙니다. 앞선 예시들에서도 마크업은 사용되었지만, 마크업 '언어'는 아니었습니다. 마크업과 마크업 언어를 구분하는 기준은, 마크업 언어에는 해당 언어를 사용하는 규칙 집합이 존재한다는 점이며, 보통 컴퓨터가 이를 해석합니다. 반면 일반적인 마크업에는 정의된 구조가 없습니다.
웹 개발에서의 ML이란?
웹사이트를 개발해 본 경험이 있다면 'ML'이라는 접미사를 들어본 적이 있을 것입니다. 예를 들어 HTML과 XML은 모두 'ML'로 끝나는데요, 이것이 무엇을 의미하는지 궁금한 적이 있으신가요? ML은 바로 Markup Language, 즉 마크업 언어의 약자입니다.
마크업 언어는 웹 개발 전반에서 폭넓게 활용됩니다. 특정 데이터 집합이 웹 문서에서 어떻게 표현되어야 하는지 기술하는 데 사용됩니다.
HTML(HyperText Markup Language)은 웹 페이지의 구조를 기술하고, XML은 특정 유형의 데이터를 기술하는 역할을 합니다.
마크업 언어의 작동 방식
모든 마크업 언어에는 공통적인 특징이 있습니다. 바로 태그(tag)를 사용해 웹 페이지의 다양한 콘텐츠 유형을 표시한다는 것입니다. 이러한 마크업 기호는 일반적으로 꺾쇠괄호(<>)로 작성됩니다.
마크업 언어는 표현하려는 텍스트와 컴퓨터가 읽어야 할 지시문을 구분할 방법이 필요합니다. 마크업 태그 안에 포함된 모든 텍스트는 기계가 지시문으로 해석합니다.
다음 예시를 살펴보겠습니다.
<a href="https://careerkarma.com">Career Karma</a>
위 코드는 Career Karma 홈페이지로 연결되는 링크입니다. <a> 태그로 링크를 정의하고, 링크가 끝나는 지점에서 </a> 태그로 닫아줍니다.
이 태그들은 컴퓨터에게 링크, 즉 앵커(anchor)('a'의 유래)를 렌더링하라고 지시합니다. 이러한 태그들은 웹 페이지에 직접 나타나지 않으며, 웹 브라우저가 읽어서 특정 웹 페이지를 표시하는 방법을 파악하는 지시문 역할을 합니다.
마크업 파일은 일반 텍스트 문서로 저장되기 때문에, 표준 텍스트 편집기로도 손쉽게 열어볼 수 있습니다.
마크업 언어 vs 프로그래밍 언어
마크업 언어라는 이름이 프로그래밍 언어처럼 들릴 수 있습니다. 어쨌든 우리는 '언어'에 대해 이야기하고 있으니까요! 하지만 두 용어가 비슷하게 들린다고 해서 같은 것은 아닙니다.
프로그래밍 언어는 컴퓨터에 명령을 내려 다양한 결과물을 생성하는 명령어 집합입니다. Ruby, Python, Perl이 대표적인 프로그래밍 언어입니다. 반면 마크업 언어는 문서를 기술(describe)하는 데 사용됩니다.
Python이나 Ruby 프로그램은 실행할 수 있지만, 마크업된 문서를 '실행'할 수는 없습니다. 예를 들어 HTML 문서는 실행되지 않고 브라우저가 렌더링합니다. XML 문서 역시 실행되지 않으며, 특수한 데이터 리더가 이를 읽어들입니다.
마크업 언어의 종류
조금만 파고들면 상당히 많은 마크업 언어를 만나게 됩니다. 세상에는 방대한 데이터가 존재하기 때문에, 모든 잠재적 사용 사례를 커버하기 위해 여러 언어가 필요합니다. 그중 가장 널리 사용되는 것은 HTML, XML, XHTML입니다.
HTML (HyperText Markup Language)
HTML(HyperText Markup Language)은 웹 개발의 핵심 언어입니다. HTML이 없었다면 웹사이트 자체가 존재하지 않았을 것입니다. HTML은 페이지에 어떤 제목, 이미지, 텍스트가 나타나야 하는지 등 웹 페이지의 구조를 정의합니다. 또한 이러한 요소들이 브라우저에 어떤 순서로 배치되어야 하는지도 결정합니다. 반면 CSS(Cascading Style Sheets)는 브라우저에서 페이지의 레이아웃과 디자인을 정의하는 데 사용됩니다.
HTML은 표준 마크업 언어 중 하나로, 태그를 사용해 제목부터 이미지, 입력 폼(form)까지 웹 페이지의 모든 요소를 정의합니다.
HTML 언어는 국제 기구인 W3C(World Wide Web Consortium)가 관리합니다. HTML은 웹이 작동하는 방식에 필수적이기 때문에, 일관성 있게 작성하고 처리하기 위한 국제 표준이 필요합니다.
HTML의 최신 버전은 HTML5로, 이전 버전에 비해 많은 개선 사항이 포함되어 있습니다. 다만 HTML이 웹에서 차지하는 중요성이 매우 큰 만큼, 대부분의 변경 사항은 점진적으로 이루어집니다.
XML (eXtensible Markup Language)
XML(eXtensible Markup Language)은 데이터를 전송하고 저장하기 위해 설계된 언어로, 자기 기술적(self-descriptive)이라는 특징이 있습니다.
그 이유는 XML 태그의 이름에 제한이 없기 때문입니다. 미리 정의된 태그가 없으므로, XML 문서 내 각 데이터를 가장 정확하게 설명하는 이름을 자유롭게 지정할 수 있습니다.
예를 들어 좋아하는 책 목록을 관리하는 마크업 문서를 만든다고 가정해 보겠습니다. XML에서는 다음과 같은 구조를 사용할 수 있습니다.
<book> <title>How to Win Friends and Influence People</title> <author>Dale Carnegie</author> <rating>⅘</rating> </book>
이 예시에서는 book, title, author, rating이라는 네 개의 태그를 만들었습니다. title, author, rating 태그는 book 태그 안에 위치하며, book 태그는 XML 파일에서 하나의 항목(entry)을 나타냅니다.
XHTML (eXtensible HyperText Markup Language)
XHTML은 XML 표준을 준수하도록 만들어진 HTML4의 버전입니다. 더 다양한 기능에 대한 요구로 인해 HTML5로 대체되었지만, 오늘날에도 인터넷 곳곳에서 사용되고 있습니다. XHTML을 사용하는 대부분의 사이트는 오랫동안 업데이트되지 않은 몇 년 전에 개발된 사이트들입니다.
XHTML과 HTML은 매우 유사하지만 몇 가지 차이점이 있습니다. 예를 들어 XHTML의 속성(attribute)은 이름과 값을 모두 가져야 하며, 단독으로 사용되는 속성은 허용되지 않습니다. 또한 모든 XHTML 태그는 소문자로 작성해야 합니다. HTML에서는 대소문자를 자유롭게 사용할 수 있지만, 코딩 모범 사례로는 소문자 사용이 권장됩니다.
결론
마크업 언어는 문서 내 요소들을 정의하는 데 사용됩니다. HTML과 XML 같은 마크업 언어는 사람이 읽기 쉽도록 설계되어 있어, 해당 언어가 어떤 데이터를 표현하고 있는지 쉽게 파악할 수 있습니다.
마크업 언어에서는 컴퓨터에 전달할 지시문이 태그 형태로 표현됩니다. 이러한 태그는 보통 꺾쇠괄호(<>) 사이에 작성됩니다.
이제 여러분도 웹 개발 전문가처럼 마크업 언어에 대해 자신 있게 이야기할 준비가 되셨습니다!