by
Jul 18. 2024
전자책 출판을 위한 VitePress - 목차 만들기
「글을 긷자」 마크다운 문서를 CSS로 드레싱
자연스럽게 [바이트프레스]라고 소리 낸 VitePress는 [ví:tpres, 비:트프레스]로 읽어야 합니다. 지금은 VuePress(뷰프레스)의 차기 버전 정도로 간단히 정리하셔도 됩니다. 데이터베이스의 연결 없이 정적인 콘텐츠로 웹사이트를 운용할 수 있다는 장점이 있습니다.
Node.js가 설치되어 있다면, 저장소에서 제공되는 압축파일을 다운로드하여 압축을 풀고 다음 명령어를 순차적으로 실행하면 바로 이용할 수 있습니다. 물론, `git clone` 명령어로도 저장소의 패키지를 이용할 수 있습니다.
$ npm install
$ npm run docs:dev
아래 명령어로는 표지와 전체 문서를 각각 PDF 문서로 얻을 수 있습니다. 표지는 문서 내에 여백을 모두 없앤 설정이 적용되고 있어서, 표지 외의 문서를 얻는 것과 별개의 명령어로 사용할 수 있도록 준비되어 있습니다. 이렇게 얻어진 두 개의 문서는 별도 처리를 통해 한 개로 합쳐질 수도 있습니다.
$ npm run export-pdf-cover
$ npm run export-pdf
오래된 웹 문서 코딩 방식 이야기
웹 시장이 막 성장할 무렵에는 웹 브라우저에서 CSS를 충분히 지원하지 못했습니다. 웹 브라우저의 종류도 물론 지금보다 훨씬 적었고, 그 당시 인터넷 익스플로러의 국내 시장 점유율은 매우 높은데 반해 CSS 지원이 충분하지 않아 발생하는 문제들이 꽤 많았습니다. 그래서, 링크를 꾸미고 폰트 색상을 바꾸는 정도로만 CSS가 사용되었습니다.
공교롭게도 그래서 생긴 작업방식이, 벽돌을 쌓듯이 <table> 요소로 작성된 콘텐츠들을 쌓거나 <table> 요소를 중첩 사용해 몬드리안을 흉내 내는 것이었습니다. 디지털 데이터를 다루는 작업 환경에서 실물을 다루듯 콘텐츠로 벽돌 쌓기를 하다니, 돌이켜봐도 참 역설적인 상황이 아닐 수가 없습니다.
하지만, 요즘에는 그럴 필요가 없습니다.
CSS 이야기
요즘의 AI 서비스 등장에 비하면 정말 별것 아닌 것처럼 느껴지기도 하지만, 국내에 웹 표준이 막 언급되기 시작하면서 웹 표준을 준수한 웹 사이트 제작은 시장에 새로운 흐름을 만들어 냈고 많은 일자리를 창출해 냈습니다. 그 과정에서 영향력을 키운 언어 중 하나가 CSS였습니다. 벽돌 쌓기 대신 HTML 요소와 CSS 선택자의 연결로 논리적인 웹 문서 작성이 시작된 것입니다.
요즘의 AI 기술도, 발전을 거듭한 표준 기술이 있어 그 수많은 데이터와 사람 사이의 긴밀한 연결이 가능해졌다고 지금 정리해 봅니다. 마크다운으로 문서 작성을 한다는 접근은, 그러한 역사 위에 우리의 이야기를 또는 우리 자신들을 정돈된 데이터로서 네트워크에 올려두는 행위로 정리할 수도 있겠습니다.
CSS에서는 현재 아래와 같은 것이 가능합니다.
CSS 문서 내 변수 사용
CSS 문서 내 전용 함수 사용
HTML 문서에 CSS 선언으로 콘텐츠 생성
CSS 선언으로 HTML 요소에 배경 이미지 중복 적용
HTML 요소의 배경에 그러데이션 적용
HTML 요소의 클립과 마스크 처리 (PDF 문서에도 반영되는지 확인 필요)
CSS 문서 작성에 전처리 기술 적용으로 단순화된 문법 사용
운 좋게도, 출판용 문서를 만들 때에도 이러한 가능성들을 적용할 수 있습니다.
마크다운 문서와 CSS로 목차 만들기
이번화에서 만든 목차 문서는 지난번의 표지와 다르게, 마크다운 문법이 차지하는 비중이 높습니다. 그리고, Frontmatter, HTML, VitePress 문법이 조금 적용되었습니다. 별도의 폰트 설정이 이루어지지는 않았는데, VitePress 페이지로 확인되는 결과와 PDF 문서로 확인되는 결과에 크게 차이가 없는 것이 확인됩니다.
일반 텍스트로만 이루어진 마크다운 문서가 아래와 같은 모습을 갖출 수 있는 이유 중 하나가 바로 CSS가 관여하기 때문입니다.
VitePress 상의 목차 페이지
PDF 문서로 변환된 목차 페이지
VS Code에서 목차 문서를 열어둔 모습작업 절차
Frontmatter 선언으로 VitePress의 doc 레이아웃이 적용되도록 설정합니다.
목차 전용의 스타일 적용을 위해 전용 CSS 문서를 호출하는 HTML 선언을 추가합니다.
목차의 스타일링을 위해 추가해 둔, 전용 컨테이너를 사용하겠다고 선언합니다.
들여 쓰기와 숫자가 사용된 마크다운 문법으로 목차 내용을 작성합니다.
필요에 따라 CSS를 수정해서 원하는 디자인 결과를 얻습니다.
