똑똑하게 데이터 9탄 : 태그

노션 내보내기는 의사결정의 속도와 정확성 중 하나를 골라야

업무를 하면서 새로 익히는 IT 용어가 많습니다. 저는 이것들을 노션에 정리하고 있습니다. 영어 단어이든, 기술 용어이든 잘 모르는 단어를 검색했을 때, 오히려 뜻에 적혀있는 단어가 복잡하고 어려운 경우 좌절감을 느꼈던 적이 있습니다. 그러나 이제는 노션의 데이터베이스를 이용해서 용어 사전을 구성할 때 ‘출처‘, ‘설명’ 등 텍스트로 된 컬럼 외에도 ‘예시’라는 이름의 미디어 컬럼을 함께 관리합니다. 헷갈리는 개념을 비교해 주는 표 이미지 파일을 넣을 때도 있고, 해당 용어를 풀이한 기사의 url을 포함시키기도 합니다.

같은 콘텐츠를 어떻게 내보내기 할 것인가

노션에서 제공하는 3가지 옵션

용어가 몇 개가 쌓인 후 내보내기(export)를 하려고 하니, 총 3가지 옵션이 뜹니다.

1. PDF,

2. HTML,

3. Markdown & CSV

https://www.notion.so/ko-kr/help/export-your-content

아쉽게도 노션 도움말 페이지에서는 3가지의 내보내기 기능을 데스크톱 앱, 모바일 앱에서 하는 경우 주의사항만 소개하고, 각각 옵션이 무엇인지, 어떻게 다른 형태인지 설명은 생략되어 있습니다.

마크다운과 마크업의 Trade-Off,
가볍게 VS 풍부하게

우선 세 번째 옵션은 왜 "&" 즉 두 가지가 함께 적혀있는 것일까요? 노션 도움말 센터에 따르면, 데이터베이스가 포함된 해당 페이지는 CSV로, 그 하위페이지는 Markdown(노션 데이터베이스에서는, 각 행마다 하나의 페이지가 구성됩니다.)으로 내보내는 옵션이라 합니다. 다음은 위키피디아에서 검색한 마크다운 뜻입니다.

마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다.

실제로 노션에서는 '/'뒤에 명령어를 치는 단축키가 잘 만들어져 있지만, 이 단축키를 입력했을 때 호출되는 것들은 아래에 보시듯이 Markdown 스타일 문법입니다. 내보내기 옵션이 아니더라도, 노션에 데이터를 입력하는 단계에서도 #, ## 을 붙여 제목(Heading 1, Heading 2) 서식으로 바꿀 수 있고, * 또는 - 뒤에 띄어쓰기를 하면 바로 글머리 기호 목록(Bulleted List)을 만들 수 있습니다.

https://www.notion.so/ko-kr/help/keyboard-shortcuts

그럼 HTML은 어떨까요? 위 Markdown과 달리 노션 데스크탑 앱에서 보던 동일한 화면 구성이며, 필터 옵션, 이미지가 모두 그대로 보입니다. 앞서 '예시' 컬럼에 추가된 외부 기사 링크를 클릭하니 해당 웹사이트로 이동도 가능합니다. 다음은 HTML에 대한 설명입니다.

HTML (Hypertext Markup Language, 하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 콘텐츠의 여러 부분들을 감싸고 마크업 합니다. tags는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다

웹페이지에 포함된 단순한 텍스트 외에도 이미지, 하이퍼링크, 동영상 등 여러 가지 미디어 요소(elements)와 다양한 서식을 지정된 태그(tags)를 통해 보여주는 마크업 언어라고 합니다. 각 요소의 서식이나 위계를 태그로 표시(mark up)해준다는 측면에서 마크업이라고 합니다.

그럼 저의 용어 사전 데이터베이스 하위의 Cookie라는 페이지를 각 Markdown으로, HTML로 내보내기했을 때 어떻게 보이는지 가져와보겠습니다.

출처 : 본인 / 용어 사전 / Cookie (좌 : Markdown , 우: HTML)

왼쪽의 경우 용어 사전(CSV) 외에 Markdown으로 내보내기가 된 하위 페이지 중 하나를 열어보았습니다. 필터링된 카테고리명(Category), 수정된 날짜(Updated On) 모두 일반 텍스트처럼 표기되었습니다. 제목은 # 처리가 되었고요. 이 간단하고 가벼운 문법은, 언제든지 실제 이미지와 하이퍼링크 등 미디어 파일을 포함한 다른 문법으로 변환될 수 있습니다.

오른쪽의 경우 용어 사전 자체를 HTML로 변환한 것 중에 쿠키(Cookie)에 해당한 값입니다. 각 항목이 컬럼에 들어가 있는 만큼 <td>와 </td>라는 셀 구분 태그가 곳곳에 보입니다. 카테고리 컬럼은 색깔이 포함된 옵션 필터이다 보니 selected-value select-value-color-yellow라는 타입(class)에 속합니다. 수정된 날짜의 경우 <time> </time> 태그가 포함되어 있습니다. 그리고 실제로 클릭하면 노션의 해당 페이지로 넘어가는데, 그것이 가능한 이유는 <a> 태그 즉 하이퍼링크가 포함되어 있기 때문입니다.

PDF보다는 가볍겠지만, 분명히 HTML 마크업 문법은, Markdown보다는 복잡하고 풍부한 데이터 형식과 서식을 포함하고 있습니다.

마크다운 vs 마크업(HTML) 결정은
의사결정에서 속도 vs 정확성 에 대한 질문

세 가지 옵션 중에 PDF가 가장 노션 원본 파일과 기능적으로나 미관적으로나 유사합니다. 하지만 해당 파일은 배율에 따라 서식이 깨지기도 하고, 이미지 몇 개만 포함되어 있어도 용량이 많이 큽니다. 그다음으로 HTML이 풍부하게 여러 미디어타입을 지원하고, Markdown이 압축적이지만 가볍습니다. 대신 파일명만 나오는 상황에서 어떤 값인지 상상할 수는 없습니다.

노션은 브라우저, 데스크탑 앱, 모바일 앱에서 단축키뿐 아니라 여러 템플릿, 버튼, 링크/백링크 등 빠르게 데이터를 입력하고 편집을 용이하게 합니다. 특히 ChatGPT를 활용해 텍스트 자동완성 기능까지 생긴 만큼 그 매력도는 커집니다. 그러나 이를 저장하고 공유하는 과정에서 - 그것이 노션 링크가 아니라 내보내기 기능을 통해 파일로 변환될 경우 - 꼭 빠름, 간편함이 답이 아닐 수도 있다는 생각이 듭니다.  

빠르고 정확하게 커뮤니케이션하는 것이 가장 이상적이지만, 빠르기 위해서 간단하게 이야기해야 할 수도, 정확하기 위해서 풍부하고 자세하게 이야기해야 할 수 있기 때문입니다.

그리고 이것은 노션뿐 아니라, PPT(키노트), 워드(한글) 등 모든 문서에 해당하는 이야기이기도 합니다.

(노션을 사랑하는) 져니박 씀.

커버 출처 : https://www.notion.so/ko-kr/product