마크다운(Markdown) 문법: 의미(제목 문법)와 표현(큰 글자 스타일)의 차이

mishana (50)in #kr • 6 years ago (edited)

@mishana

오늘은 가볍게 마크다운에 대한 이야기를 하나 해보려고 합니다.

마크다운은 존 그루버가 디자인한 경량 마크업 언어로, 플레인 텍스트만으로 서식을 표현할 수 있는 특징을 가지고 있습니다. 스팀잇에서도 마크다운을 지원하며 마크다운으로 작성한 문서는 플랫폼에서 HTML로 변환됩니다.

아래의 소스 텍스트는,

![@mishana](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515162727/ck8oiu9387edeztkevrd.png)

율리시스<sup>Ulysses</sup>는 마크다운을 지원하는 macOS/iOS 노트 애플리케이션입니다. [얼마 전에 소개했던 베어](https://steemit.com/kr/@mishana/bear-1)<sup>Bear</sup>와도 비슷한 포지션을 가지고 있습니다.

베어가 노트 애플리케이션의 역할에 좀 더 충실하다면, 율리시스는 **글쓰기를 위한 최적의 환경**을 제공하겠다는 철학을 가지고 있습니다. 율리시스를 사용해보면 기능을 추가하는 데 집중하기보다는 기능이 얼마나 완벽하게 애플리케이션에 통합될 지를 고민한 흔적이 여기저기서 보입니다. 이러한 노력 덕분에 율리시스는 글쓰기 애플리케이션으로 많은 인기를 얻고 있습니다.

스팀잇에서 다음과 같이 HTML로 변환되고, 방문자는 웹브라우저를 통해 마크다운 소스가 아닌 렌더링된 웹문서를 보게 됩니다.

HTML 변환된 마크다운 문서

마크다운은 다양한 서식 문법을 지원하고 있습니다. 예를 들어 **강조**는 텍스트에서도 강조처럼 보이고, HTML에서도 <strong> 태그로 변환되어 강조되어 보입니다.

마크다운의 문법과 의미: 제목 문법

하지만 마크다운을 사용할 때 오해해서는 안 되는 것이 하나 있습니다. 마크다운의 문법은 단순히 HTML로 스타일을 입히기 위한 것이 아니라는 점입니다. 예를 들어 마크다운의 문법 중에 #이 있습니다. 샵 문자열을 사용하고 한 글자 띄어쓰면 그 줄은 제목으로 변환됩니다.

# 문서 제목

이 마크다운 텍스트는 다음과 같이 보여집니다.

마크다운으로 변환된 제목 문법

샵을 여러개 사용하면 소제목을 만들 수 있습니다. #은 HTML의 <h1> 태그로 변환되며, ##은 <h2> 로 번환되고, 같은 규칙으로 샵 문자 6개까지 확장됩니다. ######는 <h6>로 변환됩니다.

# 문서 제목
## 작은 제목
### 더 작은 제목
#### 더 작은 제목

이 마크다운 텍스트는 다음과 같이 보여집니다.

마크다운으로 변환된 제목과 소제목 문법들

HTML에서 <h1>은 header의 줄임말로 현재 문서의 제목을 나타낼 때 사용합니다. h뒤에 붙은 숫자가 높을수록 작은 제목을 의미합니다.

마크다운의 서식은 어떻게 보여질지를 결정하는 게 아니라, 해당 구문이나 라인이 어떤 의미를 가지고 있는 지를 나타냅니다. 그리고 그 의미에 따라서 서식(스타일)이 적용됩니다. 이 차이는 중요합니다. # 문법은 글씨 크기를 변경하기 위해서 사용하는 문법이 아니라, 제목이나 소제목이라는 의미를 나타내는 문법이기 때문입니다.

따라서 다음과 같이 생각해서는 안 됩니다.

# 제일 큰 폰트 사이즈
## 제일 큰 폰트보다 조금 작은 폰트 사이즈
### 제일 큰 폰트보다 조금 작은 폰트보다 조금 작은 폰트 사이즈

이러한 차이가 사소하게 보일지 모르겠지만 HTML 문서 상에서는 큰 차이를 가지게 됩니다. 특히 검색엔진에서는 문서를 분석할 때, 구문의 스타일을 보는 것이 아니라 구문의 의미를 가지고 구조를 파악합니다. 예를 들어 어떤 텍스트가 사람 눈에는 제목처럼 보이더라도 <h1> 문법을 사용하지 않았다면 문서의 제목으로 인식되지 않습니다. 반면에 단순히 글자 크기를 키우기 위해서 <h1>을 남발하면 검색엔진에서는 이 문서의 제목을 정확히 파악하지 못 하기 때문입니다. (<h1>은 문서 내에서 표현되는 가장 큰 제목이고, 제목을 명시적으로 나타내기 위해 <title> 태그도 필수적으로 사용해야합니다.)

마치며

마크다운은 매우 매력적이고 강력한 언어입니다. 텍스트만으로도 충분한 표현력을 가질 뿐아니라, 각각의 문법은 문서 안에서 특정한 의미를 가지게 됩니다. HTML로 변환될 때는 이러한 의미를 그대로 유지합니다.

마크다운 문법을 사용할 때는 해당하는 문법이 어떤 의미를 가지고 있는지 한 번 더 생각해보면 좋습니다. 이 글에서는 #(제목) 문법으로 설명했지만, 다른 모든 문법도 명시적인 의미를 가지고 있습니다.

예를 들어 **텍스트** 문법은 어떤 텍스트를 <b>(진하게) 표시하라는 스타일이 아니라, 어떤 단어나 문장을 <strong>강조하라는 의미를 가집니다.

이러한 차이를 인지한다면 구조적이고 의미 있는 마크다운 문서를 작성할 수 있습니다. 이렇게 작성된 문서는 텍스트로 읽을 때도 HTML로 읽을 때도 일관된 의미를 가집니다. 또한 HTML로 변환된 결과를 당장 사람이 볼 때는 차이가 없어보여도 검색엔진은 이 구조를 잘 인지하며 SEO 면에서도 유리합니다. 그리고 잘 구조화된 문서는 인터넷에서 오래 살아남는 컨텐츠의 기본 요건이기도 합니다.

마크다운 문법의 의미를 이해하는 것은 공식 문서를 읽어보는 정도면 충분합니다. 다음에는 다른 문법들에 대해서도 다뤄보도록 하겠습니다.

그럼 즐거운 주말 되시길 바랍니다. 😁

최근에 공개한 글 목록입니다.

글쓰고, 프로그래밍하고, 투자하는 @mishana입니다.