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

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

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

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

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;

깃허브 다운로드

옵시디언 파일 복구

옵시디언에서 노트를 작성하다 보면 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 플러그인을 적용하는 경우에 리스트 간의 간격이 넓어지는 이슈로 인해 코드를 추가해서 깃허브에 업로드를 하였습니다.

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

안녕하세요 북트레싱입니다.
웹에서 책 정보를 불러오는 플러그인인 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)을 누르면 다운이 완료됩니다.

옵시디언을 커스터마이징하여 사용하는 방법은 크게 두 가지가 있습니다.
미리 만들어진 테마를 다운받아서 옵시디언에 적용을 하는 방법과 CSS를 사용해서 변경할 수 있는데요.

CSS를 사용하는 것은 구체적으로 내가 원하는 기능을 추가할 수는 있지만 CSS를 알아야 하기 때문에 진입장벽이 있어서 쉽게 접근이 어렵습니다.
그래서 보통 테마를 다운받아서 사용을 하는데 이번에는 테마 중 가장 인기가 많은 ‘Minimal’ 테마에 대해서 다뤄보겠습니다.

옵시디언 미니멀 테마를 다룬 영상은 아래를 확인해주세요.

옵시디언 미니멀 테마 영상

옵션 – 테마

먼저 옵션 - 테마로 가시면 옵시디언을 꾸밀 수 있는 부분들이 있습니다.
글꼴은 인터페이스, 텍스트, 모노스페이스에 각각 다르게 적용이 가능이 가능하고, 화면에 나타나는 글자의 크기도 여기서 조절하실 수 있습니다.

그리고 가장 아래를 보시면 CSS 스니펫이라고 이 부분은 우리가 CSS를 작성해서 커스텀할 수 있는 부분입니다.

눈누 (무료 폰트 사이트)

옵시디언에서 사용하는 글꼴은 기본적으로 PC에 설치되어 있는 폰트를 사용 가능합니다.
요즘엔 무료로 폰트를 제공하는 사이트가 많아서 다운받아 사용할 수가 있는데,
그 중 가장 추천드리는 사이트는 눈누(noonnu) 라는 사이트 입니다.
기본적으로 컴퓨터에 설치되어 있는 폰트를 사용할 수 있지만,
여기서 마음에드는 글씨체를 다운 받으신 다음에 PC에 설치를 해주시면 옵시디언에서 사용할 수 있습니다.

미니멀 테마

미니멀 테마는 현재 가장 높은 다운로드 수를 기록하고 있고 널리 사용 중입니다.
단순히 미니멀한 느낌 때문에 사용하시는 분들도 계시지만 다른 플러그인 들과 함께 사용한다면 더욱 강력하고 특별한 기능이 있는 테마입니다.

미니멀 테마를 설치하게 되면, 깔끔하기만 하고 별로 장점이 없어보입니다.
하지만 이렇게 단순해 보이는 미니멀 테마이지만 다른 플러그인을 통해서 설정을 변경해주시면 너무도 매력적인 테마로 변신하게 됩니다.

카드뷰

데이터뷰 플러그인을 이용해서 만든 테이블을 카드뷰로 볼 수 있습니다.

카드뷰를 사용하는 방법은 프론트매터의 key에 cssclasses를 입력하고 value에 아래와 같은 값들을 사용하실 수 있습니다.

갤러리뷰(이미지 그리드)

옵시디언에서 이미지를 노트에 첨부하게 되면 넓은 화면임에도 불구하고 이미지 한장이 그 너비를 가득 채우게 삽입이 됩니다.
미니멀 테마를 사용하면 갤러리뷰 형식으로 볼 수가 있는데, 내가 원하는대로 이미지 첨부가 가능합니다.

소스 보기 모드에서 아래와 같이 작성을 하고, 읽기 모드로 보게 되면 이미지가 정렬된 것을 확인할 수 있습니다.

이미지 주소가 들어있는 행이 서로 붙어 있으면 한 행에 이미지가 나타나게 되고, 중간에 빈 행으로 남기면 자동으로 그 아래 행에 이미지가 표시됩니다.

이 기능은 cssclass에 img-grid를 입력해서 사용이 가능하기도 하지만 옵션에서 언제나 갤러리뷰로 볼 수 있도록 설정도 가능합니다.

Todoist는 전세계적으로 3천만 명 이상의 사용자가 있는 할 일 어플입니다.

앱 스토어와 플레이 스토어에서도 많은 사용자들에 의해 좋은 평가를 받고 있으며, 무료/유료 서비스를 제공합니다.

옵시디언에서 투두이스트 사용

옵시디언에서 Todoist를 사용하기 위해서는 두 개의 어플을 사용하여 상호보완을 할 수 있습니다.

Ultimate Todoist Sync어플은 옵시디언에 할 일을 등록하고 등록한 할 일을 Todoist로 보내주는 역할을 하고, Todoist Sync Plugin은 Todoiost에 등록된 할 일을 실시간으로 불러오는 기능을 합니다.

옵시디언과 Todoist를 연동하기 위해서는 API가 필요하며, API 토큰을 받는 방법은 영상에서 소개하고 있습니다.

옵시디언과 Todoist 연동

Ultimate Todoist Sync

예전에 언급했던 Tasks 플러그인의 사용법과 유사한 점이 많아서, Tasks 플러그인을 설치하지 않았다면 설치를 하고 사용하는 것을 권장합니다.

아래와 같이 작성하는데 체크박스를 입력하려면 단축키 cmd+L로도 가능합니다.

프로젝트

투두이스트 내의 프로젝트 이름 앞에 #을 붙여주게 되면 할 일이 자동으로 프로젝트로 이동을 하고,
#todoist를 넣어주면 자동으로 할 일의 뒤에 todoist id 가 생성되어야 정상적인 등록이 된 것입니다.

프로젝트는 무료 계정의 경우 최대 5개 까지 생성이 가능합니다.

우선 순위

우선 순위는 !!2로 입력하게 되면 중요도가 P2가 아닌 P3인 일로 입력이 됩니다.
참고로 중요도는 P1~P4 까지 4단계가 있는데 입력을 할 때는 P1=!!4, P4=!!1로 입력을 해야하는 오류가 있습니다.

작성 예시

- [ ] 할 일 📅날짜 !!2 #프로젝트이름 #todoist

기본적으로 할 일이 자동으로 투두이스트로 이동하게 되고, 체크박스를 눌러 완료를 시키거나, 할 일 또는 날짜 등의 변경도 가능합니다.

Todoist Sync Plugin

```todoist 로 시작하는 블록 코드를 만들어서 입력 가능

기본적인 사용법의 예시

```todoist
name: Todoist 할 일 ({task_count})
filter: "(today | tomorrow) & P1 "
group: true
sorting:
- priority
- date
```

필터 (filter) 예시

• #project이름 : 프로젝트 이름 앞에 #을 추가하면 프로젝트 내의 할 일을 필터링
• today,tomorrow,yesterday 등의 자연어의 입력이 가능
• overdue: due date가 지난 일들
• P1,P2,P3,P4: 중요도 (P1이 가장 중요도가 높음)
• group: 프로젝트를 그룹별도 묶여서 표시해 줌
• sorting: 정렬을 하는 기준을 입력

기호 설명

&, |, (, ), , 등의 기호를 필터 사이에 넣을 수 있음

todoist 필터 참고

날짜 기간 입력하는 방법

• due after: 날짜에서 날짜 부분의 날은 포함하지 않고 그 이후의 날을 계산합니다.
• due before:날짜역시 날짜 부분을 날을 제외하고 그 이전의 날까지만 계산합니다.

데일리 노트 기간 적용 예시

filter: "due after:<% tp.file.title.slice(0,10) %> & due before:<%* const extractedDate = tp.file.title.slice(0, 10); const currentDate = new Date(extractedDate); currentDate.setDate(currentDate.getDate() + 5); const formattedDate = currentDate.toISOString().split('T')[0]; tR += formattedDate; %>"

위의 코드에서 currentDate.getDate() + 숫자 부분에서 숫자를 바꿔서 사용 가능합니다.

반드시 Templater 플러그인이 설치가 되어 있어야 실행이 가능하고, 사용법은 데일리 노트를 참고하세요

일간, 주간 노트에 이은 월간, 연간 노트에 관한 내용입니다.

대부분 디지털 노트를 작성하는데 하루하루 데일리 노트에만 기록을 남기곤 합니다. 하지만 삶이라는 전체적인 관점에서 하루하루를 연결시키는 부분이 정말 중요합니다.

습관 기르기

이번 먼슬리 노트에는 ‘습관’ 이라는 키워드를 넣어봤습니다. 습관을 만들고 싶을 때 막연한 생각만 하고 노력하는 것보다는 시각적으로 직접 진행 상황을 보면서 하게 되면, 성취감을 느낄 수도 있고 연속되는 기록을 깨트리고 싶지 않아서 도전 정신도 생기게 됩니다.

옵시디언의 Tracker 플러그인은 캘린더, 그래프 등의 형식으로 습관의 진행 상황을 직관적으로 볼 수 있게 만들어주는 도구입니다.

Tracker 플러그인

옵시디언 Tracker 플러그인은 개인적인 습관과 목표를 추적하고 관리할 수 있도록 도와주는 도구입니다. 이 플러그인은 특히 습관 형성과 유지에 유용하고, 일상적인 활동이나 공부, 운동 등과 같은 다양한 개인 목표에 대한 진행 상황을 기록하고 추적할 수 있게 해줍니다. 사용자는 특정 습관이나 목표에 대한 진행 상태를 시각적으로 볼 수 있으며, 이를 통해 동기부여를 받고 자신의 진행 상황을 정확하게 파악할 수 있습니다.

트래커 플러그인은 옵시디언의 유연한 노트 작성 환경과 잘 통합되어, 사용자가 자신만의 맞춤형 트래킹 시스템을 구축할 수 있도록 지원합니다. 예를 들어, 하루에 물을 충분히 마시거나, 정기적인 운동을 하는 것과 같은 습관을 기록하고, 이를 통해 장기적인 건강 목표를 달성할 수 있도록 돕습니다. 또한, 이 플러그인은 습관 형성 과정에서 발생할 수 있는 장애물을 극복하고, 일관성을 유지할 수 있도록 도와줍니다.

월간, 연간 노트 템플릿 만들기

월간 계획 (Monthly note) 소스 코드

운동 습관 기르기

※ 이 코드는 tracker 플러그인의 설치 및 활성화가 필요합니다.

사용과 수정하는 방법은 영상을 시청해주세요

```tracker
searchType: frontmatter
searchTarget: exercise
folder: 10. Planner/11. Daily
datasetName: 운동 습관 기르기
month:
	startWeekOn: 'mon'
	headerMonthColor: orange
	initMonth: <% tp.file.title %>
	mode: annotation
	annotation: 💪
```

독서 습관 기르기

※ 이 코드는 tracker 플러그인의 설치 및 활성화가 필요합니다.

사용과 수정하는 방법은 영상을 시청해주세요

```tracker
searchType: frontmatter
searchTarget: reading_page
datasetName: 읽은 페이지
folder: 10. Planner/11. Daily

line:
	title: 책 읽는 습관
	xAxisLabel: 날짜
	yAxisLabel: 읽은 페이지
	yAxisUnit: 페이지
	lineColor: red
	pointColor: red
	pointBorderWidth: 2
	pointBorderColor: red
	showLegend: True
```

요약

```tracker
searchType: frontmatter
searchTarget: reading_page
datasetName: 읽은 페이지
folder: 10. Planner/11. Daily
startDate: <%* const title = tp.file.title; const firstDay = moment(title + "-01").format('YYYY-MM-DD(ddd)'); tR += firstDay; %>
endDate: <%* const year = tp.file.title.split("-")[0]; const month = tp.file.title.split("-")[1]; const lastDay = moment(title).endOf('month').format('YYYY-MM-DD(ddd)'); tR += lastDay; %>

summary:
	template: "적게 읽은 날: {{min()::i}}페이지\n많이 읽은 날: {{max()::i}}페이지\n독서한 날: {{numDaysHavingData()::i}}일"

```

연간 계획 (Yearly Note) 소스 코드

achievement 및 체크박스

```dataview
TABLE without id
	file.link as 날짜,
	achievement as 성과
FROM "10. Planner/11. Daily"
WHERE important_date = true AND contains(file.name, "<% tp.file.title %>")
```

읽은 책 리스트

```dataview
TABLE without id
	rows.reading_book as "책 제목",
	rows.date_daily as "읽은 날짜"
FROM "10. Planner/11. Daily"
WHERE contains(file.name, "<% tp.file.title %>") AND reading_book != null
FLATTEN reading_book
GROUP BY reading_book
```

월간 리뷰

편안하게 사용하시고, 재배포 시에는 출처를 표기해주세요

|요일| 내용 |
|---|---|
|<% tp.file.title %>-1월|<%* const year01 = tp.file.title; const month01 = "01"; const monthlyNoteTitle01 = `${year01}-${month01}`; const reviewSection01 = `![[${monthlyNoteTitle01}#^review]]`; tR += reviewSection01; %>|   
|<% tp.file.title %>-2월|<%* const year02 = tp.file.title; const month02 = "02"; const monthlyNoteTitle02 = `${year02}-${month02}`; const reviewSection02 = `![[${monthlyNoteTitle02}#^review]]`; tR += reviewSection02; %>|
|<% tp.file.title %>-3월|<%* const year03 = tp.file.title; const month03 = "03"; const monthlyNoteTitle03 = `${year03}-${month03}`; const reviewSection03 = `![[${monthlyNoteTitle03}#^review]]`; tR += reviewSection03; %>|
|<% tp.file.title %>-4월|<%* const year04 = tp.file.title; const month04 = "04"; const monthlyNoteTitle04 = `${year04}-${month04}`; const reviewSection04 = `![[${monthlyNoteTitle04}#^review]]`; tR += reviewSection04; %>|
|<% tp.file.title %>-5월|<%* const year05 = tp.file.title; const month05 = "05"; const monthlyNoteTitle05 = `${year05}-${month05}`; const reviewSection05 = `![[${monthlyNoteTitle05}#^review]]`; tR += reviewSection05; %>|
|<% tp.file.title %>-6월|<%* const year06 = tp.file.title; const month06 = "06"; const monthlyNoteTitle06 = `${year06}-${month06}`; const reviewSection06 = `![[${monthlyNoteTitle06}#^review]]`; tR += reviewSection06; %>|
|<% tp.file.title %>-7월|<%* const year07 = tp.file.title; const month07 = "07"; const monthlyNoteTitle07 = `${year07}-${month07}`; const reviewSection07 = `![[${monthlyNoteTitle07}#^review]]`; tR += reviewSection07; %>|
|<% tp.file.title %>-8월|<%* const year08 = tp.file.title; const month08 = "08"; const monthlyNoteTitle08 = `${year08}-${month08}`; const reviewSection08 = `![[${monthlyNoteTitle08}#^review]]`; tR += reviewSection08; %>|
|<% tp.file.title %>-9월|<%* const year09 = tp.file.title; const month09 = "09"; const monthlyNoteTitle09 = `${year09}-${month09}`; const reviewSection09 = `![[${monthlyNoteTitle09}#^review]]`; tR += reviewSection09; %>|
|<% tp.file.title %>-10월|<%* const year10 = tp.file.title; const month10 = "10"; const monthlyNoteTitle10 = `${year10}-${month10}`; const reviewSection10 = `![[${monthlyNoteTitle10}#^review]]`; tR += reviewSection10; %>|
|<% tp.file.title %>-11월|<%* const year11 = tp.file.title; const month11 = "11"; const monthlyNoteTitle11 = `${year11}-${month11}`; const reviewSection11 = `![[${monthlyNoteTitle11}#^review]]`; tR += reviewSection11; %>|
|<% tp.file.title %>-12월|<%* const year12 = tp.file.title; const month12 = "12"; const monthlyNoteTitle12 = `${year12}-${month12}`; const reviewSection12 = `![[${monthlyNoteTitle12}#^review]]`; tR += reviewSection12; %>|