콘텐츠 작성 입력
"포트폴리오 새 프로젝트 추가했어"
자동 감지·재빌드
변경된 페이지만 선택적으로 업데이트
웹사이트 자동 반영
CDN 배포까지 자동 처리
포트폴리오 새 프로젝트 추가했어. 웹사이트에 반영해줘.
Notion DB 변경을 감지하고 ISR로 해당 페이지만 재빌드했습니다.
Notion Webhook 실시간 수신 변경된 페이지 ID 자동 식별 신규 · 수정 · 삭제 구분 완료
Notion API 블록 데이터 추출 제목 · 본문 · 이미지 자동 매핑 마크다운 → HTML 변환 완료
변경 페이지만 선택적 빌드 전체 빌드 대비 95% 시간 절감 Next.js revalidate 자동 트리거
Vercel Edge 캐시 자동 갱신 전세계 CDN 즉시 반영 배포 완료 알림 발송
PROGRESS
Challenge
노션 데이터베이스에 콘텐츠를 작성하면, 웹사이트에 자동으로 반영되는 동기화 시스템입니다.
Solution
ISR(Incremental Static Regeneration) 기술로 빠른 로딩 속도를 유지하면서도, 노션 업데이트가 웹사이트에 자동 반영됩니다.
Before
CMS 로그인
After AX
노션 편집
핵심 기능
노션 기반 CMS
별도 관리자 페이지 없이 노션에서 직접 콘텐츠를 관리합니다.
ISR 자동 재빌드
전체 사이트 재배포 없이 변경된 페이지만 빠르게 업데이트합니다.
SEO 최적화
정적 페이지 생성으로 검색 엔진 최적화와 빠른 로딩 속도를 동시에 확보합니다.
이미지 자동 최적화
노션에 업로드된 이미지를 웹 최적 포맷으로 자동 변환합니다.
프로젝트 성과
콘텐츠 업데이트
노션 편집 하나로 즉시 배포
정적 생성으로 1초 이내
페이지 로딩 속도
개발자 없이 콘텐츠 업데이트 가능
마케팅팀 자체 운영
정적 페이지 + 메타데이터 자동 생성
SEO 점수 향상