왜 다른 에디터에 붙여넣기를 하면 글이 깨질까?
마크다운 파서 (markdown parser)
모든 문서가 파일로 전송되던 시대가 있었다.
구글 드라이브가 일상으로 파고들기 한참 전의 일상이었다.
실시간으로 동기화되는 문서를 동시에 작업한다는 일은 효율적인 의사소통을 가능하게 해주었다. 빠르게 전달되고, 문서가 깨지거나 버전의 차이로 인해 오해가 생기는 일을 확실히 막아주었다. 그러나 이러한 장점에도 불구하고 비동기적 의사소통이 사라지지 않았다. 아마 앞으로도 사리지지 않을 수 있다. 그 이유는 단순하다. 전세계 모든 사람들이 구글드라이브 사용자라는 보장이 없기 때문이다.
우리는 각자 선호하는 에디터가 있다. 브런치, 티스토리, 네이버를 좋아할 수도 있고, 개인 컴퓨터에 저장하는 한글문서나 ms word 에디터를 고집할 수도 있다. 다른 사람에게, 특히 이제 막 거래를 맺은 초면의 상대방에게 다짜고짜 구글 (혹은 동기화를 제공하는 다른 어떤 에디터)을 사용하자며 아이디를 내놓으라고 할 사람은 많지 않을 것이다. 물론 정중히 물어볼 수야 있을 테지만 상대방이 응하지 않을 수도 있고, 사실상 계약서나 중요한 거래 서류들은 우편이나 이메일로 주고받는 것이 자연스러운 관례이다. 즉, 모든 서류가 동일한 에디터 안에서 작성되고 오고가기란 불가능하다는 것이다.
그렇다면 웹사이트는 어떻게 모두에게 동일한 내용을 보여주는 걸까?
웹사이트는 html 을 통해 이 어려운 문제를 해결했다! 웹사이트를 이루는 html 은 하이퍼 텍스트 마크업 랭귀지라고 해서 마크, 또는 태그라는 이름의 기호체계로 각각의 문장을 감싸 해당 문장의 역할과 보여줄 방식을 정의한다. 가령, 이런식이다.
<h1> 가장 커다란 문장 </h1>
<h2> 두번째로 커다란 문장</h2>
<strong>굵게 강조표시할 문장</strong>
적절한 태그로 문장을 감싸서 컴파일을 시켜두면, 익스플로러, 크롬, 파이어폭스 등의 브라우저에서 각각의 태그(마크)들을 인식하고 태그들의 역할과 디자인에 맞게 표시하여 유저에게 보여주는 방식이다. 그런데 웹사이트에는 사이트 제작자들이 작성하는 내용 말고도 사용자들이 직접 등록한 포스트도 존재한다. 사용자들은 에디터 상에서 자유롭게 글을 작성하지만 어떤 태그로 문장을 감쌀지는 조금도 고민하지 않아도 된다. 대신 미리 준비된 버튼을 활용해 글을 꾸밀 수가 있다. 강조하고 싶은 문장은 드래그한 후 'B' (굵게) 버튼을 누르거나 폰트 크기를 변경하는 방식이다. 미리 준비된 이 버튼들이 입력받은 내용을 인식해서 <strong> 태그나 해당 폰트크기를 가진 태그로 변환시켜준다. 물론 웹개발자가 매번 에디터 기능을 제작하는 것은 아니고, 사용자가 내용만 작성하면 태그변환을 시켜주는 다양한 에디터들이 존재한다. 이 에디터들을 사이트에 삽입만 하면 그럴듯한 커뮤니티 기능을 가진 웹앱 또는 웹사이트를 만들 수가 있는 것이다.
그렇지만 에디터끼리는 서로 호환이 안되던데?
에디터는 인터넷이 발달하는 동안 큰 역할을 해냈지만, 문서 공유가 활발해지면서 숨어있던 한계가 드러났다. 이쪽 에디터에서 작성한 글을 다른 에디터 창에 붙여넣을 때에 호환이 되지 않아 문서가 손상되는 경우가 발생한 것이다. 이는 각각의 에디터가 정해둔 변환규칙이 각자 다르기 때문에 발생하는 문제였다. 더 심각한 경우도 발생했다. 어떤 문서(가령 .hwp)는 그에 맞는 뷰어 없이는 아예 열어볼 수조차 없었던 것이다. (한글문서를 맥에서 여는 것은 한동안 불가능한 일이었다. 하지만 지금은 맥용 한글뷰어가 생겨서 열어볼 수 있게 되었다. 작성 및 수정도 할 수 있는 맥용 한글 프로그램도 나왔다고 하는데 아직 써본 적은 없다)
이 상황을 타개하기 위해 영웅처럼 등장한 언어체계가 바로 마크다운이다. 마크다운 언어는 특수문자를 활용한 간단한 문법체계를 통해 텍스트를 html 문서로 변환해주는 기능을 갖춘 언어이다. 사용자들 입장에서는 문법체계를 외워야 한다면 부담이 될 수 있지만, 사실 우리가 포스트를 꾸미기 위해 사용하는 기능들은 별로 많지 않다.
가령 이러한 폼이 있다고 생각해보자.
이모티콘을 제외하면 우리가 글을 쓸때 문장을 꾸미는 방법은 강조와 줄바꿈이다. 행간을 넓혀 가독성을 높이고, 제목을 본문보다 크고 굵게 표시하고 그 사이에 소제목을 넣는 것이 가장 기본적으로 필요한 기능이라고 할 수 있다. 마크다운 문법체계는 이러한 기본적인 꾸밈방식이라고 생각하고 접근하면 이해하기 쉽다.
# 가장 큰 글씨
## 두번째로 큰 글씨
### 세번째로 큰 글씨
**굵은 글씨**
*기울인 글씨* (브런치에서는 이탤릭체를 제공하지 않는 모양이다)
- 첫번째 항목
- 두번째 항목
- 세번째 항목
어떤 나라의 언어를 사용하든 인터넷 사용자라면 익숙할 특수문자 몇개를 통해서 간단하게 텍스트를 html 태그가 포함된 문서로 변환할 수 있다. 예시로 폼을 작성해보면 다음과 같다.
자세히 보면 위에서 정의한 특수문자 문법체계에 따라 화면에 표시되는 것을 볼 수 있다. 동일한 마크다운 규칙을 가진 에디터라면 다른 에디터에서 작성하던 내용을 가져와서 붙여도 문장 앞뒤로 붙은 특수문자 기호가 유지된다. 물론, 이미 글을 발행한 후 화면에 렌더된 이후의 내용을 복사하면 특수문자는 같이 복사되지 않는다. 그건 이미 html 태그를 통해 사람이 이해할 수 있는 자연어로 변환이 완료된 문서이기 때문이다. 만약 미리보기와 날것으로 보기(?) 를 둘다 제공한다면 이미 발행된 문서도 원본 복사가 가능하긴 할 것이다.
한편, 마크다운은 아직까지 두가지 약점을 가지고 있다. 아직 보편화되지 않았고, 그 이전에 먼저 통일된 문법체계가 자리잡지 않았다는 점이다. 위의 사진에서 핫핑크로 예쁘게 색칠된 '마크다운 파서 (markdown parser)' 라는 글씨는 다른 마크다운 에디터에 가져가면 색을 잃을 것이다. 왜냐하면 이 폼의 마크다운 문법은 강력하게 정의된 문법체계에 입가한 것이 아니라, 대체로 통용되는 마크다운 문법체계를 따르는 react-markdown 라이브러리를 설치한 다음, '##' (h2) 와 '###' (h3)에 대해서만 핫핑크(#FF1493) 컬러코드로 색상을 재정의했기 때문이다. 따라서 이 글씨는 h2 에 대해 검정색으로 정의한 에디터에서는 검정색으로 표시될 것이다. 자유도가 높다는 점은 마크다운 에디터의 커다란 장점이지만, 만에 하나 마크다운을 모든 에디터에서 보편적으로 제공하고 호환성을 높이고자 한다면 먼저 통일된 문법체계를 정해서 기준으로 삼을 필요가 있다.
상상해보자.
네이버 에디터에 작성하던 내용을 그대로 긁어다가 브런치에 붙여넣으면 제목의 폰트, 크기, 굵기, 이미지와 영상의 위치까지 모두 동일하게 보이는 미래를. 모든 에디터에 기본적으로 마크다운 기능이 적용되어있어서, 이곳에서 작성한 파일을 다른 곳에서 열었(붙여넣었)을 때 완전히 동일한 내용으로 변환되는 미래를!
Photo by Susan Yin on Unsplash
TMI 1.
마크다운을 이용한 문서작성에 관심이 많은 분들에게는 노션 ( https://www.notion.so/ ) 을 추천한다. 마크다운 기반의 워크스페이스를 제공한다.
TMI 2.
본문에 삽입된 검정배경에 핫핑크 폰트가 삽입된 마크다운 폼은 내가 입사해서 처음으로 만든 거라 매우 애정이 가는 녀석이다 :)
