Google Drive를 CMS로 만들어버린 이야기, Drive MDX CMS

들어가며: 블로그 글 하나 쓰려고 했을 뿐인데

블로그를 운영하다 보면 이런 생각이 듭니다.
"글만 쓰고 싶은데, 왜 이렇게 복잡해야 하지?"
Notion으로 쓰면 내보내기가 번거롭고, GitHub에 직접 커밋하면 미리보기가 안 되고, WordPress는 무겁고, Contentful 같은 Headless CMS는 무료 플랜 제한이 있습니다.
그러다 문득 깨달았습니다.

"나한테 이미 무료 클라우드 스토리지가 있잖아."

Google Drive. 15GB 무료. 어디서든 접근 가능. 버전 관리까지 해줌.
이걸 CMS로 쓰면 되는 거 아닌가?
그래서 직접 만들었습니다. Drive MDX CMS.

1. 왜 이 프로젝트를 만들었나

1.1. 기존 솔루션의 한계

블로그 콘텐츠 관리에 있어서 선택지는 많습니다. 하지만 각각 아쉬운 점이 있었습니다.

첫째, "Git 기반 CMS는 실시간 미리보기가 없어요"
MDX 파일을 GitHub에 푸시하고, Netlify 빌드하고, 그제서야 결과를 볼 수 있습니다. 오타 하나 고치려면 커밋-푸시-빌드-확인의 사이클을 반복해야 합니다.

둘째, "Headless CMS는 무료 플랜 제한이 빡빡해요"
Contentful, Sanity, Strapi... 좋은 서비스들이지만 무료로 쓰기엔 한계가 있습니다. 콘텐츠 수 제한, API 호출 제한, 팀원 수 제한.

셋째, "Notion은 내보내기가 번거로워요"
Notion에서 글을 쓰면 편하지만, 블로그에 올리려면 마크다운으로 내보내고, 이미지 경로 수정하고, 프론트매터 추가하고... 매번 이 과정이 귀찮습니다.

넷째, "로컬 에디터는 어디서든 쓸 수가 없어요"
VSCode로 MDX 파일을 편집하면 좋지만, 회사 컴퓨터에서, 카페에서, 스마트폰에서 글을 이어서 쓰기 어렵습니다.

1.2. 내가 원했던 것

정리하면 이렇습니다:

• 웹 브라우저만 있으면 어디서든 글을 쓸 수 있을 것
• 실시간으로 MDX 미리보기가 될 것
• 데이터베이스 비용이 들지 않을 것
• 내 데이터를 내가 완전히 소유할 것
• VSCode 같은 편한 에디터 경험을 제공할 것

Google Drive + Monaco Editor + MDX 실시간 렌더링
이 조합이면 다 해결됩니다.

2. Drive MDX CMS 핵심 기능

2.1. Google Drive 파일 탐색기

2.1.1. 익숙한 폴더 구조 그대로

Drive MDX CMS는 Google Drive의 폴더 구조를 그대로 사용합니다.

별도의 데이터베이스 스키마를 배울 필요가 없습니다. 그냥 평소처럼 폴더 만들고 파일 정리하면 됩니다.

2.1.2. 실시간 동기화

파일을 수정하면 Google Drive에 바로 저장됩니다. 다른 기기에서 Drive 앱을 열면 최신 파일이 이미 동기화되어 있습니다.
버전 관리도 Google이 알아서 해줍니다. 실수로 내용을 날려도 Drive의 "버전 기록"에서 복구할 수 있습니다.

2.1.3. 컨텍스트 메뉴로 빠른 작업

파일 트리에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 뜹니다.

• 새 파일 만들기: 자동으로 프론트매터 템플릿이 포함된 MDX 파일 생성
• 새 폴더 만들기: 하위 폴더 즉시 생성
• 삭제하기: 확인 후 파일/폴더 삭제

특히 새 파일을 만들 때 오늘 날짜가 자동으로 입력됩니다(개인 블로그를 위한 용도):

매번 날짜 입력하느라 시간 낭비할 필요가 없습니다.

2.2. Monaco Editor 통합

2.2.1. VSCode와 동일한 에디터

Monaco Editor는 VSCode의 핵심 편집기입니다. 같은 코드베이스를 사용하기 때문에 VSCode에서 익숙했던 모든 기능이 그대로 동작합니다.

• 구문 강조 (Syntax Highlighting)
• 자동 완성 (Auto Complete)
• 다중 커서 (Multi-cursor)
• 코드 접기 (Code Folding)
• 검색 및 바꾸기 (Find & Replace)

2.2.2. 테마 선택

세 가지 테마를 제공합니다:

• Dark (기본): 눈이 편한 다크 모드
• Light: 밝은 환경에서 사용
• High Contrast: 접근성을 위한 고대비 모드

설정은 브라우저 로컬 스토리지에 저장되어, 다음에 접속해도 선택했던 테마가 유지됩니다.

2.2.3. 폰트 크기 조절

10px부터 24px까지 폰트 크기를 자유롭게 조절할 수 있습니다. 이것도 로컬 스토리지에 저장됩니다.

2.2.4. 키보드 단축키

Cmd + S (Mac) 또는 Ctrl + S (Windows)로 즉시 저장할 수 있습니다.

저장하면 Google Drive에 바로 반영되고, 토스트 알림으로 "저장되었습니다"가 표시됩니다.

2.3. 실시간 MDX 미리보기

2.3.1. 500ms 디바운스 실시간 렌더링

에디터에서 글을 수정하면 0.5초 후에 자동으로 미리보기가 업데이트됩니다.
키 입력마다 API를 호출하면 서버에 부담이 되므로, 디바운스를 적용했습니다. 타이핑을 멈추면 0.5초 후 렌더링이 시작됩니다.

2.3.2. 프론트매터 테이블 표시

MDX 파일 상단의 YAML 프론트매터를 파싱해서 테이블 형태로 보여줍니다.

글의 메타데이터가 제대로 입력되었는지 한눈에 확인할 수 있습니다.

2.3.3. 코드 블록 구문 강조

rehype-pretty-code와 Shiki를 사용해서 코드 블록에 구문 강조를 적용합니다. GitHub Dark 테마를 기본으로 사용합니다.

2.3.4. 커스텀 MDX 컴포넌트

기본 마크다운 요소들을 스타일링된 React 컴포넌트로 대체합니다.

• 제목(h1~h6)에 자동으로 앵커 링크 추가
• 이미지에 lazy loading과 둥근 모서리 적용
• 테이블에 가로 스크롤 지원
• 외부 링크는 새 탭에서 열기
• 인용구, 목록 등 기본 요소 스타일링

2.4. 3분할 리사이즈 레이아웃

2.4.1. 드래그로 패널 크기 조절

화면은 세 영역으로 나뉩니다:

각 영역의 경계선을 드래그해서 크기를 조절할 수 있습니다.

• 글 쓰기에 집중할 때: 에디터 영역을 넓게
• 결과물 확인할 때: 미리보기 영역을 넓게
• 파일 탐색할 때: 파일 트리를 넓게

2.4.2. 설정 사이드바

톱니바퀴 아이콘을 클릭하면 설정 패널이 열립니다:

• 테마 선택 (Dark / Light / High Contrast)
• 폰트 크기 조절 (10px ~ 24px)

2.5. 파일 관리 기능

2.5.1. 파일명 변경

현재 열린 파일의 이름 옆 연필 아이콘을 클릭하면 인라인 편집 모드로 전환됩니다.
새 이름을 입력하고 Enter를 누르면 Google Drive에서 파일명이 변경됩니다.

2.5.2. 수정 상태 표시

파일을 수정하면 파일명 옆에 "(수정됨)"이 표시됩니다.
저장하지 않고 다른 파일을 열려고 하면 경고가 표시되어, 실수로 작업물을 날리는 것을 방지합니다.

3. 인증과 보안

3.1. Google OAuth 인증

3.1.1. 안전한 로그인 흐름

NextAuth.js를 사용해서 Google OAuth 2.0 인증을 구현했습니다.

1. 사용자가 "Google로 로그인" 버튼 클릭
2. Google 로그인 페이지로 리다이렉트
3. Google Drive 접근 권한 동의
4. 앱으로 돌아와서 세션 생성

비밀번호를 앱에 저장하지 않습니다. 모든 인증은 Google을 통해 이루어집니다.

3.1.2. 자동 토큰 갱신

Access Token은 1시간 후에 만료됩니다. 그래서 Refresh Token을 사용한 자동 갱신 로직을 구현했습니다.

사용자는 토큰 만료를 신경 쓸 필요가 없습니다. 백그라운드에서 자동으로 처리됩니다.

3.2. API 라우트 보안

3.2.1. 모든 API는 인증 필수

모든 API 라우트는 세션을 검증합니다:

로그인하지 않은 상태에서는 어떤 API도 호출할 수 없습니다.

3.2.2. Zod 스키마 검증

API 요청 데이터는 Zod로 검증합니다:

잘못된 형식의 요청은 서버에 도달하기 전에 차단됩니다.

4. 기술 스택과 아키텍처

4.1. 기술 스택 한눈에 보기

4.2. 프로젝트 구조

4.3. 상태 관리 전략

4.3.1. Zustand로 클라이언트 상태 관리

두 개의 Zustand 스토어를 사용합니다:
EditorStore: 현재 편집 중인 파일 상태

SettingsStore: 사용자 설정 (localStorage에 영구 저장)

4.3.2. TanStack React Query로 서버 상태 관리

Google Drive 데이터는 React Query로 관리합니다:

파일을 생성하거나 삭제하면 해당 폴더의 쿼리가 자동으로 무효화(invalidate)되어 목록이 갱신됩니다.

4.4. Google Drive API 래퍼

google-drive.ts에 11개의 Drive API 함수를 구현했습니다:

모든 함수는 supportsAllDrives: true 옵션을 사용해서 개인 드라이브와 공유 드라이브 모두 지원합니다.

5. 개발 과정에서의 고민들

5.1. MDX 컴파일을 어디서 할 것인가

처음에는 클라이언트에서 MDX를 컴파일하려고 했습니다. 하지만 문제가 있었습니다:

• rehype-pretty-code가 브라우저에서 제대로 동작하지 않음
• 번들 크기가 커짐
• 보안 이슈 (사용자 입력을 클라이언트에서 컴파일)

해결: 서버 API 라우트에서 컴파일

클라이언트는 컴파일된 HTML을 받아서 렌더링만 합니다. 더 안전하고 빠릅니다.

5.2. 토큰 갱신 타이밍

Google Access Token은 1시간 후 만료됩니다. 사용자가 2시간 동안 글을 쓰다가 저장하면... 실패합니다.
해결: NextAuth JWT 콜백에서 선제적 갱신

사용자는 토큰 만료를 전혀 느끼지 못합니다.

5.3. MDX의 style 속성 문제

사용자가 MDX에 인라인 스타일을 넣으면 빌드가 깨지는 문제가 있었습니다:

React에서는 style={{color: 'red'}} 형태여야 하는데, HTML style 문자열은 파싱 에러가 납니다.

해결: 전처리로 style 속성 제거

안전하지 않은 속성을 미리 제거해서 빌드 안정성을 확보했습니다.

5.4. 파일 트리 성능

처음에는 폴더를 열 때마다 하위 폴더까지 전부 불러왔습니다. 파일이 많은 드라이브에서는 초기 로딩이 느렸습니다.
해결: 지연 로딩 (Lazy Loading)

사용자가 폴더를 클릭할 때만 해당 폴더의 내용을 불러옵니다. 초기 로딩이 훨씬 빨라졌습니다.

5.5. 에러 메시지 처리

Google API는 다양한 에러 코드를 반환합니다. 그대로 보여주면 사용자가 이해하기 어렵습니다.
해결: 에러 코드별 친절한 메시지

기술적인 에러를 사람이 이해할 수 있는 문장으로 변환합니다.

6. 사용해보기

6.1. 온보딩 과정

처음 접속하면 온보딩 화면이 나옵니다.

1. Google 로그인: Google 계정으로 로그인
2. 권한 동의: Google Drive 읽기/쓰기 권한 허용
3. 폴더 선택:
   • 기존 폴더 선택, 또는
   • "My-CMS-Folder" 자동 생성

이게 끝입니다. 30초면 시작할 수 있습니다.

6.2. 첫 글 작성

1. 파일 트리에서 마우스 오른쪽 클릭 → "새 파일"
2. 파일 이름 입력 (예: first-post.mdx)
3. 에디터에서 글 작성
4. Cmd + S로 저장
5. 오른쪽 미리보기에서 결과 확인

6.3. 기존 파일 편집

1. 파일 트리에서 .mdx 또는 .md 파일 클릭
2. 에디터에 내용이 로드됨
3. 수정 후 저장

간단합니다.

7. 향후 계획

7.1. 기능 확장

단기:

• 이미지 업로드 지원 (Drive에 이미지 저장)
• 다크/라이트 모드 시스템 테마 연동
• 마크다운 단축키 (Bold, Italic 등)

중기:

• 다중 파일 탭 (여러 파일 동시 편집)
• 검색 기능 (파일 내용 검색)
• Git 연동 (Drive → GitHub 동기화)

장기:

• 협업 기능 (실시간 공동 편집)
• 블로그 퍼블리싱 통합
• 모바일 앱

7.2. 성능 개선

• 에디터 로딩 최적화 (Monaco Editor 번들 분리)
• 오프라인 지원 (Service Worker)
• 캐싱 전략 고도화

8. 마치며

"데이터베이스? 서버 비용? 그런 거 없습니다."

Google Drive라는 무료 인프라 위에서 동작하는 CMS입니다.

• 15GB 무료 저장소
• 어디서든 접근 가능
• 버전 관리 자동
• 데이터 소유권 100% 본인

복잡한 인프라 설정 없이, 클릭 몇 번으로 나만의 콘텐츠 관리 시스템을 가질 수 있습니다.
"내 콘텐츠는 내가 관리한다."
Drive MDX CMS와 함께 글쓰기에만 집중하세요.

부록: 환경 설정 가이드

A. Google Cloud Console 설정

1. Google Cloud Console 접속
2. 새 프로젝트 생성
3. "APIs & Services" → "Enable APIs" → Google Drive API 활성화
4. "Credentials" → "Create Credentials" → OAuth 2.0 Client ID
5. Authorized redirect URIs에 추가:
   • http://localhost:3000/api/auth/callback/google (개발용)
   • https://your-domain.com/api/auth/callback/google (프로덕션)

B. 환경 변수 설정

.env.local 파일 생성:

C. 로컬 실행

이 글이 도움이 되셨다면, 비슷한 고민을 하는 개발자 친구에게 공유해 주세요.

"내 데이터는 내가 소유한다"는 철학에 공감하신다면, 직접 만들어보시는 것도 좋습니다.