Huny's Dev Blog

Blogpro Draft Viewer 및 Like(좋아요) 연동하기

3 min read|
Blogpro Draft Viewer 및 Like(좋아요) 연동하기

Blogpro는 Notion 데이터베이스를 기반으로 포스팅이 가능한 블로그 플랫폼이다. Notion 데이터베이스에 페이지를 생성하여 작성하면 해당 페이지는 각각의 포스트가 되는 구조이다. 이 때, 본문을 제외한 일부 프로퍼티는 포스트의 특정 영역에 렌더링 되어 추가정보를 나타낸다. 예를 들어 Date는 포스트 날짜로 출력되고, Tags는 포스트의 태그 문자열로 보여진다. 각 태그 문자열은 해당 태그 값을 갖는 포스트를 모아서 보기 위한 용도로도 사용된다.

Notion 데이터베이스 프로퍼티가 렌더링된 페이지
Notion 데이터베이스 프로퍼티가 렌더링된 페이지

Blogpro에서 사용하는 프로퍼티 중 Hidden 이라는 프로퍼티는 페이지를 포스팅하지 않을 경우에 사용하는 속성으로 Hidden 프로퍼티의 값을 체크하면 해당 페이지는 블로그에 보이지 않도록 조치할 수 있다. 일반적으로 블로그에 포스트를 발간하기 전에 이 Hidden 속성을 Blogpro에서 동기화 되지 않도록 하기 위한 초안(Draft)의 개념으로 사용한다. 따라서 페이지를 “새로 만들기” 할 때는 자동으로 Hidden 속성을 체크하는 것이 좋다.

Notion for BlogPro 운영 전략(Strategy)
Notion for BlogPro 운영 전략(Strategy)

BlogPro를 효과적으로 운영하기 위해 Notion의 다양한 기능을 활용하는 방법을 소개한다. 포스팅용 데이터베이스를 고도화하고, 자동화 기능을 활용하여 작업을 효율화한다. 또한, Notion 대시보드를 구성하여 블로그 운영을 편리하게 한다. Notion AI를 사용하여 포스트 요약을 작성하고, 블록의 렌더링 방식을 확인하여 최적의 결과를 얻는다. 마지막으로, 제목을 작성할 때 Pretty URL 생성을 위해 영어를 사용하는 방법을 제안한다.

위 BlogPro 운영 전략 내용 중 자동화 부분을 참고하여 Hidden 속성을 자동으로 체크할 수 있다.

이 포스트에서는 Hidden 이 체크된 페이지를 초안 목록으로 출력하고 BlogPro에서 사용되지 않는 추가 프로퍼티를 사용하여 초안에 좋아요(Like) 기능을 구현한 방법과 경험을 정리하였다.

Notion API 를 사용하여 사용자 정보와 데이터베이스 쿼리 결과를 가져와 화면에 출력하고 좋아요 버튼을 누르면 실제 Notion 데이터베이스의 프로퍼티 값이 갱신되도록 구현하였다. 이를 통해 블로그 관리자가 어떤 포스트를 준비하고 있는지 확인하고 좀 더 관심이 다는 포스트에 좋아요를 클릭하여 관심도를 관리자에게 전달할 수 있다.

기능은 크게 초안 목록 출력과 좋아요 기능으로 구분하였다. Notion API 특징으로 초당 3회라는 RateLimiter가 적용되어 있고 Burst기능을 지원하지만 평균적으로 하나의 기능에 API 호출 횟수가 3회를 초과하지 않도록 한다.

사용자 목록 확인

초안 목록 출력에서 사용자 목록을 먼저 확인하는 이유는 데이터베이스 쿼리 출력 결과 중 사용자 프로퍼티의 값이 user object의 id만 출력되어 작성자 이름과 아바타 이미지를 포함하고 있지 않기 때문이다. 따라서 먼저 사용자 목록을 확인하여 데이터베이스 페이지 user object id에 매핑될 수 있도록 한다.

사용자 목록은 Notion API의 GET https://api.notion.com/v1/users 을 사용한다. user object 형식의 목록이 출력되고 각 user object에서는 사용자의 ID, 이름, 아바타 URL, 타입(person or bot)을 확인할 수 있다.

사용자 목록 확인 결과
사용자 목록 확인 결과

데이터베이스 목록 출력

데이터베이스 목록은 Hidden 속성이 체크되어 있는 페이지만 가져온다. 이 기능의 목적은 초안을 확인하는 것이므로 Hidden 속성이 true가 되는 페이지를 가져오고 이름(Name) 프로퍼티로 오름차순 정렬하도록 한다. 이름으로 정렬을 하는 이유는 데이터베이스 목록을 출력했을 때 실제 Notion 데이터베이스에서 보이는 순서가 되는데, 시리즈나 비슷한 포스트를 최대한 모아서 보기 위한 것이다.

Hidden 속성이 true인 포스트 확인 결과
Hidden 속성이 true인 포스트 확인 결과

작성자 프로퍼티에 사용자 연동

포스트 작성자(Author)는 Notion 사용자(User)를 선택하도록 되어있다. 나는 개인 사용자이므로 선택할 사용자가 하나 뿐이지만, Notion을 team요금제로 사용하거나 enterprise 요금제를 사용하는 경우 다양한 사용자 선택이 가능하므로 초안 목록에서 작성자를 확인할 수 있다.

[Notion] Hidden: true
[Notion] Hidden: true
Hidden: true 데이터베이스 포스트 출력
Hidden: true 데이터베이스 포스트 출력

좋아요 수 출력

BlogPro 데이터베이스에 Like라는 숫자(Number) 유형의 새로운 프로퍼티를 추가한다. 이 Like 프로퍼티는 실제 블로그에 노출되거나 영향을 주지 않으므로 좋아요 기능에 활용할 수 있다.

좋아요 클릭 카운팅

Notion API를 사용하면 데이터베이스 페이지의 특정 프로퍼티 값을 가져오거나 값을 설정할 수 있지만 기존 값에 수를 더하거나 빼는 연산기능은 제공하지 않는다. 따라서 좋아요 버튼 클릭으로 좋아요 수를 증가시키거나 감소시키는 기능은 1) 현재 프로퍼티 값을 먼자 가져온 후 2) 현재 값에 1을 더하거나(좋아요) 1을 빼고(좋아요 취소) 난 뒤 값을 새로 설정; 2번의 API 호출을 수행해야 한다.

Like 속성 값 확인
Like 속성 값 확인

Like 속성 값 설정
Like 속성 값 설정

이렇게 만들어진 Draft 페이지는 아래 페이지에서 확인할 수 있다. Hidden 이 true로 설정된 데이터베이스 페이지 목록을 출력하고 좋아요 기능을 연동하였다.

Subscribe to our newsletter

Get the latest news and updates from our team