Notion은 느리다.
Notion은 유저들이 권한에 따라 쉽게 실시간 편집을 할 수 있도록 구현하기 위해 fine-grained access control 방식을 사용한다. 다시 말해 아래와 같이 권한이 세밀하게 분리된다.
- 해당 페이지에 접근이 가능한 유저 리스트를 정의할 수 있다.
- 유저 단위로 읽기, 편집, 댓글쓰기 등의 권한을 따로 부여할 수 있다.
- 페이지 단위로 읽기, 편집, 댓글에 대한 권한을 열어준다.
사용자가 가진 권한을 세분화하여 같은 노션 페이지를 보더라도 읽기, 쓰기 권한이 서로 다르며 따라서 프로그래밍면에서도 fine-grained 방식을 사용했다고 볼 수 있다. 예를 들어 getNotionData 라는 함수가 보기 인증, 편집 인증, 데이터 호출을 모두 담당했다면 authRead, authEdit, getData 등으로 나누어 유연하게 호출하는 방식이다. 하지만 세분화된만큼 작업시간은 Coarse-grained 방식에 비해 길어진다.
하지만 Notion은 여전히 좋은 도구이다.
Notion은 깔끔한 UI, 편리한 사용성, 실시간 편집, 웹 공유, 데이터베이스로서의 역할 등 수많은 장점을 가지고 사랑받는 도구이다. 특히 최근에는 개인 포트폴리오, 이벤트 홍보 랜딩 페이지, 회사 채용 페이지 등으로도 활용되며 정적 웹페이지 생성기로서의 입지를 다지고 있다. 그러나 이때 초기 로딩속도가 약 5초 이상으로 느린 경우가 많기 때문에 단순히 notion에서 기본으로 제공하는 "웹에서 공유" 기능으로는 부족하다. 이럴때 활용할 수 있는 도구들이 있다.
Notion을 좀 더 빠른 정적 웹사이트로 만들어주는 도구들
Super.so
Super — Create Websites with Notion
- 페이지 생성, 호스팅 모두 해주며 계속 무료 버전 사용 가능
- 모달이나 사이드바 없이 페이지 변경만 함
- 유료버전은 월에 basic 16달러(약 ₩21,000), pro 28달러(약 ₩37,000)
- 무료버전은 페이지 하단에 아래와 같은 뱃지가 붙음
Oopy.io
- 무료판 일주일 제공
- 유료버전은 월에 basic 5,900원, pro 9,900원
- 한국 서비스
Next.js Notion Starter Kit
https://github.com/transitive-bullshit/nextjs-notion-starter-kit
- config파일에서
notion url만 변경하면 바로 배포 가능할 정도로 쉬움 - 완전히 notion과 같은 UI는 아니지만 커스텀 가능
React Notion X
https://github.com/NotionX/react-notion-x
- 위의 starter kit도 이걸로 만든 것
- starter kit보다 조금 더 deep한 커스텀 필요할 때 사용할것
- Notion API 이용해 notion page ID로 데이터를 가져와서
NotionRenderer라는 컴포넌트 사용하여 렌더링 - mapImageUrl를 override해서 CDN사용하도록 바꿀 수 있고 미리보기 이미지를
next/image를 활용해 lazy loading 하는 등 이미지 최적화 가능
활용 소감
직접 포트폴리오 배포에 사용해본 경험은 다음과 같다.
- Super.so의 경우 세팅도 필요가 없고 무료 버전을 계속 사용할 수 있어 편리하고 확실히 로딩 속도도 빨라졌다.
- Next.js Notion Starter Kit 정도만 사용해도 대부분의 사용자가 원하는 수준의 커스텀과 성능향상이 가능할 것 같다.
여러분도 여러분만의 빠른 notion 포트폴리오를 제작하고 배포해보세요!
