etc./Notion

[Notion] 노션에 날씨 위젯(WeatherWidget) 과 노션툴즈 HTML 블록을 활용해서 개인 노션 페이지를 꾸며보자

김평범님 2021. 4. 21. 21:12
반응형

노션 날씨 위젯 연동하기

노션에서는 간단한 블록들을 사용할 수 있지만, 좀 더 멋진 페이지를 만들기 위해선

다른 사람들이 만들어놓은 위젯을 활용해보는 것도 좋다.

 

그중 날씨 같은 정보는 다이어리 등 스케줄을 볼 때 유용한 위젯으로

내가 원하는 페이지에 실제 날씨를 볼 수 있는 날씨 위젯을 추가해보자.

 


 

⛅WeatherWidget 활용하기

먼저 날씨 위젯을 제공해주는 사이트는 웨더 위젯이라는 곳이다.

해당 사이트에서 노션에 연결할 날씨 위젯을 만들 수 있다.

weatherwidget.io/

 

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 홈페이지

 

날씨 위젯(weatherWidget) 설정하는 방법

1. 위치 설정하기

원하는 위치를 selectLocation 쪽에 입력하자.

나의 경우 한국의 날씨를 알기위해 검색했다.

weather Widget 날씨 위젯 위치 설정

 

2. 제목 설정하기

Location Label1과 Location Label2를 변경하면 왼쪽 제목이 변경되는 것을 볼 수 있다.

weather Widget 날씨 위젯 라벨 입력 

 

3. 위젯언어를 설정하기

확인해보니 한글은 지원이 없는 것 같아서 기본적인 영어를 사용하는 게 좋을 것 같다.

weather Widget 날씨 위젯 언어변경

 

4. 위젯 넓이를 설정하기

위젯 왼쪽 드래그를 하면서 위젯 크기를 조절할 수 있다.

weather Widget 날씨 위젯 넓이 변경 

5. 옵션 설정하기

폰트를 고를 수 있고, 아이콘 셋과 일주일 예상 날씨를 사용할지 말지,

혹은 예상은 며칠 이후까지 할지 등 여러 가지 설정이 가능하다.

weather Widget 날씨 위젯 옵션 변경하기

6. 테마 설정하기

다양한 테마 중 내가 원하는 색상을 선택해준다.

만약 원하는 색상이 없을 경우 테마 옆 커스터마이즈 탭을 이용하면,

각각 색상을 내가 원하는 컬러로 바꾸는 것도 가능하다.

weather Widget 날씨 위젯 색상변경

 

7. 날씨 위젯 코드 복사하기

원하는 세팅이 모두 완성되면 GET CODE 버튼을 클릭하면 코드 팝업이 뜬다.

해당 코드를 복사한다.

 

 

노션에 해당 위젯 연결하기

복사해온 코드를 그대로 노션에 넣을 경우 작동하지 않는다.

이제 복사한 코드를 노션이 이해할 수 있는 embed 코드로 변환해서 사용하면 된다.

 

노션 툴즈 HTML블록 변환 페이지에 접속하면 해당 코드를

노션이 이해할 수 있는 embed코드로 변경해준다.

 

 

www.notion-tools.com/embeds/html

 

HTML 블록

www.notion-tools.com

위 링크에 접속해보자

 

 

HTML 코드를 입력하세요.라는 칸에 복사해온 코드를 입력한 뒤 링크 생성하기를 클릭한다.

링크 생성하기를 클릭하면 아래 embed 코드가 생성이 되고 복사하기를 클릭해서 해당 코드를 복사하자.

노션툴즈 HTML 블록 변경하기

 

노션에 embed(임베드) 코드에 복사해온 코드를 넣어준다.

노션 임베드 코드를 이용해서 날씨 위젯을 연결한 화면

 

이제 내가 각각 원하는 화면에 날씨 위젯을 활용해서 노션 페이지를 꾸며보도록 하자.

반응형