AppHub와 Quartz 블로그 통합 전략

Quartz 블로그 + AppHub 통합

기존 Quartz로 운영 중인 Obsidian 블로그를 AppHub의 첫 번째 프로젝트로 통합한다. Obsidian의 핵심 기능들(위키링크, 백링크, 그래프 뷰)을 유지하면서, AppHub의 통합 UI/UX와 RAG 챗봇을 결합하여 살아있는 지식 베이스를 구축한다.

프로젝트 배경

현재 상황

Quartz 블로그 (syshin0116.github.io)

Obsidian vault를 웹으로 퍼블리싱
위키링크 [[]], 백링크, 그래프 뷰 등 Obsidian 기능 완벽 지원
SPA 라우팅, Popover 미리보기, 전체 텍스트 검색
GitHub Pages로 배포

AppHub의 첫 번째 프로젝트: 블로그 RAG 시스템

내 블로그 포스트들을 RAG로 검색 가능하게
LangGraph + pgvector 기반 AI 챗봇
“이 개발자가 어떤 기술을 다뤘나요?” 같은 질문에 답변

핵심 과제

어떻게 통합할 것인가?

Quartz의 강력한 Obsidian 기능들을 포기하지 않으면서, AppHub의 통합된 경험을 제공할 수 있을까?

Quartz를 선택한 이유 (유지해야 할 가치)

1. Obsidian 기능의 완벽한 웹 구현

기능	Obsidian	Quartz	일반 블로그
위키링크 `[[]]`	✅	✅	❌
양방향 백링크	✅	✅	❌
그래프 뷰	✅	✅ (D3.js)	❌
태그 시스템	✅	✅	제한적
Callout/Admonition	✅	✅	❌
Popover 미리보기	❌	✅	❌

2. 개발자 친화적 워크플로우

Obsidian에서 작성 → Git Push → 자동 배포

별도 CMS 불필요
Markdown으로 모든 것 관리
Git 기반 버전 관리

3. 강력한 플러그인 시스템

Quartz의 핵심 플러그인들:

ObsidianFlavoredMarkdown: Obsidian 문법 완벽 지원
CrawlLinks: 위키링크 자동 변환
Graph: D3.js 기반 관계도 시각화
Latex: 수식 렌더링 (KaTeX)
SyntaxHighlighting: 코드 하이라이팅

블로그 포스트 지속 추가 시나리오

현재 워크플로우는 신성불가침

Quartz를 선택한 핵심 이유: Obsidian에서 작성 → Git Push → 자동 배포 이 워크플로우는 절대 복잡해지면 안 됨

각 옵션별 새 포스트 추가 프로세스

단계	옵션 1 (서브도메인)	옵션 2 (완전 마이그레이션)	옵션 3 (하이브리드)
1. 작성	Obsidian	Obsidian	Obsidian
2. 배포	Git Push → Quartz 자동 빌드 ✅	Git Push → Next.js 전체 빌드 ⚠️	Git Push → Webhook 트리거 ✅
3. 웹 반영	즉시 (Quartz)	ISR/SSG 재빌드	ISR 캐시 무효화 (즉시)
4. RAG 업데이트	GitHub Actions 별도 트리거	빌드 프로세스에 포함	Webhook → 증분 인덱싱
5. 백링크 업데이트	Quartz 자동	전체 재계산 필요	증분 업데이트
총 소요시간	~2분	~5-10분 (전체 빌드)	~1분 (증분)

자동화 파이프라인 필요사항

옵션 1: 서브도메인 분리

자동화 특징:

✅ 가장 단순 - Quartz 기존 파이프라인 유지
🤔 RAG와 웹사이트가 분리되어 별도 관리
GitHub Actions로 RAG만 별도 트리거

옵션 2: 완전 마이그레이션

자동화 특징:

⚠️ Next.js 전체 재빌드 필요
⚠️ 포스트 개수 증가 시 빌드 시간 급증
모든 것이 하나의 빌드 프로세스에 통합

옵션 3: 하이브리드 (추천)

자동화 특징:

✅ 변경된 파일만 감지하여 처리 (GitHub Actions)
✅ Next.js ISR 캐시 무효화로 즉시 반영
✅ RAG 증분 인덱싱 (변경/추가된 포스트만)
✅ 백링크 인덱스 증분 업데이트
✅ 확장성 우수 (수천 개 포스트도 문제없음)

통합 전략 비교

옵션 1: 서브도메인 분리 (가장 간단)

https://apphub.com          → Next.js AppHub 메인
https://blog.apphub.com     → Quartz 블로그 (독립)

구조:

AppHub (Next.js)
├── 메인 대시보드
├── RAG 챗봇 → Quartz 콘텐츠 인덱싱
└── 블로그 링크 → blog.apphub.com (Quartz)

Quartz (별도 배포)
└── 기존 Quartz 그대로 유지

평가 기준	점수	설명
구현 난이도	⭐⭐⭐⭐⭐	매우 쉬움 - 기존 Quartz 그대로
Quartz 기능 유지	⭐⭐⭐⭐⭐	100% 유지
UI/UX 통합	⭐	분리된 디자인
포스트 추가 편의성	⭐⭐⭐⭐⭐	Git Push만 하면 됨
RAG 업데이트	⭐⭐⭐	별도 트리거 필요
확장성	⭐⭐⭐⭐	각자 독립적 확장
개발 기간	1-2주	빠른 구현

종합 평가: 빠른 MVP에는 좋지만, “통합 플랫폼”이라는 AppHub의 핵심 가치와 맞지 않음

옵션 2: 완전 마이그레이션 (가장 통합적)

AppHub (Next.js)
└── /blog
    └── Quartz 기능을 Next.js로 재구현

구조:

// Next.js로 Quartz 기능 재구현
app/
├── blog/
│   ├── [slug]/
│   │   └── page.tsx          // MDX 렌더링
│   ├── graph/
│   │   └── page.tsx          // D3.js React 컴포넌트
│   └── components/
│       ├── Backlinks.tsx     // 백링크 컴포넌트
│       ├── WikiLink.tsx      // 위키링크 파서
│       └── GraphView.tsx     // 그래프 시각화
└── api/
    └── search/
        └── route.ts          // 검색 API

평가 기준	점수	설명
구현 난이도	⭐	매우 어려움 - 모든 것 재구현
Quartz 기능 유지	⭐⭐	수동 재구현 필요
UI/UX 통합	⭐⭐⭐⭐⭐	완벽한 통합
포스트 추가 편의성	⭐⭐	전체 빌드 필요 (느림)
RAG 업데이트	⭐⭐⭐⭐	빌드 프로세스에 통합
확장성	⭐⭐	포스트 증가 시 빌드 시간↑
개발 기간	2-3개월	매우 긴 개발

종합 평가: 이상적이지만 개발 비용이 너무 높음. “빠른 MVP 검증”과 맞지 않음

옵션 3: 하이브리드 통합 ⭐ 최종 선택

AppHub (Next.js)
├── /blog → Next.js로 렌더링 (UI 통합)
│   ├── 콘텐츠: Quartz content/ 공유
│   ├── 파싱: Quartz 플러그인 재사용
│   └── 고급 기능: Quartz 임베드
└── /chat → RAG 챗봇

아키텍처:

┌─────────────────────────────────────────────┐
│           AppHub (Next.js 15)               │
├─────────────────────────────────────────────┤
│  /blog                                      │
│  ├─ SSG: Markdown → HTML                   │
│  │  └─ Quartz 플러그인 사용 ✓              │
│  ├─ UI: ShadCN (통일된 디자인)             │
│  └─ 그래프 뷰: Quartz 임베드               │
│                                             │
│  /chat (RAG)                                │
│  ├─ LangGraph + pgvector                   │
│  └─ 인덱싱: Quartz 콘텐츠                  │
└─────────────────────────────────────────────┘
         ↓ 콘텐츠 소스
┌─────────────────────────────────────────────┐
│     content/ (Obsidian Vault)               │
│     - 단일 소스, 양쪽에서 공유              │
└─────────────────────────────────────────────┘

평가 기준	점수	설명
구현 난이도	⭐⭐⭐	중간 - Quartz 플러그인 재사용
Quartz 기능 유지	⭐⭐⭐⭐	플러그인 활용으로 대부분 유지
UI/UX 통합	⭐⭐⭐⭐	ShadCN으로 통일 가능
포스트 추가 편의성	⭐⭐⭐⭐⭐	증분 업데이트 (빠름)
RAG 업데이트	⭐⭐⭐⭐⭐	증분 인덱싱 (효율적)
확장성	⭐⭐⭐⭐⭐	수천 개 포스트도 문제없음
개발 기간	3-4주	합리적

종합 평가: ⭐ 최고의 균형점 - Quartz 장점 유지 + AppHub 통합 + 확장성

서브도메인 분리 + RAG 자동 인덱싱 전략

아키텍처 개요

┌─────────────────────────────────────────────┐
│         https://apphub.com                  │
│         (Next.js AppHub 메인)               │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │  AI RAG 챗봇                        │   │
│  │  - 블로그 포스트 검색               │   │
│  │  - "이 개발자 뭐 다뤄봤나요?"      │   │
│  │  - 관련 포스트 링크 제공           │   │
│  └─────────────────────────────────────┘   │
│           ↓ 검색                            │
│  ┌─────────────────────────────────────┐   │
│  │  pgvector (Vector Store)            │   │
│  │  - 블로그 포스트 임베딩             │   │
│  └─────────────────────────────────────┘   │
└─────────────────────────────────────────────┘
                    ↓ 링크
┌─────────────────────────────────────────────┐
│      https://blog.apphub.com                │
│      (Quartz - 기존 그대로)                 │
│                                             │
│  ✅ Obsidian 기능 100% 유지                │
│  ✅ 위키링크, 백링크, 그래프 뷰            │
│  ✅ Git Push → 즉시 배포                   │
└─────────────────────────────────────────────┘
                    ↑
┌─────────────────────────────────────────────┐
│         content/ (Obsidian Vault)           │
│         - Git Repository                    │
│         - 단일 소스                         │
└─────────────────────────────────────────────┘
         ↓ Push 시 트리거
┌─────────────────────────────────────────────┐
│      GitHub Actions                         │
│      1. Quartz 자동 빌드/배포              │
│      2. RAG 증분 인덱싱 ⭐                 │
└─────────────────────────────────────────────┘

핵심 컴포넌트

1. Quartz 블로그 (blog.apphub.com)

기존 Quartz 설정 그대로 유지
GitHub Pages 또는 Vercel로 배포
변경 사항 없음 (안정성 최우선)

2. AppHub 메인 (apphub.com)

Next.js 15 + ShadCN
RAG 챗봇 UI
블로그 링크 제공: “내 블로그 보기 → blog.apphub.com”

3. RAG 자동 인덱싱 (GitHub Actions)

content/ 변경 감지
새/수정된 포스트만 pgvector에 업데이트
LangGraph Python 스크립트 실행

4. Vector Store (pgvector)

Railway에서 PostgreSQL + pgvector 호스팅
블로그 포스트 임베딩 저장
메타데이터: 제목, 날짜, 태그, URL

기술 스택 정리

Frontend (Next.js)

Framework: Next.js 15
UI: ShadCN/UI + Tailwind CSS
Markdown: Quartz 플러그인 재사용
- ObsidianFlavoredMarkdown
- WikiLinkParser
- SyntaxHighlighting
Graph: D3.js (Quartz 코드 참고)

Backend (LangGraph)

AI Framework: LangGraph Python
Vector Store: pgvector
Embeddings: OpenAI text-embedding-3
LLM: GPT-4

콘텐츠

소스: Obsidian vault (단일 소스)
포맷: Markdown + Frontmatter
버전 관리: Git

옵션별 종합 비교표

항목	서브도메인 분리 ⭐	완전 마이그레이션	하이브리드
구현 난이도	매우 쉬움	매우 어려움	중간
개발 기간	1-2주	2-3개월	3-4주
Obsidian 기능	100% 유지	수동 재구현	플러그인 재사용
UI 통일성	낮음 (허용 가능)	완벽	높음
포스트 추가	Git Push (즉시)	Git Push (느린 빌드)	Git Push (증분 업데이트)
RAG 업데이트	자동화 가능 ✅	빌드 통합	자동 증분
확장성 (1000+ 포스트)	우수	나쁨 (빌드↑)	우수
유지보수	단순 (2개 시스템)	복잡	적정
총점	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐

최종 선택: 옵션 1 (서브도메인 분리) + RAG 자동 인덱싱

빠른 구현: 1-2주면 MVP 완성 ✅

Quartz 기능 100% 유지: 검증된 안정성 ✅

단순한 유지보수: 각자 독립적 관리 ✅

RAG 자동화: GitHub Actions로 벡터스토어 자동 업데이트 ✅

UI 통일은 차후: 블로그는 Quartz 디자인, AppHub는 ShadCN (각자의 정체성 유지)

왜 서브도메인 분리인가

완벽한 통합보다 빠른 검증이 중요하다. Quartz는 이미 잘 작동하고, RAG 챗봇이 진짜 핵심 가치다. UI 통일은 나중 문제다.

MVP로 시작해서 필요하면 나중에 통합하면 된다. 블로그만 별도 브랜딩도 괜찮다.

RAG 자동 인덱싱 구현 계획

GitHub Actions 워크플로우

트리거 조건:

content/**/*.md 파일 변경 시
Push 또는 PR merge 시

자동화 흐름:

변경 파일 감지: 어떤 포스트가 추가/수정되었는지
Quartz 빌드: 기존 프로세스 (blog.apphub.com 업데이트)
RAG 인덱싱: 변경된 파일만 pgvector에 추가/업데이트
알림: 완료 상태 Slack/Discord 전송 (선택)

증분 인덱싱

전체 재인덱싱하면 100개 포스트에 1시간 걸리고 비용도 많이 든다.

변경된 파일만 처리하면 1-2분 만에 끝나고 비용도 거의 없다.

메타데이터 설계

각 청크에 이런 정보 저장:

파일 경로, 제목, 날짜, 태그
블로그 URL (답변에 링크 포함용)
청크 번호 (같은 글 내 위치)

이걸로 날짜별 필터링도 되고, 출처 링크도 제공할 수 있다.

구현 우선순위

Week 1: 기본 인프라

Quartz 서브도메인 설정: blog.apphub.com
AppHub Next.js 기본 구조: 랜딩 페이지 + 챗봇 UI
pgvector 설정: Railway에서 PostgreSQL + pgvector

Week 2: RAG 시스템

초기 인덱싱: 전체 블로그 포스트 벡터화
RAG 챗봇 구현: LangGraph 기본 에이전트
GitHub Actions: 증분 인덱싱 자동화

Week 3-4: 개선 및 배포

UI/UX 다듬기: 챗봇 인터페이스 개선
답변 품질 향상: 프롬프트 엔지니어링, 소스 인용
프로덕션 배포: Vercel + Railway
모니터링: 사용량 추적, 에러 로깅

실제 사용 시나리오

사용자가 포트폴리오 방문했을 때

AppHub 메인 (apphub.com)

사용자: "이 사람 LangGraph 써봤나?"

챗봇: "네, LangGraph 관련 포스트 3개 있습니다:

      • LangGraph 기본 개념 → blog.apphub.com/ai/langgraph-tutorial
      • Multi-Agent 구현 → blog.apphub.com/ai/multi-agent
      • AppHub 기술 스택 → blog.apphub.com/projects/tech-stack"

사용자: [링크 클릭] → Quartz 블로그로 이동

Quartz 블로그 (blog.apphub.com)

위키링크로 관련 포스트 탐색
백링크에서 참조한 다른 글 확인
그래프 뷰로 전체 지식 구조 파악

새 포스트 작성할 때

1. Obsidian에서 작성
2. Git Push
3. 자동 처리 (1-2분)
   - Quartz 빌드 완료
   - RAG 인덱싱 완료
4. 끝

추가 작업 없이 모든 것이 자동화됨.

이게 왜 좋은가

각자 잘하는 것에 집중:

Quartz → Obsidian 기능 완벽 지원
AppHub → AI로 블로그 지식 활용

사용자 경로:

AppHub 먼저 → 챗봇 질문 → 블로그로 이동
블로그 먼저 → 읽다가 → 챗봇으로 더 검색

양쪽 다 자연스럽게 연결됨.

일반 포트폴리오 vs AppHub

일반적인 경우: 블로그 글 읽고 끝, 원하는 글 찾기 어려움

AppHub: AI 챗봇이 찾아줌, 위키링크로 연결됨, 대화하면서 탐색

결과적으로 1-2주 만에 빠르게 만들 수 있고, 안정적이고, 차별화되고, 나중에 확장도 쉽다.

빠른 시작이 핵심

완벽한 통합보다 동작하는 MVP가 먼저다. 서브도메인 전략은 가장 빠르게 가치를 검증할 수 있는 방법이다.

Syshin

Explorer

AppHub와 Quartz 블로그 통합 전략

프로젝트 배경

현재 상황

핵심 과제

Quartz를 선택한 이유 (유지해야 할 가치)

1. Obsidian 기능의 완벽한 웹 구현

2. 개발자 친화적 워크플로우

3. 강력한 플러그인 시스템

블로그 포스트 지속 추가 시나리오

각 옵션별 새 포스트 추가 프로세스

자동화 파이프라인 필요사항

옵션 1: 서브도메인 분리

옵션 2: 완전 마이그레이션

옵션 3: 하이브리드 (추천)

통합 전략 비교

옵션 1: 서브도메인 분리 (가장 간단)

옵션 2: 완전 마이그레이션 (가장 통합적)

옵션 3: 하이브리드 통합 ⭐ 최종 선택

서브도메인 분리 + RAG 자동 인덱싱 전략

아키텍처 개요

핵심 컴포넌트

기술 스택 정리

Frontend (Next.js)

Backend (LangGraph)

콘텐츠

옵션별 종합 비교표

왜 서브도메인 분리인가

RAG 자동 인덱싱 구현 계획

GitHub Actions 워크플로우

증분 인덱싱

메타데이터 설계

구현 우선순위

Week 1: 기본 인프라

Week 2: RAG 시스템

Week 3-4: 개선 및 배포

실제 사용 시나리오

사용자가 포트폴리오 방문했을 때

새 포스트 작성할 때

이게 왜 좋은가

관련 문서

Graph View

Table of Contents