인터넷은 우리가 소통할 때 사용하는 언어뿐만 아니라 웹 페이지를 만들고 데이터를 전송할 때 사용하는 언어들로 구성되어 있습니다. 이 중에서 C, Java, Python 같은 프로그래밍 언어에 대해 들어본 적이 있을 것입니다. 그러나 HTML과 같은 마크업 언어도 알아두는 것이 좋습니다. HTML은 가장 잘 알려져 있고 널리 사용되는 마크업 언어입니다.

이러한 유용한 언어들은 프로그래밍 언어와는 매우 다르며, 읽고 이해하는 데 고급 지식이 거의 필요하지 않습니다. 또한 웹사이트를 구축하거나 유지 관리하는 사람들에게 매우 유용한 기능을 제공합니다. 마크업 언어는 컴퓨터에게 웹 페이지를 어떻게 읽어야 하는지 알려주며, 잘 사용하면 사용자 경험(UX)과 검색 엔진 최적화(SEO)를 개선하는 데 도움이 됩니다.

마크업 언어란 무엇인가?

마크업 언어는 텍스트나 데이터를 형식화하고 주석을 달기 위해 태그를 사용하는 시스템으로, 해당 텍스트나 데이터가 어떻게 표시되거나 처리되어야 하는지에 대한 지침을 제공합니다. 이러한 언어는 주로 웹 개발에서 웹 페이지의 구조와 표시 방식을 정의하는 데 사용됩니다.

예를 들어, HTML 태그 <b>는 그 뒤에 오는 텍스트가 굵은 글씨로 표시되어야 한다는 것을 의미합니다. 해당 태그 이후의 모든 텍스트는 대응되는 마크업 태그 </b>가 나와 브라우저에게 굵은 글씨 표시를 중지하라고 지시할 때까지 굵은 글씨로 표시됩니다.

마크업 언어는 또한 컴퓨터에게 콘텐츠의 구조를 알려줄 수도 있습니다. 예를 들어, 이 섹션의 상단에 있는 "마크업 언어란 무엇인가?"라는 문구는 H2, 즉 두 번째 수준의 헤더입니다. 마크업 언어는 탐색 바, 푸터, 제목, 본문 텍스트와 같은 섹션을 구분할 수 있습니다.

마크업 언어와 프로그래밍 언어의 차이점

마크업 언어는 C나 Java와 같은 프로그래밍 언어와 여러 면에서 다릅니다. 프로그래밍 언어는 논리적이며 컴퓨터가 동적 웹 애플리케이션을 표시하는 방법을 지시합니다. 반면, 마크업 언어는 브라우저가 텍스트와 데이터를 이해하는 방식을 단순히 수정하는 역할을 합니다. 프로그래밍 언어는 사용자 입력에 따라 동적으로 변경되며 컴퓨터에서 실시간으로 실행되지만, 마크업 언어는 정적이며 미리 작성된 텍스트를 수정합니다.

마크업 언어 사용의 장점

• 향상된 SEO
• 개선된 사용자 경험
• 일관된 포맷팅
• 접근성
• 사용 용이성

마크업 언어를 적절히 사용하면 다음과 같은 주요 방식으로 웹사이트에 도움이 될 수 있습니다:

향상된 SEO

마크업 언어를 사용하면 콘텐츠가 검색 엔진에 더 읽기 쉬워지며, 검색 엔진이 콘텐츠의 구조와 의미를 더 잘 이해할 수 있게 됩니다. 검색 엔진은 읽기 쉽고 깔끔하게 배치된 웹사이트를 우선시하는데, 이러한 특성은 올바른 마크업에 의해 강화됩니다.

개선된 사용자 경험

마크업 언어는 웹사이트가 다양한 장치, 브라우저, 운영 체제에서 균일하게 렌더링되도록 보장합니다. 예를 들어, 마크업 언어는 사용자가 브라우저 창을 매우 좁게 만들거나 휴대폰의 방향을 전환할 때 웹페이지를 재구성하는 데 도움을 줍니다. 

일관된 포맷팅

마크업 언어는 동일한 페이지의 유사한 섹션이 유사하게 렌더링되도록 보장합니다. 예를 들어, 위의 H2(“마크업 언어란 무엇인가?”)는 아래의 H2(“마크업 언어 사용의 장점”)와 유사하게 렌더링됩니다. 일관된 포맷팅은 사용자들이 페이지를 더 쉽게 스캔하고 이해할 수 있도록 돕습니다.

접근성

마크업 언어는 스크린 리더와 같은 보조 기술을 사용하여 콘텐츠를 보다 유용하게 만들 수 있도록 태그를 달아줍니다. 예를 들어, 이미지에 대한 대체 텍스트(alt text)는 시각 장애가 있는 사용자가 이미지를 더 쉽게 접근할 수 있게 해줍니다.

사용 용이성

프로그래밍 언어와 달리, 마크업 언어는 일반인이 이해하기 쉽습니다. 카피라이터나 비디자이너도 마크업 언어를 사용하여 웹페이지의 시각적 표현을 지정할 수 있습니다.

마크업 언어의 작동 원리

• 콘텐츠로 시작하기
• 태그를 사용해 콘텐츠 수정하기
• 태그 중첩하기
• 태그 중첩하기

여러 가지 마크업 언어가 있지만, 모든 마크업 언어는 몇 가지 기본적인 특징을 공유하며 작동합니다. 마크업 언어에 대해 알아야 할 주요 규칙은 다음과 같습니다: 

콘텐츠로 시작하기

마크업 언어는 문서나 데이터를 수정하는 데 사용됩니다. 마크업 언어는 문서나 이미지, 링크, 기타 미디어 요소와 같은 데이터 유형이 필요합니다.

태그를 사용해 콘텐츠 수정하기

마크업 언어는 태그를 사용합니다. 일반적으로 꺾쇠 괄호(<>)로 감싸인 태그는 수정할 콘텐츠의 시작을 나타냅니다. 태그는 하이라이트된 섹션의 시작으로 생각할 수 있습니다. 태그는 쌍으로 나타나야 하며, 보통 </this>와 같이 하이라이트가 끝나는 지점을 표시하는 닫는 태그가 필요합니다.

태그는 단락(<p>)이나 이미지(<img>)와 같은 요소를 나타낼 수 있습니다. 또한 하이퍼링크(<a href>)나 텍스트 스타일링(<b>는 굵은 글씨를 나타냅니다)과 같은 속성을 나타낼 수도 있습니다.

태그 중첩하기

태그는 중첩될 수 있습니다. 예를 들어, 한 단락의 텍스트를 굵게 표시하는 (<b>) 태그가 있을 수 있지만, 그 단락은 더 큰 단락(<p>) 안에 포함될 수 있으며, 이는 또 다른 섹션(<div>)의 일부일 수 있습니다. 각 태그가 해당 쌍(</b>, </p>, </div>)과 함께 닫히면 모든 것이 올바르게 렌더링됩니다. 

브라우저가 마크업 언어 읽기

모든 콘텐츠가 이러한 태그로 수정되면, 웹 브라우저나 문서 뷰어가 콘텐츠를 구문 분석하고, 태그와 그 의미를 해석하여 모든 콘텐츠를 적절하게 표시할 수 있습니다. 

마크업 언어의 종류

• HTML
• XML
• Markdown
• LaTeX
• 기타 마크업 언어

가장 널리 사용되는 마크업 언어는 HTML이지만, 다른 대안들도 알아두면 마크업 언어의 목적을 더 잘 이해할 수 있습니다. 각 언어는 태그, 요소, 속성을 작성하는 규칙을 정의하는 고유한 문법을 가지고 있습니다. 이러한 문법의 차이가 각 마크업 언어의 유용성을 설명하는 데 일조합니다. 

HTML

HTML(하이퍼텍스트 마크업 언어)은 온라인 콘텐츠 구조화 및 표현에 사용되는 기본 언어입니다. 이 글의 예시들은 대부분 HTML 규칙을 따르고 있습니다.

1990년대에 처음 개발된 HTML은 2014년에 발표된 최신 버전인 HTML5로 꾸준히 업데이트되고 있습니다. HTML 태그를 사용하면 웹 개발자는 텍스트, 이미지, 링크, 폼, 멀티미디어 요소뿐만 아니라 헤더, 네비게이션 바, 단락과 같은 섹션을 정의할 수 있습니다.

수정되지 않은 HTML은 브라우저에서 비교적 간단한 텍스트 문서로 렌더링되지만, CSS(캐스케이딩 스타일 시트)와 JavaScript를 사용하여 보다 정교한 스타일링과 인터랙티브 요소를 추가할 수 있습니다.

XML

XML(확장 가능 마크업 언어)은 HTML 다음으로 가장 인기 있는 마크업 언어로, 계층적 형식으로 데이터를 구조화하고 저장하는 데 사용됩니다. 텍스트 형식의 스프레드시트로 생각할 수 있습니다.

예를 들어, 고객 정보를 관리하는 시스템을 만들고 싶다면 XML을 사용하여 '고객'이라는 카테고리의 하위 집합으로서 이름과 성을 정의하는 구조(DTD, 문서 유형 정의)를 만들 수 있습니다. 추가 연락처 정보 필드를 태그로 작성하여 추가할 수도 있습니다.

이 XML 형식을 사용하여 데이터베이스에 새로운 고객 기록을 추가하고, XML 데이터를 다른 시스템과 공유하거나 HTML로 표시하고, 다른 시스템과 통합하며, 정의된 스키마를 사용해 검증할 수 있습니다. 웹 개발에서는 XML 문서가 구성 파일 및 애플리케이션 간 데이터 교환에 자주 사용됩니다. 

Markdown

Markdown은 텍스트 형식을 지정하는 데 사용되는 가벼운 마크업 언어입니다. 기술적이지 않은 사용자가 밑줄 및 별표와 같은 간단한 텍스트 요소를 복사 스타일링을 위한 마크업 표시로 변환할 수 있도록 설계되었습니다. Markdown은 HTML, PDF 및 기타 형식으로 쉽게 변환할 수 있습니다. 주로 문서, 블로그 게시물, README 파일 및 기타 텍스트 문서를 작성하는 데 사용됩니다.

LaTeX

LaTeX는 1980년대부터 개발된 오래된 마크업 언어 중 하나입니다. 그러나 복잡한 형식 요구 사항이 있는 경우 여전히 사용됩니다.

LaTeX는 학문적 작업, 특히 타이포그래피, 복잡한 수학적 표기, 교차 참조 및 서지 관리가 중요한 경우에 유용합니다. 보다 현대적인 마크업 언어들보다 사용자 친화성은 떨어지지만, 엄격한 규칙과 풍부한 기능 세트는 LaTeX가 이러한 복잡한 텍스트를 현대 디스플레이 요구에 맞게 조정하는 유용한 방법임을 보여줍니다.

기타 마크업 언어

SGML(표준 일반화 마크업 언어) 및 XHTML(확장 가능 하이퍼텍스트 마크업 언어)도 있습니다. 간단히 말해서, SGML은 HTML 및 XML이 수행한 작업을 시도했지만, 더 많은 수동 구성을 필요로 했던 언어로 볼 수 있습니다. SGML은 현대 후속작들에 비해 많이 사용되지 않습니다.

XHTML은 HTML과 XML을 결합하려는 시도로 2000년대에 어느 정도 인기를 끌었으나, HTML5의 출시와 함께 대부분의 기능이 HTML5에 통합되면서 그 중요성이 감소했습니다.

마크업 언어 FAQ