[노션]노션 커스텀 위젯 만들기 - github

노션을 사용하다보면 좀 복잡한? 위젯같은것을 넣고싶어질때가 있다.

 

하지만 노션자체에서 제공하는 기능만으로는 조금 부족할때가 있기에 이를 보완할 방법중 하나인 외부 임베디드를 사용해보도록 한다.

 

외부에서 접근가능한 웹서버가 있다면 무리없이 그냥 만들어서 올릴 수 있으나 보통은 그런게 마련되어있지 않으니 다른사람이 만들어놓은 서버를 사용하던지, 상용 사이트를 사용하던지, 꼼수를 사용하는 방법이 있다.

 

상용 사이트에 대표적으로는 앱션(https://apption.co) 이라는 사이트가 있다. 무료/유료로 서비스를 제공하며, 무료로는 조회수 1000회 제한, 3개의 임베드, 1개의 위젯으로 제약사항이 크며. 유로로 전환시 위와같은 제약은 사라진다.

 

관리도 편하고 사용도 간편하지만 월 4달러의 구독요금이 소요된다.

 

앱션의 유료 버전 기능 설명

 

하지만 간단하고 단순한 기능을 넣는데 4달러의 구독요금이 부담이 된다면 꼼수가 몇가지 있다.

 

하나는 티스토리(등 여러 블로그사이트)의 스킨을 변형하여 게시글의 내용만 나타나도록 수정한 후 이를 이용하는방법이 있다.

이는 여러모로 걸리는게 몇가지가 있으므로 별로 추천은 하지 않는다. 게시글도 <style>태크 안에 내용이 전체페이지 안으로 흡수되므로 글 수정시 많은 에로사항이 꽃피기도 하니 그냥 이런것도 쓸 수 있다 정도로만 넘어가도록 한다.

 

또다른 하나는 github을 이용하는것인데, github에서 웹페이지 기능을 제공하는것을 사용하는 방법이다. 이는 해당 프로젝트 소개사이트를 만들라고 제공되는 페이지이지만 블로그등 여러용도로 사용되기도 한다.

github에 가입/로그인후, repository를 public으로 생성하여 creating a new file를 눌러준다.

 

repository를 생성하게되면 반겨주는 페이지

 

파일명을 index.html로 설정한 후 내용을 대충 넣어준다. 이후 화면 하단의 Commit new file을 누르면 된다.

 

뭐 넣을거 없을때마다 넣는 문구

 

이후 상단의 Settings를 눌러주고, 왼쪽에서 Pages를 찾아서 눌러준다. 

 

github의 Settings->Pages

 

위 화면에서 중앙의 Source에 있는 None을 눌러주면 main이라고 나오게 되는데 이를 눌러주고 오른쪽에 있는 Save를 눌러준다. (추후에 파일관리등 관리를 편하게 하려면 디렉터리를 하나 만들어서 /(root)이라 되어있는것을 해당 디렉터리로 변경하면 된다.) 

 

설정은 적당이 완료되었다.

 

Save를 누르게되면 아래와 같은 화면이 나타날것인데, 설정이 완료되는데까지 1분가량 소요되니 좀 기다리다가 빨간색으로 친 주소를 누르게되면 방금 만든 페이지가 나타나게 될것이다.

 

hello world!

 

이제 거의 다 왔다. 앞으로 할것은 단순하게 해당 페이지를 notion에 올려두면 끝난다.

 notion으로 돌아와서 페이지를 작성해준다.

 

/embed라 치면 된다.

 

방금 만들어둔 사이트의 주소를 넣고, 링크 임베드 버튼을 누르면

 

완성!

 

이렇게 방금 만들어둔 페이지가 나타나게 된다.

 

다른 위젯을 만들고자하면 해당 repository에서 마찬가지로 Create new file을 눌러 추가를 해주고 위와 같은 방식으로 만들어주고 주소에 해당 파일 이름을 넣어주면 끝난다. (디렉터리가 있다면 디렉터리경로를 추가해주면된다.)

 

github에 public으로 올렸으니 해당소스는 공개소스로 올라가며, 해당소스의 라이센스는 공개라이센스로 설정이 되므로 변경하고자하면 license파일을 만들어 원하는 라이센스로 설정을 해줘야한다.