[옵시디언] 내 습관 힙하게 관리하기 (히트맵) - 3) 히트맵 사용하기

이전 글에서 히트맵을 사용하기 위한 사전작업까지 모두 마무리했습니다.

이제 내가 습관을 완료했는지 체크하는 것을 히트맵이 자동으로 인식해서 표시하도록 하는 작업만 남았습니다.

이를 위해 히트맵의 코드를 수정하는 일을 할 건데요.

 

첫번째 글 마지막 부분에서 보여드린 히트맵 코드를 보시면 이렇게 생겼습니다.

```dataviewjs
dv.span("** 😊 Title  😥**") /* optional ⏹️💤⚡⚠🧩↑↓⏳📔💾📁📝🔄📝🔀⌨️🕸️📅🔍✨ */
const calendarData = {
    year: 2022,  // (optional) defaults to current year
    colors: {    // (optional) defaults to green
        blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"], // first entry is considered default if supplied
        green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
        red:         ["#ff9e82", "#ff7b55", "#ff4d1a", "#e73400", "#bd2a00"],
        orange:      ["#ffa244", "#fd7f00", "#dd6f00", "#bf6000", "#9b4e00"],
        pink:        ["#ff96cb", "#ff70b8", "#ff3a9d", "#ee0077", "#c30062"],
        orangeToRed: ["#ffdf04", "#ffbe04", "#ff9a03", "#ff6d02", "#ff2c01"]
    },
    showCurrentDayBorder: true, // (optional) defaults to true
    defaultEntryIntensity: 4,   // (optional) defaults to 4
    intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
    intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
    entries: [],                // (required) populated in the DataviewJS loop below
}

//DataviewJS loop
for (let page of dv.pages('"daily notes"').where(p => p.exercise)) {
    //dv.span("<br>" + page.file.name) // uncomment for troubleshooting
    calendarData.entries.push({
        date: page.file.name,     // (required) Format YYYY-MM-DD
        intensity: page.exercise, // (required) the data you want to track, will map color intensities automatically
        content: "🏋️",           // (optional) Add text to the date cell
        color: "orange",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })
}

renderHeatmapCalendar(this.container, calendarData)
```

코드를 어떻게 수정하면 되는지 알려드리기 전에 각 부분이 어떤 것을 의미하는지 제가 아는대로 정리해볼게요.

```dataviewjs

 

점 세개(```)는 코드의 시작과 끝을 알립니다.

첫 줄의 ```는 코드의 시작, 맨 아래의 ```는 코드의 끝을 의미해요.

dataviewjs는 옵시디언의 '데이터뷰'라는 기능을 사용하겠다는 것을 의미합니다.

dv.span("** 😊 Title  😥**") /* optional ⏹️💤⚡⚠🧩↑↓⏳📔💾📁📝🔄📝🔀⌨️🕸️📅🔍✨ */

히트맵의 타이틀을 적는 부분입니다.

녹색으로 표시된 부분에 여러분이 원하시는 타이틀을 입력하시는 거죠.

꼭 쌍따옴표까지 입력되어야 합니다.

옆의 옵셔널은 코드 상에서 없어도 되는 부분이지만, 개발하신 분이 설명하기 위한 용도로 넣어놓으셨습니다.

 

전 여러 개의 습관을 유지하려고 하고 있고, 각 습관 하나 당 하나의 히트맵으로 관리하고 있어요.

그래서 전 각 히트맵의 타이틀을 습관의 명칭으로 적어두었습니다.

이전 글에서 '프로퍼티'의 이름으로 써두신 부분을 입력하시면 되겠습니다.

제가 사용했던 예를 활용해보자면 두 개의 코드를 붙여넣기 하시고, 하나의 코드에 "경제 공부하기", 다른 하나의 코드에 "블로그 글 쓰기"를 쓰게 되겠네요.

const calendarData = {
    year: 2022,  // (optional) defaults to current year
    colors: {    // (optional) defaults to green
        blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"], // first entry is considered default if supplied
        green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
        red:         ["#ff9e82", "#ff7b55", "#ff4d1a", "#e73400", "#bd2a00"],
        orange:      ["#ffa244", "#fd7f00", "#dd6f00", "#bf6000", "#9b4e00"],
        pink:        ["#ff96cb", "#ff70b8", "#ff3a9d", "#ee0077", "#c30062"],
        orangeToRed: ["#ffdf04", "#ffbe04", "#ff9a03", "#ff6d02", "#ff2c01"]
    },

히트맵에 표시되는 연도와 색을 지정하는 부분입니다.

year: 2022에 해당하는 부분에 현재 시점의 연도를 입력하시면 되고, colors는 지정할 수 있는 색을 설정할 수 있습니다.

 

색깔 이름 옆에 있는 대괄호 안에 다섯개씩 들어있는 녹색 글자는 색을 코드로 표현한 것입니다.

이를 헥스 코드라고 하는데요.

하나의 색에 다섯개의 색이 들어있는 형태인데, 각 색을 채도를 달리 하여 넣어놓은 것입니다.

파란색이라면 어두운 파란색부터 밝은 파란색까지 다섯 단계로 나누어 입력해둔 것이죠.

 

색을 취향에 맞게 만들고 싶으시면 orangeToRed 행의 마지막에 쉼표를 찍고 다음 줄로 내려가 같은 형식으로 작성하시면 됩니다.

예를 들어, 보라색 계열의 색을 추가하고 싶으시면 violet:  [ 보라색에 해당하는 헥스코드 5개 ]를 입력하시면 됩니다.

이것저것 건들기 귀찮으시면 위 부분은 굳이 수정하지 않아도 괜찮습니다.

 

    showCurrentDayBorder: true, // (optional) defaults to true
    defaultEntryIntensity: 4,   // (optional) defaults to 4
    intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
    intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
    entries: [],                // (required) populated in the DataviewJS loop below

히트맵에 대한 설정을 수정할 수 있는 부분입니다.

첫번째 줄은 히트맵의 오늘 날짜에 해당하는 칸에 옅게 테두리가 표시됩니다.

true를 false로 바꾸면 테두리가 표시되지 않습니다.

두번째 줄부터 네번째 줄까지 색과 관련된 부분인 것으로 파악했는데 정확히 어떤 기능인지 몰라서 전 따로 수정하지 않았습니다.

마지막 줄은 해당 코드 부분 아래 부분의 데이터를 가져오는 것으로 수정하시면 안됩니다.

//DataviewJS loop
for (let page of dv.pages('"daily notes"').where(p => p.exercise)) {
    //dv.span("<br>" + page.file.name) // uncomment for troubleshooting
    calendarData.entries.push({
        date: page.file.name,     // (required) Format YYYY-MM-DD
        intensity: page.exercise, // (required) the data you want to track, will map color intensities automatically
        content: "🏋️",           // (optional) Add text to the date cell
        color: "orange",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })

바로 위 코드 블록의 entries에 담을 데이터 부분입니다.

이 코드 블럭에서 어떤 프로퍼티의 정보를 참조할지 설정할 수 있습니다.

가장 위에 있는 녹색 글씨에 입력하는 부분은 "어떤 폴더에 있는 페이지를 참조할 지" 입력하는 부분입니다.

이전 글의 예시를 따라간다면 "daily notes"로 입력된 부분에 "데일리 습관"이라고 적어주시면 되겠습니다.

 

그 옆의 .where(p => p.exercise) 부분은 참조할 페이지의 어떤 프로퍼티 정보를 가져올지 입력하는 부분입니다.

예시대로 작성한다면 .where(p => p.blog)로 작성할 수 있습니다.

 

그 아래의 date 부분은 그대로 두고 intensity의 page.exercise로 되어있는 부분을 바로 위에서 수정한 것처럼 바꿉니다.

intensity: page.blog로 바꿀 수 있습니다.

 

content는 히트맵의 칸이 채워질 때 그 안에 들어가는 아이콘을 넣는 곳입니다.

저는 이 부분은 아이콘이 없는 게 좋아서 뺐는데, 아래와 같이 입력하시면 히트맵의 칸이 채워졌을 때 마우스를 올려두면 그 날과 연결된 페이지가 작은 화면에서 보입니다.

content: await dv.span(`[](${page.file.name})`),           // (optional) Add text to the date cell

이렇게 채워진 날의 페이지에 쓴 내용을 마우스를 올려놓는 것 만으로 볼 수 있습니다.

 

그 다음 color 부분은 위에서 헥스코드로 입력해둔 색을 입력하면 됩니다.

기본적으로 총 6개의 색(blue, green, red, orange, pink, orangeToRed)이 있는데 이 중에서 마음에 드는 색을 입력하시면 됩니다.

마음에 드는 색이 없으시면 위에서 설명한 것처럼 색을 추가하셔도 되구요.

 

이렇게 모든 코드 부분에 대한 설명이 끝났습니다.

수정된 내용을 반영한 전체 코드는 아래와 같습니다.

```dataviewjs
dv.span("** 😊 블로그 글 쓰기  😥**") /* optional ⏹️💤⚡⚠🧩↑↓⏳📔💾📁📝🔄📝🔀⌨️🕸️📅🔍✨ */
const calendarData = {
    year: 2023,  // (optional) defaults to current year
    colors: {    // (optional) defaults to green
        blue:        ["#8cb9ff", "#69a3ff", "#428bff", "#1872ff", "#0058e2"], // first entry is considered default if supplied
        green:       ["#c6e48b", "#7bc96f", "#49af5d", "#2e8840", "#196127"],
        red:         ["#ff9e82", "#ff7b55", "#ff4d1a", "#e73400", "#bd2a00"],
        orange:      ["#ffa244", "#fd7f00", "#dd6f00", "#bf6000", "#9b4e00"],
        pink:        ["#ff96cb", "#ff70b8", "#ff3a9d", "#ee0077", "#c30062"],
        orangeToRed: ["#ffdf04", "#ffbe04", "#ff9a03", "#ff6d02", "#ff2c01"]
    },
    showCurrentDayBorder: true, // (optional) defaults to true
    defaultEntryIntensity: 4,   // (optional) defaults to 4
    intensityScaleStart: 10,    // (optional) defaults to lowest value passed to entries.intensity
    intensityScaleEnd: 100,     // (optional) defaults to highest value passed to entries.intensity
    entries: [],                // (required) populated in the DataviewJS loop below
}

//DataviewJS loop
for (let page of dv.pages('"데일리 습관"').where(p => p.blog)) {
    //dv.span("<br>" + page.file.name) // uncomment for troubleshooting
    calendarData.entries.push({
        date: page.file.name,     // (required) Format YYYY-MM-DD
        intensity: page.blog, // (required) the data you want to track, will map color intensities automatically
        content: await dv.span(`[](${page.file.name})`),           // (optional) Add text to the date cell
        color: "orange",          // (optional) Reference from *calendarData.colors*. If no color is supplied; colors[0] is used
    })
}

renderHeatmapCalendar(this.container, calendarData)
```

 

지금까지의 설명만 잘 따라오셨다면 체크박스에 체크하는 것만으로 '블로그 글 쓰기'라는 습관에 대한 트래킹을 할 수 있습니다.

이것이 쌓이면 내가 어떤 날에 이 습관을 했는지 안 했는지 알 수 있겠죠.

 

저는 위에서 말씀드린대로 이 히트맵으로 여러 개의 습관을 관리하고 있다고 말씀드렸는데요.

지난 9월쯤부터 시작해서 이렇게 기록을 쌓아왔습니다.

이 글이 옵시디언과 히트맵을 사용해보시려는 분, 또 습관을 편하게 기록하고자 하시는 분들께 도움이 되었으면 좋겠습니다.

혹시나 잘 안 되거나 제가 틀린 점이 있다면 말씀 부탁드립니다!