메타데이터 메뉴에 대한 기본적인 사용법에 대해 다뤘습니다.

이 플러그인은 여러 방법으로 활용이 가능하지만 다른 플러그인에 비해서 사용법이 조금 복잡한 편입니다.

아래 임베딩된 영상에서 메타데이터 메뉴 플러그인의 사용에 도움이 될만한 기본적인 개념과 사용 방법에 대해서 자세히 다뤘으니 시청부탁드립니다.

그리고 영상에서 사용된 소스 코드는 아래에 첨부하고 자세한 설명을 추가해뒀습니다.

Metadata Menu 플러그인 설명 영상

노트에 테이블 삽입

metadata menu 플러그인을 사용해 만든 field를 적용한 테이블을 기존의 노트에 테이블을 삽입하실 수 있습니다.

테이블을 노트에 추가하는 방법은 기본적으로 두 가지가 있습니다.

하나는 metadata menu 플러그인에서 제공하는 방법이고, 두 번째는 우리가 기존에 사용해왔던 dataview 플러그인을 통해 만든 테이블에서 metadata menu 플러그인의 기능을 사용할 수 있도록 만들어 주는 방법입니다.

mdm 테이블

```mdm
fileClass: bookclass
view: default
files per page: 30
showAddField: true
```

1. 기본적으로 백틱 (`) 3개를 입력한 후에 metadata menu의 약자인 mdm을 입력해줍니다.

2. fileClass: bookclass – 여기서 앞의 fileClass는 고정값이며, :을 추가한 후에 반드시 한 칸의 띄워주신 다음에 클래스의 이름을 적으시면 됩니다. 여기서 bookclass는 사용자가 설정한 클래스의 이름입니다. (fileClass는 필수로 입력해야 하며, 아래의 옵션들은 입력하지 않아도 테이블은 동작합니다.)

3. view: default – 테이블의 필터를 적용한 후 저장한 이름이며, fileClass view에서 지정한 이름을 콜론(:)뒤에 한 칸을 띄워주시고 입력하시면 됩니다.

4. files per page: 30 – 한 페이지에 얼마나 많은 개수의 노트를 적을지를 입력하시면 됩니다.

5. showAddField: true – 대소문자 구분을 해주시고, true를 입력하시면 노트에 property가 입력되지 않은 경우에 추가할 수 있도록 테이블에 버튼을 생성시켜줍니다.

dataview 테이블

기본적으로 데이터뷰 테이블에서는 체크박스에 체크를 하거나 프론트매터에 입력된 내용을 테이블에서 수정한 기능을 지원하지 않습니다. 하지만 metadata menu 플러그인과 연동하여 이러한 기능을 사용할 수 있게 됩니다.

코드는 기본적으로 dataviewjs 가 사용되기 때문에 작성 방법이 조금 복잡합니다. 모든 내용을 자세히 설명드릴 수는 없지만 변경하여 활용하실 수 있도록 설명드리겠습니다.

```dataviewjs
const {fieldModifier: f} = MetadataMenu.api

dv.table(["표지", "책 이름", "등록일", "읽기 시작 날짜", "독서 여부", "평점"],
    dv.pages('"50. Book/51. 도서 목록"')
        .map(p => [
            "![|90](" + p.cover_url + ")",  // 이미지 URL을 사용해 표지 이미지를 추가
            p.file.link,
            f(dv, p, "registered_date"),
            f(dv, p, "start_date", {options: {alwaysOn: true}}),
            f(dv, p, "reading"),
            f(dv, p, "score", {options: {showAddField: true}}),
        ])
);
```

1. const {fieldModifier: f} = MetadataMenu.api – 이 부분은 데이터뷰에서 메타데이터 메뉴 플러그인의 api를 가져오는 부분입니다.

2. dv.table(["표지", "책 이름","저자", "등록일", "읽기 시작 날짜", "독서 여부", "평점"],

이 부분에 테이블 헤더의 이름을 나열해주시면 됩니다. 아래에 들어갈 .map 이하에 입력하는 항목의 개수와 반드시 일치해야 합니다.

쌍따옴표 안에 각 헤더를 적어주시고, 입력한 순서대로 테이블에 좌측부터 나타나게 됩니다. 각 항목 간에는 ,를 이용하여 구분지어 줍니다.

3. dv.pages('"50. book/051. 도서 목록"') – 쌍따옴표 "사이에 폴더를 입력해줍니다. 폴더의 경로의 이름을 정확히 작성해주셔야 하고, 특히 띄어쓰기 구분에 신경써서 작성을 해주셔야 오류가 발생하지 않습니다.

4. .map(p => [ – 이 부분 아래에 테이블 헤더를 작성한 순서에 따라서 불러올 값을 정확히 입력해주셔야 합니다. 각 항목의 사이에는 ,로 구분을 해주셔야 하고 위에 작성한 dv.table의 개수와 정확히 일치해야 합니다. 현재 예시에서는 7개의 항목이 작성되었습니다.

5. "![|90](" + p.cover_url + ")", – 이 부분은 url의 이미지를 미리보기 할 수 있는 부분입니다. cover_url이라고 작성된 부분을 현재 사용하고 계시는 property의 key로 수정하여 사용하실 수 있습니다. 그리고 [|90]은 미리보기 되는 이미지의 크기를 조절할 수 있습니다.

6. p.file.link,– 이 부분은 파일의 링크를 추가하는 부분이며, 자동으로 파일의 이름에 링크가 생성됩니다. file.뒤에 link 뿐만 아니라, path, name, size, cday, mday, ctime, mtime 등을 사용하실 수 있습니다.

참고로 day와 타임 앞에 붙은 c,m 은 c는 creation(생성), m은 modification(수정)을 의미합니다.

7. f(dv, p, "start_date", {options: {alwaysOn: true}}),

기본적으로 "사이에는 프로퍼티의 key값을 입력하는 부분입니다.

그리고 뒤에 `{options: {alwaysOn: true}} 이 부분은 이미 노트의 프론프매터에 해당하는 field가 있는 경우에 마우스를 올리면 버튼이 생기게 되지만, 이 옵션을 사용하면 마우스를 올리지 않아도 항상 버튼을 볼 수 있도록 설정해줍니다.

8. f(dv, p, "score", {options: {showAddField: true}}),

여기서 score 부분을 변경해서 사용할 수 있고, {showAddField: true} 부분은 현재 노트의 프론트매터에 class field로 지정한 프로퍼티가 존재하지 않은 경우에, 테이블에서 바로 생성을 할 수 있도록 버튼을 만들어 주는 부분입니다.

옵시디언 CSS 스니펫 기능을 활용해서 적용이 가능하며 자세한 내용은 영상에 담았습니다.

obsidian_style.css 파일은 링크 또는 하단의 버튼을 통해 다운로드 받으실 수 있습니다.

유튜브 참고 영상

아래의 내용 외에도 많은 내용들이 포함되어 있습니다.

헤딩 (제목) 스타일 변경하기

Style setting를 통해서 제목의 크기나 색상 등의 변경이 가능하지만 CSS를 통해서도 가능합니다. 하지만 테마가 적용되는 경우에 우선 순위에서 밀려 CSS가 순간적으로 늦게 적용되는 현상이 발생하게 됩니다.

그렇기 때문에 테마에서 적용가능한 것은 style settings 플러그인을 통해서 변경을 하고, 그 외의 것들에 대해서만 CSS 스니펫을 사용하는 것을 추천드립니다.

아래는 Heading1 ~ 6 까지의 코드를 담았으며, 필요에 따라 추가, 수정해서 사용하시면 되겠습니다.

.cm-s-obsidian span.cm-header-1 : 편집 모드 (라이브 미리보기)

.markdown-preview-view h1 : 읽기 모드

그리고 아래의 코드에는 제목과 본문의 텍스트와의 간격을 조절할 수 있도록 margin 값을 수정할 수 있습니다.

편집 모드와 읽기 모드에서 간격의 차이가 발생하기 때문에 CSS를 통해 어느 정도 줄여줄 수도 있습니다.

/* Heading 1 */

.cm-s-obsidian span.cm-header-1 { /* 편집 모드에서 적용 */
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  display: inline-block;
  }
.markdown-preview-view h1 {  /* 읽기 모드에서 적용 */
    margin-bottom: -10px !important;
  }

/* Heading 2 */
.cm-s-obsidian span.cm-header-2 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
}
.markdown-preview-view h2 {
  color: darkorange !important;
  font-size: 28px !important;
  margin-bottom: -5px !important;
}

/* Heading 3 */
.cm-s-obsidian span.cm-header-3 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  display: inline-block;
}
.markdown-preview-view h3 {
  margin-bottom: -5px !important;
}

/* Heading 4 */
.cm-s-obsidian span.cm-header-4 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  display: inline-block;
}
.markdown-preview-view h4 {
  margin-bottom: -10px !important;
}

/* Heading 5 */
.cm-s-obsidian span.cm-header-5 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  display: inline-block;
}
.markdown-preview-view h5 {

  margin-bottom: -20px !important;
}

/* Heading 6 */
.cm-s-obsidian span.cm-header-6 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  display: inline-block;
}
.markdown-preview-view h6 {

  margin-bottom: -20px !important;

텍스트 강조 스타일 변경

아래 제공해드리는 소스 코드는 읽기 모드와 편집 모드 (라이브 미리보기)에 같은 스타일로 적용이 되도록 제작했습니다.
만약 따로 사용하실 분들은 코드를 나눠서 작성하시면 되겠습니다.

예)

• .markdown-source-view.mod-cm6 .cm-strong { }

• .markdown-preview-view strong { }

볼드체 (두꺼운 글씨)

텍스트의 색상, 사이즈, 글꼴을 변경했고, 글꼴에 따라서 높이가 달라 보기 불편한 경우가 있기 때문에 위치를 조절할 수 있도록 작성했습니다.

/* 텍스트 볼드 (굵은 글씨) */
.markdown-source-view.mod-cm6 .cm-strong, 
.markdown-preview-view strong {
	color: #dd8d31 !important;
  font-family: 'Courier New', Courier, monospace;
  vertical-align: bottom;
  position: relative;
  top: 2px;
	}

이탤릭 (기울임)

기본적으로 색상을 변경해서 사용하시면 되고, 마진은 우측에 3px을 두어 텍스트가 기울여질 때 다른 텍스트의 간섭을 최소화 시켰습니다.

글꼴에 따라서 변경해서 사용하시면 되겠습니다.

 /* 텍스트 이탤릭 */
.markdown-preview-view em,
.markdown-source-view.mod-cm6 .cm-em {
  color: #4BACC6 !important;
  margin-right: 3px;
}

두껍고 기울임 (볼드 + 이텔릭)

***두껍고 기울임*** 으로 사용이 가능하며, 단축키로는 Cmd + B를 누르시고 Cmd + i를 한 번 더 눌러서 적용이 가능합니다.

볼드, 이탤릭과는 또 다른 강조할 수 있는 수단으로 HTML 사용을 최소화 시키면서 여러가지 방법으로 옵시디언에서 강조를 할 수 있도록 도와줍니다.

색상, 사이즈, 글꼴, 마진을 적용했습니다.

/* 텍스트 볼드 & 이탤릭 (굵고 기울인 글씨) */
.markdown-source-view.mod-cm6 .cm-strong.cm-em, 
.markdown-preview-view strong em {
color: #7ce13d !important;
font-family: 'Courier New', Courier, monospace !important;
margin-right: 3px;
}

하이라이트

마크다운 적용이 가능하며 ==하이라이트==로 입력이 가능합니다. 단축키를 따로 지정하여 사용하면 손쉽게 텍스트를 강조할 수 있습니다.

현재 패딩이 상하좌우로 2px 들어가 있고, 텍스트의 글꼴에 따라서 조절해서 사용할 수 있습니다.

그리고 배경색과 텍스트 컬러도 변경해서 사용 가능합니다.

/* 텍스트 하이라이트 */
.markdown-preview-view mark,
.markdown-source-view.mod-cm6 .cm-highlight {
background-color: #b35e09 !important;
color: #dddddd !important;
padding: 2px 2px !important; /* 상하, 좌우 너비 */
}

밑줄

기본적으로 밑줄은 마크다운에는 없지만 html을 이용해서 사용이 가능합니다. 옵시디언에서 editing boolbar 플러그인을 설치하면 더욱 손쉽게 사용이 가능합니다.

추가로 플러그인을 설치하고, 밑줄을 단축키로 지정하면 좋습니다.

코드는 색상과 밑줄 위치를 조절할 수 있는데, 현재 값은 4px로 입력이 되어있지만 사용하시는 텍스트에 따라 간섭이 생기는 경우에 조절하시면 됩니다.

/* 밑줄 */
u {
  text-underline-offset: 4px; /* 밑줄의 위치 조정 */
  color: #dd578c
  }

노트 임베딩 타이틀

![[노트제목]] 형식으로 옵시디언의 노트에 임베딩된 노트의 타이틀의 스타일을 변경할 수 있습니다.

/* 노트 임베딩 타이틀 */
.markdown-embed-title {
    font-size: 1.2em;
    color: #2eded6; /* 폰트 색상 */

}

이미지 테두리 여백 넣기

화면과 이미지의 색상이 비슷하거나 같을 때 구분을 시켜주는데 도움이 됩니다. 현재는 화이트 색상의 테두리이기 때문에 밝은 배경화면을 사용하시는 분들은 색상을 변경하고 사용하시면 되겠습니다.

추가로 이미지의 상,하단에 여백을 추가하여 텍스트와 분리되어 보일 수 있도록 했습니다.

/* 이미지 테두리 및 여백 */
img {
  border: 1px solid #eeeeee;
  margin-top: 15px; /* 이미지 위에 여백 추가 */
margin-bottom: 15px; /* 이미지 아래에 여백 추가 */
  }

태그 색상 변경

영상에서 불필요한 부분은 제거하였습니다.

#데이터뷰 , #일기 , #플러그인 세 가지 태그를 예시로 만들었습니다. 필요한 태그를 넣어주시고, 배경 색상과 텍스트 색상을 변경하여 사용할 수 있습니다.

/* 예: #데이터뷰 태그 */
.tag[href="#데이터뷰"] {
    color: #eeeeee;
    background-color: #0e74b9;
}

/* 예: #일기 태그 */
.tag[href="#일기"] {
    color: red;
    background-color: transparent;
}
/* 예: #플러그인 태그 */
.tag[href="#플러그인"] {
    color: #eeeeee;
    background-color: #21a058;

}

구분선

구분선의 스타일을 변경 가능합니다. 아래의 예시는 너비는 50%, 중앙 정렬과 마진 그리고 두께를 조절하였습니다.

/* 구분선 스타일 */
.markdown-preview-view hr,
.markdown-source-view.mod-cm6 .cm-line hr {
  width: 50%;
  margin: 50px auto;
  border: none; 
  border-top: 2px solid #a5da49;

깃허브 다운로드

검색에 cmd 또는 명령 프롬프트를 검색하고 우측에 있는 관리자 권한으로 실행

chocolatey (choco:초코)설치

아래를 복사하여 PowerShell에 붙여넣고 choco 설치

[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Node.js 설치

Node.js를 설치하는 방법은 여러가지가 있지만 바로 Node.js를 설치하는 방법과 NVM의 설치를 먼저 진행한 다음 Node.js를 설치하는 방법 등이 있습니다.

Nodejs 바로 설치

PowerShell에서 choco install nodejs를 입력해주면 설치가 진행됩니다.

(위의 이미지는 이미 설치가 되었기 때문에 추가로 설치가 진행되지 않았고 이미 설치가 되었다는 메시지를 출력합니다.)

node -v를 입력해서 설치가 제대로 되었는지 버전을 확인할 수 있습니다.

설치 경로 확인

(Get-Command node).Path을 실행시켜 설치 경로를 확인할 수 있습니다.

NVM(Node Version Manager) 설치

두 번째 방법으로는 NVM (Node Version Manager)은 Node.js의 여러 버전을 관리할 수 있게 해주는 도구입니다.

이를 사용하면 여러 Node.js 버전을 쉽게 설치, 전환 및 사용을 할 수 있습니다.

위에서 설치한 초코(chocolatey)를 이용하여 쉽게 설치가 가능합니다. 아래의 명령을 복사해서 PowerShell에 붙여넣기 실행시키면 설치가 진행됩니다.

choco install nvm 로 먼저 nvm의 설치를 진행해주시고, nvm install node을 입력하시면 최신 버전이 자동으로 설치됩니다.

그리고 마찬가지로 node -v를 입력하시면 설치된 버전을 확인할 수 있습니다.

파이썬(Python) 설치

파이썬의 설치도 nodejs와 마찬가지로 chocolatey를 이용하여 진행할 수 있습니다.

똑같이 PowerShell을 관리자 권한으로 실행을 시켜주시고 입력창에 choco install python을 입력하고 엔터를 눌러줍니다.

설치 진행 중에 Do you want to run the script? 메시지가 출력되면 A를 입력하면 설치가 계속 진행됩니다.

설치가 완료되면 설치된 내용이 출력됩니다.

그리고 설치된 파이썬 버전을 확인하려면 python -V를 입력해야 합니다. 여기서 중요한 점은 V가 소문자가 아닌 대문자라는 점입니다.

파이썬 설치 경로 확인

Powershell에(Get-Command python).Path을 입력하여 파이썬의 설치 경로를 확인할 수 있습니다.

Homebrew(홈브류) 설치

Cmd + Spacebar를 입력하여 Spotlight 검색창에서 터미널 검색하여 실행

Homebrew 설치

Node.js와 python을 설치하기 전에 우선 Homebrew를 설치하면 더욱 쉬운 설치가 가능합니다.

Homebrew는 macOS(또는 Linux) 사용자들이 소프트웨어를 쉽게 설치하고 관리할 수 있도록 도와주는 무료 소프트웨어 도구입니다. 일반적으로 소프트웨어를 설치하기 위해서는 복잡한 설치 과정을 거쳐야 하지만, Homebrew를 사용하면 명령어 한 줄로 소프트웨어를 설치하고 업데이트할 수 있습니다.

Homebrew를 사용하면 brew install 패키지명 명령어로 필요한 프로그램을 쉽게 설치할 수 있습니다.

터미널 창에 아래를 복사하여 붙여넣기 후 Enter

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

**만약 설치 중에 password를 입력하라는 메시지가 나오는 경우에는 맥OS 로그인 비밀번호를 입력하시면 됩니다.

Homebrew가 설치가 완료되면 brew doctor를 입력하여 확인

Your system is ready to brew메시지를 확인하고 다음을 진행

node.js 설치

brew install node 를 터미널에 입력하여 설치를 진행합니다.

참고로 Node.js를 설치하면 npm도 자동으로 설치됩니다.

설치가 완료되면,

node -v와 npm -v 를 각각 입력하여 설치된 버전을 확인

which node를 입력해서 설치된 경로를 확인할 수 있습니다.

Python 설치

파이썬을 설치할 때도 node.js와 마찬가지로 아래를 입력하여 진행할 수 있습니다.

brew install python 또는 brew install --cask anaconda

비밀번호 입력을 요구 하는 경우에 마찬가지로 로그인 비밀번호를 입력하면 되는데 입력할 때 창에 나타나지 않으므로 그냥 입력하시고 엔터를 누르시면 됩니다.

이렇게 설치가 완료되면,

python -V으로 설치된 파이썬 버전을 확인할 수 있습니다. (여기서 중요한 점은 V가 소문자가 아니라 대문자라는 것입니다.

만약 python -v로 입력하여 확인한 경우에는 인터렉티브 모드로 진입이 되는데

>>>(인터렉티브 모드)에서 나오려면 quit()를 입력해서 기본 셸 모드로 돌아갈 수 있습니다.

파이썬 경로 확인

옵시디언 파일 복구

옵시디언에서 노트를 작성하다 보면 Undo기능과 Redo 기능을 사용하다 꼬이거나, 옵시디언을 완전히 종료했다가 다시 실행을 한 경우에는 되돌리기(Cmd + Z)를 하려고 하면 적용이 되지 않는 경우가 있습니다.

이런 경우에는 노트를 복구하는 기능인 스냅샷 기능으로 이전으로 되돌릴 수 있는데요. 이 스냅샷 기능은 옵시디언에 기본 설치된 코어 플러그인으로 추가 설치없이 사용이 가능합니다.

옵시디언의 설정 – 코어 플러그인 – 파일 복구 – 스냅샷 – 열람

스냅샷 간격 및 기록 기간

기본적으로 스냅샷 간격은 5분, 기록 기간은 최대 7일로 설정이 되어 있습니다. 하지만 노트를 사용하다 보면 한참 전 파일의 기록을 되돌리고 싶은 경우가 있기도 하기 때문에 스냅샷 간격은 5분 또는 그 이상으로 두고, 기록 보존 기간은 더 늘려서 저장하는 것이 좋아보입니다.

주의할 점은 스냅샷이라 함은 노트를 새로 하나 더 저장하는 개념이므로, 파일의 용량이 큰 경우에는 생각보다 많은 용량을 차지할 수도 있다는 겁니다. 본인이 사용하는 환경에 따라서 적절히 조절하면 되겠습니다.

옵시디언 파일 버전

좌측 상단의 검색에 노트의 이름으로 검색을 하면 해당하는 노트의 스냅샷을 시간별로 볼 수 있습니다.

우측 상단의 ‘차이점 보기’를 누르면 기존의 버전과 비교해 현재 버전이 어떤 점이 변경되었는지 한 눈에 볼 수 있습니다.

백그라운드가 붉은 색은 기존의 버전의 내용이고, 초록색은 현재 버전의 내용입니다.

프론트매터 (Properties) 숨기기

프론트매터의 내용이 많아진 경우에는 편집기 화면의 대부분을 차지하여 노트를 열었을 때 시작 부분이 많이 가려지는 문제가 있습니다.

이를 해결하기 위한 방법은 총 두 가지가 있는데, 하나는 properties(프론트매터)가 편집기에서 보이지 않도록 숨기는 방법이고, 두 번째는 CSS 스니펫을 적용시켜 마우스를 hover 할 때에만 프론트매터 내용이 나오게 하는 방법입니다.

본문에 프론트매터 없애기

이 방법은 설정 – 편집기 – 문서 내 속성 에서 ‘표시’, ‘숨김’, ‘소스’ 중에서 ‘ 숨김’을 선택하여 진행할 수 있습니다.

다만 이런식으로 설정을 한 경우에는 추가로 설정 – 코어 플러그인 – properties view를 활성화 시켜주고, 편집기 좌측의 사이드바를 이용하여야 합니다.

CSS 스니펫으로 프론트매터 숨기기

CSS 스니펫을 적용하는 방법은 옵시디언 대시보드, MOC 만들기 에서 설명드린 부분이니 확인 부탁드리겠습니다.

아래의 버튼으로 링크에 접속해 CSS 파일을 다운받아서 Vault에 넣고, 활성화를 시켜서 사용하시면 되겠습니다.

CSS를 적용하게 되면 위의 이미지처럼 기본적으로 Properties가 숨김 처리 되지만 마우스 커서를 가져다 대면 나타나게 되고 편집 후에는 다시 본문을 클릭하여 숨길 수도 있습니다.

마크다운 입력하기

기존에 마크다운 사용법 수식- 옵시디언, 노션, 워드프레스에서 기본적으로 마크다운을 어떻게 사용하는지 설명을 드렸습니다.

그리고 이번에는 괄호, 마크다운 등을 좀 더 쉽게 입력할 수 있는 방법에 대한 설명입니다.

기존에는 텍스트를 두껍게 만들려면 먼저 **를 입력하고 그 뒤에 텍스트를 입력한 다음에 닫아주거나 혹은 적용할 텍스트를 드래그 한 후 Cmd + B 등의 단축키를 활용해서 적용시키기도 했습니다.

하지만 좀 더 쉽게 적용하는 방법은 먼저 텍스트를 입력하고 그 텍스트를 드래그 한 상태에서 (를 입력해주게 되면 옵시디언에서 자동으로 선택된 텍스트의 양 쪽에 괄호를 만들어줍니다.

이 기능은 괄호 뿐만 아니라 *, **, [[, ", ', == 등 활용이 가능합니다.

이를 활용하면 부동산 임장 지도를 만들거나, 여행 기록, 지역별 고객관리, 맛집 지도 등을 만드는 등 다양한 지도를 만들 수 있습니다.

Map View 플러그인

위치를 지도 위에 기록하게 되면 시각적으로 볼 수 있게되어 더욱 직관적인 노트 접근이 가능합니다.
예를 들어서 지역별로 고객을 나눠서 관리한다든지, 내가 갔던 여행지나 맛집을 지도에 기록한다든지 등으로 효율적인 관리가 가능합니다.

기본 사용법

마우스 좌측 버튼을 누르고 드래그를 하면 이동이 가능하고, 휠로 줌인, 줌아웃을 할 수 있습니다.

Map View 플러그인 사용법 영상 1편

Map View 플러그인 사용법 영상 2편

맵 타일 변경하기

기본으로 사용되고 있는 CartoDB는 소축적에서는 영어로 표기가 되기도 하고 자세한 정보를 보여주지 않고 있습니다.

설정에서 변경을 하실 수가 있는데 Map sources 부분을 보면 현재 CartoDB로 설정되어 있습니다.
맵 타일을 추가하려면 New map source를 누르고 URL을 입력해주어야 합니다.

맵 타일 링크를 통해 여러 타일을 확인할 수 있습니다.
그 중에서 가장 처음 있는 OpenStreetMap의 Standard tile을 적용해보겠습니다.

Name에는 OpenStreet

URL에는 https://tile.openstreetmap.org/{z}/{x}/{y}.png

을 입력해주고 지도를 확인을 해보면

메뉴에서 View – CartoDB 옆의 토글을 누르면 OpenStreet 적용이 가능합니다.
OpenStreet로 변경하면 지도가 달라진 게 확연히 느껴집니다.
소축적으로 바꿔서 보면 차이가 더욱 큰데, 전국의 도시들의 이름이 한글로 확인이 됩니다.

옵시디언 지도 위치 표시 방법

Map View 플러그인을 이용하여 위치를 기록하는 방법은 여러가지가 있습니다.

1. 마우스 우측 버튼을 누르고 으로 하실 수도 있지만 내가 원하는 위치를 지정하시려면 Cmd + P를 누르셔서 지정할 수도 있습니다.

위치 수동 입력

이 부분을 수동으로도 입력이 가능한데요.
구글맵에 접속해서 찾고자 하는 위치를 검색 후에 URL을 자세히 보면 위도와 경도가 포함되어 있습니다.

https://www.google.co.kr/maps/place/국립현대미술관+서울/data=!4m10!1m2!2m1!1z6rWt66a97ZiE64yA66-47Iig6rSA!3m6!1s0x357ca2c6a9d32947:0xfb70e7c1c785a405!8m2!3d37.5795117!4d126.9805862!15sChXqta3rpr3tmITrjIDrr7jsiKDqtIAiA4gBAZIBEW1vZGVybl9hcnRfbXVzZXVt4AEA!16s%2Fm%2F0zg9hg7?hl=ko&entry=ttu

URL의 3d 뒤에는 위도가, 4d 뒤에는 경도 정보가 있습니다.

위도와 경도 사이에 ,를 넣어서 구분하실 수 있습니다.

geo: 뒤에37.5795117,126.9805862를 붙여넣어 주시면 위치를 기록할 수 있습니다.

명령어 팔레트 (Cmd + P)

Cmd + P를 누르시고 map view를 입력해서 보면 open map view가 있고,
그 아래에 지도에 위치를 추가할 수 있는 기능들이 있습니다.

New geolocation note는 새로운 노트를 만들어 위치를 기록할 수 있고,
Add inline geolocation link는 인라인에 위치를 기록할 수 있고,
Add geolocation (front matter) to current note는 기존의 노트에 프론트 매터로 위치를 기록할 수 있습니다.

자주 사용하는 기능에는 단축키를 할당하여 손쉽게 사용할 수 있습니다.

구글 map api

위치를 기록할 때 기본 설정을 사용하게 되면 검색이 잘 되지 않기도 하고, 구체적인 위치가 검색이 되지 않습니다.

그 이유는 Map View 설정에서 Geocoding search provider를 보면 기본으로 OpenStreetMap으로 선택이 되어 있습니다.

바로 옆의 토글을 눌러서 보면 Google을 선택해주고, 아래 API key를 입력해줍니다.

위 버튼을 눌러 Google API key를 발급 받을 수 있습니다.

개인 정보 및 결제 정보를 입력하신 다음 받을 수 있는데, 유료 결제를 따로 신청하지 않는 이상은 무료로 사용이 가능합니다.

API 적용

API를 발급 받게 되면 우측에 복사 버튼이 있고, API key를 복사하여 옵시디언의 설정으로 다시 이동합니다.

Gecoding API key에 API key를 붙여넣기 하고, 바로 아래에 있는
Use Google Place for Searches를 활성화 시켜줍니다.

Google API 적용 후 지도를 검색하면 전보다 훨씬 정확한 검색이 가능합니다.

옵시디언을 사용하면서 tasks 플러그인을 활용하여 할 일을 관리할 수 있습니다.

하지만 아래와 같이 입력을 하게 되면 결괏값은 리스트 형식으로만 출력이 되기 때문에 한 눈에 여러 할 일을 파악하는 것이 쉽지 않습니다.

```tasks
```

이번에 소개해드릴 tasksCalendar 플러그인을 활용하면 리스트뷰, 캘린더뷰, 위클리뷰 등으로 할 일을 볼 수 있습니다.

한 눈에 볼 수 있는 캘린더 tasks 플러그인을 활용할 수 있습니다.

tasksCalendar 플러그인은 옵시디언 내에서 설치가 가능하지 않으며, 깃허브를 통해서 다운로드 받을 수 있습니다.

그리고 이 플러그인을 사용하기 위해서는 우선 Tasks 플러그인과 Dataview 플러그인이 필수적으로 설치가 되어있어야 합니다.

tasksCalendar 설명 영상

tasks-calendar 플러그인 다운로드

아래 버튼을 클릭, 링크로 이동하여 플러그인을 다운로드 받으실 수 있고, 다운로드 받은 파일에서 `tasksCalendar`를 그대로 옵시디언 볼트의 최상단에 복사하여 사용할 수 있습니다.

폴더 내에는 view.css, view.js, demo_file.md 파일이 포함되어 있습니다.

사용

옵시디언에서 demo_file.md 파일을 열어보면 아래와 같은 코드가 기본으로 작성되어 있습니다.

이 코드는 따로 노트를 만들어서 사용하실 수도 있고, 기존의 노트에 추가하여 사용을 할 수도 있기 때문에 필요에 따라 활용하시면 되겠습니다.

```dataviewjs

await dv.view("tasksCalendar", {

pages: "",
view: "month",
firstDayOfWeek: "1",
options: "style1"

})

```

dataviewjs 코드로 작성이 되어 있고, pages, view, firstDayOfWeek, options 이 네 가지는 기본적으로 작성이 되어야 정상적으로 작동을 합니다.

그리고 쿼리를 작성하실 때 대소문자 구분은 반드시 해줘야 합니다.

pages

할 일을 가져오는 방법을 설정할 수 있습니다. 기본적으로 폴더나 태그 등에서 가져올 수 있고, 예시로 폴더를 설정하는 방법과 태그를 설정하는 방식으로 설명하겠습니다.

폴더

아래 ‘폴더 이름’ 이라고 작성된 부분에 각자의 폴더 경로를 적어주면 됩니다. 폴더에 상위 폴더가 있는 경우에는 상위 폴더를 포함한 경로를 입력할 수 있습니다.

pages:"dv.pages().file.where(f=>f.folder === '폴더 이름').tasks"

태그

pages: "dv.pages().file.tasks.where(t => t.tags.includes('#태그'))"

view

view는 3가지로 설정이 가능하고, view: "list", view: "month", view: "week" 로 작성이 가능합니다.

처음 노트를 열었을 때 기본 화면을 설정하는 것으로 캘린더 뷰인 “month”가 가장 활용도가 좋을 것이라 생각합니다.

firstDayOfWeek

숫자 ‘0’과 ‘1’ 로 설정이 가능하며, firstDayOfWeek: "0" 형식으로 입력할 수 있습니다.

‘0’은 한 주의 시작을 일요일로 설정하는 것이고, ‘1’은 월요일로 설정합니다.

options

기본적으로 ‘style’이 입력되어 있습니다. style뒤에 숫자 1부터 11까지 입력하여 변경이 가능한데, 노트를 열게 되면 초기에 표시되는 형식을 지정해주는 것입니다.

week 아이콘을 눌러서 확인을 해보실 수 있습니다.

그 외에도 옵션에는 많은 것들을 추가로 입력하실 수 있습니다. 옵션을 입력하는 방식은 options: "옵션1 옵션2 옵션3" 형식으로 옵션 사이에는 스페이스바를 눌러서 한 칸의 띄워야 합니다.

noProcess

options: "noProcess" 형식으로 입력이 가능하고, 할 일의 시작일과 마감일 사이의 날짜들에 할 일을 표시하지 않습니다. 이는 due date만 입력했을 때는 나타나지 않고, 시작 날짜를 입력해야 나타나게 됩니다.

noCellNameEvent

options: "noCellNameEvent 형식으로 입력 가능하고, 날짜를 눌러서 데일리 노트로 이동하는 동작을 비활성화 시켜줍니다.

mini

options: "mini"로 입력할 수 있고, 노트에 표시되는 플러그인의 크기를 줄여줍니다.

noWeekNr

options: "noWeekNr"로 입력하고 캘린더의 좌측에서 주차 번호를 숨길 수 있습니다.

noFilename

options: "noFilename"을 입력하게 되면 캘린더에서 노트의 제목을 숨길 수 있습니다. 할 일이 많이 등록된 경우 불필요한 노트 제목을 제거함으로써 더욱 많은 할 일을 캘린더에 나타낼 수 있습니다.

lineClamp

options: "lineClamp1"
options: "lineClamp2"
options: "lineClamp3"
options: "noLineClamp"

위와 같은 형식으로 입력이 가능하고, 캘린더에 표시되는 할 일의 행의 개수를 조절할 수 있습니다. 기본적으로 한 줄로 표시가 됩니다.

noLayer

options: "noLayer"를 입력하게 되면 캘린더에 표시되는 해당 월의 글자를 숨길 수 있습니다.

데일리 노트 경로와 제목 설정

데일리 노트의 경로

캘린더에서 날짜를 클릭했을 때 데일리 노트로 이동하게 되는데, 설정을 따로 해주지 않은 경우에는 옵시디언에 기본으로 설정된 폴더에 새로운 데일리 노트가 생성되기 때문에 반드시 설정을 하시는 걸 추천드립니다.

dailyNoteFolder: "데일리노트 폴더명" 데일리 노트가 저장된 폴더의 경로를 지정할 수 있습니다. 데일리 노트가 하위 폴더인 경우에는 상위폴더를 포함한 경로를 작성해주어야 합니다.

데일리 노트 제목 포맷 설정

플러그인의 설명에서는 아래와 같이 입력하여 설정이 가능하다고 설명하고 있지만 실제로는 작동하지 않습니다.

dailyNoteFormat: "YYYY, MMMM DD - dddd"
dailyNoteFormat: "YYYY-[W]ww"

그렇기 때문에 view.js 파일을 직접 변경해주어야 하는데, 우선 .js 파일을 열어서 YYYY-MM-DD로 검색을 해서 본인의 데일리 노트 포맷으로 변경해주어야 합니다.

검색을 진행하게 되면 결과는 총 12개가 나오게 되고, YYYY-MM-DD(ddd) 형식으로 변경하게 되면, 2024-03-27(화) 형식으로 데일리 노트가 생성 및 이동하게 됩니다.

콜아웃은 텍스트 상자에 스타일을 적용하여 텍스트의 배경색, 테두리, 아이콘 또는 라벨 등을 커스터마이징하여 내용을 돋보이게 할 수 있습니다. 그리고 대시보드에 적용해서 dataview, tasks 등의 플러그인 기능을 활용하면 더욱 많은 정보를 홈페이지에서 볼 수 있습니다.

이번 글에서는 콜아웃의 기능에 대해 조금 더 자세히 살펴보고, 또 새로운 CSS를 적용해서 대시보드나 일반적인 글에도 활용해보는 시간을 갖도록 하겠습니다.

그리고 이번 글에서 소개드리는 CSS를 적용하면 카드뷰, 멀티 칼럼, 인라인 이미지 등의 기능을 추가적으로 사용할 수 있습니다.

옵시디언 콜아웃 입력 방법

1. 마크다운

마크다운을 활용해서 아래와 같이 입력하면 콜아웃을 입력할 수 있습니다.

> [!note]
>

2. 마우스 우클릭

편집기 화면에서 마우스 오른쪽 버튼을 클릭한 다음 Insert – Callout 을 눌러서 쉽게 입력이 가능합니다.

3. 명령 팔레트

단축키Cmd + P를 눌러서 명령 팔레트를 열고 ‘콜아웃’을 입력한 다음 콜아웃 삽입이 가능합니다.

콜아웃 토글

콜아웃을 토글하여 감추거나 보이게 만드는 방법입니다.

> [!note]뒤에 +또는 -를 추가하면 토글 버튼을 만들 수 있습니다.

-를 입력하면 기본적으로 상자가 닫힌 상태가 되고, +를 입력하면 토글이 열린 상태에서 나타납니다.

콜아웃 중복

기본적으로 콜아웃을 작성해주시고 하위 콜아웃의 앞에는 꺾쇠 괄호를 두 개씩 >>넣어줍니다.

그리고 하위로 들어갈 콜아웃 중간에는 >을 하나씩 넣어줍니다.
> [!note]
>> [!note] 제목
>> 내용
>
>> [!NOTE]- Title
>> Contents
>
>> [!tip]+ Title
>> Contents

모듈 CSS 소개

아래에서 소개시켜드릴 CSS로는 여러가지 기능을 사용할 수 있습니다.

카드뷰

콜아웃 멀티 칼럼

대시보드 만들기

인라인 이미지

콜아웃 사용 방법 및 모듈러 CSS 설명 영상

CSS 다운로드 및 적용

CSS 파일을 다운 받으신 다음 CSS 스니펫 폴더에 넣어주고, 옵시디언의 설정 – 테마 – CSS 스니펫에서 새로고침 버튼을 누른 후 활성화 시켜주면 사용이 가능합니다.

List Column/Grid/Card 참조

칼럼, 그리드, 카드를 생성하는데 적용할 수 있는 구문은 아래와 같습니다.

프론트매터나 tag에 적용이 가능한데, 프론트매터에 적용하게 되면 노트의 전체에 적용이 되므로, tag를 사용하여 적용할 범위를 지정해서 나눌 수 있습니다.

인라인 이미지 (float callout)

float를 사용하면 인라인에 이미지를 추가할 수 있습니다.

사용 방법은 예시에서 처럼 콜아웃 뒤에 파이프|를 추가하고 앞에서부터 순서대로 넣을 수 있습니다.

맨 앞에 들어가는 float는 라이브 미리 보기 모드에서도 적용된 모습을 볼 수 있습니다만 간혹 정상적인 동작을 하지 않을 때가 있습니다.

dashboard.css 업데이트

콜아웃에 tasks 플러그인을 적용하는 경우에 리스트 간의 간격이 넓어지는 이슈로 인해 코드를 추가해서 깃허브에 업로드를 하였습니다.

옵시디언 대시보드를 만들고 홈페이지로 지정하는 방법에 대해서 다루겠습니다.
대시보드는 MOC 즉 Map of content 라고 부르기도 하고, 인덱스 페이지, 홈페이지 등으로 불리기도 합니다.

대시보드를 만들어서 홈페이지로 지정하거나 대시보드의 노트 링크 안에 대시보드를 추가로 작성하여 입체적인 지식 관리가 가능합니다.

우리가 꼭 기억해야 할 중요한 일이 있을 때 “염두에 둔다” 라는 표현을 자주 사용하듯이 옵시디언에서도 현재 진행중인 프로젝트의 노트 또는, 단기간에 완성하지 못하는 노트가 있다면 그것을 홈페이지에 두고, 단축키 또는 간단히 아이콘을 클릭하는 것 만으로도 접근이 가능하도록 만들 수 있습니다.

대시보드 만드는 방법

옵시디언 대시보드(MOC) 만들기

대시보드를 작성하고 적용하기 위해서는 CSS 스니펫을 적용시켜줘야 합니다.
이는 커뮤니티 플러그인을 설치했던 방법과 차이가 있습니다.

먼저 사용하는 볼트가 저장된 폴더 내의 .obsidian → snippets에 .css 파일을 저장을 먼저 해주신 다음에, 옵시디언 [설정] – [테마]에서 CSS 스니펫에서 활성화를 시켜줘야 합니다.

대시보드 노트 만들기

가장 새 노트를 만들어주고, 노트의 제목은 자유롭게 만들어 주면 되고, 예시에서는 Home 이라고 만들었습니다.
대시보드 CSS의 원활한 작동을 위해서 반드시 카테고리의 제목은 heading 2로 입력을 해주셔야 합니다.

그리고 그 아래에 리스트를 만들어 섹션 이름을 지정하고, 하위 항목으로 노트들의 링크를 삽입할 수 있습니다.

데이터뷰 인라인 쿼리 사용

대시보드의 아래 부분은 특정한 노트의 리스트를 볼 수 있는 카테고리를 만들었습니다.
여기에서는 데이터뷰 플러그인의 인라인 쿼리를 사용하여 작성을 하였습니다.

하나를 살펴보면 최근 수정한 노트 5개를 가져오는 쿼리인데, 기본적으로 아래를 응용하여 바꿀 수 있습니다.

`$=dv.list(dv.pages(”).sort(f=>f.file.mtime.ts,”desc”).limit(5).file.link)`

폴더를 지정하기 위해서는 pages(“)에 넣어주시면 되고, desc(내림차순)은 ase(오름차순)으로 변경하실 수 있습니다.
그리고 limit뒤의 괄호 안의 숫자는 대시보드에 보여줄 노트의 개수를 의미합니다.

대시보드 페이지 작성 예시

---
cssclasses: dashboard
---

## 독서
- 📗 현재 읽고 있는 책
 - [[노트1]]
 - [[노트2]]
- 📕 앞으로 읽을 책
 - [[노트3]]
 - [[노트4]]
- 📘 독서 노트
 - [[독서 노트 작성]]

## 학습
- 💻 코딩 공부
 - [[자바스크립트 기초]]
 - [[파이썬 기초]]
- 💜 옵시디언
 - [[Dataview 플러그인]]
 - [[Templater 플러그인]]

## 유튜브
- 🗒 기획
 - [[03_옵시디언 꾸미기]]
- 🎥 촬영
 - [[02_CSS 적용하기]]
- 🖥 편집
 - [[01_플러그인 활용]]

## 노트 리스트
- 🗃 최근 수정한 노트
  `$=dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").limit(5).file.link)`
- 📝 최근 작성한 노트
  `$=dv.list(dv.pages('').sort(f=>f.file.ctime.ts,"desc").limit(5).file.link)`
- 📁 폴더: 폴더명
  `$=dv.list(dv.pages('"폴더명"').sort(f=>f.file.ctime.ts,"desc").limit(5).file.link)`
- 🔖 태그: 태그명
  `$=dv.list(dv.pages('#태그명').sort(f=>f.file.name,"desc").limit(5).file.link)`
- ✅ 완료: 프로젝트
  `$=dv.list(dv.pages('').where(p => p.source === "값").sort(f=>f.file.name, "asc").limit(5).file.link)`

dashboard.css 파일

위 링크에 접속하여 아래 그림에서 표시된 버튼을 눌러서 다운로드 받을 수 있습니다.

homepage 플러그인

대시보드로 지정할 노트의 작성을 완성한 다음은 ‘homepage’라는 커뮤니티 플러그인을 사용하여 옵시디언의 Home 화면으로 사용할 수 있습니다.이렇게 완성을 해봤는데요.
이제 작성한 노트를 홈페이지로 지정을 해 주어야 합니다.

[옵션]에서 open when empty를 활성화시켜 주게 되면 옵시디언의 모든 탭을 닫아도 홈 화면이 유지가 됩니다.
그리고 ‘Opened view’는 기본으로 Default view로 설정이 되어 있지만 dashboard.css 파일을 사용하려면 reading view로 변경하고 사용해야 합니다.

책 정보 수집 플러그인 커스텀하기

안녕하세요 북트레싱입니다.
웹에서 책 정보를 불러오는 플러그인인 korean book info를 커스텀하여 사용할 수 있는 방법입니다.
이 책 정보 수집 플러그인은 YES24 홈페이지에서 추출하여, 한 번의 클릭만으로 나만의 서재를 만들 수 있게 도와줍니다.

플러그인의 제한적인 부분을 내 입맛에 맞춰 변경할 수 있는 방법을 살펴보겠습니다.

main.js 파일 찾기

맥OS

Finder를 열고 Valut가 설치되어 있는 폴더로 이동하여 단축키 Shift + Cmd + .를 입력하게 되면 숨겨져 있던 파일들이 보이게 됩니다.

.obsidian → plugins → kr-book-info-plugin → main.js

경로로 이동하여 파일을 열어 줍니다. 이때 텍스트 편집기를 이용해서도 편집이 가능하고, 코드를 좀 더 보기 쉽게 VS CODE 프로그램을 설치하여 사용하면 더욱 좋습니다.

윈도우

윈도우는 보기 → 표시 → 숨긴 항목 버튼을 눌러 숨겨진 파일을 볼 수 있습니다.

맥OS와 동일한 폴더에 main.js 파일이 저장되어 있고, 메모장 또는 vs code를 이용하여 편집이 가능합니다.

코드 수정하기

main.js 파일을 열어보면 수많은 코드가 있는데, 맥은 Cmd + F, 윈도우는 Ctrl + F를 눌러서 검색 창에 frontmatter를 입력하여 해당 부분으로 이동합니다.

:을 기준으로 좌측은 Key, 우측은 Value를 넣어줍니다.

처음에 바로 main.js 파일을 수정하는 것보다 옵시디언에서 먼저 정리를 한 다음에 그것을 참고하여 작성하면 더욱 편리합니다.
코드의 작성 순서대로 프론트매터에 적용이 되기 때문에 위에서부터 차근차근 입력해줍니다.

콜론(:)을 기준으로 좌측은 마음대로 수정이 가능하지만 우측은 주의하여 수정해야만 코드가 정상적으로 작동하게 됩니다.

공백으로 남기고 싶은 경우에는 백틱 ` 2개를 입력해주고, 체크박스를 만들려면 false를 입력해줘야 합니다.
그리고 property 사이에는 ,를 사용하여 구분시켜 줍니다.

korean book info 플러그인 설명 영상

main.js 파일 공유

영상에서 소개해드리는 파일을 다운 받아서 적용한 후에 수정을 하시는 것을 추천드립니다.
특히 Yes24에서 책 정보를 불러오는 부분에서 author를 리스트 형식으로 불러올 수 있도록 코드를 적용했습니다.

main.js 파일을 다운 받으신 다음에 위에서 말씀드린 것 처럼,

.obsidian → plugins → kr-book-info-plugin폴더에 붙여넣기 하신 다음에 대치 또는 덮어쓰기로 파일을 변경해줍니다.

그리고 코드를 수정하신 다음에는 반드시 옵시디언을 종료했다가 다시 시작하셔야 정상 작동을 하게 됩니다.

main.js 파일 다운로드

파일은 소스 공유를 쉽게할 수 있는 깃허브를 통해서 공유하고 있습니다.

위의 링크를 눌러 이동을 하신 다음에 아래 그림에서 설명드리는 것처럼 다운로드 아이콘(Download raw file)을 누르면 다운이 완료됩니다.