Claude Code와 Notion API를 활용한 카드뉴스 자동화 파이프라인 만들기
노션에 쌓인 글을 5분 만에 인스타 카드로 바꾸기
노션에 유용한 정보를 스크랩하여 모아두는 사용자가 많습니다. 하지만 단순히 모아두는 것에 그치고 다시 읽지 않거나 방치하는 경우가 자주 발생합니다. 이러한 문제를 해결하기 위해 스크랩한 콘텐츠를 많은 사람과 쉽게 공유할 수 있는 카드뉴스 콘텐츠로 자동화 파이프라인을 구축할 수 있습니다. 터미널용 AI 어시스턴트인 Claude Code를 활용하여 필요한 스크립트를 작성하고 작동하는 변환 흐름을 완성하는 방법을 소개합니다.
이 시스템이 완성되면 노션 데이터베이스의 특정 태그를 기준으로 본문 텍스트를 자동으로 수집합니다. 수집된 텍스트는 4컷 규격의 HTML 카드로 변환되며, 버튼을 클릭하여 이미지로 간편하게 내려받을 수 있습니다.
개발을 위한 준비 사항
개발 프로세스를 원활하게 진행하기 위해 Claude Code를 준비합니다. 이는 터미널 환경에서 코드를 생성하고 즉시 실행할 수 있게 돕는 유용한 도구입니다. 이와 함께 Notion API 연동을 위한 토큰과 대상 데이터베이스 ID가 필요합니다. 두 가지 정보가 준비되었다면 터미널 창을 실행하여 본격적인 연동 작업을 시작합니다.
단계별 카드뉴스 자동화 파이프라인 구축
전체 기능을 한 번에 구현하기보다는, 데이터 연동 기능을 먼저 확인하는 편이 안정적입니다. 노션 개발자 포털에서 API 통합을 설정하면 비밀 키를 발급받을 수 있습니다. 이후 노션 API를 연동하여 데이터베이스에서 추출 대상인 페이지의 URL을 확인한 다음 고유 ID를 스크립트에 매칭합니다. AI 어시스턴트에 라이브러리 설치 안내와 초기 연결 스크립트 작성을 요청하면 구조화된 코드를 얻을 수 있습니다.
제공된 라이브러리 설치 명령어와 연동 코드를 사용해 스크립트를 구동하면 데이터베이스에 저장된 본문 텍스트가 정상적으로 수집되는 것을 확인할 수 있습니다.
수집한 원본 데이터를 카드뉴스 구조로 정렬하는 작업이 요구됩니다. Tailwind CSS 프레임워크를 활용하면 추가적인 스타일 시트 파일을 작성하지 않고도 모바일 규격에 최적화된 레이아웃을 구현할 수 있습니다. Claude Code에 프롬프트를 입력할 때, 모바일 화면 비율에 적합하도록 레이아웃 구성을 구체적으로 제시해야 렌더링 시 왜곡이 발생하지 않습니다.
스크립트를 구동하면 수집된 정보를 가공하여 세부 문구를 배치한 index.html 파일이 생성됩니다. 이 과정에서 텍스트가 적절히 나누어 담기고 일관된 시각 요소가 적용됩니다.
소셜 미디어 채널에 게시하기 위해서는 웹 화면을 이미지 형태로 저장할 수 있어야 합니다. HTML 요소를 캔버스 객체로 변환하는 라이브러리를 사용하면, 화면 상의 요소를 스크롤 없이 고해상도 이미지 파일로 렌더링할 수 있습니다. 이를 구현하면 개별 카드를 하나씩 캡처하는 번거로움 없이 버튼 조작 한 번으로 지정된 파일이 PC에 일괄 다운로드됩니다. 또한 파이썬의 내장 웹브라우저 모듈을 추가하면 프로세스 완료 시점에 결과물이 웹브라우저 창으로 즉시 실행되어 구조 확인과 점검이 용이합니다.
노션 API 연동 및 변환 과정의 주요 오류 해결 방법
노션 API 연동 및 변환 작업 중 발생할 수 있는 주요 예외 상황과 해결 방법을 안내합니다.
첫째, 스크립트 실행 중 API 관련 응답 에러가 발생하는 경우입니다. 이는 개발자 포털에서 토큰을 정상 발급받았음에도, 정작 데이터베이스 페이지에 해당 API의 커넥션 액세스 권한이 할당되지 않았을 때 나타납니다. 노션 페이지 우측 상단의 설정 메뉴를 열고, 커넥션 추가 항목에서 생성한 비서 앱을 선택해 권한을 부여함으로써 문제를 해결합니다.
둘째, 이미지 다운로드 실행 시 배경이나 텍스트의 글꼴이 흐트러지는 왜곡이 발생할 수 있습니다. 이는 외부 웹 폰트 또는 CDN 자원을 가져올 때 CORS(교차 출처 자원 공유) 보안 정책으로 인해 리소스를 차단당해 발생합니다. 이를 보완하려면 라이브러리 설정 옵션 내 useCORS 속성을 true로 설정하거나, 외부 폰트 대신 시스템 기본 폰트만 사용하여 레이아웃을 구성해야 합니다.
셋째, 추출된 이미지의 경계면이 잘리거나 레이아웃 크기가 임의로 축소 또는 확대되는 왜곡 현상입니다. 사용 중인 브라우저 화면의 기본 확대/축소 배율이 100%가 아니거나 모니터 해상도 배율이 다를 때 렌더링 크기를 오판하여 일어납니다. 출력 영역을 지정하는 div 태그의 너비와 높이를 고정 수치(px)로 제한하고, 스케일 옵션을 명시적으로 지정하여 비정상적인 렌더링을 방지할 수 있습니다.
주기적 실행을 위한 추가 확장 방법
구축된 자동화 파이프라인은 정기적인 스케줄러를 연결해 효율성을 한층 더 높일 수 있습니다. 특정 시간마다 스크립트가 실행되도록 설정하면 수동 조작 없이 매일 축적된 아티클을 자동으로 요약하여 이미지 파일로 가공합니다. 나아가 최종 산출물을 외부 메신저 API와 연결하여 모니터링 채널로 즉시 전송하는 자동화 파이프라인으로도 손쉽게 응용할 수 있습니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 Notion API 사용법
- 🔍 Notion API 비교
- 🔍 카드뉴스 사용법
- 🔍 카드뉴스 비교