Notion Widget: 예쁜 노션 디데이 위젯, Miny D-day Widget

노션을 꾸미는 중 디데이를 표시할 수 있는 위젯이 있었으면 좋겠다 싶어서 만든 간단한 노션 디데이 위젯입니다.
복잡한 부분 다 빼고 가장 심플하게, 그리고 예쁘게 만들었습니다 :)

 

---

Miny 디데이 위젯 살펴보기

 

 

위젯은 대시보드 오른쪽에 위치하고 있습니다. 노션을 접속할 때마다 업데이트 되어 디데이를 계산해줍니다.

 

 

크기 조절이 자유로워 다양한 곳에 삽입할 수 있습니다.
또한 기본적으로 시스템 테마를 따라가기 때문에 다크모드에서는 밝은 폰트 색상으로 변하고, 라이트 모드에서는 어두운 색상이 됩니다.

 

---

Miny 노션 디데이 위젯 만들기

사용 방법은 간단합니다. 디데이 설정을 위한 몇 가지 정보를 위젯 주소창에 포함시키면 됩니다.

데이터 키	설명	필수 여부	기본값
date	디데이 날짜 ("YYYYMMDD" 형식으로 입력)	O
content	디데이 내용, 공백의 경우 %20	X
text	글자색 (HEX, #000000)	X	#000 (black color)
background	배경색 (HEX, #FFFFFF)	X	#FFF (white color)

 

디데이 위젯 주소: https://youngdev57.github.io/miny-widget/dday?

(필수값인 date 값을 넣지 않으면 아무 화면도 뜨지 않습니다.)

 

디데이 위젯 주소 ? 데이터 키 = 원하는 값(날짜, 내용 등등...)

이렇게 구성하면 됩니다. 주소 마지막에 물음표는 꼭 있어야 합니다.

 

디데이 내용과 디데이 날짜 넣기

만약 "마무리 잘하기" 라는 텍스트와 함께 2024년 12월 31일을 기준으로 넣고 싶다면 디데이 위젯 주소는 아래처럼 구성하면 됩니다.

- 주소/dday?content=마무리 잘하기&date=20241231

 

여기서 디데이 날짜도 넣고 디데이 내용도 넣으려면 중간에 "&" 문자로 구분을 해줘야 합니다.

참고로 "마무리 잘하기" 라는 텍스트는 중간에 공백(스페이스바)이 들어가있기 때문에 자동으로 주소창에 입력되면 %20 라는 글자로 바뀌게 됩니다. (한글도 바뀌게 됩니다.)

 

배경색과 글자색 변경하기

배경색과 글자색도 변경할 수 있습니다. 값을 넣지 않으면 기본적으로 라이트 모드에서는 흰 배경과 검은 글자로 구성되고, 다크모드에서는 검은 배경과 흰 글자로 구성됩니다.

 

배경색과 글자색은 HEX 컬러값으로 전달해줘야 합니다. HEX 코드는 다양한 사이트에서 찾을 수 있습니다.

제가 애용하는 사이트는 컬러스페이스(링크)라는 곳입니다. 

 

 

색상 팔레트를 열어 원하는 색상으로 체크하고 # 뒤의 6자리 글자를 복사해주고 넣으시면 됩니다.

 

외부 사이트를 이용하거나, 또는 "색상 선택기 위젯"을 따로 만들어 두었으니 이용하셔도 됩니다 :)
아래 노션 페이지에서 직접 데모 위젯을 테스트해 볼 수 있습니다.

https://youngdev57.notion.site/Miny-Color-Picker-Widget-126d65b31f8680239e2ac252fe2ff607

Miny Color Picker Widget | Notion

 

글자색은 기본 색상으로 둘거라 배경색만 넣겠습니다.

 

- 주소/dday/?content=마무리%20잘하기&date=20241231&background=CFFF00

 

이렇게 만든 주소를 주소창에 붙여넣기 하시면 위젯 준비는 끝났습니다.

 

---

노션에 위젯 추가하기

 

노션에서는 주소를 붙여넣기 하면 형식을 선택할 수 있는 창이 뜹니다.

하지만 주소창에 한글이 포함되어 있다면 주소로 인식하지 못해서 따로 팝업이 뜨지 않는데요, 이런 경우에는 /임베드 라고 쳐서 나오는 임베드를 선택하면 링크를 포함시킬 수 있는 블럭이 생성됩니다.

만든 주소를 붙여넣기 해서 링크 임베드를 눌러주세요.

 

위젯이 잘 추가된 모습을 확인할 수 있습니다. 처음에 넣을때는 크기가 매우 크니 사이즈를 적당하게 조절해주세요.

노션 위젯은 가로로 여러 개 쌓을 수도 있습니다 :)

 

내용을 변경하고 싶으면 노션 위젯 추가하기 방법을 다시 하셔도 되고, 위젯에서 우클릭해서 바꾸기를 누르셔도 됩니다.

 

참고로 content 내용으로 이모지 등을 넣을 수도 있습니다.

글자가 너무 길어지지 않게 유의해주세요.

 

---

노션 가이드

아래 노션 페이지에서도 가이드를 확인할 수 있습니다 :)

https://youngdev57.notion.site/Miny-D-day-Widget-125d65b31f86800297c6c93ceec6d5e1?pvs=4

Miny D-day Widget | Notion