노션 블로그 리뉴얼 - 새 레포로 이전, 중복 Canonical ID 문제 해결

최근 블로그를 리뉴얼한 과정을 공유한다. 기존에 사용하던 Next.js Notion Starter Kit 과의 구조적 차이로 인해 직접 커스텀한 내용에 업데이트 적용이 어려워졌다.

새로운 스타터 킷 탐색과 테스트

처음에는 Next.js Notion Blog Starter라는 새로운 노션 블로그 스타터를 테스트했다. 이 스타터 킷은 구독 기능과 Tailwind CSS 지원 등 매력적인 기능을 포함하고 있다. 하지만 이 프로젝트는 하나의 DB에서 태그 기반으로만 콘텐츠를 분류하는 구조를 사용해, 내가 사용하는 노션의 메인 카테고리 구조와 맞지 않았다.

메인 카테고리를 유지하려면 추가적인 작업이 필요했고, 태그로만 분류하는 방식은 기존 워크플로우와 충돌이 있었다. 결과적으로 이 스타터 킷을 사용하는 대신 기존 스타터 킷의 최신 버전을 다시 받아 새롭게 세팅하고, 필요한 수정 사항을 다시 수작업으로 반영하기로 했다. 브랜치 통채로 바꿀까 생각도 했지만 기존 레포는 그대로 유지하는 것이 좋을듯 했다.

Private 레포로 Fork

공개 레포가 아직 부담스럽기에 원본 레포를 Private으로 포크하는 작업을 먼저 진행했다. 직접 포크하는 방법으로는 프라이빗 레포로 생성이 불가능하다.

깃허브에 프라이빗 레포 생성


gh repo create <org>/<repo-name> --private

*Fork하고싶은 Public 레포를 bare로 클론한 후 Private 레포로 푸시


git clone --bare <public-repo-url>
cd <cloned-public-repo>
git push --mirror <private-repo-url>

이후 클론한 bare 레포는 삭제

주요 커스터마이징 작업

기존 블로그에 추가했던 커스텀 기능 중 일부는 유지했고, 일부는 제거하거나 대체했다.

유지한 기능

다크/라이트 모드 버튼 이동 접근성 향상을 위해 footer에 있던 다크/라이트 모드 전환 버튼을 aside로 이동했다.

소셜 링크 추가aside에 SNS 링크를 추가해 네비게이션 편의성을 개선했다.

폰트 변경 버튼 가독성이 좋은 폰트로 변경할 수 있도록 aside에 버튼을 추가 했다.

스타일 색상, 폰트, 레이아웃 등 전체적인 Navy 테마를 적용했다.

SimpleTable 설정

노션 property로 table의 key 위치를 설정할 수 있게 했다. (first-column과 first-row)

변경한 기능

Custom Canonical ID 설정

기존: SEO 강화를 위해 노션 enTItle 속성을 기반으로 slug를 설정할수 있게하는 custom-canonical-page-id를 적용했다.
변경: 중복 페이지 문제 해결을 위해 노션 UUID를 추가했다.

제거한 기능

노션 속성 기반 폰트 변경 Vercel 성능 문제를 고려해 이 기능은 더 이상 필요하지 않다고 판단, 제거했다.

Duplicate Canonical Page ID 문제 해결

페이지 제목이 없는 노션 템플릿 페이지로 인해 중복 Canonical ID 문제가 발생했다. 4개 페이지 정도가 있었다. 이를 해결하기 위해 중복되는 ID 뒤에 숫자를 붙이고자 했지만, 일관되게 유지하기 위해서는 서버에 데이터베이스가 필요한듯 했다. supabase를 무료티어로 가능할듯 싶지만 추후를 위해서라도 고유성을 위해 UUID를 도입했다.

하지만 UUID인해 URL이 복잡해지기때문에 SEO에 좋은 방법은 아닌듯하다. 기존에는 노션 속성을 이용해 페이지별로 중복되지 않게 직접 slug를 붙이는 기능을 넣었었는데, 조금 번 거롭기도 했고, 그럼에도 중복되는 페이지가 있다고하니 추후 노션 공식 API를 이용해서 숫자를 붙이는 기능을 추가해야하나 싶다.

리다이렉트 설정

Vercel의 리다이렉트 설정을 통해 SEO 손실 없이 URL 변경을 관리했다. 기존 URL에서 새로운 URL로의 리다이렉트를 관리하기 위해 vercel.json 파일을 이용할 수 있었고 모든 페이지를 불러와 리다이렉트 목록화, vercel.json 파일을 생성하는 스크립트를 작성했다. (generate-redirects.ts와 generate-vercel-redirects.ts)

기존 코드를 이용하기위해 타입스크립트로 작성을 했는데, 실행을 위해 ts-node 설치가 필요했다.


yarn add ts-node

package.json의 스크립트에 명령어를 추가하고,


"scripts": {
  "generate-vercel-redirects": "NODE_OPTIONS='--loader ts-node/esm' node --experimental-specifier-resolution=node scripts/generate-vercel-redirects.ts"
}


yarn generate-vercel-redirects

tsconfig.josn에서 "moduleResolution": "Node" 로변경하여 아래 오류를 해결했다.

TypeError: Unknown file extension ".ts" for /Users/ujinyoung/Documents/GitHub/notion-blog2/scripts/generate-vercel-redirects.ts

이 과정에서 가능한 모든 경우의 리다이렉트를 설정했고, 이후 불필요한 항목은 삭제하거나 필요한 항목을 추가할 예정이다.

기타 문제와 실수

Node.js 오류

맥북 업데이트 후 node 명령어가 작동하지 않는 문제가 발생했다. 이 문제는 nvm use 20 명령어로 임시 해결했다.

폰트 적용 문제

폰트를 적용하는 과정에서 빠진 부분이 있었다. 제대로 적용하기 위해 font/style.css 외에도 _document.tsx 헤더 설정을 추가했다. font파일을 직접 추가할 필요는 없으나 예비용으로 추가해두었다. 브라우저에서 발생한 preload 경고는 아직 해결하지 못했다.

공식 API와 통합

처음에 노션 공식 API를 활용을 시도했으나, 현재는 불필요해 사용하지 않고 있다. 노션 공식 API를 사용할 때는 페이지 connected 적용을 꼭 확인해야한다.

마무리

블로그 리뉴얼은 계속 진행중이며, 앞으로 블로그 성능과 유지 관리를 위해 점차적으로 관심을 기울일 예정이다.