노션을 꾸미는 중 디데이를 표시할 수 있는 위젯이 있었으면 좋겠다 싶어서 만든 간단한 노션 디데이 위젯입니다.
복잡한 부분 다 빼고 가장 심플하게, 그리고 예쁘게 만들었습니다 :)
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
@Miny (youngdev)
youngdev57.notion.site
글자색은 기본 색상으로 둘거라 배경색만 넣겠습니다.
- 주소/dday/?content=마무리%20잘하기&date=20241231&background=CFFF00
이렇게 만든 주소를 주소창에 붙여넣기 하시면 위젯 준비는 끝났습니다.
노션에 위젯 추가하기
노션에서는 주소를 붙여넣기 하면 형식을 선택할 수 있는 창이 뜹니다.
하지만 주소창에 한글이 포함되어 있다면 주소로 인식하지 못해서 따로 팝업이 뜨지 않는데요, 이런 경우에는 /임베드 라고 쳐서 나오는 임베드를 선택하면 링크를 포함시킬 수 있는 블럭이 생성됩니다.
만든 주소를 붙여넣기 해서 링크 임베드를 눌러주세요.
위젯이 잘 추가된 모습을 확인할 수 있습니다. 처음에 넣을때는 크기가 매우 크니 사이즈를 적당하게 조절해주세요.
노션 위젯은 가로로 여러 개 쌓을 수도 있습니다 :)
내용을 변경하고 싶으면 노션 위젯 추가하기 방법을 다시 하셔도 되고, 위젯에서 우클릭해서 바꾸기를 누르셔도 됩니다.
참고로 content 내용으로 이모지 등을 넣을 수도 있습니다.
글자가 너무 길어지지 않게 유의해주세요.
노션 가이드
아래 노션 페이지에서도 가이드를 확인할 수 있습니다 :)
https://youngdev57.notion.site/Miny-D-day-Widget-125d65b31f86800297c6c93ceec6d5e1?pvs=4
Miny D-day Widget | Notion
Made with Notion, the all-in-one connected workspace with publishing capabilities.
youngdev57.notion.site
'Notion > widget' 카테고리의 다른 글
| Notion Widget: 노션 색상 선택기 위젯, Miny Color Picker Widget (2) | 2024.10.21 |
|---|
노션을 꾸미는 중 디데이를 표시할 수 있는 위젯이 있었으면 좋겠다 싶어서 만든 간단한 노션 디데이 위젯입니다.
복잡한 부분 다 빼고 가장 심플하게, 그리고 예쁘게 만들었습니다 :)
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
@Miny (youngdev)
youngdev57.notion.site
글자색은 기본 색상으로 둘거라 배경색만 넣겠습니다.
- 주소/dday/?content=마무리%20잘하기&date=20241231&background=CFFF00
이렇게 만든 주소를 주소창에 붙여넣기 하시면 위젯 준비는 끝났습니다.
노션에 위젯 추가하기
노션에서는 주소를 붙여넣기 하면 형식을 선택할 수 있는 창이 뜹니다.
하지만 주소창에 한글이 포함되어 있다면 주소로 인식하지 못해서 따로 팝업이 뜨지 않는데요, 이런 경우에는 /임베드 라고 쳐서 나오는 임베드를 선택하면 링크를 포함시킬 수 있는 블럭이 생성됩니다.
만든 주소를 붙여넣기 해서 링크 임베드를 눌러주세요.
위젯이 잘 추가된 모습을 확인할 수 있습니다. 처음에 넣을때는 크기가 매우 크니 사이즈를 적당하게 조절해주세요.
노션 위젯은 가로로 여러 개 쌓을 수도 있습니다 :)
내용을 변경하고 싶으면 노션 위젯 추가하기 방법을 다시 하셔도 되고, 위젯에서 우클릭해서 바꾸기를 누르셔도 됩니다.
참고로 content 내용으로 이모지 등을 넣을 수도 있습니다.
글자가 너무 길어지지 않게 유의해주세요.
노션 가이드
아래 노션 페이지에서도 가이드를 확인할 수 있습니다 :)
https://youngdev57.notion.site/Miny-D-day-Widget-125d65b31f86800297c6c93ceec6d5e1?pvs=4
Miny D-day Widget | Notion
Made with Notion, the all-in-one connected workspace with publishing capabilities.
youngdev57.notion.site
'Notion > widget' 카테고리의 다른 글
| Notion Widget: 노션 색상 선택기 위젯, Miny Color Picker Widget (2) | 2024.10.21 |
|---|
