노션을 사용하실 때 어떻게 시작하시나요? 2018년부터 5년 넘게 노션 강의를 진행하며 노션을 처음 사용하시는 분들께 가장 추천하는 것은 대시보드 입니다. 왜 대시보드를 만들어야 하는지는 노션 사용자 80%가 모르는 잘못된 활용법 글을 살펴보세요.

이 글은 위 노션 대시보드 를 만들기 위한 재료 사용법을 알려드리기 위한 글입니다.

Canva 이미지 가져가기

대시보드에서 사용한 이미지를 다운 받아야 합니다. 저는 이미지를 만들 때 Canva라는 도구를 이용해 만들었습니다. 아래 링크를 클릭하시면 Canva 링크가 열리며, 구글 계정으로 회원가입을 해주세요.

• 600 x 80 px
• 1200 x 80 px

링크를 열면 아래 이미지처럼 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)를 태그해주신다면 제가 좋아요 빠방하게 보내드릴게요.

인스타그램 포스팅 데이터 자동으로 노션 연동 하기

노션 학생 관리, 선생님을 위한 체계적인 교무 수첩 (노션 템플릿)

노션 대시보드 제작에 필요한 위젯 및 수식 추가하기 글을 통해 최신 대시보드를 만들어보세요

노션 어떻게 사용하고 계신가요? 스스로 생각하기에 노션을 정말 잘 사용하고 있다고 생각하시나요? 이 글을 들어오신 분은 아마 자신이 잘 사용하고 있지 않다고 생각하실 것입니다. 노션을 사용하는 방법에는 정답이 없습니다. 하지만 이렇게 사용하는 분들은 노션 활용법 이 잘못되었다고 말할 수 있습니다. 지금까지 6년 째 노션 강의, 컨설팅을 진행하며 만난 수천 명이 이렇게 사용하고 계셨어요. 안타깝게도 말이죠.

이번 글에서는 노션 사용자 중 잘못된 방식으로 노션을 사용하는 방법과 그 해결책에 대해 알아보겠습니다.

노션의 잘못된 사용방법

노션을 잘못 사용하는 분들은 대부분 노션 페이지를 왼쪽 사이드바에 두고 페이지를 하나 하나 찾아서 사용하고 있었습니다.

왼쪽 사이드바는 노션에 들어오자마자 바로 보이기 때문에 페이지를 쉽게 찾을 수 있습니다. 하지만 노션의 구조 상 왼쪽 사이드바를 활용하면 페이지가 많아졌을 때 내가 원하는 페이지를 찾으려면 눈으로 읽지 않아도 되는 페이지들을 위에서부터 순서대로 모두 읽어야 합니다. 왼쪽 사이드바를 열어 놓고 페이지를 위에서부터 아래까지 일일이 읽어야 하죠. 게다가 내가 원하는 페이지가 없으면 다른 페이지에 있는 줄 알고 페이지 왼쪽 작은 화살표를 눌러 페이지를 또 늘리곤 합니다. 정말 불편하지 않나요? 잠깐 집중력을 잃어서 내가 원하는 페이지를 놓친다면 또 불편함을 겪게되죠. 사용자의 노션 활용법이 잘못되었는데 노션이 불편하다고 하는 사람들을 많이 보았답니다. 안타깝게도..

그래서 노션 어떻게 써야해요?

노션에 대시보드(Dashboard) 페이지를 만들어서 사용해보세요.

대시보드는 원래 자동차 핸들 앞에 있는 계기판을 얘기합니다. 그러나 IT에서는 대시보드를 각종 정보를 한 곳에서 볼 수 있게 만들어주는 페이지를 말하죠. 구글에서 dashboard 라고 검색하면 인터넷에서 자주 보았던 이미지들이 보이실거예요. 화려한 그래프가 눈을 사로잡고 프로젝트의 목표에 필요한 모든 정보들을 한 눈에 쉽게 확인할 수 있죠.

우리의 노션도 이렇게 사용해야 합니다. 노션은 우리에게 필요한 정보를 담고 있지만 상대적으로 필요 없는 정보들도 함께 담고 있어요. 따라서 우리가 자주 사용하는 정보들, 나에게 관련된 필수 데이터만 따로 뽑아서 볼 필요가 있습니다. 필요 없는 데이터는 걷어내고 필요한 데이터만 한눈에 보는거죠.

노션의 대시보드를 활용하는 방법은 여러 형태가 있습니다. 노션에서 제공해주는 70여 개 이상의 블록을 활용해 무궁무진한 대시보드 형태를 만들 수 있죠. 당장 pinterest에서 notion dashboard를 검색하면 정말 예쁘고 화려한 대시보드들이 많이 나옵니다. 여러 형태의 대시보드들이 모두 장단점이 있기 때문에 초보 노셔너가 사용하는 대시보드부터 고급 사용자의 대시보드까지 다양하게 알아보겠습니다.

페이지를 이용한 노션 대시보드 활용법

노션을 사용할 때 가장 기본적인 대시보드 모양입니다. 간단한 6개의 카테고리 안에 자세한 내용은 페이지 안에 넣었습니다. 6개의 카테고리는 현재 자신이 관리하고 있는 노션의 데이터를 중요도와 자주 방문하는 빈도에 따라 크게 구분하여 넣고, 해당 카테고리 내로 들어가는 형태입니다. 텍스트 블록으로 카테고리를 입력하고 페이지를 만들어 넣기 때문에 단순한 구조로 되어 누구나 쉽게 만들 수 있습니다. 이 대시보드는 페이지로만 이루어져있기 때문에 다른 대시보드보다 페이지 로딩이 빠르다는 장점이 있습니다.

페이지 구조가 단순하기 때문에 아이콘만 예쁘고 심플한 걸로 변경하면 훨씬 깔끔하게 이용할 수 있습니다.

기본 기능과 레이아웃을 이용한 노션 대시보드 활용법

중급 대시보드는 노션의 기능만을 이용해 만든 대시보드입니다. 이미지는 외부에서 쉽게 구해올 수 있으며, 컬러톤들을 기본 기능들로 만들었죠. 데이터베이스의 리스트보기, 갤러리 보기를 이용해 만들었네요. 블록의 이미지에도 노션의 색을 사용해 외부 이미지와 톤앤 매너를 맞춘게 돋보입니다. 노션을 어느 정도 사용해서 다꾸(다이어리 꾸미기)처럼 노꾸(노션 꾸미기)를 해보고 싶은 분들이 자주해보는 타입입니다. 이런 형태의 경우 내가 사용하고 싶은 페이지 뿐만 아니라 레이아웃, 블록의 배치, 블록의 크기, 대시보드 톤앤매너까지 고려해서 만들어야 하기 때문에 디자인 감각이 어느정도 요구되고는 합니다.

위젯과 데이터베이스를 활용한 노션 대시보드 활용법

마지막은 타입은 위젯과 대시보드를 적절히 활용한 대시보드입니다. 2023년 현재 제가 쓰고 있는 대시보드기도 하죠. 왼쪽 상단에는 현재 해야할 일 중 가장 중요한 업무에 대해 D-DAY 위젯을 만들어두었습니다. 깃헙을 이용해 위젯 아이콘을 변경하고 만들었는데, 이 방법은 다음에 설명해볼게요. 그 옆은 날씨 위젯을 넣었습니다. 대시보드는 노션에 들어오자마자 가장 먼저 보는 곳이기 때문에 옷을 따뜻하게 입고 나가기 위해 아침마다 살펴보는 페이지에 날짜를 넣어두었어요. 세번째는 업무에 집중할 때 자주 활용하는 Pomodoro 영상을 넣어두었습니다. 25분 집중 시간에는 빗소리가, 5분 쉬는 시간에는 재즈 음악이 나와 6Pomo까지 할 수 있는 영상입니다.

두번째 줄 왼쪽은 저의 2023년 목표를 넣어두었습니다. 별다른 연동이나 기능은 없고 페이지를 열고 달성한 만큼 숫자를 입력하면 그래프가 올라가는 형태입니다. 두번째 줄 가운데는 Review 입니다. 오늘 하루를 보내고 잘한일, 못한일을 한 문장씩 써내려가는 거죠. 일기라고 보셔도 되고, 오늘의 반성, 오늘의 자존감 회복 이런 것처럼 생각하셔도 됩니다. 매일 하지는 않고 생각나는 날마다 하는데, 요즘엔 잘한 일만 생각나서 기분이 더 좋습니다. 자존감도 회복되고요. 오른쪽은 오늘의 할 일입니다. 바로 아래에 있는 프로젝트 DB와 연결되는 할일 목록이죠. 각 프로젝트를 진행하면서 오늘 할 일이 생기면 할 일을 입력해두는 곳입니다. ‘오늘 할 일’이라는 보기 버튼을 누르면 ‘다음 7일’, ‘이전 7일’ 등 다른 보기도 보면서 할 일을 추가할 수 있습니다.

세번째 줄 왼쪽은 대시보드의 페이지들입니다. 자주 사용하는 페이지들을 각 분류에 맞게 정리해두었습니다. 업무에 관련된 페이지와 개인적인 페이지로 구분해두었죠. 가운데는 자주보는 프로젝트 목록 페이지입니다. 어떤 프로젝트가 진행 중이고 진행 예정인지, 어떤 프로젝트 문의가 들어왔는지 한 눈에 볼 수 있습니다. 오른쪽은 문화에 관련된 내용이죠. 책, 영화, 세미나 등을 볼 수 있고 그 아래에는 현재 읽고 있는 책 표지가 보여집니다.

대시보드로 쉽게 이동하는 단축키 설정하는 법

대시보드를 만들고 나면 어떻게 활용할 지 고민이 많이 됩니다. 대시보드를 만들어놔도 생각보다 자주 안들어가지는거죠. 그럴 때에는 대시보드 단축키를 설정해보세요. 왼쪽 사이드바에서 워크스페이스 목록을 누르면 자신의 계정이 속해있는 워크스페이스 목록을 볼 수 있습니다. 워크스페이스 목록에서 자신의 워크스페이스가 몇 번째 인지 확인한 후 그에 맞는 단축키를 눌러주면 됩니다.

대시보드로 이동하는 단축키를 사용하려면 몇가지 설정이 필요합니다. 아래를 잘 따라오세요.

1. 설정과 멤버 > 내 알림과 설정 > 내 설정 > 시작 페이지에 들어가서 ‘사이드바 최상위 페이지’를 선택해주세요.

2. 대시보드 오른쪽 상단에 별(⭐️)표를 누르고 왼쪽 사이드바의 즐겨찾기 섹션에서 페이지를 맨 위로 이동시켜주세요.

이렇게 세팅한 후 다른 페이지에서 아래 단축키를 눌러주면

• Mac : Control + Shift + 1(워크스페이스 순서)
• Win : Ctrl + Shift + 1(워크스페이스 순서)

다른 어떤 페이지에 있어도 여러분이 설정한 대시보드로 손쉽게 이동할 수 있습니다.

대시보드를 만들 때 필수! 마인드맵 활용하기

그렇다면 이제 질문이 생길 것입니다.

나는 대시보드를 어떻게 만들어야 하지?

저는 대시보드를 만들 때 마인드맵을 사용해보라고 권합니다. 나를 중심으로 지금 내가 하고 있는 일, 하고 싶은 일을 넣어보기도 하고, 우선 순위에 따라 분류해보기도 하죠. 맨 처음에는 어떤 대주제 안에 소주제를 넣는지 구분하지 말고 일단 현재 가장 중요한 일, 자주 찾는 일 등을 써보세요. 대학생이라면 학교, 과제, 수업, 대외활동, 자격증 등이 있고, 직장인이라면 업무, 프로젝트를 기준으로 나눌 수 있겠죠. N잡러라면 각 직업을 기준으로 나눌 수도 있습니다. 현재 자신을 중심에 두고 자기가 하는 일들을 쭉 쓰다보면 공통적으로 보이는 것들이 있을 것입니다. 그것을 중심으로 묶고 분류하다 보면 대주제, 소주제로 나뉘어지며 마인드맵이 완성될 것입니다. 이 마인드맵을 기준으로 기본 기능과 레이아웃을 이용한 노션 대시보드 활용법을 만들어보는 것입니다. 그 후 대시보드를 이용해가며 불편한 점들을 개선하고 좋은점을 발전시켜 나가면 됩니다.

대시보드 참고자료

노션의 대시보드를 만들 때에 참고하면 좋은 사이트는 GUMROAD, REDDIT, PINTEREST 등 다양한 사이트가 있습니다. 노션의 사용자가 많아져서 다양한 사례가 나오니 위 사이트에서 한 번 살펴보세요.

노션 연구실 사용 사례 템플릿 제작 컨설팅 | 광주문화예술교육지원센터

노션 주간 회의록, 업무 일지 어떻게 사용하고 계신가요? (노션 템플릿)

노션 New 주간 플래너, 월간 할 일과 일정 연동 후 진행률 파악까지

노션 가계부 템플릿 소개 및 사용법