노션을 사용하실 때 어떻게 시작하시나요? 2018년부터 5년 넘게 노션 강의를 진행하며 노션을 처음 사용하시는 분들께 가장 추천하는 것은 대시보드 입니다. 왜 대시보드를 만들어야 하는지는 노션 사용자 80%가 모르는 잘못된 활용법 글을 살펴보세요.
이 글은 위 노션 대시보드 를 만들기 위한 재료 사용법을 알려드리기 위한 글입니다.
Canva 이미지 가져가기
대시보드에서 사용한 이미지를 다운 받아야 합니다. 저는 이미지를 만들 때 Canva라는 도구를 이용해 만들었습니다. 아래 링크를 클릭하시면 Canva 링크가 열리며, 구글 계정으로 회원가입을 해주세요.
링크를 열면 아래 이미지처럼 Canva가 열립니다. Use template for new design 버튼을 누르면 로그인한 Canva 계정에 복사됩니다.
아래 이미지처럼 왼쪽 사이드바가 열리면 본인의 페이지에 잘 가져가신 것입니다. 글자를 더블클릭하여 원하는 글자를 수정해보세요.
글자를 다 수정한 다음 다운로드 받을 때에는 오른쪽 상단 공유 > 다운로드 버튼을 눌러주세요.
PNG로 선택하고 아래에 다운로드 버튼을 눌러 이미지를 다운 받으시면 됩니다.
저는 Canva로 만들었지만 해당 글씨체나 내용이 마음에 들지 않으신다면 포토샵, 일러스트, 파워포인트 등 다른 도구를 이용해 직접 이미지를 만드셔도 됩니다. 이미지 사이즈인 600×80, 1200×80 px입니다.
D-Day 위젯 생성하기
D-Day 위젯을 만들기 위해서는 Github이라는 사이트에 가입해서 나의 페이지를 만들어야 합니다. 대부분의 개발자 분들이 사용하는 사이트 중 하나이니 주변에 아시는 개발자 분이 계시다면 도움을 요청하시는 것도 좋습니다.(저는 개발자가 아니기 때문에 도와드릴 수 없)
Github 사이트에 들어와 오른쪽 상단 Sign up 버튼을 눌러 회원가입을 합니다.
알수 없는 언어(영어)로 된 페이지가 나옵니다. 겁먹지 말고 왼쪽에 New 버튼을 눌러봅니다. 혹시 다른 것을 눌러서 New 버튼이 보이지 않는다면 왼쪽 상단 감성적으로 뒤돌아 있는 고양이 아이콘을 클릭합니다.
새로운 repository를 만드는 화면이 나타납니다. repository 이름을 입력한 다음 Public 인지 확인하고 맨 아래에 Create repository를 클릭합니다.
다른 건 만지지 않아도 됩니다. 만지면 무섭습니다.
설정을 하나 해줘야 합니다. Settings 에 들어와서 Pages에 들어간 다음 Branch를 main, /(root)로 변경하고 save 버튼을 눌러주세요. 아래 이미지와 똑같이 설정하시면 됩니다.
그 다음엔 카운트 다운 위젯의 코드를 가지고와야 합니다. 이 링크를 클릭해서 Source Code라는 버튼을 눌러주세요.
Source Code 버튼을 누르면 아까 우리가 만들었던 Github 사이트가 나올 것입니다. 우리가 회원가입한 페이지가 아니라 다른 사람이 올린 Source Code를 가져와야 하기 때문에 보이는 코드 화면에서 오른쪽에 복사하기 처럼 생긴 아이콘을 클릭해 클립보드에 코드를 복사합니다.(설명하고 있는 저도 무서우니 겁먹지 마세요)
코드를 복사한 뒤 다시 우리가 회원가입한 페이지에 들어와서 Code 페이지에 creating a new file 버튼을 누릅니다.
file 이름에 여러분이 원하는 위젯 이름을 입력합니다. 입력하실 때 주의할 점은 이름은 영어로 입력해야 하며, 이름 끝에 반드시 .html 을 입력해야 합니다.
그리고 아래 빈칸에 복사한 코드를 붙여 넣습니다.
제대로 작동하는 지 보기 위해 우선 화면 맨 아래로 내려와 commit new file 버튼을 누릅니다.
이제는 입력한 코드를 확인해볼 차례입니다. 아래의 이미지처럼 my name, repository name, file name이 설정되어 있습니다.
저의 경우
- my name : sijinjeon
- repository name : notion
- file name : 2023-03-31.html
이죠 이를 github링크에 대입합니다.
https://my name.github.io/repository name/file name
제 주소를 만들면 아래와 같습니다
https://sijinjeon.github.io/notion/2023-03-31.html
여러분의 주소를 대입해서 위와 같이 만들어보세요.
https://sijinjeon.github.io/notion/2023-03-31.html위 링크를 만들어서 인터넷 주소창에 넣으면 복사해온 코드로 된 위젯을 볼 수 있습니다.
(설정을 제대로 하셨다면 늦어도 5분 이내에는 위젯이 나타나야 정상입니다)
드디어 노션에 생성 가능한 위젯을 만들어냈습니다. 여기까지 따라 오신 분들 축하드립니다. 쏴리 질럿!
D-Day 위젯 날짜 변경하기
위젯을 만들어냈다면 날짜가 우리가 원하는 날짜가 아니니 우리가 원하는 날짜로 변경해봅시다. 다시 우리가 만든 코드에 들어와주세요. 페이지 오른쪽에 누가봐도 수정할 것처럼 생긴 펜 아이콘을 눌러줍니다.
이 곳에서 D-DAY의 날짜를 바꿀 수 있는 곳은 106번째 줄입니다.
106번 째 줄에 Oct 15, 2024 00:00:00 라고 되어 있습니다. 이곳을 제가 원하는 날짜로 변경해주면 됩니다.
- Oct : 달력을 영어 3글자로 표기합니다.
ex)Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec - 15 : 일을 숫자 두자리로 입력합니다.
- 2024 : 연도를 숫자 네자리로 입력합니다.
- 00:00:00 : 시:분:초를 각 두자리로 입력합니다.
2023년 3월 31일 이라고 한다면 Mar 31, 2023 00:00:00 으로 입력하면 됩니다.
하나라도 잘못 입력하거나 다른 글자를 지우는 순간 코드가 작동하지 않을 수 있으니 딱 필요한 글자만 지우신 다음 입력하시는 걸 추천드립니다.
글자를 변경하고 나면 화면 맨 아래로 내려 반드시 Commit changes 버튼을 눌러줘야 합니다.
변경하고 바로 적용되지 않으니 인내심을 갖고 기다리며 F5를 눌러주면 늦어도 5분 내에 업데이트가 완료됩니다.
(원래는 1분도 안걸립니다)
D-Day 위젯 색상 변경하기
우리가 처음 가져온 위젯의 색상은 쓸데 없이(개취) 컬러풀하여 눈을 휘황찬란하게 바꿔버립니다. 화려한 것은 좋아하지 않기도 하고 나만의 컨셉(충)을 잡기 위해서 위젯의 배경색을 바꿔줍시다.
여기서부터는 CSS의 영역이기 때문에 주변에 html/css를 다룰 줄 아시는 지인이 계시다면 도움을 받는 것도 추천드립니다.(저는 잘 몰라서 도와드릴 수 없)
배경색은 아래 이미지처럼 연결되어 있습니다.
.days 의 background: #EF2F3C 에서 #EF2F3C가 색깔을 나타냅니다.
.hours의 color: #183059 는 옅은 회색에 가까운 글자를 흰색으로 하면 잘 안보이니 HOURS라는 글자만 바꿔준 것으로 보입니다.
따라서 HEX 코드 색상 코드를 알아내어 코드를 바꿔주면 자신이 원하는 테마에 맞게 색깔을 변경해주면 됩니다.
제 메인 템플릿에서 사용한 코드는 아래와 같습니다.
.days {
background: #eeeeee;
color: #183059;
}
.hours {
background: #eeeeee;
color: #183059;
}
.minutes {
background: #eeeeee;
color: #183059;
}
.seconds {
background: #eeeeee;
color: #183059;
}HEX 코드를 살펴보는 사이트는 너무 많지만 제가 알고 있는 사이트는 adobe color 입니다.
달성률 수식
달성률에 사용한 수식은 아래와 같습니다.
if((prop("현재") / prop("완료")) >= 1, "✅", (((substring("■■■■■■■■■■", 0, floor((prop("현재") / prop("완료")) * 10)) + substring("□□□□□□□□□□", 0, ceil(10 - ((prop("현재") / prop("완료")) * 10)))) + " ") + format(round((prop("현재") / prop("완료")) * 100))) + "%")숫자 속성으로 현재, 완료를 만들고 수식 속성을 만들어 위 수식을 붙여 넣으면 달성률이 완성됩니다.
노션 대시보드 만들기를 열심히 따라와주셔서 감사합니다. 모두 고생하셨어요.
이제 여러분 만의 대시보드를 만들어서 아래 네이버 카페에 나만의 대시보드 게시판에서 자랑해주세요.
인스타그램에서 자랑하신 후 저(@sireal.co)를 태그해주신다면 제가 좋아요 빠방하게 보내드릴게요.