Search

노션 기반 웹사이트

게시일
2023. 1. 18.
생성 일시
2023/01/18 14:31

노트 작성 도구

개발과 관련된 지식, 독서 노트, 장보기 목록 등 여러가지 형태의 노트를 다양한 도구에 작성해왔다. 대학생 때는 에버노트와 원노트를 사용했고, 이후에는 일정관리와 함께 트렐로를 사용하다가 몇 년 전부터는 노션도 사용하고 있다.
사는 일이 복잡해지고 기억력도 나빠지면서, 노트 테이킹 도구를 통합하고 이전보다 글을 더 많이 남기기 위한 습관과 프레임워크를 만들어야겠다는 생각이 들었다. 또, 글을 쓰면 혼자 쌓아놓고 보는 편인데, 이 중에는 가끔 혼자보기 아까운 것들도 있다. 작성한 노트 중 일부를 편하게 퍼블리싱까지 할 수 있으면 더 좋을 것 같다. (기본적으로는 프라이빗 해야 한다)
먼저 도구를 정했다. 전에 다니던 회사에서 사용하던 문서 도구가 노션이었고, 나쁘지 않았기 때문에 노션을 디폴트로 두고 더 괜찮은 게 있는지 찾아보았다.
나는 PC, 모바일 환경 모두에서 글을 쓴다.
일단 에디터는 절대적으로 위지윅이어야 했다. 마크다운으로 글을 쓰는 데는 익숙하지만, 모바일에서 마크다운으로 글 쓰는 경험은 끔찍하다.
동기화가 (편하게) 되어야 한다. 일부 도구는 로컬 파일 저장을 기본으로 하고, 동기화를 옵션으로 제공하더라.
요즘 많이 쓴다는 옵시디언, 롬 리서치도 시험해봤지만 위와 같은 이유로 탈락됐다. 그냥 노션을 쓰기로 했다.

노션 기반 웹사이트

앞서 말한대로 노트 중 일부는 퍼블리싱도 하고싶었다. 노션은 그 자체로도 웹에 공유할 수 있는 기능을 제공하고, 커스텀 도메인을 지정할 수도 있다. 다만 이대로는 기능이 부족하다.
다른 방법은 이정도가 있다.
노션 API 사용
노션의 DB와 API를 백엔드로 사용한다. 클라이언트는 개발이 필요하고 노션의 렌더링 방식을 재사용할 수 있다면 좋겠다.
찾아보니 쓸만한 오픈소스가 꽤 있었다.
노션 기반 웹 호스팅 서비스 사용
oopysuper.so가 있다.
둘 다 쓸만한 거 같다. 기능은 슈퍼가 많은데 우피가 요금이 훨씬 싸다. (월 5900원 vs 12불)
첫번째 방법은 적더라도 개발 리소스가 필요하고 검색, SEO, 배포까지 신경쓰려면 귀찮을 거 같았다. 직접 뜯어 고칠 수 있는 부분은 당연히 적겠지만 적당히 타협하고 편하게 쓸 수 있을 거 같아, 돈 좀 내고 잘 만들어진 서비스를 쓰기로 했다. 저렴한 우피를 선택했다.

oopy

구성 & 워크플로우

보통 노션 DB를 만들고 제공하는 뷰(리스트, 갤러리 등)로 포스트를 노출시키는 형태를 많이 사용한다. 나도 노트를 위한 DB를 구성했다. 내가 원래 구상했던 사용 방식은 이랬다.
1.
노트 DB에 노트를 생성하고 작성한다.
2.
기본적으로 프라이빗으로, 공유가 되지 않는다.
3.
퍼블리싱하고 싶은 건, 개별 공유 설정이나 어떤 공유 속성 플래그를 변경하여 제어 한다.
우피에 컨텐츠가 노출되려면 해당 블록이 공유를 허용하도록 설정되어야 한다. DB를 리스트 뷰 등으로 노출시키려면 DB를 공유 허용해야하는데, 이렇게 되면 해당 DB 내의 모든 컨텐츠도 공유가 허용된다. 동일 DB 내에서 부분 항목만 공유 설정하고 우피에 노출 시킬 수 있는 방법은 없었다.
노션의 동기화 블록 기능을 이용해서 적당히 타협을 봤다. 노트 DB 외에 퍼블리싱을 위한 DB(공유 설정됨)를 추가로 생성했다. 수정된 워크플로우는 이렇다.
1.
노트 DB에 노트를 생성하고 작성한다.
2.
해당 노트를 ‘웹에서 공유’ 설정 한다.
3.
퍼블리싱을 원하는 경우, 퍼블리싱 DB에 아이템을 만들고 본문 내용은 노트 DB의 것을 동기화 블록으로 복붙한다.
관리 목적을 위해 두 DB 사이에 1:1 릴레이션을 설정했고, 본문 외에 제목은 중복 입력해야한다는 귀찮음이 남아있긴 하다.

커스터마이징

우피는 기본적으로 관리 콘솔을 통해 화면의 여러 요소를 사용자화 할 수 있다. (폰트, 일부 화면 요소 출력/감추기 등)
만약 기본제공하는 옵션으로 부족한 경우, (몇가지 약속 위에서) htmlyaml 구문을 통해 사용자화 할 수 있는 기능도 제공한다.
내가 적용한 설정은 대략적으로 아래와 같다. 사용된 설정값은 깃헙에 올려두었다.
첫화면 타이틀 대치 출력
헤더 검색 버튼 텍스트 제거
테마 전환 버튼 배경색 고정
리스트 아이템 아이콘 제거
DB 속성 출력 항목 제한
일부 설정은 oopy가 렌더하는 dom에서 내가 찾는 html 원소를 식별하기 쉽지 않아 더럽고 비효율적으로 찾는 코드가 포함되어 있다. css를 통한 단순 스타일 수정 외에 js로 화면 요소를 변경하는 경우는 화면이 로드 된 이후 실행, 반영되기 때문에 아주 짧은 플리커링이 발생하고 있다. 크게 신경 쓰이는 정도는 아니다.

추천인

우피에서 추천인 프로모션을 하고 있습니다. 추천인 입력시 두 사람 모두 50% 할인을 받습니다. 이 링크로 우피에 접근하시거나, 추천인 입력창에 www.seoco.me를 입력하시면 님과 제가 돈을 아낄 수 있습니다.