노션을 쓰다 보면 어느 순간 “여기에 실시간 차트나 시세 정보를 넣을 수 있으면 좋겠다”는 생각이 들 때가 있어요. 특히 주식이나 암호화폐, 외환 같은 금융 정보를 다루는 페이지를 만들다 보면 TradingView의 위젯들이 자연스럽게 떠오르게 되죠. TradingView는 전 세계적으로 가장 널리 쓰이는 차트 플랫폼 중 하나인데, 무료로 사용할 수 있는 다양한 위젯을 제공하고 있어서 블로그나 웹사이트에 삽입하는 경우가 많거든요.
TradingView 위젯, 어떤 것들이 있을까?
TradingView 공식 사이트에 가면 위젯 전용 페이지가 따로 있어요. 주소는 tradingview.com/widget/인데, 여기에 들어가면 다양한 종류의 위젯을 구경할 수 있어요. 대표적으로 많이 쓰이는 것들을 간단히 소개해 보면, 우선 실시간 차트 위젯이 있어요. 특정 종목이나 암호화폐, 환율 등의 차트를 실시간으로 보여주는 위젯인데, 크기나 색상, 표시할 지표 등을 커스터마이징할 수 있어요.
그다음으로 시세표(Ticker) 위젯이 있는데, 여러 종목의 현재가를 한 줄로 흐르듯이 보여주거나 표 형태로 정리해서 보여주는 형태예요.
노션이 HTML을 지원하지 않는 이유가 뭘까?
노션은 기본적으로 URL 기반의 embed만 지원해요. 유튜브 영상이나 구글 맵, 피그마 파일 같은 경우에는 URL만 붙여넣으면 자동으로 예쁘게 임베드가 되잖아요. 그런데 TradingView 위젯처럼 HTML 코드 형태로 제공되는 것들은 노션이 인식을 못 해요. 보안상의 이유도 있고, 노션의 구조 자체가 그렇게 설계되어 있기 때문이에요.
그래서 필요한 게 HTML 코드를 URL로 바꿔주는 방법이에요. 원리는 간단해요. HTML 코드를 어딘가에 올려두고, 그 페이지의 URL을 노션에 embed하는 거예요. 마치 웹페이지 하나를 만들어서 그 주소를 노션에 삽입하는 것과 비슷한 개념이죠.
그런데 이런 역할을 해주는 간단한 방법이 몇 가지 있어요.
노션 사용자들 사이에서 꽤 알려져 있던 방법이 Apption.co 이라는 서비스었어요. 저도 실제로 실제로 사용해 봤는데, 처음 사용할 때는 느리지만 동작은 잘 되었었는데, 위젯 로딩에 지연이 있는 경우가 종종 있었고, 간혹 아예 동작하지 않는 상황도 있었어요. 그리고 현재는 서비스 접속 자체가 불안정한 상태인 것 같아서 저는 이 서비스를 사용하다 중단했어요.
그래서 대안으로 찾은 방법이 Github를 이용하여 HTML Code로부터 URL을 만들어내는 방법인데, 저는 이 방법이 매우 안정적이고 지연도 거의 없고, 더구나 무료로 사용할 수 있어서 개인적으로는 무척 만족하고 있어요. 제가 apptition.co 사용을 중단하게 된 배경도 Github를 사용하면서 부터예요. 이러한 방법을 HTML 호스팅이라고 하더군요.
참고) Widgetbox(widgetbox.app)나 HTMLsave(htmlsave.com) 같은 서비스도 apption.co와 유사한 기능을 제공한다고 하는데, 참고로 저는 써보지는 않았어요.
3단계: HTML 복사해서 붙여넣기
저장소가 만들어지면 "Add file" → "Create new file"을 눌러서 새 파일을 만들어요.
그러면 다음과 같은 화면이 되는데, 여기다가 tradingview에서 복사한 HTML 코드를 붙여넣고, "Commit new file" 버튼을 눌러 저장하면 돼요. 파일 이름은 저는 그냥 index.html을 사용했어요.
4단계: GitHub Pages 활성화하기
저장소 상단 메뉴에서 "Settings"를 누르고,
왼쪽 사이드바에서 "Pages"를 찾아요. "Source" 항목에서 "Deploy from a branch"를 선택하고, Branch를 "main"으로, 폴더를 "/ (root)"로 설정한 다음 Save를 누르면 돼요.
이 상태에서 HTML 코드를 입력했던 부분의 화면으로 돌아와 몇 분 정도(통상 2-5분) 기다리면 다음처럼 Deployment가 표시되면서 해당 HTML 코드에 대한 URL페이지가 활성화되어요.
5단계: 생성된 URL 확인하기
이제 이 부분을 클릭해 들어가 보면 다음과 같이 https://사용자이름.github.io/저장소이름/파일명.html 형태의 URL로 접속할 수 있게 돼요.
이 URL이 바로 노션에 embed할 주소예요.
여기에 앞서 만든 GitHub Pages URL을 붙여넣고 엔터를 누르면, 위젯이 페이지 안에 나타나요. 처음에는 작은 크기로 나올 수 있는데, 블록의 모서리를 드래그해서 원하는 크기로 조절하면 돼요.
노션 페이지를 웹으로 게시하기
위젯까지 넣은 노션 페이지를 다른 사람에게 공유하거나, 웹에서 누구나 볼 수 있게 하고 싶다면 "웹에 게시" 기능을 사용하면 돼요. 노션 페이지 오른쪽 상단에 있는 "Share" 버튼을 누르면 여러 옵션이 나오는데, 그중에 "Publish to web" 또는 "웹에 게시"라는 항목이 있어요. 이걸 활성화하면 해당 페이지가 고유한 URL로 웹에 공개되고, 링크만 있으면 누구나 접속할 수 있게 돼요.
사실 이 부분은 노션의 기본적인 사용법중의 하나라서 별도로 설명할 필요는 없을것 같기도 해요.