노션 기반 자동 동기화 포트폴리오 사이트 (jempty.iruyo.com)

지금 보고 있는 이 사이트다. 이력서를 쓰고 포트폴리오를 정리하다가 기존 이력서 플랫폼과 양식 중에 맞는 걸 끝내 못 찾았고, 그래서 입맛에 맞게 직접 만들었다. 콘텐츠는 노션 한 곳에만 두고 웹페이지·PDF가 전부 자동으로 따라오게 했고, 궁금한 걸 바로 물어볼 수 있게 RAG 챗봇도 만들어 붙였다.

동작 방식

• 노션의 6개 DB(경력기술서·개인 프로젝트·활동·경력·학력·신상)가 유일한 원본이다. 사이트에 보이는 모든 문장은 노션에서 온다.

• 동기화 스크립트가 GitHub Actions에서 매시간 돌면서 노션 변경분을 MDX로 떨어뜨리고, 변경이 있으면 자동 커밋 → Cloudflare Workers로 배포까지 이어진다. 노션에서 고치면 늦어도 한 시간 안에 사이트에 반영된다.

• 인쇄용 PDF도 같은 데이터에서 Puppeteer가 뽑는다. 손으로 만드는 산출물이 하나도 없다.

• 카드마다 외부 노출 정책(자소서 OK / 이력서 OK / 면접 only / 비공개)을 달아 두고, 공개 사이트·PDF·챗봇이 각자 허용된 데이터만 쓰게 했다. 전화번호 같은 민감 정보는 공개 경로에 아예 실리지 않는다.

디자인

• 컴포넌트 라이브러리 없이 시맨틱 토큰 기반 디자인 시스템을 직접 정의했다. 보더 대신 면(surface)의 단차로 구분하는 모노크롬 언어, 4단계 폰트 웨이트, 카드·버튼·세그먼트의 공용 문법을 문서로 관리한다.

• 라이트·다크·인쇄(PDF) 세 표면이 같은 토큰을 공유해서, 색을 하드코딩하지 않으면 다크 모드는 공짜로 따라온다.

만들면서

• 개발 전 과정을 Claude Code와 페어로 진행했다. 디자인 리서치, 버그 진단, 노션 DB 콘텐츠 정리까지 한 세션 안에서 오가는 워크플로우를 실험한 프로젝트이기도 하다.

• 우하단의 챗봇도 이 사이트의 일부다 — 구조가 달라서 별도 카드(이력서 RAG 챗봇)에 정리했다.