노션에서는 간단한 블록들을 사용할 수 있지만, 좀 더 멋진 페이지를 만들기 위해선
다른 사람들이 만들어놓은 위젯을 활용해보는 것도 좋다.
그중 날씨 같은 정보는 다이어리 등 스케줄을 볼 때 유용한 위젯으로
내가 원하는 페이지에 실제 날씨를 볼 수 있는 날씨 위젯을 추가해보자.
⛅WeatherWidget 활용하기
먼저 날씨 위젯을 제공해주는 사이트는 웨더 위젯이라는 곳이다.
해당 사이트에서 노션에 연결할 날씨 위젯을 만들 수 있다.
WeatherWidget.io
Enter your location below and choose the settings, options and theme that you like. Customize as needed. Then just "Get Code" and paste the supplied snippet to the place in your website where you want the widget to appear. Features Free The Weather Widget
weatherwidget.io
홈페이지를 접속하면 만들어질 위젯 예시를 볼 수 있다.
해당 위젯을 나에게 맞게 설정해서 사용하면 된다.
날씨 위젯(weatherWidget) 설정하는 방법
1. 위치 설정하기
원하는 위치를 selectLocation 쪽에 입력하자.
나의 경우 한국의 날씨를 알기위해 검색했다.
2. 제목 설정하기
Location Label1과 Location Label2를 변경하면 왼쪽 제목이 변경되는 것을 볼 수 있다.
3. 위젯언어를 설정하기
확인해보니 한글은 지원이 없는 것 같아서 기본적인 영어를 사용하는 게 좋을 것 같다.
4. 위젯 넓이를 설정하기
위젯 왼쪽 드래그를 하면서 위젯 크기를 조절할 수 있다.
5. 옵션 설정하기
폰트를 고를 수 있고, 아이콘 셋과 일주일 예상 날씨를 사용할지 말지,
혹은 예상은 며칠 이후까지 할지 등 여러 가지 설정이 가능하다.
6. 테마 설정하기
다양한 테마 중 내가 원하는 색상을 선택해준다.
만약 원하는 색상이 없을 경우 테마 옆 커스터마이즈 탭을 이용하면,
각각 색상을 내가 원하는 컬러로 바꾸는 것도 가능하다.
7. 날씨 위젯 코드 복사하기
원하는 세팅이 모두 완성되면 GET CODE 버튼을 클릭하면 코드 팝업이 뜬다.
해당 코드를 복사한다.
노션에 해당 위젯 연결하기
복사해온 코드를 그대로 노션에 넣을 경우 작동하지 않는다.
이제 복사한 코드를 노션이 이해할 수 있는 embed 코드로 변환해서 사용하면 된다.
노션 툴즈 HTML블록 변환 페이지에 접속하면 해당 코드를
노션이 이해할 수 있는 embed코드로 변경해준다.
www.notion-tools.com/embeds/html
HTML 블록
www.notion-tools.com
위 링크에 접속해보자
HTML 코드를 입력하세요.라는 칸에 복사해온 코드를 입력한 뒤 링크 생성하기를 클릭한다.
링크 생성하기를 클릭하면 아래 embed 코드가 생성이 되고 복사하기를 클릭해서 해당 코드를 복사하자.
노션에 embed(임베드) 코드에 복사해온 코드를 넣어준다.
이제 내가 각각 원하는 화면에 날씨 위젯을 활용해서 노션 페이지를 꾸며보도록 하자.
'etc. > Notion' 카테고리의 다른 글
노션 표에서 수식을 이용한 진행 프로그레스바 만들기 (진행률 퍼센트 표시하기) (0) | 2021.05.06 |
---|---|
[Notion] 표에서 특정 속성 안보일 때 확인 방법 (타임라인 속성 순서 바꾸기) (0) | 2021.05.01 |
노션 감성 다이어리 만들어보자! 노션 다꾸하기(무료이미지, 글꼴변경, 페이지아이콘 설정방법) (0) | 2021.04.19 |
노션에서 수학 기호, 공식 작성하기 - 이과생의 노션 필기 꿀팁(Tex 기호 사용) (1) | 2021.04.13 |
개인이 노션 잘 활용하는 방법 5가지 - 노션 첫 사용하는 분을 위한 글 (6) | 2021.04.02 |