마크다운으로 시작하는 깔끔한 문서 제작
MarkPaper는 마크다운으로 깔끔한 문서를 만들고 인쇄할 수 있는 애플리케이션입니다.
기존의 마크다운 에디터들은 문서 작성과 미리보기에 초점이 맞춰져 있어, 실제 인쇄물 제작에는 한계가 있었습니다. 특히 서체 선택이나 스타일링과 같은 세부적인 디자인 요소를 조정하기 어려웠죠. MarkPaper는 이러한 한계를 극복하고자 합니다.
MarkPaper를 사용하면 마크다운의 간결함을 유지하면서도 HTML과 CSS를 활용해 문서를 자유롭게 디자인할 수 있습니다. 워드프로세서 없이도 깔끔한 인쇄물을 만들고 싶은 마크다운 애호가들을 위한 도구이죠.
- 마크다운 문서 열기, 작성, 저장
- 사진 첨부 및 저장
- 페이지 나누기
- 서체 선택 및 기본 글자 크기 설정
- 용지 설정 (A4, A5, Letter, Legal)
- 렌더링된 마크다운 문서 미리 보기
- 인쇄 및 PDF 저장
- 일부 HTML 태그 및 CSS 지원
- MarkPaper는 기본 확장자로
*.mp를 사용합니다.*.mp파일 내부에 사진을 저장하기 때문에 자유롭게 사진 첨부가 가능합니다.*.md파일로도 저장할 수 있지만, 파일에 사진이 저장되지 않습니다. - Windows 탐색기 혹은 macOS Finder에서
*.mp혹은*.md파일을 더블 클릭하여 바로 열 수 있습니다. 연결 프로그램 설정이 필요할 수 있습니다. - 마크다운과 더불어 일부 HTML 코드를 지원합니다.
<div>와style속성으로 레이아웃을 구성할 수 있습니다. HTML 코드를 작성할 때는 들여쓰기를 사용할 수 없습니다. - Monaco 에디터를 사용하므로, Visual Studio Code에서 코드를 작성하는 것과 동일한 환경을 제공합니다.
MarkPaper는 사진이 포함된 마크다운 문서를 저장하기 위해 .mp 확장자를 사용합니다. .mp 파일은 ZIP 압축 포맷을 기반으로 작동하며, 파일 구조는 다음과 같습니다.
📦예시 문서.mp
┣ 📂images
┃ ┣ 📜예시 사진 1.jpg
┃ ┣ 📜예시 사진 2.jpg
┃ ┗ 📜예시 사진 3.jpg
┣ 📜content.md
┗ 📜metadata.json
/images: 문서에서 사용되는 사진 파일들이 보관되는 디렉토리입니다.content.md: 마크다운 본문 파일입니다.metadata.json: 파일의 메타데이터와 사진 목록을 관리하는 파일입니다.
에디터에 사진을 드래그 앤 드롭하거나 '사진 추가' 버튼을 눌러 사진을 삽입하면 파일이 문서에 삽입됩니다. 첨부되는 사진은 참조할 때 파일 명 앞에 $ 접두어가 붙습니다. (예시: )
.mp 파일을 저장할 때, 첨부했던 특정 사진이 마크다운 문서에서 참조되지 않으면 해당 사진 파일은 저장되지 않습니다.
- Electron, React, JavaScript, Zustand
- Windows
- macOS
기본적으로 마크다운 문법을 지원합니다.
# 머리말 1
## 머리말 2
기본 **굵은 글씨** *이탤릭* ***굵은 이탤릭*** ~~취소선~~
[링크](https://example.com)
로 사진를 삽입할 수 있습니다. 웹 주소를 입력하여 파일을 웹에서 불러올 수 있으며, PC에 저장된 파일을 '사진 추가' 버튼 클릭 혹은 드래그 앤 드롭으로 삽입할 수도 있습니다. 마크다운으로 추가된 사진는 style 태그로 CSS에서 img 태그를 지정하여 스타일을 지정할 수 있지만, 개별적으로 인라인 스타일은 지정할 수 없습니다.
---pagebreak--- 구문으로 인쇄될 페이지를 나눌 수 있습니다. ---pagebreak--- 구문 이후에 나오는 텍스트는 다음 페이지에 이어서 출력됩니다.
첫 번째 페이지입니다.
---pagebreak---
두 번째 페이지입니다.
MarkPaper는 일부 HTML 문법을 지원합니다. 지원하는 태그의 목록은 다음과 같습니다.
- 레이아웃:
div - 텍스트:
span,p,a,br - 사진:
img,svg,path - 머리말:
h1,h2,h3,h4,h5,h6 - 표:
table,thead,tbody,tr,th,td - 스타일:
style
MarkPaper는 img 태그로도 사진를 삽입할 수 있습니다. 마크다운 문법과는 달리 개별적으로 인라인 스타일을 지정할 수 있습니다.
<img src="$image.jpg" alt="예제 사진" width=320 style="float: left; margin-right: 1em;">
HTML 요소의 style 속성으로 직접 제어할 수 있습니다. 예를 들어, 문단을 가운데 정렬하려면 다음과 같이 작성할 수 있습니다.
<p style="text-align: center;">이 문단은 가운데 정렬이 적용된 문단입니다.</p>
width: 100vw로 페이지 전체 너비를, height: 100vh로 페이지 전체 높이를 지정할 수 있습니다. 예를 들어, 특정 페이지에서 전체 페이지의 레이아웃을 구성하고 페이지의 하단에 특정 콘텐츠를 고정시키려면 다음과 같이 작성할 수 있습니다.
<div style="height: 100vh; display: flex; flex-direction: column; justify-content: space-between;">
<div>
메인 영역 (상단에 고정)
</div>
<div>
푸터 영역 (하단에 고정)
</div>
</div>
MarkPaper는 style 태그를 활용하여 CSS를 작성할 수 있으며, 선택자는 .prose로 시작해야 합니다. 예를 들어 다음과 같습니다.
<style>
.prose {
font-family: SourceHanSerif;
}
.prose p {
line-height: 2;
text-indent: 1em;
}
</style>
.prose 선택자를 활용하여 문서의 글자 크기를 지정할 수 있습니다. 기본 값은 12pt입니다. 상단 도구 막대에서도 문서의 기본 글자 크기를 지정할 수 있습니다. 글자 크기는 일반 텍스트 기준이며, 머리말과 같이 글자 크기가 다른 요소들은 설정한 글자 크기와 비례하여 증가하거나 감소합니다.
<style>
.prose {
font-size: 14pt;
}
</style>
또한, .prose 선택자에서 서체를 설정할 수 있습니다. 기본 값은 Pretendard입니다. 상단 도구 막대에서도 문서의 기본 서체를 지정할 수 있습니다. 서체는 현재 Pretendard(Pretendard), 본명조(SourceHanSerif), Koddi UD 온고딕(KoddiUDOnGothic)을 지원합니다.
<style>
.prose {
font-family: SourceHanSerif;
}
</style>
MarkPaper는 Visual Studio Code에서 사용 중인 Monaco 에디터를 사용 중입니다. VS Code에서 사용 가능한 단축 키의 일부를 사용할 수 있습니다.
에디터의 기본 언어는 마크다운으로 설정되어 있으며, 기본 들여쓰기 방식은 2칸 공백입니다.
Monaco 에디터에서 작성된 마크다운은 미리 보기 영역에 실시간으로 보여집니다. 인쇄 환경과 유사하지만, 페이지의 구분은 없습니다. 대신, ---pagebreak---로 구분된 영역은 점선으로 분리되어 표시됩니다.
상단 도구 막대에서 인쇄 버튼을 누르면 인쇄 미리 보기 창이 표시됩니다. 이 창에서 출력 결과물을 미리 볼 수 있으며, 프린터로 인쇄하거나 PDF 파일로 저장할 수 있습니다.
- 목차 자동 생성 기능
- 문서 서식 편집 기능
- 페이지 하단 각주 기능
- LaTeX 문법 지원
- 더 많은 서체 지원