AFFiNE: 오픈소스로 만든 Notion + Miro 스타일 지식 협업 플랫폼

개발을 하다 보면 문서 정리, 아이디어 정리, 프로젝트 관리, 협업 등을 위해 여러 도구를 사용하게 됩니다.
대표적으로 Notion, Miro, Obsidian, Google Docs 같은 서비스들이 있죠.

하지만 이런 SaaS 도구에는 몇 가지 공통적인 문제가 있습니다.

• 데이터가 클라우드 서비스에 종속
• 오프라인 사용이 제한
• 확장이나 커스터마이징이 어려움
• AI나 자동화 기능을 개발자가 직접 통제하기 어려움

이런 문제를 해결하기 위해 등장한 프로젝트가 바로 AFFiNE 입니다.

AFFiNE는 Notion + Miro + Obsidian의 장점을 결합한 오픈소스 지식 관리 플랫폼으로, 로컬 우선(Local-first) 구조와 확장 가능한 아키텍처를 특징으로 합니다.

 

GitHub - toeverything/AFFiNE: There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge bas

 

---

프로젝트 소개

AFFiNE는 차세대 협업 지식 베이스 플랫폼입니다.

핵심 특징은 다음과 같습니다.

• Block 기반 에디터
• 화이트보드 + 문서 통합
• 로컬 퍼스트(Local-first) 아키텍처
• 오픈소스
• AI 통합 가능

즉, 하나의 도구에서 다음을 모두 할 수 있습니다.

• 문서 작성
• 마인드맵 / 다이어그램
• 프로젝트 관리
• 지식 정리
• 협업

특히 AFFiNE는 "All-in-One Knowledge Workspace"라는 철학을 가지고 있습니다.

---

왜 이 프로젝트가 등장했을까

AFFiNE가 등장한 이유는 기존 협업 도구의 구조적인 문제 때문입니다.

1. SaaS 종속 문제

Notion 같은 서비스는 편리하지만 다음 문제가 있습니다.

• 데이터가 서비스에 종속
• 서비스 정책 변경 리스크
• 오프라인 사용 어려움

AFFiNE는 이를 해결하기 위해 Local-first architecture를 채택했습니다.

즉,

데이터 → 로컬 저장
동기화 → 선택적 클라우드

이 구조 덕분에 오프라인에서도 완전히 동작합니다.

---

2. 문서와 화이트보드의 분리

대부분의 도구는 다음처럼 분리되어 있습니다.

기능대표 도구

문서	Notion
화이트보드	Miro
개인 지식	Obsidian

AFFiNE는 이 문제를 해결하기 위해

Page + Canvas 구조

를 제공합니다.

즉 하나의 워크스페이스에서

• 문서 작성
• 화이트보드
• 다이어그램
• 마인드맵

을 모두 사용할 수 있습니다.

---

핵심 기능

1. Block 기반 문서 시스템

AFFiNE는 Notion과 같은 Block 기반 에디터를 사용합니다.

문서는 단순한 텍스트가 아니라 구조화된 블록 집합입니다.

예:

Page
 ├─ Heading
 ├─ Paragraph
 ├─ Code Block
 ├─ Table
 └─ Embedded Canvas

예시 코드 구조

interface Block {
  id: string
  type: string
  content: any
  children?: Block[]
}

이 구조 덕분에

• 블록 이동
• 임베딩
• 협업 편집

이 매우 쉽게 구현됩니다.

---

2. Canvas (화이트보드)

AFFiNE의 가장 큰 특징은 Canvas 모드입니다.

Canvas에서는 다음 작업이 가능합니다.

• 마인드맵
• 다이어그램
• 자유 배치
• 문서 블록 임베딩

즉 문서와 화이트보드가 완전히 통합됩니다.

예:

Canvas
 ├─ Text
 ├─ Sticky note
 ├─ Connector
 ├─ Image
 └─ Page embed

---

3. Local-first 데이터 구조

AFFiNE는 Local-first database를 사용합니다.

핵심 아이디어는 다음과 같습니다.

사용자 작업
     ↓
Local Database
     ↓
CRDT Sync
     ↓
Cloud / Peer Sync

이를 통해

• 오프라인 편집
• 충돌 없는 협업
• 빠른 반응성

을 제공합니다.

CRDT 기반 협업 덕분에 Google Docs처럼 실시간 협업이 가능합니다.

---

4. AI 통합

AFFiNE는 AI 기능을 워크스페이스에 직접 통합할 수 있습니다.

예:

• 문서 요약
• 글 작성 보조
• 아이디어 정리
• 자동 태깅

예시

/ai summarize
/ai generate outline
/ai rewrite

---

프로젝트 구조

AFFiNE는 단순한 웹앱이 아니라 복잡한 모노레포 구조를 가지고 있습니다.

주요 구성은 다음과 같습니다.

• frontend
• backend
• editor engine
• collaboration engine
• storage layer

구조를 단순화하면 다음과 같습니다.

flowchart TD

User --> Editor
Editor --> BlockEngine
BlockEngine --> LocalDB
LocalDB --> SyncEngine
SyncEngine --> CloudService
CloudService --> Storage

설명:

• Editor
  실제 UI 에디터
• BlockEngine
  블록 데이터 구조 관리
• LocalDB
  로컬 데이터 저장
• SyncEngine
  CRDT 기반 협업 동기화
• CloudService
  서버 동기화

---

기술 스택

AFFiNE는 최신 웹 기술 스택으로 만들어졌습니다.

주요 기술:

영역기술

Frontend	TypeScript
Editor	Block-based editor
Collaboration	CRDT
Database	IndexedDB
Sync	WebSocket
Framework	React

특히 CRDT 기반 협업 엔진이 핵심 기술입니다.

---

개발자가 직접 실행해보기

AFFiNE는 오픈소스이기 때문에 로컬에서 바로 실행할 수 있습니다.

1. 저장소 클론

git clone https://github.com/toeverything/AFFiNE
cd AFFiNE

---

2. 의존성 설치

pnpm install

---

3. 개발 서버 실행

pnpm dev

그러면 보통 다음 주소에서 실행됩니다.

http://localhost:3000

---

이런 개발자에게 추천

AFFiNE는 특히 다음 개발자에게 흥미로운 프로젝트입니다.

• Notion 같은 서비스 구조가 궁금한 개발자
• 협업 에디터 구현에 관심 있는 개발자
• CRDT 기반 동기화 시스템을 공부하는 개발자
• Local-first 아키텍처에 관심 있는 개발자
• 차세대 협업 툴을 만들고 싶은 스타트업

---

마무리

AFFiNE는 단순한 노트 앱이 아니라
지식 관리 플랫폼의 새로운 아키텍처를 보여주는 프로젝트입니다.

특히 다음 기술이 흥미롭습니다.

• Block 기반 문서 구조
• Canvas + 문서 통합 UI
• Local-first 데이터 모델
• CRDT 협업 시스템

Notion 같은 제품을 만들고 싶다면
AFFiNE의 구조는 아키텍처 레퍼런스로 매우 좋은 프로젝트입니다.