문대승
[BackEnd] 노션 연동 블로그 - CozyBlog: 조회수 기능 구현 꿀팁 공유합니다
안녕하세요~ 코지 블로그 개발자 문대승입니다. 오늘은 포스팅 조회수를 어떻게 구현하고 있는지 저희 팀의 노하우를 공유하려 합니다. 보고 많은 분들께 도움이 되었으면 좋겠습니다 ㅎㅎ
포스팅글: CozyBlog의 노하우2: 블로그 조회수는 어떻게 구현할까? 바로 Plausible!
프로덕트
아티클
전체 보기
문대승
[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는 아래의 라이브러리를 써서 노션 화면을 구현했어요.
- npm: @cozy-blog/svelte-notion-page - npm (npmjs.com)
- github: cozy-blog/svelte-notion-page (github.com)
- storybook: Introduction - Docs ⋅ Storybook (chromatic.com)
오 공교롭게 라이브러리를 만든 팀 이름과 저희 팀 이름이 겹치네요. 이런 우연이?!
네ㅋㅋ 저 라이브러리들은 CozyBlog 팀에서 제작한 오픈소스 입니다. 누구나 쓸 수 있게 다운로드는 물론, 코드까지 공개했어요. 잠깐 위 라이브러리를 소개하자면 저희는 웹 개발에 Svelte을 썼기 때문에 라이브러리를 Svelte 플랫폼에 맞게 작성했고, 사용자는 디자인을 마음대로 수정할 수 있게 커스텀 가능하게 제작했습니다.
코드 규칙이 쉬워서 github 코드 보시면 React 버전도 따라 만드실 수 있을거에요(저희 레포지토리에 풀리퀘 올려주시면 리액트 유지보수에도 참여할게요!)
코지 블로그는 더 나은 글쓰기 경험을 제공해, 사용자들이 알짜배기 지식들을 널리널리 공유하는 플랫폼이 되는 것을 목표로 하고 있어요. 그 취지에 맞게 저희쪽 개발코드도 이렇게 까버립니다! 앞으로도 개발하면서 고민하거나 해결했던 문제들에 대해 열심히 글을 작성할 거니까요. 많은 관심 부탁드려요~
코지블로그: cozyblog.io
문대승
안녕하세요 코지 블로그 개발자 문대승입니다. 그디어 팀에 디자이너님이 합류하셨습니다. (야호!!) 디자이너님이 오시기 전과 오고 난 후에 블로그의 디자인 수준이 엄청 달라지더라구요. 역시 전문가의 손길은 다릅니다 ㄷㄷ
코지 블로그는 노션과 연동하여 자신의 노션 글을 나만의 블로그에 포스팅하자를 핵심 기능으로 내세우고 있습니다. 노션으로 블로그 글을 작성하니 어떤 에디터보다 글쓰기가 자유롭게 편했어요!. 신나서 저 혼자서만 글을 10편이나 작성했습니다 ㅋㅋ
지난달, MVP 개발 완료 후 지인들에게만 공개했는데요. 들어온 피드백은 노션 연동이 너무 어렵다 였습니다. 어렵다가 어렵다는 느낌을 받았다 정도가 아니라 아예 연동을 못하더라구요. 그래서 저희팀은 노션 연동 플로우 개선을 최우선으로 잡아달라고 디자이너님께 부탁했습니다.
결과물은 아래와 같아요!
정말 너무 좋습니다 ㅎㅎ 이제 정말로 런칭이 눈앞에 보이네요. 개인플젝이 아닌 첫 사이드플젝이라 너무 설렙니다. 코지 블로그, 5월 안에는 꼭 런칭 할거니까요. 잠시만 기다려 주세요!!
mvp:
Cozy Blog
Cozy Blog 입니다. Notion과 연동하여 자신의 블로그를 개설해보세요.
https://cozyblog.io/
팀 관련 문의: admin@cozyblog.io
문대승
선데이 블로깅에 가입했지만.. 일요일에 올리지 못해 오늘 아침이라도 올려봅니다.
-----
저는 디자이너는 아니지만, UX 소양을 기르려고 이것저것 찾아 보는데요. 댄 새퍼의 마이크로 인터랙션에서, 그것도 옮긴이의 글이 인상적이라 머릿속에 잊혀지지 않았습니다.
"소위 말하는 '최소 요건 제품', 즉 단기간에 핵심 기능에 대한 시장의 반응을 볼 수 있도록 최소한도로 정의된 제품을 개발자나 프로젝트 관리자 등 다른 사람들과 함께 정의하고 디자인하고 개발해서 출시하고, 실제 사용 데이터를 참고해서 이를 올바른 방향으로 개선해 나간다. 이런 방식은 분명 기존에 없던 새로운 제품을 하나 만들어 성공시키는 데에는 가장 확실한 접근 방법이다.. (중략)
이런 업무 환경에서의 디자인이란 다양한 전문분야의 팀원들이 모여 아이디어를 모으는 브레인스토밍에 가깝고, 이를 통해 골라낸 아이디어는 따로 시간들 들여 '디자인'되고 문서화되기보다 그렇게 논의를 통해 합의한 대로 프로토타입으로 만들어지는 경우가 대부분이다."
이른바 디테일을 챙기기가 쉽지 않다는거죠. 일단 기능부터 구현하고 세부 사항은 나중에 반영 하자고 넘어가자는 말은 디자이너분들 이라면 한번쯤 들어보셨지 않았나 싶습니다 ㅎㅎ.. 저도 개발자로서 저렇게 말한적이 있기 때문에 뜨끔하네요.
그런데 개발에서 기능 추가는 항상 발생하는거 같습니다. 특히 시장에 막 진입하기 시작한 제품의 경우 더 두드러지는 것 같습니다. 그렇기에 최소 요건만 구현하고 반응부터 본다는 정통적인 에자일방식은 자칫하면 최소 조건만 있는 제품이 될 수 있죠.
기능 개발에서 어디 까지를 목표로 할지 정하는건 어려운 일 인것 같습니다. 하지만 확실한건 앞으로 시장에 없는 새 제품, 새 기능들은 점차 등장 하기 힘들다는 것이죠. 이미 시장에는 다양한 서비스들이 출시 되었기 때문입니다. 이런 상황 속에서 제품이 개성있게 보이기 위해 디테일이 중요한 시점이지 않나 싶습니다.
문대승
Cozy Blog
Cozy Blog 입니다. Notion과 연동하여 자신의 블로그를 개설해보세요.
https://www.cozyblog.io/
안녕하세요! 노션과 연동하여 글 쓰는 블로그 - CozyBlog 개발자 문대승입니다.
제품 기획을 시작했던 때가 얼마 안지난거 같은데 어느덧 mvp가 뽑혔습니다!
아직 오픈은 하지 않았기 때문에 직접 글을 작성할 순 없지만..!
곧 여러분들도 글을 쓸 수 있게 빨리 준비할 수 있도록 할게요!
ps. 현재 저(3년차 풀스택)와 더불어 7년차 풀스택 개발자 동료와 함께 프로젝트를 진행하고 있습니다. 제품개발에 관심있으신 분은 언제든 환영입니다. 아래 메일로 연락주세요!
이메일: admin@cozyblog.io
포스트
아직 포스트가 없습니다.