코딩 1도 모르면서 노션으로 블로그 만들기
date
Aug 6, 2023
slug
nocode-notion-blog
status
Published
tags
노션
블로그
웹페이지
일기
summary
가리는 것 많은 20년차 블로거가 코딩 1도 모르고 노션 블로그를 만들게 된 사정… 눈물 없이 볼 수 있을지도.
type
Post
들어가며
사람들은 글을 쓰고 싶어 하는데, 정작 자신의 긴 글을 읽고 싶어하는 사람이 없다는 건 본인만 모른다. 나 또한 그런 사람 중 하나다.
그래서… 나는 거의 한 20년째 여러 블로그 서비스를 전전해왔다.
- 네이버블로그📗: 중딩 때 썼는데 그 때의 경험이 좋지 않았다. 이웃들 간의 교류… 품앗이… 사회생활… 사교성… 그리고 그 때는 네이버가 주류가 아니었으므로 그 고인물 느낌이 싫었다.
- 이글루스🧊: 욕하면서도 20년을 여러 개 썼다.
- 티스토리💬: 써봤고, 단체 계정이나 팀블로그로 써봤다. 최근 카카오 인증으로 바뀌어서 아주 귀찮고, 예쁜 블로그를 만드는 게 절대로 불가능하다.
- 설치형 블로그🛠️: 이거라고 안 써봤겠니… 너네 혹시 테터툴즈가 뭔지는 아니? 당연하지만 구글 블로거🤓도 써봤다. 돈도 안 되는 블로그에 호스팅비와 도메인 비용을 지불해야 한다는 건 용납할 수 없어.
- 포스타입📫: 안 써봤다. 써볼까 고민은 했지만 딱 봐도 나랑은 안 맞을 것 같았다. 글을 소비하는 방식이나 외부의 접근성이란 게 그리 좋지 않다고 느꼈다. 네이버처럼 독자 생태계 느낌.
보시다시피 나는 그 무엇에도 만족할 수 없는 사람… 하지만 이글루스에 그럭저럭 타협하여 몇 개를 사용하고 있었는데. 최근 이글루스가 서비스를 종료했다. 발등에 불이 떨어진 거지.
대안 탐색
대안… 뭐가 있나? 조금 고민을 해봤다.
- 포스타입📫: 다시 고민해봤지만 역시 나는 안 될 거 같다. 포스타입을 쓴다면 어떻게든 사람들이 내 글을 돈 주고 읽도록 만드는 데만 골몰할 거 같은 느낌이 드는 것이다.
- 네이버 블로그😘: 요즘 내 친구들은 다들 네이버 블로그를 쓰지만… 그 서로이웃이라는 개념부터가 나와는 지독히도 안 맞는다. 폐쇄적이고 자기 커뮤니티 내부의 문법이 공고해서 싫다.
그러다 주목하게 된 게
노션이었다. 좀 찾아보니 내 노션 페이지를 그대로 웹 블로그로 만들어주는 서비스들이 있었다.사실 노션이 웹 게시 기능을 제대로 만들기만 하면 되는 문젠데, 그게 안 되니 옥상옥이 생긴다. 일단 내가 필요한 조건이 뭔지부터 정리해보았다.
필요한 조건들은…
- 애드센스는 달 생각 없다. 그냥 예쁘게 내 생각을 정리할 수만 있으면 된다. 자기만족을 위한 거란 뜻이다. 뭐… 아이허브 구매코드나 쿠팡파트너스 링크 정도는 달 수 있겠지.
- 그렇다고 돈 내고 할 마음은 없다. 무료로 쓸 수 있어야 한다는 뜻이다. 대신 전용 도메인은 포기할 수 있다.
- 프로그래밍 언어를 전혀 만질 마음이 없다. 이게 가장 중요하다.
- 할 줄 모를 뿐더러, 뭐 하나 수정할 때마다 일일히 코딩해야 하는 게 싫다. 그게 어딜 봐서 간단하냐고?
- 그러므로 노션 페이지에 있는 내용을 그대로 웹페이지에다가 알아서 반영해주었으면 좋겠다.
- 그래도 남들이 보면 괜찮다는 생각이 들 정도여서 허영심을 자극할 수 있었으면 좋겠다.
이상의 조건을 두고, 그렇다면 노션 블로그를 써볼 만하다는 생각이 들었다. 구글신은 모든 답을 알고 계시니 검색을 좀 돌려보았는데.
이런 식이다. 1) 우피 같은 서비스를 유료로 사용하거나, 2) 유사한 해외 서비스 무료 기능까지만 사용하거나, 아니면 3) 깃허브에 남들이 해둔 작업을 더듬더듬 따라가거나.
먼저, 우피
- 돈을 내야 한다. 무료 서비스가 없다. 탈락이다. 😥
- 설령 돈을 내더라도, 노션에서 보는 이미지와 실제 홈페이지에 출력되는 것 사이에 상당한 차이가 있다. 그래서 코딩블록으로 많은 부분 커스텀을 해줘야 한다. 코딩 공수가 들지 않아야 하는 조건에도 부합하지 않는다. 탈락이다.
- 기업 홈페이지 등을 코딩 인력과 함께 관리한다면 적절한 선택지이지만, 내 경우에는 그리 잘 들어맞지 않는다고 느꼈다. 내가 바라는 조건은 그냥 노션에서 보이는 걸 그대로 웹페이지로 출력해주는 수준이다.
해외서비스
그래서 우피와 유사하고 무료 버전이 있는 해외서비스 몇 개를 알아보았다. 심플잉크(simple.ink), 수퍼(super.so) 같은 서비스들이 무료버전을 제시하고 있었다. 나는 이 중에 심플잉크를 써보았다.
- 일단 내가 보는 노션 페이지를 그대로 출력해주는 것은 합격이었다.
- 검색기능을 제공했다. 합격이다.
- 메인 페이지는 좋았는데, 세부적으로 글을 쓰고 나면 그 글들도 하나하나 심플잉크를 통해 공개해줘야 공개되었다.
- 메인 페이지에 데이터베이스를 만들어두고 거기에 글을 쓰면 아래 사진처럼 데이터베이스 리스트의 글 제목까지는 노출이 된다.
- 하지만 별도의 작업을 하지 않으면 이 글을 눌렀을 때 자동으로 그 글이 열리는 게 아니라, 카드 정보를 입력하고 매번 별개의 작업을 해줘야만 그 글을 열어볼 수 있었다. 너 탈락!
그러니까 대략 이런 식이다. 쉽게 예쁘게 만들 수 있는데… 관리가 쉽지 않고 뭐 세부 글 발행할 때마다 카드정보 입력하라고 난리다.
그래서 나는 결국 눈물을 머금고 깃허브 아이디를 만들고 말았던 것이다….
깃허브 작업들
한국어로 노션 블로그 만들기를 검색하면 나오는 결과는 절반 정도가 개발자 블로그들이다. 개발자 블로그들은 고유한 분위기가 있다. 자신의 포트폴리오와 말하고 싶은 것 사이의 경계에 있는… 뭐라 말로 설명하기가 좀 어렵네. 내가 원하는 요소도 있지만, 잘 안 맞는 부분도 있다.
단, 그렇다고 나머지 절반에 답이 있다는 건 아니다. 왜냐하면 나머지 절반은… 당신도 할 수 있다 셀프 브랜딩! 노션으로 블로그를 운영한 후 셀프 책 출간하고 강연해서 40대에 파이어족이 되세요! 무새들이기 때문이다.
설명하자면 어려우니 사례 몇 가지를 들어보자.
뒤의 두 링크에서는 도움을 많이 받았다.
그래… 그런데 왜 깃허브를 뒤지게 되었는지 이야기해야겠지.
아래 설명은 무조건 정확하지 않다. 그냥 문송한 설명이란 거다. 🙇♂️ 내가 이해한 바에 따르면 노션 블로그는 이렇다.
- 일단, 노션에도 ‘공개(publish)’기능이 있다.
- 그러나 노션은 공개 기능을 거지같이 만들어놔서 이걸로 블로그 하다가는 아무도 안 들어온다. 로딩 시간이 길고 튕겨내는 경우도 많아서 다 떠날 것이기 때문이다.
- 그래서 능력자들은 자바스크립트/타입스크립트, CSS 등을 활용해서 자신만의 블로그를 코딩한다. 공개된 노션 페이지에서는 글, 사진 같은 데이터만 가져오고, 그걸 보여주는 외피는 직접 짜맞춰서 노션의 덜떨어진 공개 기능을 우회하는 것이다. (개발자들이란… 부럽다 ㅠ)
- 원래대로라면 이 코딩은 별도의 서버에 설치해 두고 블로그에 들어온 사람들이 서버를 통해 블로그에 접속해야 한다.
- 그런데 그 작업을 Next.js라는 언어를 써서 Vercel이라는 서비스에 올리면, 돈을 내거나 내 컴퓨터를 24시간 서버로 돌리는 불상사 없이 대신 해준다!
- 그래서 사람들은 자신이 코딩한 코딩 덩어리(…?)를 깃허브라는 사이트에 너 나 할 것 없이 올려두고, 이걸 Vercel에다 올리세요(deploy)! 하면서 친절하게 안내도 해둔다.
음… 개발자들, 당신들은 천사인가?
한국에서 노션 블로그 만들기에 친절하게 설명해두신 분들은 morethan-log 계열이나, 아니면 transitive-bullshit 작업을 트윅한 경우가 많았다.
특히 노션 페이지에 만들어둔 헤더 이미지, 배치된 데이터베이스 보기(리스트, 표, 갤러리 등) 같은 것들을 거의 그대로 블로그에 옮겨주는 transitive-bullshit 트윅 계열의 장점이 크다고 생각한다. 수요와 맞다면 위 작업들을 사용해봐도 좋을 것 같다.
다만 나에게는 조금 어려웠다. morethan-log 같은 경우에는 디자인 철학이 나와 전혀 맞지 않았는데, 수정하려면 공수가 꽤 많이 들 것 같았다. transitive-bullshit의 경우 개발자 블로그 감수성 중 나와 맞지 않는 부분들 때문에 (뭐 간단하게는 글자크기, 포스트의 폭, 목차 표시 등등등) 트윅을 하다가 역시 포기…
그래서 조금 더 뒤져봤다.
깃허브에서 notion blog로 검색하면 1500개 정도 검색결과가 나온다. 중국인들이 이렇게 많이 올려놓은 줄 몰랐는데… 암튼 이것들을 검토하다가 최종 후보군으로 오른 게 두 가지.
WR8.IN
- 이 서비스도 노션 페이지에 있는 내용들을 거의 그대로 재현해준다. 그러니까 각각의 글 뿐만 아니라, 메인페이지, 블로그 첫 페이지 같은 곳들도 그렇게 해준다는 뜻이다.
- 그래서 이래저래 시도해봤는데, 나는 메인페이지에 내 글 데이터베이스의 ‘보기’ 방식 여러 개를 나눠서 보여주고 싶었지만, 그걸 어떻게 구현해내기가 마뜩찮았다.
- 무엇보다도 노션의 데이터베이스 기능을 블로그 글 보여주는 ‘목록’으로 활용하는 경우 예전 글 불러오기 기능이라든가 하는 게 잘 동작하지 않는다.
- 그야 뭐 글이 20개 가량 되는 경우에야 일일히 찾으면 되지만, 많이 쌓인 경우에는 매번 가장 최근 글부터 뒤로 돌아가면서 찾거나 해야 하면 너무 노가다 아닌가… 좀 더 원하는 글을 쉽게 찾아서 접근할 수 있는 양식이 필요하다고 느꼈다.
Nobelium
그래서 최종 정착한 게 지금의 이 양식(Nobelium)이다. 깃허브 주소는 여기 있다.
근데 한글로 된 자료가 없다 뿐이지 노션을 CMS(Contents Management System)로 활용하는 블로그 계의 시조새 느낌이더라. 중국인들 중심으로 자기 식으로 트윅해봤다는 깃허브 repository들도 많이 보였고.
- 일단 아쉬운 점이라면, 메인 페이지가 깔끔하긴 해도, 내 노션 페이지를 수정하는 걸로 메인 페이지 요소를 마음대로 변경할 수는 없다는 점이었다.
- 그러므로 블로그를 만들어둔 노션 페이지 자체가 아니라, 노션의 데이터베이스 하나에 글을 작성하면 그 내용들을 퍼다가 온라인에 뿌려주는 느낌이다.
- 반대급부로 디자인이 깔끔하고 좋다.
- 검색 기능이 나름 강력했다. 본문 내용까지는 검색 안 되고, 제목, 요약, 태그에서만 검색이 된다. 그런데 검색과 결합한 태그 기능이 나름 활용도가 무궁무진하겠다고 느꼈다.
- 그리고 가장 오래 붙들고 있다 보니 그래도 이제 코딩된 요소들을 어느 정도 이해하게 되었다….
그렇다. 제목은 코딩 1도 모르면서 블로그 만들기지만, 남들이 만들어둔 껍데기를 그대로 - 정말 그대로, 그러니까, 남들 이름 쓰여진 사용감 있는 중고 느낌으로 - 쓸 게 아니라면 결국 어느 정도는 코드를 건드려야 한다.
난 거짓말은 안 했다. 깃허브랑 Vercel 아이디만 만들어서 deploy만 하면 일단 블로그 쓸 수는 있다…? 그리고 난 코딩 1도 모르는 거지 코딩 1도 안 했다고는 말 안 했다고…?
미안하니까 다음 글에서는 내가 Nobelium 깃허브 repository 원문의 어디를 어떻게 수정했는지 좀 정리해보도록 하겠다. 내가 했으니 당신도 할 수 있다!