노션 DB로 만든 블로그가 바로 지금 보시는 이 블로그입니다! tudy.club 도메인을 사고 방치한지 어연 n년. 내가 좋아하는 거, 배운 거, 기록할 거를 남기는 곳을 언제나 원했는데요. 그래서 데이터를 내가 원하는 방식으로 가공하고 보여줄 수 있는 걸 찾아 꽤 오래 헤맸습니다.

블로그를 직접 만든 이유

왜 네이버 블로그, 티스토리가 아닌가

둘 다 세팅을 해봤고, 네이버 블로그는 아직도 소소하게 애드포스트를 받고 있는데요. 역시 편하긴 합니다. 근데 거슬리는 게 있었어요.

네이버 블로그는 네이버 검색이나 구글 검색에 잘 잡히는 게 큰 장점이지만, 그게 곧 단점이기도 해요. 네이버 계정에 내 데이터가 종속됩니다. 개발 관련 내용도 다루는데, 코드 블록이나 데이터를 좀 더 다양한 방식으로 보여주고 싶었어요. 임베드의 한계, 사진 업로드 등이 귀찮았구요. 네이버 에디터로는 한계를 느꼈습니다.

티스토리도 마찬가지. 결국 플랫폼 위에 있는 거고, 내 데이터를 내가 컨트롤한다는 느낌이 아니에요. Velog도 이부분을 많이 개선했지만 내 데이터를 편하게 관리 하고 싶은 마음이 제일 컸습니다.

사실 이렇게 데이터를 소유하고 싶은 마음은 오래됐어요. 고등학생 때 워드프레스로도 비슷한 걸 세팅했었거든요. 근데 잘 안 들어가게 되더라구요… 세팅은 해놓고 결국 방치.

그때부터 패턴이 반복됐습니다. 만들어놓고 → 안 쓰고 → 방치. 이 루프를 끊으려면 글 쓰는 과정 자체가 최대한 편해야 했어요.

Webflow, Framer는?

Webflow나 Framer를 2022년부터 잘 쓰고, 이전 회사들의 홈페이지를 이걸로 세팅했었으니까 처음엔 이걸로 하려고 했어요. 근데 매달 돈 나가는 게 아까웠습니다. 2020년부터 개발을 찍먹했는데, 이미 빌드도 할 줄 알면서 커스텀 도메인 붙이기 위해 돈을 더 내고, 또 데이터를 하나하나 업로드 하고. 굳이 노코드 빌더를 써야 하나 싶더라구요.

Sanity 시절의 교훈

그래서 직접 만들고자 택했던건 먼저 sanity였습니다. 2023년 1월에 Sanity를 CMS로 쓴 포트폴리오 사이트를 만들었는데요. Sanity는 노션이랑 비슷한 느낌의 헤드리스 CMS예요. 자유도는 정말 좋습니다. 근데 문제는 초반에 데이터 스키마를 짜고 연결하는 과정이 정말정말 힘들었어요.

1. 내가 어떤 데이터를 넣고싶은지 정의하고
2. 그 데이터를 어떻게 보여주고 싶은지 스타일 적용하고

2023년 AI가 지금처럼 잘 못하던 시절이라, 그걸 다 직접 해야 했거든요ㅋㅋㅋ

어찌어찌 만들긴 했는데, 돌이켜보면 포트폴리오에 집중한 게 아니라 웹사이트 만드는 것에 더 치중됐던 것 같아요. 덕분에 TypeScript 실력이 많이 늘긴 했습니다만… 그게 블로그의 목적은 아니잖아요… ㅋㅋㅋ

그래서 노션

결국 돌고 돌아 노션에 정착했어요. 2020년부터 이미 매일 노션을 쓰고 있었습니다. 글도 거기서 쓰고, 프로젝트 관리도 거기서 하고. 그러면 블로그 글도 노션에서 쓰고, 그게 자동으로 사이트에 올라가면 되잖아요.

노션에서 글 쓰고 상태만 Published로 바꾼 후 redeploy로 끝. 데이터 가공도 자유롭고, 개발 콘텐츠에 필요한 코드 블록이나 테이블도 노션에서 자연스럽게 쓸 수 있고요.

출발점: morethan-log

처음부터 다 만든 건 아닙니다. morethan-log라는 오픈소스 노션 블로그 템플릿이 있는데, 노션 데이터베이스를 CMS로 쓰는 Next.js 정적 블로그예요. Vercel 배포까지 깔끔하게 지원하고요.

여기서 노션 DB 구조를 비슷하게 가져가되, 디자인이랑 기능은 제가 원하는 대로 커스텀했습니다.

개발 스펙

• Next.js + TypeScript: 타입스크립트가 익숙해서 택함 (Sanity 시절에 많이 늘었으니...)
• Tailwind CSS: 예전에는 Styled Components나 SASS를 썼는데, Tailwind가 그 둘을 아우르는 느낌이라 갈아탔어요.
• shadcn/ui: 쓰고 싶어서 붙였습니다. 컴포넌트 하나하나 예쁘고 커스텀하기 좋아요.
• Notion API: CMS 역할
• Vercel: 거진 모든 배포는 Vercel로 하는 중

1. Notion Integration 만들기

notion.so/my-integrations에서 새 Integration을 만들어요. 이름 적당히 짓고 만들면 secret_xxxxx 형태의 API 토큰이 나옵니다. 이걸 환경변수 NOTION_TOKEN에 넣으면 됩니다.

2. 데이터베이스 연결

블로그 글을 관리할 노션 데이터베이스를 만들고, 해당 페이지에서 우측 상단 ··· → 연결 → 방금 만든 Integration을 추가해요. 이거 안 하면 API가 데이터베이스에 접근을 못합니다.

데이터베이스 URL에서 ID를 추출해서 NOTION_DATABASE_ID 환경변수에 넣어요.

https://notion.so/myworkspace/a1b2c3d4e5f6...?v=...
                            ^^^^^^^^^^^^^^^^
                            이 부분이 DATABASE_ID

3. 데이터베이스 스키마

제가 쓰는 속성들:

status가 Public인 것만 API에서 가져오니까, 노션에서 글 쓰다가 status만 바꾸면 발행/비발행 전환이 됩니다.

4. 코드에서 연결

import { Client } from "@notionhq/client";

const notion = new Client({ auth: process.env.NOTION_TOKEN });

const response = await notion.databases.query({
  database_id: process.env.NOTION_DATABASE_ID,
  filter: {
    property: "status",
    select: { equals: "Public" },
  },
  sorts: [{ property: "date", direction: "descending" }],
});

@notionhq/client가 공식 SDK고, notion-to-md로 블록 데이터를 마크다운으로 변환해요. 노션 블록 구조가 꽤 복잡한데 이 라이브러리가 대부분 처리해줍니다.

5. 글 발행 플로우

1. 노션에서 글 작성
2. status를 Public으로 변경
3. Vercel에서 redeploy (또는 webhook 연결해서 자동화)

이게 전부예요. 노션이 CMS 역할을 하니까 별도 어드민 페이지가 필요 없습니다.

Tudy Club

터디 클럽은 (s)tudy club에서 따온 이름이에요. products.tudy.club처럼 s의 중복을 활용할 수 있도록 만들었습니다.

블로그 컨셉: 지하철 노선도

tudy.club의 컨셉은 지하철 노선도. 카테고리가 AI, Crypto, Design, Dev, Money, Notion, Product로 나뉘어 있는데, 이걸 노선처럼 생각했어요. 각 카테고리가 하나의 노선이고, 글 하나하나가 역인 거죠.

글 상세 페이지에 들어가면 티켓 형태의 헤더가 보여요. 역에 도착하면 받는 승차권처럼요.

지하철 노선이 서로 교차하듯이, 배움도 카테고리에 구애받지 않고 확장돼요. AI를 공부하다 Dev로 넘어가고, Product를 파다 보면 Design이랑 엮이고. 환승역처럼 여러 노선이 만나는 지점이 생기는 거죠. 그렇게 점점 뻗어나가는 형태를 상상했습니다.

배운 거 그때그때 로그 찍고, 그걸 펼쳐나가는 게 이 블로그의 목적이에요. "더욱 잘 살고 싶은 Z세대 PM의 성장 기록"이라는 부제도 그래서 붙였어요. 완성된 지식을 전달하는 게 아니라, 배워가는 과정을 기록하는 블로그.

클로드 코드가 한 일

이 블로그를 클로드 코드의 도움을 받아 만들었습니다. morethan-log의 DB 구조를 참고하되, 디자인과 기능을 제 컨셉에 맞게 뜯어고치는 작업이었어요.

1. 초기 세팅부터 구조 잡기

   morethan-log 기반으로 시작하되, 제가 원하는 구조로 변형하는 걸 클로드 코드에 맡겼습니다. Tailwind + shadcn/ui로 스타일링 스택을 교체하고, 라우팅 구조를 정리하는 것까지.

   Sanity 때는 이런 작업에 몇 주가 걸렸는데, 클로드 코드랑은 몇 시간이면 됐어요.

2. 노션 블록 렌더링

   노션 API가 돌려주는 블록 데이터는 JSON이라 직접 렌더러를 만들어야 해요. 텍스트, 헤딩, 리스트, 코드 블록, 이미지, 콜아웃 등등 블록 타입마다 컴포넌트를 만드는 작업인데, 이런 반복적인 구현은 클로드 코드가 진짜 빠릅니다.

삽질한 부분

1. Notion API 이미지 만료

노션 API로 블로그 만들 때 가장 짜증나는 문제가 이미지 만료입니다. 노션이 호스팅하는 이미지 URL에는 X-Amz-Expires 같은 쿼리 파라미터가 붙어있고, 약 1시간 후 링크가 죽어요.

처음엔 ISR revalidate 주기를 짧게 가져가는 걸 생각했는데, 빌드 시점에 이미지를 로컬로 캐싱하는 게 더 깔끔하다고 판단했습니다.

// URL에서 만료 정보가 담긴 쿼리 파라미터 제외하고 해싱
const urlObj = new URL(url);
const baseUrl = `${urlObj.origin}${urlObj.pathname}`;
return crypto.createHash('md5').update(baseUrl).digest('hex');

핵심은 URL 전체가 아니라 쿼리 파라미터를 뺀 base URL로 해시를 만드는 거예요. 같은 이미지인데 만료 시간만 다른 URL이 들어와도 동일한 해시가 나오니까, 이미 캐싱된 이미지가 있으면 다시 다운로드하지 않습니다.

빌드할 때 이미지를 public/cached-images/에 저장하고, 프론트에서는 /cached-images/{hash}.jpg 경로로 접근해요. Vercel에 배포하면 이 이미지들이 CDN에 올라가서 만료 걱정 없이 쓸 수 있습니다.

2. 북마크 카드 OG 데이터 자동 fetch

노션에서 URL을 북마크로 추가하면 예쁜 카드로 보이잖아요. 근데 API로 가져오면 그냥 URL 텍스트만 옵니다. OG 메타데이터(제목, 설명, 썸네일)는 안 줘요.

그래서 notion-to-md 라이브러리의 커스텀 트랜스포머를 만들었습니다. 북마크 블록을 만나면 Microlink API로 해당 URL의 OG 데이터를 가져와서 리치 카드로 렌더링해요.

n2m.setCustomTransformer("bookmark", async (block: any) => {
  const url = block.bookmark?.url || "";
  
  // Microlink로 OG 메타데이터 fetch
  const res = await fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`);
  const data = await res.json();
  
  // 썸네일도 만료 방지를 위해 캐싱
  const cachedImage = data.data.image?.url 
    ? await cacheImage(data.data.image.url) 
    : '';
    
  return `🔗BOOKMARK${JSON.stringify({ url, title, description, image, domain })}`;
});

Microlink API는 무료 티어로도 충분하고, 가져온 썸네일 이미지도 위에서 만든 캐싱 시스템을 재활용해서 저장합니다. 노션에서 링크 하나 붙여넣기만 하면 블로그에는 카드 형태로 나와요.

3. 비용 비교

Framer로 커스텀 도메인 붙이려면 월 $5(연 $60). Webflow는 월 $14(연 $168). 둘 다 CMS 기능 쓰려면 더 올라갑니다.

지금 스택:

• Vercel: 무료 (Hobby 플랜)
• 노션: 이미 쓰고 있던 거라 추가 비용 0
• 도메인: 연 ~$12 (이건 어디서든 동일)

연간 절약: $48~$156

솔직히 돈이 아까워서라기보다, 이미 빌드할 줄 아는데 굳이 노코드 빌더에 종속될 이유가 없다는 판단이었어요. 클로드 코드 덕분에 직접 만드는 허들도 많이 낮아졌고요.

결과

Tudy Club 터디 클럽

AI, 디자인, 개발, 프로덕트 매니지먼트까지. Z세대 PM이 기록하는 성장 일지와 인사이트를 공유합니다.

tudy.club

글 쓰는 과정이 이렇게 바뀌었습니다:

• Before: Sanity 스키마와 싸우기 / 워드프레스 방치
• After: 노션에서 글 쓰기 → Status를 Published로 바꾸기 → 끝

만들면서 느낀 점

네이버 블로그는 데이터 종속, 티스토리도 마찬가지, Framer는 돈 아깝고, 워드프레스는 고등학생 때 세팅해놓고 방치했고, Sanity는 TypeScript 실력만 늘었고. 돌고 돌아 노션 + Next.js + 클로드 코드 조합이 저한테는 정답이었어요.

핵심은 글 쓰는 허들을 최소화하는 것. 세팅이 아무리 멋져도 글을 안 쓰면 의미가 없으니까요. 노션이라는 이미 익숙한 도구에서 글을 쓰고, 나머지는 자동으로 돌아가게 만든 게 이번에 잘한 판단이었던 것 같습니다.

도메인 사놓고 방치하고 계신 분들, 저처럼 여러 플랫폼 전전하신 분들한테 추천합니다. morethan-log 같은 좋은 출발점도 있고, 클로드 코드 붙이면 주말 하루면 충분히 만들 수 있어요.