개발자의 시선에서 노션 살펴보기

노션은 단순한 메모 앱을 넘어 문서 편집, 데이터베이스 관리, 프로젝트 협업까지 가능한 올인원 협업툴이라고 생각합니다.

 

많은 사용자가 노션을 선호하는 이유는 직관적인 UI와 다양한 기능이라고 생각합니다.

 

필자도 노션을 애용하고 있었기에 문득 어떤 기능들이 어떻게 구현되었을까? 하는 궁금증이 생겼습니다.

 

이번 글에서는 백엔드 개발자의 시각에서 노션의 주요 기능들이 어떻게 동작하는지, 그리고 노션이 다른 메모 서비스와 비교하여 어떤 기술적 차별점을 가지는지 추측 겸 분석해보겠습니다.

 

2. 노션의 주요 기능 분석

2.1 블록 기반 데이터 모델

노션의 가장 큰 특징 중 하나는 블록 기반 데이터 모델이라는 것입니다. 일반적인 문서 편집기는 연속된 텍스트를 하나의 문서로 저장하지만, 노션은 모든 콘텐츠(텍스트, 이미지, 테이블, 데이터베이스 등)를 블록 단위로 저장합니다.

• 블록은 독립적인 엔티티: 각 블록은 고유한 ID를 가지며 데이터베이스 내에서 개별적으로 저장 및 수정되며 관리하고 있는 것 같습니다.
• 트리 구조 지원: 블록은 부모-자식 관계를 형성하며 계층적인 문서를 쉽게 구성할 수 있습니다.
• 버전 관리 용이: 블록 단위로 변경 사항을 추적할 수 있어 협업 및 롤백이 쉽습니다.

2.2 실시간 협업 및 WebSocket 기반 아키텍처

노션은 여러 사용자가 동시에 같은 문서를 편집할 수 있도록 실시간 협업 기능을 제공합니다. 이를 위해 WebSocket 기반의 실시간 동기화를 사용합니다.

• WebSocket 연결 유지: 클라이언트는 서버와 지속적으로 연결된 상태에서 변경 사항을 주고받습니다.
• Operational Transformation(OT) 또는 Conflict-Free Replicated Data Types (CRDT): 충돌 방지 및 데이터 일관성을 유지하기 위한 기술을 적용할 것 같습니다.
• 이벤트 기반 업데이트: 서버는 변경 사항이 발생하면 해당 블록을 수정한 사용자에게만 업데이트를 전송하여 불필요한 데이터 전송을 줄입니다.

2.3 데이터베이스 기능과 쿼리 최적화

노션의 데이터베이스 기능은 일반적인 SQL 기반 데이터베이스와 다르게 동작합니다. 노션의 데이터베이스는 다양한 필터링, 정렬, 관계(Relation), 롤업(Rollup) 기능을 제공하며 이를 위해 GraphQL 및 NoSQL 스타일의 데이터 저장 방식을 활용할 가능성이 크다고 생각했습니다.

• 스키마리스(Schemaless) 저장 방식: 각 테이블이 동적인 컬럼을 가질 수 있어 유연한 데이터 구조를 지원할 수 있습니다.
• 캐싱 및 인덱싱 최적화: 자주 사용하는 데이터는 인덱싱 및 Redis 같은 인메모리 캐싱을 활용하여 성능을 높입니다.
• JSON 기반 쿼리 시스템: 사용자 인터페이스에서 직접 필터와 정렬을 설정하면 이를 백엔드에서 JSON 기반의 쿼리로 변환하여 실행시키는 방식이 유력합니다.

2.4 권한 관리 및 액세스 제어

노션은 문서 단위로 다양한 권한을 설정할 수 있습니다. 이를 위해 RBAC(Role-Based Access Control) 및 ACL(Access Control List) 모델을 혼합하여 사용하고 있을 가능성이 높습니다.

• 역할 기반 접근 제어(RBAC): 각 사용자는 특정 문서에 대해 '읽기', '편집', '관리' 권한을 가질 수 있습니다.
• 공유 링크 기반 접근 제어: 비회원도 특정 링크를 통해 문서를 조회할 수 있도록 토큰 기반 인증을 활용합니다.
• 워크스페이스 단위 권한 설정: 팀 단위 권한 관리가 가능하도록 구조화되어 있습니다.

2.5 개인적으로 재밌었던 기능

• 멘션 기능: 실시간으로 사용자 및 페이지 ID를 검색하여 링크를 생성하는 방식으로 동작합니다.
• 임베드 기능: Open Graph API를 사용하여 외부 콘텐츠의 메타데이터를 가져와 미리보기를 생성합니다.
• 북마크 기능: URL을 입력하면 Open Graph 태그를 이용해 제목, 설명, 이미지 등을 자동으로 가져와 노출합니다.
  • 북마크 기능은 개인적으로 재밌어보여서 파이썬으로 구현해봤습니다.

import requests
from bs4 import BeautifulSoup

def fetch_url_metadata(url):
    try:
        response = requests.get(url)
        response.raise_for_status()  # HTTP 에러 발생 시 예외 처리
    except requests.exceptions.RequestException as e:
        print(f"Failed to fetch URL: {e}")
        return None

    # HTML 파싱
    soup = BeautifulSoup(response.text, 'html.parser')

    # 메타 데이터 추출
    title = soup.title.string if soup.title else "No title available"

    description = None
    og_description = soup.find("meta", property="og:description")
    meta_description = soup.find("meta", attrs={"name": "description"})
    if og_description:
        description = og_description.get("content")
    elif meta_description:
        description = meta_description.get("content")
    else:
        description = "No description available"

    # OG 이미지 또는 favicon 추출
    og_image = soup.find("meta", property="og:image")
    favicon = soup.find("link", rel="icon")

    image_url = og_image.get("content") if og_image else "No image available"
    favicon_url = favicon.get("href") if favicon else "No favicon available"

    # 절대 URL 처리
    if image_url and not image_url.startswith("http"):
        image_url = requests.compat.urljoin(url, image_url)
    if favicon_url and not favicon_url.startswith("http"):
        favicon_url = requests.compat.urljoin(url, favicon_url)

    return {
        "url": url,
        "title": title,
        "description": description,
        "images": [{"url": image_url}],
        "favicon_url": favicon_url
    }

# 테스트 출력
metadata = fetch_url_metadata("https://www.example.com")
print(metadata)

 

 

3. 노션이 다른 메모 서비스와 차별화되는 이유

노션은 단순한 메모 앱이 아니라 협업 및 데이터 관리 기능이 결합된 생산성 플랫폼입니다.

이를 가능하게 하는 주요 기술적 차별점은 있겠지만 필자가 느끼기에 노션을 사용하는 가장 큰 이유는 다음과 같습니다.

1. 블록 기반 데이터 모델로 인한 자유로운 커스터마이징(제품의 유연성)
2. 단순하고 직관적인 인터페이스
3. 실시간 협업과 공유

개인적으로는 이 중에서도 편리한 구조의 인터페이스가 가장 큰 영역을 차지하는 것 같습니다.

 

4. 마무리

노션은 강력한 블록 기반 데이터 모델, WebSocket을 활용한 실시간 협업, 유연한 데이터베이스 구조를 통해 기존 메모 앱과 차별화된 생산성 도구로 자리 잡았습니다.

 

요즘에는 노션의 템플릿을 모방한 웹이나 모바일 앱도 심심치 않게 찾아볼 수 있습니다. 그만큼 노션은 많은 협업툴에 영향을 끼친 것 같기도 합니다.

 

개발자 관점에서 보는 노션은 효율적인 데이터 모델링과 성능 최적화를 위한 다양한 기술 스택이 활용되고 있음을 알 수 있었습니다.

 

노션의 기술을 분석하면서 얻은 인사이트는

• 확장성이 뛰어난 시스템을 설계하려면 어떻게 해야하는가?
• 편리한 서비스를 제공하기 위해서는 어떻게 해야할까?

앞선 질문에 대해 고민해볼 수 있었고 개발을 진행함에 있어 중요한 요소가 무엇인지 생각해볼 수 있었습니다.