[개발 프로젝트 소개] GDocsWiki - 구글 드라이브 기반 위키

안녕하세요! 어제오늘 진행 중인 프로젝트 한번에 릴리즈 하고 있는데요.
그중에 가장 재미있게 진행하고 있는 실험적인 개인 프로젝트를 더 소개해 드리려고 합니다.

이름은 바로 GDocsWiki (WikiDocs)!
요즘 많은 팀들이 협업 툴로 노션(Notion)을 사용하지만, 용량 제한이나 데이터 보안, 혹은 비용 문제로 고민하곤 합니다. 그래서 "이미 전 세계 수많은 기업과 개인이 쓰고 있는 강력한 인프라인 '구글 드라이브(Google Drive)'를 백엔드로 쓰면 어떨까?" 하는 엉뚱하고도 실용적인 아이디어에서 출발한 프로젝트입니다.

별도의 데이터베이스(DB) 없이 오직 Google Drive와 Google Docs만을 저장소로 활용하는 노션 스타일의 협업 위키 서비스입니다.

---

왜 구글 드라이브 기반 위키인가요?

• 인프라 비용 Zero: 비싼 DB 서버나 클라우드 스토리지 비용을 걱정할 필요가 없습니다. 구글 계정의 기본 용량(또는 기업용 워크스페이스 용량)을 그대로 녹여냅니다.
• 보안과 소유권: 내 문서가 서드파티 서비스의 서버에 저장되는 것이 아니라, 내 드라이브 / 우리 팀 드라이브에 고스란히 보관되므로 데이터 주권이 완벽히 보장됩니다.
• 친숙한 협업 환경: 구글 Docs의 강력한 문서 관리 기능과 노션 스타일의 자유로운 위키 UI를 결합했습니다.

---

핵심 주요 기능

단순히 글만 쓰는 에디터가 아닙니다. 현대적인 위키가 가져야 할 트렌디한 기능들을 꽉꽉 채워 넣었습니다.

기능 분류	상세 설명
스마트 저장 시스템	문서는 Google Docs 본문으로, 위키의 전체적인 트리 구조는 _wiki-tree.json 파일로 드라이브에 깔끔하게 자동 저장됩니다.
WYSIWYG 에디터	최신 Tiptap v3를 탑재하여 서식, 표, 코드 블록은 물론이고 Mermaid 다이어그램까지 완벽하게 지원합니다.
실시간 동시 편집	Y.js와 Hocuspocus WebSocket 기술을 활용해, 여러 명이 동시에 접속해도 노션처럼 상대방의 커서와 움직임이 실시간으로 표시됩니다.
생산성 치트키	/ 슬래시 커맨드로 블록을 빠르게 삽입하고, @ 멘션 기능을 통해 페이지 링크나 하위 페이지를 즉시 생성합니다.
마이그레이션 & 공유	노션에서 내보낸 Markdown(.md, .zip) 파일을 통째로 가져올 수 있고, 작성한 위키를 마크다운으로 내보낼 수도 있습니다. 프레젠테이션 모드를 켜면 H1/H2 태그를 기준으로 발표 슬라이드가 자동 생성됩니다!

---

기술 스택 (Tech Stack)

실험적인 프로젝트인 만큼 요즘 개발 트렌드에서 가장 핫하고 강력한 도구들을 아낌없이 사용했습니다. (*제가 한건 아니고 클로드가요)

• Frontend: Next.js 16 (App Router, Turbopack), React 19, Tailwind CSS v4
• Editor: Tiptap v3 & Lowlight (One Dark 구문 강조)
• Collaboration: Y.js CRDT · Hocuspocus WebSocket
• Storage: Google Drive API v3 · Google Docs API v1
• Auth & State: NextAuth v5 (Auth.js), Zustand, TanStack Query v5

---

아키텍처 및 동작 원리

이 프로젝트의 핵심은 "어떻게 웹 에디터의 데이터를 구글 Docs와 실시간으로 싱크할 것인가"였습니다.

[Browser (웹 브라우저)]
  │  Tiptap Editor  ←→  Y.js CRDT (실시간 동기화 상태)
  │       ↕ WebSocket
[Hocuspocus 서버 :1234] ─── (실시간 협업 및 동시 편집 처리)

[Browser] ──── REST API ───► [Next.js API Routes]
                                    │
                          ┌─────────┴─────────┐
                    [Drive API v3]     [Docs API v1]

핵심 저장 흐름 💡
브라우저 에디터에서 사용자가 글을 쓰면, 실시간으로 Y.js를 통해 동시 편집이 이루어집니다. 이후 2초간 입력이 없으면(debounce) 변경된 HTML 상태를 마크다운으로 변환한 뒤, Next.js API를 거쳐 Google Docs API의 batchUpdate를 통해 구글 문서에 최종 반영되는 구조입니다.
반대로 문서를 새로 열 때는 구글 드라이브에서 문서를 읽어와 Y.js 상태를 초기화합니다.

---

마치며 & 앞으로의 계획

현재 로컬 환경에서 구글 OAuth와 연동하여 내 드라이브의 문서를 자유롭게 읽고 쓰는 단계까지 안정적으로 구현을 마친 상태입니다.

구글 Docs API의 레이턴시(반응 속도)를 줄이기 위한 캐싱 전략이나, 마크다운과 구글 문서 간의 1:1 완벽한 인코딩/디코딩 규칙을 고도화하는 등 아직 다듬을 곳이 많지만, DB 없이 구글 드라이브만으로 완벽한 대시보드 위키를 만들 수 있다는 가능성을 확인해서 무척 즐겁게 작업하고 있습니다.

좀 더 다듬어 지면 공개 하도록 하겠습니다. 많은 응원 부탁드립니다.