VitePress로 만드는 목업 책 - 시집

「글을 긷자」 시집 집필을 위한 초기 환경 조성

Mar 6. 2025

이번 화를 준비하면서 문득 든 생각은 ‘목표한 분량이 있다면 진척률도 산출해 낼 수 있지 않을까?’ 였습니다. 역시나, 클로드에 원하는 것을 이야기하니 아래와 같이 바로 적용할 수 있는 코드들을 거침없이 짜냅니다.

VitePress 집필 진척률 추적기

VitePress 통합 및 파일 분석 플러그인

VitePress 사용 예시

요청

더미 텍스트로 가득한 마크다운 문서로 구성된 VitePress에, 기존 더미 텍스트 문단 및 글자의 총합과 인식 가능한 문단의 문단 개수 및 글자의 총합을 갖고 현재 내가 집필 중인 책의 진척률을 알 수 있도록 했으면 좋겠어. 마크다운 문서 기반의 집필 환경을 만들고 있는데, 거기에 진척률을 표시할 수 있는 구성요소가 있으면 좋겠다 싶은 거지. 일반 Vue.js 문법이나 VitePress 환경 내에서 구현이 까다롭다면, Nuxt를 붙이는 방법도 고려 중이야.

안타깝게도, 적용 시도 중의 에러로 더미 시집에 진척률 확인을 위한 UI가 추가되지는 못했습니다. 원리는 생각보다 간단했습니다. 문단 중 ‘내어수는데 사찰팠을’, ‘더미 텍스트’, ‘샘플 텍스트’, ‘lorem ipsum’, ‘dolor sit amet’ 이와 같은 패턴을 지닌 텍스트를 포함하는 것과 그렇지 않은 것의 비율을 비교하기만 하면 됐습니다. 이런 작은 시도도 프로젝트가 완료되면 쓸 만한 출판 ERP 환경이 하나 나왔으면 좋겠다는 막연한 바람의 실현 가능성을 높일 수 있겠다 정리되니 프로젝트 진행에도 속도가 붙는 듯합니다.
21화를 위한 업데이트에는 100편의 더미 시집을 위한 구성이 적용되어 있습니다.

목업 책 - 100편의 더미 시집

추가 문서 묶음의 확인

로컬에서는 아래 경로로 추가된 목업 책의 메인 화면을 보실 수 있습니다. 포트는 다를 수 있습니다. 제 경우에는 sample-docs가 5173 포트에서 먼저 구동 중이라, 추가된 폴더의 것은 5175 포트에서 구동되고 있습니다.

http://localhost:5175/dummy/poem-100pieces/

프로젝트 저장소와 연결된 GitHub Pages 경로로도 보실 수 있습니다.

https://enchic.github.io/gitzza-plaza/dummy/poem-100pieces/

폴더 및 파일 구성

앞서 저장소의 루트에 dummy라는 폴더가 추가됐습니다. 그리고 그 아래로 100편의 시집을 위한 목업을 위해 poem-100pieces 폴더가 생성되어 있고, 이 안의 구성은 sample-docs의 것과 비슷하다고 정리하시면 됩니다. 각 챕터에는 총 20편의 시를 위한 마크다운 문서가 들어 있으며, 챕터 5까지 하면 총 100편입니다.

./dummy/poem-100pieces/
├─ chapter1/
│ ├─ index.md
│ ├─ episode1.md
│ ├─ episode2.md
│ ├─ episode3.md
...
├─ chapter5/
├─ index.md
├─ cover.md
├─ table-of-contents.md

사용법

각 마크다운 문서는 의미 없는 텍스트로 이루어진 문단들로 채워져 있습니다. 현재, A4 기준으로 생성된 출력용 PDF 문서는 총 115페이지입니다. 추가로 매 시편을 새 페이지로부터 시작하도록 하는 처리가 반영되고 각 시편의 길이를 다듬으면 샘플 PDF 문서의 길이는 변동이 있겠습니다.

1. 목표한 분량에 맞게 챕터의 개수 및 각 챕터가 포함하는 문서의 개수를 조절합니다.

2. 저장소의 루트에서 아래 명령어로 PDF 파일 생성 후 총 페이지수를 확인합니다.
npm run export-pdf:dummy:poem100pieces
생성된 파일 위치는 다음과 같습니다. 파일명은 명령이 실행된 날짜와 시각으로 자동 지정됩니다.

./dummy/poem-100pieces/dist-pdf/vitepress-20250306-125612.pdf

3. 목표한 분량이 정해지면 의미 없는 텍스트의 문단들을 계단이나 보도블록 삼아 하나씩 밟아[지워] 나가면서 본인의 이야기로 채우시면 됩니다.

데이터베이스로서의 마크다운 문서

현재 제가 오픈소스로 진행 중인 프로젝트는, 세상에 나오는 날이 요원하기만 한 제 작품을 위한 환경을 만드는 일로부터 시작되기도 했지만, 오랫동안 UI/UX 개발자로서 일을 해 오면서 배우고 익힌 것들을 최대한 적용하면서 내어 놓는 중요한 산출물입니다. 그 과정에서 희한하게도, 별생각 없이 써 오던 기술이나 익숙한 개념에 대한 새로운 정리가 이루어지기도 합니다.

텍스트 데이터를 다룬다고 할 때 문단 정보를 DB화 한다면 어떻게 하는 것이 좋을지 잠깐 고민했던 적이 있습니다. 스프레드시트의 한 셀에 문단 정보가 들어가도록 해야 할지 각 문장이 한 셀에 들어가도록 하는 것이 좋을지와 같은 고민이었는데, 우선은 아래와 같은 정리로 고민이 마무리됐습니다.