[Notion] 노션에 날씨, 주식, 환율 등 위젯 설치하는 방법

 

레딧의 노션 커뮤니티를 둘러보면 노션 홈에 위젯을 설치해둔 해외 유저들이 꽤 많이 보인다. HTML 임베드를 지원하는 노션의 장점을 활용해 페이지 성격에 맞는 위젯을 삽입한 것이다. 위젯을 제공하는 대부분의 서비스는 배경/폰트 색상 등을 커스터마이징 할 수 있기 때문에 노션 페이지 스타일에 잘 어울리도록 구성한다면 그럴싸한 홈페이지처럼 꾸밀 수 있다.

 

날씨 위젯을 설치한 노션 페이지

그래서 필자도 외부에 공개한 노션 페이지(위 이미지)에 날씨 위젯을 설치해봤다. 위젯을 투명 배경으로 설정했지만 노션에서 임베드하면 회색 배경으로 자동 변경되는 것 빼곤 큰 이질감 없이 깔끔하게 표시된다. 날씨 외에도 TradingView의 주식, 환율이나 오늘의 명언 같은 위젯도 설치할 수 있다. 설치 방법 역시 간단하니 아래 가이드에 따라 차근차근 따라 하면 된다. 

 

 

1. 차트 위젯 (주식, 채권, 환율 등)

---

TradingView의 주가, 원유 인덱스

주식, 채권 등 여러 상품에 투자하고 관련된 내용을 노션에 기록/메모하는 사람이라면 정말 유용한 위젯이다. TradingView 사이트에선 다양한 인덱스를 임베드할 수 있도록 위젯으로 제공하는데, 이 위젯을 노션에 설치하면 매일 마주하는 투자 관련 노션 페이지에 각종 지표들을 한눈에 확인할 수 있어 좋다(국가별 코로나 바이러스 확진자 수 그래프도 있다). 

 

(1) 위젯 세팅

TradingView의 Widget 페이지로 가면 원하는 종류의 위젯을 고를 수 있다. 위젯을 선택하고 Get Widget 버튼을 누르면 위젯 설정 화면으로 넘어간다. 여기서 인덱스 추가/삭제, 배경 색상(투명 가능), 크기(일부 위젯), 언어 등을 변경할 수 있다. 위젯 설정을 완료했다면 파란색 Apply 버튼을 눌러 변경한 내용을 최종 확인해본다. 문제가 없다면 생성된 임베드 코드를 복사해두자.

 

(2) 임베드 코드 변환

복사한 코드를 바로 노션에 붙여 넣기 하면 북마크 형식으로 나오기 때문에 추가적인 임베드 코드 변환이 필요하다. 따로 서버를 운영하고 있지 않다면 Html Save 같은 사이트에서 손쉽게 변환할 수 있다. 무료 유저는 1개까지 가능하며 그 이상은 결제가 필요하다. Html Save 사이트 로그인(구글 계정) → 코드를 붙여 넣은 뒤 Submit to Save 버튼을 누르면 변환 완료된 링크가 생성된다.

 

(3) 임베드하기

노션에서 /embed를 입력한 후 Html Save에서 변환한 임베드 링크를 붙여 넣으면 끝. 추가로 위젯 가장자리의 검은색 조절 막대를 드래그하여 원하는 크기로 만들어주자.

스톡 위젯 임베드 완료 화면

 

2. 날씨 위젯

---

WeatherWidget의 다양한 테마.GIF

수많은 날씨 위젯이 있지만 WeatherWidget.io 사이트를 추천한다. 폰트, 배경, 테마 등 다양한 옵션의 커스터마이징이 가능하고 따로 회원 가입하지 않아도 사용할 수 있는 무료 서비스다.

 

(1) 위젯 세팅

WeatherWidget 접속 후 지역, 옵션, 테마 등을 설정한 후 GET CODE 버튼을 눌러 코드를 복사한다. 

 

(2) 임베드 코드 변환

날씨 위젯도 마찬가지로 Html Save 사이트를 통해 노션에서 임베드 가능한 코드로 변환해야 한다. 무료 계정은 1개까지만 호스팅 할 수 있으므로 기존에 생성했던 건 삭제해야 한다.

 

(3) 임베드하기

노션에서 /embed 입력 후 변환한 코드를 붙여 넣는다. 필요하다면 위젯 가장자리의 조절 막대로 원하는 크기로 변경해준다. 

날씨 위젯 임베드 완료 화면

 

3. 오늘의 명언 (영어)

---

 

Kwize는 영감을 주는 다양한 명언들을 위젯으로 제공하는 사이트다. 매일 바뀌는 오늘의 명언이나 행복, 지식, 인생, 사랑 등 종류별로 직접 선택할 수도 있다. 좋아하는 문구를 자주 사용하는 노션 페이지에 삽입하여 동기를 부여해보자. 단점으론 영어밖에 없다는 것. 

 

(1) 위젯 세팅

오늘의 명언 위젯 페이지에 접속하여 위젯의 포맷/크기/색상 등을 변경해준다. 원하는 주제를 직접 선택하고 싶다면 아래에 있는 Browse quotes 부분을 살펴보자. 설정을 완료했다면 드래그하여 코드를 복사한다. 

 

(2) 임베드 코드 변환

Html Save 사이트에서 임베드 가능한 코드로 변환한다. (날씨, 차트 위젯 방법과 동일)

 

(3) 임베드 하기

변환한 코드를 Notion 붙여 넣어 임베드한다. (날씨, 차트 위젯 방법과 동일)

 

---

참고 글