🍄:So-You-Decided-To-Make-A-Zine-In-Octomode

그래서, octomode로 진(zine)을 만들기로 했다고요

so, you decided to make a zine in octomode

using octomode to make a zine about making a zine
→ 진을 만드는 진을 만들기 위해 octomode 사용하기

목차

태경 : 링크와 제목 연결하기

• 이 진은 무엇에 대한 것인가?

• octomode와 촉수처럼 연결되기

• octomode 버튼들

• PDF 파일명 바꾸기

• 표지의 제목 바꾸기

• 콘텐츠 추가하기

• PDF 확인하기

• CSS로 이미지 크기 설정하기

• 웹 인스펙터로 디버깅하기

• PDF 저장 준비하기

• PDF를 만들고 나면 무엇을 할까?

• octomode는 실제로 어떻게 동작할까?

• (octomode 말고) 다른 방법들도 가능하다!

이 진은 무엇에 관한 것인가요?

what’s this zine about?

이 진은 웹 브라우저(파이어폭스, 크롬/크롬 등)에서 PDF를 편집할 수 있는 공동 편집 공간인 옥토모드(octomode)를 이용해 진을 만드는 방법을 안내하는, 마치 뱀이 꼬리를 물고 있는 듯한 가이드입니다.

그리고 더욱 흥미로운 사실은, 이 진 역시 옥토모드로 만들어졌다는 것입니다!

getting tentacular with octomode

Octomode는 웹 브라우저에서 PDF를 공동으로 제작할 수 있는 웹 기반 출판 환경입니다.
다양한 유형의 글쓰기(편집, 기술)가 같은 공간에서 이루어집니다.

문어의 다중 중심적이고 촉수처럼 뻗어나가는 인지 능력에서 영감을 받아,
글쓰기와 디자인의 인위적인 경계를 허물 수 있는 공간을 상상했습니다.

글쓰기, 편집, 디자인 작업을 하나의 환경에서 동시에 진행할 수 있으며,
형식이 내용에 영향을 미치고 그 반대의 경우도 가능합니다.

Octomode는 CC(creative crowds) 서버에서 사용할 수 있으며,
현재 Manetta Berends와 Simon Browne이 관리하고 있습니다.

• https://cc.practices.tools

이용 약관을 읽어보시고 동의하시면 출판물을 캘린더에 추가해 주세요.

• https://cc.practices.tools/pad/p/cc-conditions

CC 서버에서 octomode를 사용하려면 아래 주소로 이동해요.

• https://cc.practices.tools/octomode

로그인 정보가 필요하며, 신뢰 네트워크 안에서만 공유됩니다(지인에게 요청).

로그인 하면 다음과 같은 화면이 보여요.

octomode 작업 환경의 이름을 입력(예: my cool zine)하고, open 클릭

octomode buttons

octomode 환경을 열면 브라우저 우측 상단에 여러 버튼이 표시돼요.

• 콘텐츠

• 스타일시트

• HTML 미리보기

• PDF 미리보기

각 버튼은 octomode의 다른 영역을 열어줘요.
작업하면서 이 영역들을 계속 오가게 됩니다.

먼저 pad 버튼부터 살펴봐요.

pad

• pad 버튼을 누르면 Etherpad가 열림.

• 여기서 HTML 또는 Markdown으로 콘텐츠 작성 가능.

• 이 가이드에서는 Markdown 사용

기본 예시:

# 제목 1
## 제목 2
### 제목 3
#### 제목 4
**굵은 글씨**
*기울임*
[링크 텍스트](https://mycoolwebsite.com)
![이미지 설명](https://mycoolwebsite.com/image.jpeg)

stylesheet

• stylesheet 버튼을 누르면, CSS를 작성하는 Etherpad가 열려요.

• CSS는 문서의 스타일을 정의해요.

각 규칙은

• 선택자(selector)

• 속성(property)

• 값(value) 으로 구성돼요.

예시: 전체 문서를 고정폭(monospace) 글꼴로 설정하기

이를 위해 font-family 속성을 body 선택자에 적용합니다.

body {
  font-family: monospace;
}

html

HTML(HypeText Markup Language)은 웹의 기본 구성 요소로, 웹페이지의 구조를 정의해요.

html 버튼을 누르면 octomode 문서가 웹페이지로 어떻게 보이는지 미리 확인할 수 있어요.

pdf 미리보기

pdf 버튼을 누르면 표지와 좌·우 페이지가 포함된 PDF 미리보기를 볼 수 있어요.

• 단, 브라우저 미리보기일 뿐이며 실제 결과는 PDF를 저장해야 정확히 확인 가능.

• 이 문서 뒷부분에 있는 PDF 저장 준비 섹션에서 이에 대한 자세한 내용을 확인할 수 있습니다.

이제 파일명 변경, 표지 제목 변경, 제목·이미지·텍스트 추가를 해볼 차례.

PDF 파일명 변경하기

콘텐츠 pad 상단에는 메타데이터 블록이 있어요.
제목 기본값은 octomode, 언어 기본값은 en으로 되어있어요.

• 여기서의 title은 PDF 파일명에만 사용되고, language는 하이픈 처리에 영향을 줍니다.

• 메타데이터 블록에는 반드시 앞뒤에 ---가 있어야 하며 그 앞에는 어떤 텍스트도 있으면 안돼요.

예시: 메타데이터 변경

---
title: 서버-자파리 (태경 : 나중에 하이픈 없이 되는지도 살펴보기)
language: ko
---

PDF 미리보기가 깨질 경우 이 블록이 정확한지 먼저 확인할 것.

표지 제목 바꾸기

표지에 표시될 제목을 바꾸려면 해당 섹션으로 스크롤한 뒤, 텍스트를 원하는 제목으로 변경하면 돼요.

예시: 표지 제목 변경

# my cool title { #title }

자, 하나씩 살펴보죠.

• 먼저 해시 기호(#)가 하나 오는데, 이 기호는 해당 텍스트를 heading 요소(제목 요소)로 만듭니다.

• 그 다음 #title 이 오는데, 이는 Octomode에서 "title"이라는 고유 식별자(id)를 부여하는 데 사용하는 마크다운 구문입니다.

정리

• # → heading 1

• #title → Octomode에서 사용하는 id 지정 문법

이제 CSS를 사용하여 이 제목을 다른 헤드라인 텍스트와 다르게 스타일링할 수 있습니다.

h1#title {
  font-size: 400%;
}

콘텐츠 pad에 몇 가지 항목 추가하기

메인 섹션 안에 제목 1을 하나 더 추가해 보겠습니다.

# 이 텍스트는 제목 1

마크다운에서 이미지 링크 만들기

![이미지 캡션](https://path/to/the/URL/image.jpeg)

위 예에서 이미지 캡션은 이미지 하단에 표시되는 텍스트를 나타내고,
https://path/to/the/URL/image.jpeg는 온라인에 호스팅된 이미지의 URL을 나타냅니다.

• 대괄호: 이미지 캡션

• 괄호: 이미지 URL

• 이미지 링크는 대괄호 앞에 느낌표 ! 반드시 필요해요.

다음으로 이미지 아래에 다음 텍스트를 추가해 봅시다.

PDF 파일을 만들었는데, 이걸 책자로 만들려면 어떻게 해야 하나요?

---

PDF 확인해보기

pdf 버튼을 눌러 변경사항 확인해보기

• 이미지가 페이지 밖으로 튀어나가는 문제 발생했는데, 이는 CSS로 이미지 너비를 지정하지 않으면

원본 해상도로 표시되기 때문.

수정하는 방법

CSS로 이미지 크기 맞추기

이미지 문서 너비에 맞추려면 width를 100%로 지정하고 margin을 auto로 설정해요.

img {
  width: 100%;
  margin: auto;
}

다시 pdf 버튼 클릭해보면 이미지가 잘 맞는 것을 볼 수 있어요.

만약 인쇄 디자인 용 CSS를 더 깊이 다루고 싶다면 paged.js의 인쇄용 웹 디자인 관련 문서를 참고해보시는 것을 추천해요.

준비가 되면 PDF로 저장하세요!

이제 PDF를 저장할 준비 완료.

웹 인스펙터로 디버깅하기

• 디자인이 이상해 보일 때, 웹 인스펙터로 HTML/CSS를 검사하면 도움이 돼요.

• 브라우저에서 우클릭 / ctrl+클릭 / cmd+클릭 → Inspect

웹 인스펙트 언제 써요?

• HTML 구조와 현재 적용된 CSS 확인할 수 있어요.

• 임시로 CSS 수정해보는 데 유용.

• 웹 인스펙터에서 수정한 내용은 새로고침하면 사라져요.

PDF로 내보낼 준비

• PDF 미리보기 창에 저장 버튼이 나타나요. 이 버튼을 누르면 Ctrl/Cmd + P를 누르는 것과 유사한 작업을 수행한다. (이는 웹페이지를 PDF로 내보내거나 PDF 파일을 프린터로 보내는 일반적인 방법입니다.)

PDF 파일 내보내기

• PDF 파일로 내보낼 것이므로 "PDF로 저장" 옵션을 선택합니다.

• 배율은 "페이지 너비에 맞추기"를 선택합니다.

• 용지당 페이지 수는 "1"을 선택합니다.

• 여백은 "없음"을 선택합니다.

• PDF에 색상이 있는 배경이 있는 경우 "배경 인쇄"를 선택합니다.

• 그런 다음 "저장"을 클릭합니다.

자, 이제 PDF 파일이 생겼는데, 어떻게 할까요?

그건 여러분에게 달려있습니다!

소책자를 인쇄하고 제본하는 방법은 몇 가지가 있습니다.
• 여러 장의 종이를 겹쳐서 왼쪽 상단 모서리나 왼쪽 가장자리를 따라 스테이플러로 고정하는 방식 (퍼펙트 바인딩)
• 소책자 형태로 반으로 접어 가운데를 스테이플러로 고정하는 방식 (새들 바인딩)

소책자로 만들려면 인쇄 시 여러 페이지가 한 장의 용지에 어떻게 배치되는지, 즉 레이아웃을 알아야 합니다.

다음은 이를 위한 무료 오픈 소스 도구입니다.

• [https:github.com/jenom/pdfbook2 | pdfbook2]

▪ pdfcpu
▪ bookletor

다양한 소책자 제본 방식
이미지: 다양한 소책자 제본방식

인쇄하고 제본하지 않기로 했다면, PDF 파일을 어딘가에 업로드하거나 친구들에게 이메일로 보낼 수도 있습니다.

PDF 진을 만들 때 좋은 점은 독자가 다른 곳(같은 진의 다른 페이지 또는 온라인 웹 페이지)으로 이동할 수 있는 하이퍼링크를 포함할 수 있다는 것입니다. 원하는 대로 탐험해 보세요!

octomode는 실제로 어떻게 작동하는 걸까요?

Octomode의 소프트웨어 스택은 다음과 같습니다.

• Flask : Octomode의 모든 구성 요소를 연결하는 웹 애플리케이션 프레임워크

• https://github.com/ether/etherpad-lite } Etherpad-Lite: 여러 사람이 동일한 환경에서 콘텐츠를 작성하고 문서를 디자인할 수 있도록 하는 협업 브라우저 기반 텍스트 편집 소프트웨어

  • PyPandoc :PyPandoc은 문서 변환 소프트웨어 Pandoc의 Python 래퍼입니다. Pandoc을 사용하여 콘텐츠패드를 HTML로 변환함으로써 Markdown으로 작성된 콘텐츠를 브라우저에서 HTML로 렌더링할 수 있습니다.

  • 페이지 미디어용 CSS 표준 : W3C(월드 와이드 웹 컨소시엄)에서 관리하는 것으로, 렌더링된 HTML이 고정된 크기, 여백 등을 가진 페이지처럼 보이도록 합니다.

  • paged.js : paged.js는 웹 브라우저에서 PDF 미리보기를 렌더링하는 JavaScript 라이브러리입니다. 이를 통해 파일로 내보낼 수 있습니다.

  Octomode는 로테르담의 일상 기술 공동 작업 공간인 Varia의 맥락에서 개발된 무료 오픈 소스 소프트웨어입니다.

  그 이후로 암스테르담의 Hackers & Designers와 브뤼셀의 Constant VZW가 버전을 관리해 왔습니다.

  octomode의 작동 방식, 기존 사용 사례 또는 직접 octomode 인스턴스를 호스팅하는 방법에 대한 자세한 내용은 다음 링크를 참조하세요.

  • https://cc.practices.tools/wiki/octomode
  • https://git.vvvvvvaria.org/CC/octomode

  ---

  옥토모드(Octomode)를 사용하지 않는 다른 방법도 있어요.

  HTML + CSS를 PDF로 변환하는 파이프라인을 활용하는
  FLOSS(자유/오픈소스 소프트웨어) 디자인 및 출판 프로젝트가 꽤 많습니다.

  다음은 몇 가지 다른 FLOSS 웹 투 프린트 소프트웨어 및 프로젝트입니다.

  이 목록은 결코 포괄적인 것이 아니며,
  단지 흥미를 유발하기 위한 샘플일 뿐입니다.

  • By OSP (Open Source Publishing) http://osp.kitchen
  ◦ ether2html https://osp.kitchen/tools/ether2html
  ◦ html2print http://osp.kitchen/tools/html2print
  ◦ ethertoff http://osp.kitchen/tools/ethertoff
  • By Luuse https://luuse.io
  ◦ pad2print https://gitlab.com/Luuse/pad2print
  • By many in the PrePostPrint https://prepostprint.org network
  ◦ pinkmypad https://pinkmypad.net
  ◦ A collection of starter kits for paged.js https://pagedjs.org/
  posts/2020-04-15-starterkits-for-pagedjs
  ◦ PPP Demos https://gitlab.com/prepostprint/demos
  ◦ The Web 2 Print Library http://web.2print.org/fr

  ---

  Colophon

  This zine was made by Simon Browne in November 2025, with octomode in
  Linz, Austria, as part of a CC residency at the 2025 edition of d*signweek(https://dsignweek.servus.at)
  Published under the conditions of the CC4r * COLLECTIVE CONDITIONS FOR
  RE-USE https://constantvzw.org/wefts/cc4r.en.html
  Printed by Potato Publishing https://potatopublishing.at/
  A digital version of this zine is available at:
  https://cc.practices.tools/pdf/so-you-decided-to-make-a-zine-in-octomode.pdf

  • https://cc.practices.tools

  ---