🏢 Notion 기술 스택 분석

문서, 데이터베이스, 칸반 보드를 하나로 통합한 Notion의 기술 스택을 심층 분석합니다.
"A new tool that blends your everyday work apps into one" - 모든 것을 블록으로 만드는 기술

📊 회사 개요

서비스 규모

• 사용자: 3,000만+ (개인 및 팀)
• 기업 고객: 400만+ 팀
• 월간 블록 생성: 10억+ 개
• 데이터베이스 항목: 5억+ 개
• 일일 API 요청: 1억+ 건

엔지니어링 조직

• 엔지니어: 200명+ (전체 직원 500+)
• 문화: "Augmenting Human Intellect"
• 원격 우선: 글로벌 분산 팀
• 기술 철학: 단순함과 강력함의 균형

기술적 도전과제

1. 블록 기반 에디터: 무한히 중첩 가능한 구조
2. 실시간 협업: 동시 편집과 충돌 해결
3. 유연한 데이터베이스: 스프레드시트 같은 강력함
4. 오프라인 지원: 로컬 우선 아키텍처

🏗️ 아키텍처 Overview

시스템 다이어그램

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Clients │────►│ API │────►│ Database │ │(Web/Desktop)│ │ Gateway │ │ Service │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────▼─────┐ ┌─────▼─────┐ │ │ Real-time │ │PostgreSQL │ │ │ Service │ │ Cluster │ │ └───────────┘ └───────────┘ │ │ │ └────────────────────┤ │ ┌─────▼─────┐ ┌─────▼─────┐ │ Search │ │ Block │ │ Service │ │ Storage │ └───────────┘ └───────────┘ 

핵심 설계 원칙

1. Everything is a Block: 모든 콘텐츠는 블록
2. Local-First: 오프라인 우선 설계
3. CRDT: 충돌 없는 동시 편집
4. Flexible Schema: 동적 데이터베이스 구조
5. Progressive Enhancement: 점진적 기능 향상

기술 진화

• 2013-2015: 초기 프로토타입 (웹 기반)
• 2016-2017: 데스크톱 앱 출시
• 2018-2019: 데이터베이스 기능 추가
• 2020-2021: API 플랫폼 공개
• 2022-2023: AI 통합 (Notion AI)
• 2024-현재: 엔터프라이즈 확장

🧩 기술 스택 상세

Backend 기술

블록 저장 시스템

// Notion의 블록 모델 interface Block { id: string; type: BlockType; properties: Record<string, any>; content?: string[]; children?: string[]; // 자식 블록 ID parent: string; created_time: number; last_edited_time: number; created_by: string; last_edited_by: string; version: number; } type BlockType = | "text" | "heading_1" | "heading_2" | "heading_3" | "bulleted_list_item" | "numbered_list_item" | "toggle" | "to_do" | "quote" | "divider" | "callout" | "image" | "video" | "file" | "pdf" | "bookmark" | "code" | "equation" | "database" | "table_row" | "column_list" | "synced_block" | "template"; // 블록 서비스 export class BlockService { private db: PostgresClient; private cache: RedisClient; private search: ElasticsearchClient; async getBlock(blockId: string, depth: number = 0): Promise<Block> { // 캐시 확인 const cached = await this.cache.get(`block:${blockId}`); if (cached) return JSON.parse(cached); // DB에서 조회 const block = await this.db.query("SELECT * FROM blocks WHERE id = $1", [ blockId, ]); // 자식 블록 재귀적 로드 if (depth > 0 && block.children?.length > 0) { block.childBlocks = await Promise.all( block.children.map((childId) => this.getBlock(childId, depth - 1)), ); } // 캐시 저장 await this.cache.setex(`block:${blockId}`, 300, JSON.stringify(block)); return block; } async updateBlock( blockId: string, updates: Partial<Block>, userId: string, ): Promise<Block> { // 낙관적 잠금 const current = await this.getBlock(blockId); if (updates.version !== current.version) { throw new ConflictError("Version mismatch"); } // 업데이트 적용 const updated = { ...current, ...updates, version: current.version + 1, last_edited_time: Date.now(), last_edited_by: userId, }; // 트랜잭션으로 저장 await this.db.transaction(async (trx) => { // 블록 업데이트 await trx.query( `UPDATE blocks SET properties = $1, content = $2, version = $3, last_edited_time = $4, last_edited_by = $5 WHERE id = $6`, [ updated.properties, updated.content, updated.version, updated.last_edited_time, updated.last_edited_by, blockId, ], ); // 히스토리 저장 await trx.query( `INSERT INTO block_history (block_id, version, properties, content, edited_by, edited_at) VALUES ($1, $2, $3, $4, $5, $6)`, [ blockId, current.version, current.properties, current.content, userId, Date.now(), ], ); }); // 캐시 무효화 await this.cache.del(`block:${blockId}`); // 실시간 브로드캐스트 await this.broadcastUpdate(blockId, updated); // 검색 인덱스 업데이트 await this.search.update({ index: "blocks", id: blockId, body: updated, }); return updated; } } 

데이터베이스 시스템

// Notion의 유연한 데이터베이스 interface Database { id: string; title: string; properties: Record<string, Property>; views: View[]; filters: Filter[]; sorts: Sort[]; } interface Property { id: string; name: string; type: PropertyType; options?: any; } type PropertyType = | "title" | "text" | "number" | "select" | "multi_select" | "date" | "person" | "files" | "checkbox" | "url" | "email" | "phone" | "formula" | "relation" | "rollup"; // 데이터베이스 쿼리 엔진 export class DatabaseQueryEngine { async executeQuery( databaseId: string, query: DatabaseQuery, ): Promise<QueryResult> { // 1. 스키마 로드 const schema = await this.getSchema(databaseId); // 2. 쿼리 최적화 const optimizedQuery = this.optimizeQuery(query, schema); // 3. 실행 계획 생성 const executionPlan = this.createExecutionPlan(optimizedQuery); // 4. 쿼리 실행 let results = await this.executeplan(executionPlan); // 5. 필터 적용 if (query.filter) { results = this.applyFilters(results, query.filter); } // 6. 정렬 적용 if (query.sorts) { results = this.applySorts(results, query.sorts); } // 7. Formula/Rollup 계산 results = await this.computeDerivedProperties(results, schema); // 8. 페이지네이션 const paginated = this.paginate(results, query.page_size, query.cursor); return { results: paginated.items, has_more: paginated.has_more, next_cursor: paginated.next_cursor, }; } // Relation 처리 async resolveRelations( rows: DatabaseRow[], property: RelationProperty, ): Promise<void> { const relatedIds = rows.flatMap( (row) => row.properties[property.id]?.relation || [], ); const relatedRows = await this.batchGetRows( property.relation_database_id, relatedIds, ); // 관계 데이터 매핑 const relatedMap = new Map(relatedRows.map((row) => [row.id, row])); rows.forEach((row) => { const relationIds = row.properties[property.id]?.relation || []; row.properties[property.id].resolved = relationIds.map((id) => relatedMap.get(id), ); }); } } 

Frontend 기술

블록 에디터

// Notion의 블록 에디터 컴포넌트 import { useEffect, useRef, useState } from "react"; import { Editor, Transforms, createEditor } from "slate"; import { useCollaboration } from "./collaboration"; interface BlockEditorProps { blockId: string; initialContent: any; onSave: (content: any) => void; } export function BlockEditor({ blockId, initialContent, onSave, }: BlockEditorProps) { const editor = useMemo(() => withNotion(createEditor()), []); const [value, setValue] = useState(initialContent); const collaboration = useCollaboration(blockId); // 협업 동기화 useEffect(() => { const unsubscribe = collaboration.subscribe((operation) => { if (operation.source !== "local") { // 원격 변경사항 적용 Editor.withoutNormalizing(editor, () => { operation.ops.forEach((op) => { editor.apply(op); }); }); } }); return unsubscribe; }, [collaboration]); // 로컬 변경사항 처리 const handleChange = (newValue: any) => { setValue(newValue); // 변경사항 감지 const operations = editor.operations; if (operations.length > 0) { // 협업 서버로 전송 collaboration.sendOperations(operations); // 디바운스된 저장 debouncedSave(newValue); } }; // 블록 타입별 렌더링 const renderElement = useCallback((props: any) => { const { element, children, attributes } = props; switch (element.type) { case "heading_1": return <h1 {...attributes}>{children}</h1>; case "code": return ( <CodeBlock {...attributes} language={element.language} onLanguageChange={(lang) => updateBlockProperty(element, "language", lang) } > {children} </CodeBlock> ); case "database": return ( <DatabaseView {...attributes} databaseId={element.databaseId} viewId={element.viewId} /> ); case "toggle": return ( <ToggleBlock {...attributes} isOpen={element.isOpen} onToggle={() => updateBlockProperty(element, "isOpen", !element.isOpen) } > {children} </ToggleBlock> ); default: return <p {...attributes}>{children}</p>; } }, []); // 슬래시 명령어 const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "/") { showBlockMenu(); } // 블록 이동 단축키 if (event.metaKey || event.ctrlKey) { switch (event.key) { case "ArrowUp": moveBlockUp(); break; case "ArrowDown": moveBlockDown(); break; case "d": duplicateBlock(); break; } } }; return ( <Slate editor={editor} value={value} onChange={handleChange}> <Editable renderElement={renderElement} onKeyDown={handleKeyDown} placeholder="Type '/' for commands..." spellCheck autoFocus /> </Slate> ); } // Notion 특화 플러그인 function withNotion(editor: Editor) { const { insertData, insertText, deleteBackward } = editor; // 드래그 앤 드롭 지원 editor.insertData = (data: DataTransfer) => { if (data.files.length > 0) { // 파일 업로드 처리 Array.from(data.files).forEach((file) => { uploadFile(file).then((url) => { insertFileBlock(editor, url, file.type); }); }); return; } insertData(data); }; // 자동 포맷팅 editor.insertText = (text: string) => { // 마크다운 단축키 if (text === " ") { const [match] = Editor.nodes(editor, { match: (n) => n.type === "paragraph", }); if (match) { const [node, path] = match; const text = Node.string(node); // 헤딩 변환 if (text.match(/^#{1,3}/)) { const level = text.match(/^#+/)[0].length; Transforms.setNodes( editor, { type: `heading_${level}` }, { at: path } ); Transforms.delete(editor, { at: { path, offset: 0 }, distance: level + 1, }); return; } // 리스트 변환 if (text.match(/^[-*]/)) { Transforms.setNodes( editor, { type: "bulleted_list_item" }, { at: path } ); Transforms.delete(editor, { at: { path, offset: 0 }, distance: 2, }); return; } } } insertText(text); }; return editor; } 

실시간 협업

CRDT 기반 동기화

// Notion의 CRDT 구현 import { Doc, Text } from "yjs"; import { WebsocketProvider } from "y-websocket"; import { IndexeddbPersistence } from "y-indexeddb"; export class CollaborationManager { private doc: Doc; private provider: WebsocketProvider; private persistence: IndexeddbPersistence; private awareness: Awareness; constructor(pageId: string, userId: string) { this.doc = new Doc(); // 로컬 영속성 (오프라인 지원) this.persistence = new IndexeddbPersistence(pageId, this.doc); // WebSocket 연결 this.provider = new WebsocketProvider( "wss://notion-sync.com", pageId, this.doc, { params: { userId }, WebSocketPolyfill: ReconnectingWebSocket, }, ); // Awareness (커서, 선택 영역) this.awareness = this.provider.awareness; this.awareness.setLocalState({ user: { id: userId, color: generateUserColor(userId) }, cursor: null, }); } // 텍스트 동기화 syncText(blockId: string, callback: (text: string) => void) { const ytext = this.doc.getText(blockId); ytext.observe((event) => { callback(ytext.toString()); }); return { insert: (index: number, text: string) => { ytext.insert(index, text); }, delete: (index: number, length: number) => { ytext.delete(index, length); }, format: (index: number, length: number, attributes: any) => { ytext.format(index, length, attributes); }, }; } // 블록 트리 동기화 syncBlockTree(callback: (tree: BlockTree) => void) { const ytree = this.doc.getMap("blocks"); ytree.observe((event) => { const tree = this.buildBlockTree(ytree); callback(tree); }); return { addBlock: (parentId: string, block: Block) => { this.doc.transact(() => { ytree.set(block.id, block); const parent = ytree.get(parentId); if (parent) { parent.children = [...(parent.children || []), block.id]; ytree.set(parentId, parent); } }); }, moveBlock: (blockId: string, newParentId: string, index: number) => { this.doc.transact(() => { // 트랜잭션으로 원자적 이동 const block = ytree.get(blockId); const oldParent = this.findParent(blockId, ytree); const newParent = ytree.get(newParentId); if (oldParent) { oldParent.children = oldParent.children.filter( (id) => id !== blockId, ); ytree.set(oldParent.id, oldParent); } if (newParent) { newParent.children.splice(index, 0, blockId); ytree.set(newParentId, newParent); } block.parent = newParentId; ytree.set(blockId, block); }); }, }; } } 

오프라인 지원

Local-First 아키텍처

// 오프라인 우선 데이터 동기화 export class OfflineSync { private localDB: IDBDatabase; private syncQueue: SyncOperation[] = []; private isOnline: boolean = navigator.onLine; constructor() { // 온라인 상태 모니터링 window.addEventListener("online", () => this.handleOnline()); window.addEventListener("offline", () => this.handleOffline()); // Service Worker 등록 if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js"); } } async saveLocal(operation: Operation) { const tx = this.localDB.transaction(["operations"], "readwrite"); const store = tx.objectStore("operations"); // 로컬 저장 await store.add({ ...operation, timestamp: Date.now(), synced: false, }); // 온라인이면 즉시 동기화 if (this.isOnline) { this.syncOperation(operation); } else { // 오프라인이면 큐에 추가 this.syncQueue.push(operation); } } private async handleOnline() { this.isOnline = true; // 대기 중인 작업 동기화 const pendingOps = await this.getPendingOperations(); for (const op of pendingOps) { try { await this.syncOperation(op); await this.markSynced(op.id); } catch (error) { if (error.code === "CONFLICT") { // 충돌 해결 await this.resolveConflict(op, error.serverVersion); } } } } private async resolveConflict(localOp: Operation, serverVersion: any) { // 3-way merge const baseVersion = await this.getBaseVersion(localOp.blockId); const merged = this.threeWayMerge(baseVersion, localOp, serverVersion); // 병합된 버전 저장 await this.saveLocal(merged); // UI에 충돌 알림 this.notifyConflictResolved(localOp.blockId, merged); } } // Service Worker self.addEventListener("fetch", (event) => { if (event.request.url.includes("/api/")) { event.respondWith( caches.match(event.request).then((cachedResponse) => { const fetchPromise = fetch(event.request).then((networkResponse) => { // 캐시 업데이트 if (networkResponse.status === 200) { const responseToCache = networkResponse.clone(); caches.open("notion-api-v1").then((cache) => { cache.put(event.request, responseToCache); }); } return networkResponse; }); // 캐시 우선, 네트워크 폴백 return cachedResponse || fetchPromise; }), ); } }); 

기술 스택 요약:

• Frontend: React, TypeScript, Slate.js, Electron
• Backend: Node.js, PostgreSQL, Redis
• 실시간: WebSocket, Yjs (CRDT)
• 검색: Elasticsearch
• 인프라: AWS, Cloudflare
• 모바일: React Native + Native

💡 핵심 기술 인사이트

1. 블록 기반 아키텍처의 힘

• 무한한 확장성과 조합 가능성
• 일관된 데이터 모델
• 재사용 가능한 컴포넌트

2. 유연한 데이터베이스 시스템

• 스키마리스 설계
• 다양한 뷰 (테이블, 보드, 갤러리 등)
• 강력한 필터링과 정렬

3. 로컬 우선 설계

• 오프라인에서도 완전한 기능
• 빠른 반응성
• 데이터 소유권 보장

📈 성과 & 지표

기술적 성과

• 페이지 로드: < 1초 (캐시된 경우)
• 실시간 동기화: < 100ms 지연
• 오프라인 지원: 100% 기능 가능
• API 응답시간: P50 < 50ms
• 검색 성능: < 200ms (수백만 블록)

비즈니스 영향

• 사용자 증가: YoY 100%+
• 기업 고객: Fortune 500 중 50%+
• 개발자 생산성: 40% 향상 (자체 측정)
• API 파트너: 1,000+ 통합

🎓 Notion에서 배울 점

✅ 적용 가능한 패턴

1. 블록 기반 설계: 확장 가능한 콘텐츠 모델
2. CRDT 협업: 충돌 없는 동시 편집
3. 로컬 우선: 오프라인 지원 아키텍처
4. 유연한 스키마: 동적 데이터베이스
5. 점진적 향상: 기능별 단계적 로딩

❌ 주의사항

1. 복잡한 데이터 모델: 블록 트리 관리
2. 성능 최적화: 대규모 페이지 처리
3. 검색 색인: 실시간 업데이트 부하
4. 동기화 복잡성: 충돌 해결 로직

📚 추천 리소스

• Notion API Documentation
• Building a Block Editor
• CRDTs at Notion
• Local-First Software

🔮 미래 전망

현재 집중 분야

1. Notion AI: GPT 통합 작성 도우미
2. Notion Calendar: 일정 관리 통합
3. Notion Mail: 이메일 클라이언트
4. 고급 자동화: Zapier 같은 워크플로우
5. 엔터프라이즈 보안: SSO, 감사 로그

기술 투자 영역

• WASM: 브라우저 성능 향상
• 분산 시스템: 글로벌 확장
• AI/ML: 스마트 추천, 자동 정리
• 모바일 최적화: 네이티브 수준 경험
• 개발자 플랫폼: 더 많은 API, SDK

"우리는 도구를 만드는 것이 아니라, 사람들이 더 나은 방식으로 생각하고 일할 수 있는 환경을 만들고 있습니다."

• Notion Engineering

마지막 업데이트: 2025-01-28