[옵시디언] 내 습관 힙하게 관리하기 (히트맵) - 1) 히트맵 설치하기

전 일상을 멋진 습관들로 채우는 것에 관심이 많습니다.

하지만 일과 학업으로 인해 뺏겨 얼마 남지 않은 자유 시간을 수 개의 습관으로 채우는 것은 쉽지 않죠.

5~6개의 일을 규칙적으로 하면서 습관을 형성하려는 제가 가장 원하면서도 어려웠던 것은

"어떤 일을 언제 했는지 한 눈에 보기 어렵다"

는 것이었습니다.

 

그러다 눈에 들어온 것은 '옵시디언'이라는 툴과 '히트맵'이라는 도구였습니다.

 

옵시디언?

Obsidian

옵시디언을 가장 간단하게 정의하자면 '문서 관리 소프트웨어'로 정의할 수 있겠습니다.

흔히 사용하는 '한글', '워드'와 달리 완전 무료이며, 이 프로그램을 사용하는 많은 사람들의 참여가 활발하다는 장점이 있습니다.

'많은 사람들의 참여가 활발하다'라는 것은 개발 지식이 뛰어나신 분들이 이 프로그램을 개선하기 위해 자발적으로 도구(플러그인이라고 합니다)를 만들어 배포한다는 것을 의미합니다.

이는 곧, 백화점에서 맘에 드는 물건을 고르듯 내가 원하는 기능이 있다면 마음껏 사용해볼 수 있다는 것을 의미합니다.

 

옵시디언은 모든 플랫폼에서 사용할 수 있으며, 이 링크에서 다운로드할 수 있습니다.

 

히트맵?

히트맵은 데이터 시각화 기법 중 하나로, 간단히 말해 격자 형태의 판에 데이터를 표시하는 것입니다.

히트맵

히트맵을 습관을 추적하는 방식으로 사용한다면 위의 그림처럼 활용할 수 있습니다.

제가 쓰고 있는 방식의 일부분을 가져왔는데, 빨간색으로 색칠된 곳이 '이 일을 했다'를 의미하며 색칠되지 않은 곳은 '이 일을 하지 않았다'를 의미합니다.

이제 옵시디언과 히트맵을 통해 어떻게 여러 개의 습관을 관리하고 있는지 보여드릴게요.

준비물

1. 옵시디언 설치 후 보관소 열기

옵시디언을 설치하고 실행하면 왼쪽 이미지처럼 새로운 보관소를 생성할 수 있는 창이 열립니다.

'생성'을 눌러 원하시는 위치에 생성하면 오른쪽과 같은 화면을 볼 수 있어요.

 

2. 히트맵 플러그인 설치하기

플러그인은 옵시디언 유저들이 이 툴을 더 잘 쓰기 위해 만든 '도구'라고 위에서 말씀드렸는데요.

이러한 도구를 사용하기 위해서는 먼저 '플로그인 활성화'를 해줘야 합니다.

열린 옵시디언 화면의 왼쪽 맨 아래를 보면 톱니바퀴가 있는데, 이 아이콘을 클릭해줍시다.

이후 뜨는 창에서 '커뮤니티 플러그인'을 누른 후 나타나는 '커뮤니티 플러그인 사용' 버튼을 눌러주면 바뀌는 화면에서 '탐색'을 누르면 옵시디언 유저들이 만들어놓은 모든 플러그인을 볼 수 있습니다.

나타나는 창에서 'heatmap'을 검색해주면 'Heatmap Calendar'라는 플러그인이 나오는데 클릭 후 설치해줍시다.

설치하고 나면 잠시 후 완료됐다는 알림이 뜨는데요.

이러면 히트맵 플러그인을 쓸 준비가 완료되었습니다.

 

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)
```

 

위 코드를 복사하고 난 후 커서를 밖으로 뺴주시면 히트맵이 노출됩니다.

 

이제 히트맵을 사용하여 습관을 관리할 수 있는 툴이 절반 정도 완료되었습니다.

지금 지나왔던 과정 만큼이나 간단한 과정들이 남아있는데요.

이 부분들은 너무 길어져 다음 포스팅에서 이어가도록 하겠습니다.