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

in kr •  4 months ago

@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 면에서도 유리합니다. 그리고 잘 구조화된 문서는 인터넷에서 오래 살아남는 컨텐츠의 기본 요건이기도 합니다.

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

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


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


576C3781-B0F1-4BAE-879D-ABAC4E47520B.png
글쓰고, 프로그래밍하고, 투자하는 @mishana입니다.

웹사이트 | 트위터 | RSS | Feedly에서 구독

  • 이 글이 도움이 되셨다면 리스팀, 팔로우 부탁드려요 :)
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  Trending

스스로 홍보하는 프로젝트에서 나왔습니다.
오늘도 좋은글 잘 읽었습니다.
오늘도 여러분들의 꾸준한 포스팅을 응원합니다.

첫 포스팅을 앞두고 우선 마크다운과 친해져야겠단 생각하고 창을 닫았었는데 ^^; 도움되는 글 잘 봤습니당!~ 선팔봇 후댓 달고 갑니다 :o

·

반갑습니다! 요즘에는 마크다운 하나 잘 익혀두면 쓸모가 많죠 :)

맞아요 예전 블로그 같았으면 html 모드로 바꾼다음에 태그를 넣어야 되었을 텐데 여기서는 저렇게 바로 명령어를 넣어주면 보여진다는게 편리한 것 같습니다. :)

·

마크다운 참 편리하죠. 개인적으론 스팀잇에서 마크다운을 지원하는 것도 스팀잇을 선택한 큰 이유 중 하나입니다 ㅎㅎ

글씨 크기가 아닌 제목의 의미군요. 팔로우 리스팀 합니다. ^^

·

반갑습니다! 사소해보이지만 그 차이가 좋은 문서를 만드는데 중요한 역할을 하는 것 같습니다 :)

마크다운에 대해서 잘 배우고 갑니다. 이 글을 읽기전에는 샵이 글자크기만 의미하는 줄 알았습니다. 일상글을 주로 작성하는 편이라 지금껏 불편함은 없었습니다만.. 구조적이고 논리적인 글을 쓰기 위해서는 글 내용을 분석, 검색하는 봇을 위하여 제목에만 샵을 넣어야겠네요.

·

오래 지난 글에 댓글이 달리니 반갑네요 ;) 도움이 되셨길 바랍니다!