Notion Presso

문서튜토리얼기여하기쇼케이스블로그깃허브
GithubXDiscord

getting-started > 프로젝트 소개

Notionpresso 프로젝트 소개

Notionpresso이란?

Notionpresso은 Notion의 강력한 콘텐츠 작성 기능을 웹사이트로 손쉽게 가져올 수 있게 해주는 도구입니다. 이 라이브러리를 사용하면 Notion에서 작성한 콘텐츠를 그대로 React 기반의 웹사이트에서 렌더링할 수 있습니다. 개발자에게는 빠르게 결과를 만들어낼 수 있는 도구가 되고, 콘텐츠 작성자에게는 편리한 관리 도구가 되는, 그야말로 "개발자와 작성자 모두를 위한 매직 포션" 같은 존재입니다. ✨

주요 기능 및 제공하는 가치

🛠️ Notion 데이터의 React 렌더링

Notion에서 작성한 글, 이미지, 리스트, 코드 블록 등 다양한 콘텐츠를 React 컴포넌트로 쉽게 변환할 수 있습니다. 다음과 같은 구조로 Notion 페이지가 웹에서 재탄생합니다:

import { Notion, type NotionPageData } from 'Notionpresso';

interface NotionPageProps {
  pageData: NotionPageData;
}

function NotionPage({ pageData }: NotionPageProps) {
  return (
    <Notion>
      <Notion.Cover src={pageData.cover} />
      <Notion.Body>
        <Notion.Title title={pageData.title} />
        <Notion.Blocks blocks={pageData.blocks} />
      </Notion.Body>
    </Notion>
  );
}

이 예제에서 NotionPageData 타입은 Notion 페이지의 데이터 구조를 정의합니다. 이를 통해 TypeScript의 타입 체크 기능을 활용하여 더 안정적인 코드를 작성할 수 있습니다.

🎨 커스터마이징의 자유

CSS만 건드려서 간단하게 테마를 바꾸거나, 기본 제공 컴포넌트를 부분적으로 수정해 필요한 부분만 커스터마이징할 수 있습니다. 심지어 완전히 새로운 컴포넌트를 만들어 Notionpresso에 결합할 수도 있어요. 코드를 다루는 개발자에게는 무한한 가능성을 제공합니다.

🚀 빠른 사이트 구축

@notionpresso/cli CLI를 사용해 Notion 데이터를 쉽게 추출하고, Next.js와 같은 프레임워크를 통해 빠르게 정적 사이트를 구축할 수 있습니다. 몇 가지 명령어만으로 사이트를 구축하는 과정은 마치 텍스트에서 바로 웹사이트가 완성되는 느낌을 줍니다.

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

@notionpresso/cli를 실행하면 다음과 같은 폴더 구조로 Notion 데이터가 추출됩니다:

my-notion-project/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── notion-dadta/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...
  • notion-data/: 각 Notion 페이지의 내용이 JSON 형식으로 저장됩니다. 파일명은 페이지의 slug를 기반으로 생성됩니다.
  • public/notion-data/: Notion 페이지에서 사용된 이미지들이 각 페이지별로 분류되어 저장됩니다.

이렇게 추출된 데이터는 Notionpresso 컴포넌트와 쉽게 연동되어, Notion의 콘텐츠를 빠르게 웹사이트로 변환할 수 있습니다. JSON 파일의 내용을 React 컴포넌트에 전달하기만 하면, Notion 페이지의 구조와 스타일이 그대로 웹사이트에 반영됩니다.

타겟 사용자와 그들의 활용 가능성

개발자

Notion에서 작성한 콘텐츠를 웹사이트에 쉽게 렌더링하고, 커스터마이징할 수 있는 자유가 주어집니다. 빠르게 웹사이트를 구축하고 싶거나, 상용 서비스의 한계를 넘어 원하는 스타일로 꾸미고 싶다면 Notionpresso이 답입니다.

디자이너 및 크리에이터

Notion에서 작성한 콘텐츠를 직접 웹에 반영할 수 있어 디자인에 일관성을 유지하면서 빠르게 콘텐츠를 업데이트할 수 있습니다.

활용 가능성 예시

  • 개인 블로그: Notion에서 쉽게 글을 작성하고, 자동으로 웹사이트에 반영합니다.
  • 회사 소개 및 채용 페이지: Notion을 활용해 회사 프로필이나 채용 정보를 빠르게 업데이트할 수 있습니다.
  • 포트폴리오 사이트: 프로젝트와 작업물을 손쉽게 업데이트할 수 있어, 포트폴리오 관리가 한결 쉬워집니다.

Notionpresso을 선택해야 하는 이유

  1. 개발자 중심의 커스터마이징: 다른 상용 서비스에서는 손댈 수 없는 세밀한 부분까지 수정할 수 있습니다. 코드를 통한 무한한 가능성, 이것이 Notionpresso의 매력입니다.

  2. 오픈소스의 자유: 모든 것이 투명하고, 여러분의 손에서 직접 다룰 수 있습니다. 필요하면 코드를 수정하고, 프로젝트를 자신의 서버에서 셀프 호스팅할 수 있어 비용 부담도 없습니다.

  3. 빠른 결과와 높은 효율성: Notion에서 콘텐츠를 작성하고, 간단한 설정만으로 웹사이트에서 바로 사용할 수 있습니다. 콘텐츠 작성과 배포의 과정이 한층 더 간소화됩니다.

Notionpresso은 여러분의 Notion 페이지를 멋진 웹사이트로 바꾸는 다리입니다. 이제 복잡한 설정은 그만, Notion에서 바로 시작해 보세요!

빠른 시작 가이드