[옵시디언] 잔디를 심어보자 (feat. Heatmap Calendar)

Documents

[옵시디언] 잔디를 심어보자 (feat. Heatmap Calendar)

백수현 2023. 11. 9. 18:16

얼마전부터 옵시디언이라는 툴을 사용하기 시작했다.

개발자 친화적인 툴이라는 얘기는 들어서 알고 있었지만, 내가 적응하면 내 툴이다. 라는 생각으로 옵시디언에 나를 맞췄다.

그렇게 옵시디언을 이용해 다이어리로 활용하기 시작한 게 어언 한 달 차.

나는 내가 얼마나 자주 다이어리를 작성하는 지 트래킹을 해보고 싶었다.

그래서 옵시디언을 뒤적거리다가 Heatmap Calendar라는 툴을 찾을 수 있었다.

그래서 이번 글의 주제 : 개발 1도 모르는 마케터의 우당탕탕 히트맵 써보기

부제 : 코딩 지식 없이 복붙으로도 여차저차 만들 수 있음

준비물

1. 코어 플러그인 : 데일리노트를 활성화 한다. (데일리 노트 날짜 형식이 YYYY-MM-DD로 되어있는 지 확인한다.)

2. 커뮤니티 플러그인 : Heatmap Calendar, Dataview 플러그인을 설치 후 활성화한다.

3. Dataview 플러그인 설정에 들어가서 Enable JavaScript Queries를 활성화한다.

4. Heatmap Calendar 플러그인에서 제공하는 Full example code를 가져온다.

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)

Dataview.js로 코드 짜기

Full example code를 가져왔으면, 이를 바탕으로 코드를 짜기 시작하면 된다.

처음 dataview.js로 코드를 작성하기 위해 코드 블럭을 불러오는 아래의 커맨드를 작성한다.

```dataviewjs
```

그 안에 Full example code를 수정해서 코드를 작성하면 된다.

차근차근 해당 코드가 뭘 말하는 건지 알아보도록 하자.

(참고로 내가 설명하는 내용에 오류가 있을 수 있다... 난... 자바 스크립트를 전혀 모른다... )

1. dv.span("** 제목 **")

말 그대로 제목을 작성하는 란이다.

트래커의 제목을 붙여주자. 귀여운 이모티콘을 덤으로 붙여줘도 괜찮다.

2. const calendarData

말 그대로 히트맵 캘린터의 기본 설정을 작성하는 곳이다.

대충 예시값에 작성된 설명을 해석해서 추가해뒀다.

※ 참고로 모든 항목이 끝날 때 쉼표를 꼭 찍어줘야 한다.

const calendarData = {
    year: 2022,  // (선택사항) 지정하지 않을 경우 당년의 값을 따른다.
    colors: {    // (선택사항) 지정하지 않을 경우 default 값을 따른다. 
        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, // (선택사항) 지정하지 않을 경우 true 값을 따른다
    defaultEntryIntensity: 4,   // (선택사항) 지정하지 않을 경우 4로 설정한다.
    intensityScaleStart: 10,    // (선택사항) 지정하지 않을 경우 entries의 가장 낮은 값으로 설정한다.
    intensityScaleEnd: 100,     // (선택사항) 지정하지 않을 경우 entries의 가장 높은 값으로 설정한다. 
    entries: [],                // (필수사항) 해당 내용은 아직 잘 모른다. 아는 사람 헬프미..
}

항목별로 세분화하여 설명을 해보자면,

year: 2022

히트맵이 트래킹할 연도를 작성하는 란이다.

colors: {blue: […]}

히트맵이 트래킹할 때 사용할 색상을 작성하는 란이다.
설정하지 않을 경우 default 값이 기본적으로 적용된다.
한 설정에, 한 가지 항목만 설정할 경우 색상표는 하나면 충분하다.
Heatmap Calendar Settings 에서 미리 색상을 설정할 수 있다.
미리 색상을 설정한 경우 하단의 코드를 이용하면 편리하다.

color: "RdGn", // 이미 지정한 코드가 있을 경우 "색상이름" 이렇게 불러와주면 된다.
colors: {RdGn: "RdGn", Pink:"Pink"}, // 여러 개의 색상을 불러올 때는 다음의 형태로 불러와준다.

showCurrentDayBorder: true

당일에 테두리를 두를 지 설정하는 란이다.
기본값은 True, 원치 않는 경우 False를 입력한다.

defaultEntryIntensity: 4

히트맵에서 항목을 트래킹할 때, 몇 레벨로 나눠서 트래킹 할 지 설정하는 란이다.
이를 테면 1부터 10까지 총 10개의 레벨로 나눠 트래킹할 예정이라면 10을 작성하는 식이다.
10레벨로 트래킹하고 싶으면, colors에서 색상도 10단계로 나눠놓아야 잘 적용된다.
따로 설정하지 않으면 4가 기본값이다.

intensityScaleStart: 10

레벨을 지정할 때 기준이 되는 가장 낮은 값을 설정하는 란이다.
보통은 0으로 설정하는게 편하다.
설정하지 않는 경우 해당 항목의 가장 낮은 값이 start값으로 지정된다.

intensityScaleEnd: 100

레벨을 지정할 때 기준이 되는 가장 높은 값을 설정하는 란이다.
설정하지 않는 경우 해당 항목의 가장 높은 값이 end값으로 지정된다.

3. 위의 내용을 전부 설정했다면, 실제로 히트맵 캘린더가 될 부분을 작성한다.

for (let page of dv.pages('"데일리노트 폴더명"').where(p => p.exercise)) {
    calendarData.entries.push({
        date: page.file.name,     // (필수사항) 데일리노트 형식은 YYYY-MM-DD
        intensity: page.exercise, // (필수사항) 트래킹할 데이터
        content: "🏋️",           // (선택사항) 해당 날짜 부근에 추가할 텍스트
        color: "orange",          // (선택사항) 위에서 설정한 색상 레퍼런스 중 선택, 지정하지 않을 경우 가장 첫번째 색상 선정
    })
}

renderHeatmapCalendar(this.container, calendarData)

for (let page of dv.pages('"데일리 노트 폴더"')

앞으로 트래킹할 데일리노트가 작성되는 폴더 이름을 >> 데일리 노트 폴더 << 여기에 집어 넣어준다.
참고로 가장 상위 폴더 이름을 넣어줘야 적용된다.

난 일상의 틈을 가장 상위 폴더로 사용하고 있기 때문에, '"일상의 틈"'으로 작성했다.

.where(p =>p.exercise))

앞으로 트래킹할 항목의 이름을 p. 뒤에 집어 넣어준다.
참고로 항목의 이름은 데일리노트에 작성할 메타데이터 이름과 동일하다.
난 MAKE.md를 사용하고 있어서 property를 통해 메타데이터를 설정한다.

옵시디언 기본 툴로는 메타데이터 블록을 따로 만들어줘야 한다. 하단의 방법을 참고하자.

---
exercise: 60
mood: 8
---

date: page.file.name

트래킹한 내용의 날짜를 가져오는 방식을 설정하는 란이다.
데일리 노트 설정을 건드리지 않았다면 따로 수정할 필요가 없다.

intensity: page.exercise

레벨을 설정할 때 참고할 값을 설정하는 란이다.
보통은 메타데이터 이름과 동일하게 가져가는 편이다.

content: "🏋️"

해당 날짜에 추가할 텍스트를 작성하는 란이다.
보통 true / false로 나뉘는 chain을 작성할 때 이용한다.

color: "orange"

마지막으로 위에서 지정했던 색상 중 사용할 색상 이름을 넣어준다.
따로 지정하지 않으면 제일 위에 있는 색상이 적용된다.

여기까지 지정하고 나면 메타 데이터에 따라 트래킹된 데이터가 히트맵 상으로 보이는 걸 확인할 수 있다.

예시로 내가 작성하고 사용하고 있는 무드 트래커는 다음과 같다.

dv.span("** 🥰 무드 트래커 🤔**")
const calendarData = {
	year: 2023,
	color: "RdGn",
	showCurrentDayBorder: false,
	defaultEntryIntensity: 10,
    intensityScaleStart: 1,
    intensityScaleEnd: 11,
    entries: []
}

for (let page of dv.pages('"일상의 틈"').where(p => p.mood)) {
    calendarData.entries.push({
        date: page.file.name,
        intensity: page.mood,
        content: await dv.span(`[](${page.file.name})`),
        color: "RdGn"
    })
}
renderHeatmapCalendar(this.container, calendarData)

위의 코드를 활용해서 다양한 트래커들을 만들어내면 옵시디언으로도 쉽게 잔디를 심을 수 있다.

True / False로 구분되는 트래커 만들기

이건 위의 내용을 활용하여 intensity를 제외하고 true / false 데이터만을 가지고 트래커를 만드는 응용 버전이다.

(응용버전이라고 하지만 훨씬 쉽다.)

dv.span("** 🖤 VISIT chain 🖤 **")

const calendarData = {
	showCurrentDayBorder: false,
	colors: {
        white: ["#fff","#fff","#fff","#fff","#fff"],
    },
    entries: []
}

for(let page of dv.pages('"일상의 틈"').where(p=>p.visit)){
	 
    calendarData.entries.push({
        date: page.file.name,
        content: await dv.span(`[🖤](${page.file.name})`),
    }) 
}
	
renderHeatmapCalendar(this.container, calendarData)

코드를 보면 알 수 있겠지만, intensity가 완전히 제외되고, 색상도 흰색으로 통일되어있다.

content 부분이 조금 다른 점을 확인할 수 있지만, 나도 원본 코드에서 따온 부분이라 정확하게는 모른다. ㅎㅎ...

추가적으로 이 방법으로 데이터를 트래킹하는 경우, 메타데이터 내부에 숫자 대신 true값을 집어넣으면 된다.

---
visit: true
---

혹은 문서 작성 중간에 [visit::true] 이렇게 작성해도 메타데이터로 취급되어 데이터가 취합된다.

둘 중에 편한 방법을 사용하면 된다.

결론

난 개발자가 아니거니와 javascript를 따로 공부한 적이 없어서 원본 코드를 보고 공부한 내용을 공유한 거라, 오류가 나면 나도 모른다...

오류가 난다면 아마 높은 확률로 메타데이터가 제대로 설정되어있지 않거나, 쉼표를 빼먹었을 확률이 높으므로 코드를 다시 확인해보자.

그럼 다들 즐거운 데이터 트래킹 시간 되시길.

저작자표시 비영리 동일조건

'Documents' 카테고리의 다른 글

Excel 공부 (0)	2022.06.03
캡스톤 디자인 (0)	2022.06.03

현재글[옵시디언] 잔디를 심어보자 (feat. Heatmap Calendar)

갓생살기 도전중인 20대 마케터.

그로스 마케팅, 연애, 이건희 특별전, GMB_10, 오블완, GMB10, MBTI, AI프로필, 다이어리, Google Data Studio, Heatmap Calendar, ENTJ, 무드트래커, 기업협업, 엑셀, 티스토리챌린지, 2206, 난카이 라피트, INFP, 미도스지 일루미네이션,

Today :
Yesterday :

백이