Nuartz - Obsidian → Next.js 오픈소스 라이브러리

Obsidian 볼트를 Next.js 웹사이트로 퍼블리싱하는 headless 라이브러리

약 2주

2026.03 ~ 진행 중

1인 개발 / npm 패키지 배포

개인 오픈소스 프로젝트

Obsidian 볼트를 Next.js 웹사이트로 서빙하기 위한 headless 데이터 레이어 라이브러리. Quartz의 한계(커스텀 UI 불가, AI 연동 어려움)를 해결하기 위해 직접 개발. npm 패키지로 배포하여 누구나 자신의 Next.js 앱에 Obsidian 기능을 통합 가능.

기술 스택

core

TypeScript

unified (remark/rehype)

features

remark-math

rehype-katex

rehype-pretty-code

FlexSearch

D3.js

webapp

Next.js 15

Tailwind CSS v4

shadcn/ui

next-themes

build

Bun

tsc

deployment

npm registry

Vercel

GitHub Pages

주요 성과

✓npm 패키지 배포 (nuartz@0.1.7)
✓Quartz 핵심 기능을 Next.js 생태계로 포팅
✓CJK(한국어/일본어/중국어) 검색 지원
✓Vercel + GitHub Pages 양쪽 배포 지원
✓개인 블로그로 실사용 중 (syshin0116.github.io)

주요 기능

도전 과제 및 극복

Quartz 플러그인 시스템 재해석

Quartz의 Preact 기반 정적 사이트 생성기를 Next.js의 unified 파이프라인으로 재설계. remark/rehype 플러그인으로 위키링크, 콜아웃 등을 직접 구현

CJK 검색 최적화

FlexSearch의 기본 토크나이저가 한국어를 제대로 분리하지 못하는 문제. CJK 전용 토크나이저 설정으로 해결

CSS 변수 호환성

Tailwind v4의 oklch 색상 체계와 D3.js SVG 렌더링 간 호환 문제. hsl() 래퍼 제거하고 CSS 변수 직접 참조로 해결

배운 점 및 성장

✓unified 생태계 깊이 이해: remark/rehype 플러그인 직접 작성
✓npm 패키지 배포 및 버전 관리 실무 경험
✓모노레포 구조 설계: packages/nuartz (라이브러리) + apps/web (참고 앱)
✓headless 라이브러리 설계 철학: UI와 데이터 레이어의 분리
✓오픈소스 프로젝트 운영: README, CHANGELOG, 문서화의 중요성