VitePress로 만드는 목업 책 - 매거진

「글을 긷자」 매거진 제작을 위한 초기 환경 조성

Mar 13. 2025

저에게 ‘웹문서 기반의 인쇄물 제작’에 대한 깊은 관심이 생긴 것은, 당연하게도 제가 오랫동안 해 오던 일이 웹 문서를 만드는 것이었기 때문이라 짐작됩니다. ‘내가 하는 일도 일종의 편집 디자인에 속하겠다’고 정리를 해 두고 있으니, 매번 서점을 갈 때마다 하는 고민은 ‘어떤 책을 볼까?’ 보다는 아래와 같은 것이었습니다.

이 레이아웃은 웹 문서로 충분히 구현이 가능하겠네!

비정형 오브젝트 주변으로 흐르는 텍스트 이것도 이제 CSS로 처리 가능하잖아? 하지만 난관이 좀 있겠어.

와.. 문제집 수험서 이런 데 쓰인 레이아웃을 템플릿화 하는 것은 엄두도 못 내겠구먼.

현재 제가 진행 중인 프로젝트가 실제 책 제작에 쓰인다거나 프로젝트 적용 관련 사업이 생긴다면 모르겠지만, 다양한 레이아웃을 위한 템플릿 코드가 프로젝트에 담기기에는 아직 많은 시간이 필요합니다. 물론, AI를 활용한다면 충분히 시간 단축도 가능하겠지만, 지금 제가 하고 있는 것들은 그렇게 AI로 무언가를 하기 위한 사전작업인 것으로 정리를 해 두셔도 좋겠습니다. 산문을 제외하고는 정말로 다양한 형식의 책들이 저마다의 특징과 전달력을 갖춘 레이아웃을 사용해 콘텐츠를 제공하고 있습니다. 그런 제각각의 레이아웃도 규격화될 수만 있다면 편집 디자인에 들어가는 시간과 노력을 줄일 수 있겠다는 접근 또한, 어쩌면 이 프로젝트의 시작에 크게 영향을 미쳤는지도 모르겠습니다.

22화를 위한 업데이트에는 매거진 제작을 위한 초기 구성이 적용되어 있습니다. 매거진에도 역시나 다양한 레이아웃이 존재하긴 하지만, 한 페이지 전체가 그림으로 꽉 차 있는 경우도 있기도 하고 템플릿 작업을 한다면 매거진으로부터 시작해도 되겠다는 생각이 들었습니다. 여러 가능성들을 담기 전에 우선은 표지와 목차부터 시작하기로 했습니다. 레이아웃 참고 대상 발행물의 저작권을 신경 쓰지 않을 수 없어, 아직은 템플릿 작업을 위해 특정 매거진을 선택해 두지는 않았습니다.

목업 책 - 매거진

추가 문서 묶음의 확인

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

http://localhost:5176/dummy/magazine/

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

https://enchic.github.io/gitzza-plaza/dummy/magazine/

index.md 문서의 모습. 매거진 운용을 위한 대시보드로 활용될 수도 있습니다.

cover.md 표지 문서

table-of-contents.md 목차 문서

Cursor 에디터에서 프로젝트 폴더를 불러와 매거진의 cover.md 문서를 편집하는 모습

폴더 및 파일 구성

앞서 저장소의 루트에 dummy라는 폴더가 추가됐습니다. 그리고 그 아래로 매거진 목업을 위해 magazine 폴더가 생성되어 있고, 이 안의 구성은 sample-docs의 것과 비슷하다고 정리하시면 됩니다.

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