생산성을 높이는 메모(노트)앱은 Evernote(에버노트), Onenote(원노트), Google Keep 등 다양한 기능과 종류를 가진 앱들이 매우 많이 있습니다.
저는 이 중 Joplin이라는 노트 앱을 개인 서버에 설치하여 사용하고 있는데 메모가 많아질수록 관리도 힘들고 가시성도 떨어지고 해서 사용이 점차 어려워 관리하는 방법을 찾고 있었습니다.
지금까지 찾은 마크다운을 이용한 노트 관리 방법 중에는 크게 1. 숨김(Hidden)/펼침(Show) 기능과 2. 내부 링크(Internal Link) 기능이 좋은 것 같아 추천하고자 합니다.
1. Hidden/Show (숨김/펼침 기능)
숨김/펼침 기능은 <Details>과 <Summary>의 기능을 이용하여 메모 제목만 표시하고 내용을 확인하고 싶을 때는 ▶ 표시 줄의 내용을 클릭하면 세부 내용을 볼 수 있습니다. 또한 중간의 — 는 회색 줄을 그어 제목과 제목 사이를 구분하여 가시성을 좀 더 높이도록 할 수 있습니다. 여기서 주의할 점은 제목 뒤의 </summary> 아래의 줄바꿈 테그에는 <br>이 아닌 </br> 즉 br 앞에 /를 붙여줘야지만 내용에도 마크다운 테그가 적용되는 것을 확인 할 수 있습니다.
Source Code
아래는 markdown의 예제 입니다.
<details>
<summary> **기존 메모 제목** </summary>
</br>
**첫번째 컨테츠 메모 내용 1**
**첫번째 컨테츠 메모 내용 2**
**첫번째 컨테츠 메모 내용 3**
</details>
---
<details>
<summary> **새로운 메모 제목** </summary>
</br>
**메모 내용 1**
**메모 내용 2**
**메모 내용 3**
</details>
<br>Preivew
이를 Joplin 노트에 적용하면 아래와 같이 작동하는 것을 확인 할 수 있습니다.
2. Internal Link (내부 링크 기능)
내부링크 기능은 크게 노트 안에서 특정 위치로 이동하는 기능과 노트에 다른 노트를 링크하는 “마크다운 링크 복사” 두 가지로 나눌 수 가 있습니다. 이 중 “마크다운 링크 복사”는 노트에서 마우스 오른쪽 버튼을 눌러 복사를 한 후 참고하고 싶은 노트에서 “Crt+V”를 하면 자동 복사가 되기 때문에 쉽게 사용 할 수 있습니다.
여기서 소개할 내용은 문서안에서 특정 위치로 이동하는 기능인 Internal Link 입니다. 링크를 위해서는 [링크제목 ](#링크주소)로 작성을 하고 해당 링크 위치에서는 <a name=”링크주소> </a> 순으로 작성을 해주게 되면 링크제목 클릭 시 링크 위치로 이동을 하게 됩니다. 이를 응용하면 아래와 같이 사용 할 수 있습니다. 아래 소스코드에서 보듯이 메모가 많아지면 해당 메모로 이동 후 다시 맨 위로 올라오려면 번거롭기 때문에 목차에 위로 올라 올 수 있는 링크 주소를 하나 더 만들어서 응용하면 해당 메모로 이동 후 다시 맨 위 화면으로 쉽게 이동 할 수 있는 것을 확인 할 수 있습니다.
Source Code
해당 활용 예제는 아래와 같습니다.
## 대 제목
### 목차 <a name="contents"> </a>
#### [01. 첫번째 메모 제목](#memo01)
#### [02. 두번째 메모 제목](#memo02)
#### [03. 세번째 메모 제목](#memo03)
#### [04. 네번째 메모 제목](#memo04)
<br>
<br>
<br>
---
> ## 상세 메모
<br>
<a name="memo01"> </a>
#### 01. 첫번째 메모 제목
[Go to Contents](#contents)
- 첫번째 메모 내용 1
- 첫번째 메모 내용 2
- 첫번째 메모 내용 3
- 첫번째 메모 내용 4
<br>
<br>
<a name="memo02"> </a>
#### 02. 두번째 메모 제목
[Go to Contents](#contents)
- 두번째 메모 내용 1
- 두번째 메모내용 2
- 두번째 메모 내용 3
- 두번째 메모내용 4
<br>
<br>
<a name="memo03"> </a>
#### 03. 세번째 메모 제목
[Go to Contents](#contents)
- 세번째 메모 내용 1
- 세번째 메모 내용 2
- 세번째 메모 내용 3
- 세번째 메모 내용 4
<br>
<br>
<a name="memo04"> </a>
#### 04. 네번째 메모 제목
[Go to Contents](#contents)
- 세번째 메모 내용 1
- 세번째 메모 내용 2
- 세번째 메모 내용 3
- 세번째 메모 내용 4
<br>
<br>
Preivew
미리보기는 다음과 같습니다.
3. Internal Link without link underline (링크 밑줄 없애기)
하이퍼링크 기능을 사용하면 위의 예제와 같이 파란색 밑줄이 기본적으로 새기는 것을 알 수 있습니다. 하지만 링크가 많아지고 글자가 길어진다면 사용자에 따라 시각적으로 매우 불편할 수도 있을것입니다. 이는 노트 상단에 Style을 정의해줌으로써 해결 할 수 있습니다. 그리고 특정 링크글자는 다른색을 표현하고 싶다면 HTML의 span style을 적용하여 글자색을 변경할 수 있습니다.
Source Code
해당 소스는 아래와 같습니다.
<style>
a {
color: var(--text-accent);
outline: none;
text-decoration: none;
}
a:hover {
color: blue;
}
</style>Preivew
미리보기는 다음과 같습니다.
