vue-notion 노션api 없이 간단하게 노션 화면 불러오기

프로젝트 이슈관리를 노션으로 하면서 사내에서 노션 활용도가 높아졌다. 그러던중에 서비스를 개편하면서 이용약관을 조금 수정했는데 현재 우리 서비스의 이용약관의 경우 순수한 텍스트로 하드코딩이 되어있어서 오탈자라던가 어미를 살짝 변경하면서 수정사항이 생기면 그게 참 간단한데 꽤나 번거롭다. 

 

기획 과장님께서 노션페이지를 바로 보여줄 수도 있지 않겠느냐는 의견을 주셨고 찾아보니 이용약관 같은 간단한 화면의 경우 노션 개발자계정이라던가 직접적인 노션api 호출 없이도 vue-notion 이라는 라이브러리를 통해서 간단하게 사용할 수 있었다. 

 

실행 환경

window10
node v16.17.0
vite + vue3
typescript

 

 

참고로 vue-notion은 비공식 플러그인이긴 하지만 깃허브 스타 776개를 받은 플러그인으로 조만간 흥할 것 같다(는 내 뇌피셜ㅎㅋㅎㅋㅎ)

 

vue-notion 설치

npm install vue-notion@3.0.0-beta.1

 

GitHub - janniks/vue-notion: A fast Vue renderer for Notion pages

 

노션 page-id를 사용해야 하기때문에 일단 페이지를 먼저 만든다

 

 

노션 페이지 생성 및 공유하기

아래 실제 노션 이용약관 페이지에서 3조까지만 복사해와서 이용약관 페이지를 테스트로 만들었다. 

그리고 우측 상단에 공유 버튼클릭 웹에서 공유 토클을 활성화 시켜준다

그리고 아래 웹링크를 복사해서 메모장이나 주소창에 붙여넣으면 아래와같은 형태의 url이 되는데 이때 맨 뒤에 있는 파라미터가 바로 page-id이다

 

사실 사용방법이 너무나도 간단한데 처음에 조금 삽질했던게 바로 이 page-id때문이었다. 그냥 페이지를 복사했을때 생성되는 page 아이디가 아니가 공유하기 기능을 통해 생성된 아이디라른 것만 알아두면 문서에 나와있는 그대로 따라하면 되기때문에 어렵지 않다. 

 

 

페이지 적용하기

<template>
    <NotionRenderer v-if="blockMap" :blockMap="blockMap" fullPage/>
</template>

<script lang="ts" setup>
import { NotionRenderer, getPageBlocks } from "vue-notion";
import { ref, reactive, onMounted } from "vue";

const blockMap = ref(null)
const data = reactive({ blockMap })

const notionInit = async ()=>{
    data.blockMap = await getPageBlocks("69981454714a47ecbe1608aeb966ffd1")
}

onMounted(()=>{
    notionInit()
})

</script>

<style>
@import "vue-notion/src/styles.css";
</style>

 

참고로 기존에 진행중인 프로젝트에 노션페이지 불러오기를 적용할 경우 스타일이 충돌할 수 있기때문에 이부분을 잘 고려해서 공통스타일을 잡아줘야한다. 어찌보면 노션에서 불러온 페이지를 내 마음대로 스타일 줄 수 있어서 자유도가 높다고 할 수 있지만 개인적으로 노션스타일 좋아서.... 그대로 쓰고싶.....👉👈.... 그래서 노션 스타일도 불러왔다ㅎㅎㅎ

 

 

▼ 일반 노션 공유하기로 열었을때 노션페이지

 

▼ vue-notion 으로 보여주는 페이지

노션에 썼던 그대로 보여준다.

 

---

 

리스트말고도 다른 노션 기본 스타일을 얼마나 제공하는지 이것 저것 사용해봤다.

아래는 화면에 보이는 모습

vue-notion README 페이지에도 가능한 기능들이 쭉 나열되어있는데 일단 css 스타일으로만 보여주는 것들은 대부분 가능한 것 같다. 체크박스의 경우 비활성화인 상태로 보여주고 토글 기능도 사용할 수 있다. 

 

아쉬운점은 첨부파일이 안됨... 너무 많은 걸 바라는 건가....

그리고 버튼은 아예 안나옴ㅎㅎㅎ 

 

 

요즘 서비스는 노션을 활용해서 이용약관이나 개인정보 이용안내등을 제공하는 곳이 많은데 텍스트만 보여준다면 문제없이 사용할 수 있을 것 같다. 그래도 비공식인만큼 안정적이지 않을수도 있으니 사용하게 될경우 주기적인 확인은 필요해보인다. (vue-notion 깃 레포에도 언급된바 있음)