뒤로
문대승
문대승 ·

[FrontEnd] 노션 연동 블로그 - CozyBlog: 노션 연동 기술 공유합니다

안녕하세요 코지 블로그 개발자 문대승입니다. 코지 블로그는 디자이너 한분과 풀스택 개발자 2명, 이렇게 한팀으로 운영하고 있어요. 그 중 저는 풀스택 개발자로서 주로 프론트쪽을 맡아 진행하고 있습니다.

이번 글에서는 CozyBlog가 노션과 연동하기 위해 어떠한 방식으로 개발했는지 소개하려 합니다. 코지 블로그는 노션으로 작성한 글을 블로그에 게시할 수 있는 블로그 플랫폼인데요. 어떻게 코지블로그는 노션의 글을 그대로 사용자의 블로그에 게시할 수 있을까요? 아래 사진을 보시죠!

(다른 풀스택 개발자분은 인프라 및 백엔드를 주로 담당하고 있습니다. 조만간 백엔드 관련해서도 CozyBlog 기술 노하우를 작성하도록 하겠습니다!)

플러터 위젯 파헤치기 - 3: ConstrainedBox , OverflowBox, SizedBox, ConstraintsTransformBox 등등 (cozyblog.io)

위 사진은 노션 글을 코지블로그에 게시한 화면입니다. 노션이 제공하는 toggle_heading이라든가, 노션 특유의 색감 그리고 살짝밖에 안보이지만 code 컴포넌트로 코드 예시가 작성되어 있는 모습을 볼 수 있습니다.

이렇게 CozyBlog는 노션의 글을 실제 노션이 보여주는 디자인 그대로 보여주고 있습니다. 방법이 궁금하지 않으신가요? ㅎㅎ. 지금 글을 읽고 계신 개발자분들은 어느정도 알아챘을거라 생각하지만..! 다른 분들은 생소할 수도 있을거 같아요. 이 글을 보시면서 CozyBlog는 이렇게 개발했구나 라고 가볍게 봐주시면 감사하겠습니다! 그럼 소개하기 전에 먼저 API에 대해 잠깐 설명해야겠네요.

API란?

API는 "Application Programming Interface"의 약어로, 애플리케이션끼리 상호작용하는데 사용되는 인터페이스를 말합니다. 다른 시스템 또는 애플리케이션에서 사용할 수 있는 소프트웨어 구성 요소를 제공하며, 이를 통해 데이터를 교환하고 서비스를 공유할 수 있습니다. API는 프로그래밍 언어와 통신하며, 프로그래머가 개발한 애플리케이션에서 다른 시스템의 기능을 활용할 수 있도록 도와줍니다.

API는 간단히 말해서 다른 시스템에서 사용할 수 있도록 제공하는 인터페이스라고 생각하시면 될 거 같아요. 이 개념을 CozyBlog에 대입해서 다시한번 말하면, Notion API는 노션이 자신의 글을 다른 시스템에서(여기서는 코지 블로그가 됩니다) 사용할 수 있게 제공하는 인터페이스 입니다.

네! 노션은 Notion API 를 제공합니다. Notion이 제공하는 엔드 포인트(https://api.notion.com)에 노션이 지정한 형식대로 요청을 날리면 값을 받아오는 것이죠

예를 들어 이렇게 요청하면은?

curl 'https://api.notion.com/v1/pages/b55c9c91-384d-452b-81db-d1ef79372b75' \
  -H 'Notion-Version: 2022-06-28' \
  -H 'Authorization: Bearer '"$NOTION_API_KEY"''

이렇게 응답이 오는거죠

{
  "object": "page",
  "cover": {
    "type": "external",
    "external": {
      "url": "https://upload.wikimedia.org/wikipedia/commons/6/62/Tuscankale.jpg"
    }
  },
  "icon": {
    "type": "emoji",
    "emoji": "🥬"
  },
  "parent": {
    "type": "database_id",
    "database_id": "d9824bdc-8445-4327-be8b-5b47500af6ce"
  },
  "archived": false,
  ...(생략)
}

쉽게 말해서 Notion API란 '문대승의 포스팅 글 정보 가져와줘' 라고 요청하면, 위처럼 포스팅 글에 대해 JSON 형태의 문자열을 돌려주는 서비스 라고 생각하시면 될거 같네요.

이제 Notion API가 생겼으니 그전엔 노션에서만 썼던 데이터들을 저희도 쓸 수 있게 되었습니다. 이제 데이터를 얻는 방법은 알았고, 이걸 화면에 그리는 서비스와 연동하면 끝이겠네요!

그런데 화면에 노션 데이터를 그리는 서비스는 없었습니다.. 개발자가 직접 저 문자열을 분석해서 노션처럼 똑같이 만들어줘야 하는 것이죠.(제가 말이죠 ㅠㅠ) 그래도 오픈소스로 노션 데이터를 분석해서 노션과 같은 컴포넌트들을 그려주는 라이브러리들이 몇 개 존재합니다.

CozyBlog는 아래의 라이브러리를 써서 노션 화면을 구현했어요.

오 공교롭게 라이브러리를 만든 팀 이름과 저희 팀 이름이 겹치네요. 이런 우연이?!

네ㅋㅋ 저 라이브러리들은 CozyBlog 팀에서 제작한 오픈소스 입니다. 누구나 쓸 수 있게 다운로드는 물론, 코드까지 공개했어요. 잠깐 위 라이브러리를 소개하자면 저희는 웹 개발에 Svelte을 썼기 때문에 라이브러리를 Svelte 플랫폼에 맞게 작성했고, 사용자는 디자인을 마음대로 수정할 수 있게 커스텀 가능하게 제작했습니다.

코드 규칙이 쉬워서 github 코드 보시면 React 버전도 따라 만드실 수 있을거에요(저희 레포지토리에 풀리퀘 올려주시면 리액트 유지보수에도 참여할게요!)

코지 블로그는 더 나은 글쓰기 경험을 제공해, 사용자들이 알짜배기 지식들을 널리널리 공유하는 플랫폼이 되는 것을 목표로 하고 있어요. 그 취지에 맞게 저희쪽 개발코드도 이렇게 까버립니다! 앞으로도 개발하면서 고민하거나 해결했던 문제들에 대해 열심히 글을 작성할 거니까요. 많은 관심 부탁드려요~

코지블로그: cozyblog.io

9

댓글

로그인 후 댓글을 남길 수 있습니다.

아직 댓글이 없습니다.