프로덕트 블로그 트래킹 사이트 제작기
이런 사이트를 만들고 있다...
프로덕트 블로그 트래커
프로덕트 블로그 트래커입니다.
productblogupdates.framer.website
V0
슬랙으로 기술블로그 알림받는 걸 구현해본 후 깃허브 워크플로우로 썼던 코드들을 재활용해보고 싶었다.
다음 작업은 아래 구조로 이뤄져있다:
- 2시간마다 자동으로 실행
- (GitHub) 미리 리스팅한 RSS 목록을 순차적으로 읽어서 해당 블로그 피드의 최신 글 정보만 가져옴 (link, title, author, date)
- (GitHub) 최신 글 정보를 json 파일과 비교하고 저장. 해당 블로그에서 최초로 가져온 정보일 시에는 새로 추가하고, 지금 가져온 최신 글 정보가 기존의 최신 글 정보와 일치하면 그대로 유지하고, 다르면 지금 가져온 정보로 갱신함.
- (GitHub) json 파일과 비교해서 '지금 가져온 글 정보'가 '신규'인 것이 확정되면, 미리 연결한 노션 데이터베이스에 행 추가.
- 행 추가 시 즉각 자동 실행
- (Notion) 노션 자동화 기능을 이용해 슬랙에 메시지 전송.
[RSS] 노션&슬랙으로 티스토리·벨로그 블로그 신규 포스팅 업데이트 알림받기
이글은 Today I Learned로...하는 방법에 대한 글이 아닙니다 (추후 글 찔 예정)오늘 골을 뽀개며 고군분투한 결과...!github에서 워크플로우를 실행하여지정한 블로그들의 RSS 정보를 받아와 이전 정보
urdle.tistory.com
그래서 초기엔, 1-1 ~ 1-3번까지 그대로 유지하고, Framer와 Notion DB를 Sync하여 정보를 가져와 웹사이트에 쏴 주는 것으로 구현했다.
- 2시간마다 자동으로 실행
- (GitHub) 미리 리스팅한 RSS 목록을 순차적으로 읽어서 해당 블로그 피드의 최신 글 정보만 가져옴 (link, title, author, date)
- (GitHub) 최신 글 정보를 json 파일과 비교하고 저장. 해당 블로그에서 최초로 가져온 정보일 시에는 새로 추가하고, 지금 가져온 최신 글 정보가 기존의 최신 글 정보와 일치하면 그대로 유지하고, 다르면 지금 가져온 정보로 갱신함.
- (GitHub) json 파일과 비교해서 '지금 가져온 글 정보'가 '신규'인 것이 확정되면, 미리 연결한 노션 데이터베이스에 행 추가.
- 수동으로 실행
- (Framer) CMS와 Notion DB를 Sync 하여 정보 테라포밍
- (Framer) Publish 하여 CMS 변경사항 반영
V1

해당 블로그 최초 접근 시 가능한 한 많은 아티클을 가져오기
문제점 & 해결방안
가장 최근 게시된 아티클 정보만 있다 보니 글의 양이 너무 적고, 최근에 자주 글을 업로드한 블로그의 경우 많은 최신글이 누락됨.
- AS-IS
최초에도 가장 최근 게시된 아티클 정보만 가져온다. - TO-BE
최초에는 RSS에서 긁을 수 있는 모든 아티클 정보를 가져온다.
적용
json을 딕셔너리가 아닌 리스트 형태로 관리하여 최초에 최신글을 모두 가져옴.

새로운 문제점
최초에도 가장 최근 글만 가져오는 기존의 구조였다면 몰랐을 텐데, 코드를 바꾸고 보니 데이터 양이 많아지면 발생하는 문제점이 바로 드러났음.
| Sync가 너무 오래 걸린다. | |
| 이슈 상황 1 | Framer 싱크 기능은 신규 행만 체크하는 게 아니라, 모든 행을 처음부터 다시 싱크함 -> 데이터 양이 많으면 오래 걸림 |
| 이슈 상황 2 | 행이 적어도 이미 오래 걸렸음 |
| 예측 | 노션은 DB를 저장하는 용도로 사용하기에는 무겁다. |
| 가설 | 노션 대신 구글 스프레드시트를 사용하면 Sync 시간이 단축될 것이다. |
| 중복 데이터 관리가 어렵다. | |
| 이슈 상황 1 | 가끔 내가 코드를 수정한 후 테스트를 위해 수동으로 워크플로우를 실행하면 스케줄링된 워크플로우와 겹쳐서 중복으로 아티클이 수집됨 |
| 이슈 상황 2 | 여러 이유로 실제로 글이 중복 수집됨 |
| 이슈 상황 3 | Framer에서 slug를 제목으로 따오게 했는데, 홍보 글을 업로드한다고 실제로 중복된 제목의 글을 업로드하는 경우가 있음 |
| 부가 이슈 | Sync가 오래 걸려 1차로 데이터를 가져왔는데, slug가 중복되어 해당 sync 작업을 날려야 함, 즉 시간이 두 배로 걸림 |
| 핵심 문제 | 노션은 중복 데이터 관리에 불편함이 있다. |
| 가설 | 노션 대신 구글 스프레드시트로 데이터 관리를 하면 중복 데이터 관리가 쉬워질 것이다. |
또한, 기존에 노션 DB를 사용했던 이유는 Slack 자동화 기능 때문이기에 현재 노션을 써야만 하는 이유가 없음.
실행 및 결과

워크플로우로 노션 대신 구글 스프레드시트에 데이터를 전송하게 변경
- Sync 소요시간이 1분 내로 감소 (약 1/10 수준으로 줄어듦)
- 구글 스프레드시트에선 중복 데이터 관리가 쉬워서 30초 내로 중복 거를 수 있음
- Sync -> 중복 발견 -> 구글 스프레드시트에서 중복 데이터 제거 -> 다시 Sync 까지 5분 내로 종료
정보 복사 기능 만들기
- 목표
단순히 링크를 클릭해서 이동하는 기능 말고, 해당 아티클을 잘 모을 수 있게 해주자.
- 해결방안
- 정보 복사 버튼을 만든다.
- 해당 버튼을 클릭하면 클립보드에 아티클 제목, 작성자, 날짜, URL이 복사되도록 한다.
- 복사가 성공적으로 되었다면 성공 메시지가 팝업된다.
- 복사에 실패했다면 실패 메시지가 팝업된다.
- 문제점: iOS에서 복사 불가능
- 사용한 navigator.clipboard는 HTTPS에서만 작동. 프레이머 미리보기 주소(framer.app)가 아닌 일반 http:// 주소로 접속하면 무조건 실패
- 버튼 클릭 후 fetch 데이터를 기다리거나 setTimeout 뒤에 복사 기능을 실행하면 브라우저는 "사용자가 안 시켰는데 웹사이트가 마음대로 복사하려 한다"고 판단해 차단
- 아이폰 Safari는 보안에 더 민감
- 해결방안
- HTTP에서도 작동하도록 우회로 뚫음
- 클릭 즉시 복사 명령 내리도록 변경
- fallbackCopy 함수 > execCommand('copy') 방식이 모바일 사파리에서 가장 안정적으로 작동하므로 변경
제목만 보여서 내용 미리보기가 불가능
제목만으로는 내용을 파악하기 어려운 아티클이 많음
-> 아래에 description 노출
새로운 문제점: 정보량이 너무 많음
새로운 해결방안: hover하면 description 노출

새로운 문제점: 모바일에선 hover가 불가능
해결방안: 모바일에선 토글형으로 변경
