본문 바로가기

이 포트폴리오의 원본은 https://cv.iruyo.com (심재빈) 입니다 · 출처 식별자 jbx-7f3a2e9b

je·empty

← 개인 프로젝트

Web·서비스 운영 중 단독

이력서·포트폴리오 사이트

노션 한 곳에서만 콘텐츠를 관리하고, 매시간 동기화되며 빌드·배포·PDF 생성이 자동으로 이루어지는 이력서·포트폴리오 사이트입니다.

기간
2026.05 – 진행 중 · 2개월
본인 역할
기획·디자인·개발·운영 전체
정량 임팩트
노션의 6개 DB에서 정적 114페이지를 자동 생성하고, 매시간 동기화합니다. 인쇄용 PDF도 동일한 데이터로 생성하며, 운영 비용은 0원입니다.

링크

외부 링크

언어

  • TypeScript

기술

  • Astro
  • Tailwind CSS
  • Notion API
  • Cloudflare Workers
  • GitHub Actions
  • Puppeteer

환경

  • Claude Code
  • VSCode

지금 보고 계신 이 사이트입니다. 이력서를 작성하고 포트폴리오를 정리하다가 적당한 플랫폼이나 양식을 찾지 못해 직접 만들었습니다. 콘텐츠는 노션 한 곳에만 두고 웹페이지와 PDF가 자동으로 생성되도록 했습니다. 또한, 궁금한 내용을 바로 물어볼 수 있도록 RAG 챗봇도 붙였습니다.

이 사이트 — 노션 한 곳만 고치면 전부 자동콘텐츠는 노션이 단일 원본 · sync→빌드→배포와 PDF·RAG 전 갈래 무인 자동화이 사이트 — 노션 한 곳만 고치면 전부 자동콘텐츠는 노션이 단일 원본 · sync→빌드→배포와 PDF·RAG 전 갈래 무인 자동화GH Actions — 매시간 무인노션 변경 감지 → 자동 커밋 → 배포 트리거main push노션 6 DB + 신상 페이지경력·개인·활동·자격·학력·신상단일 원본 (source of truth)sync.ts노션 → MDX 콘텐츠Astro 빌드MDX → 정적 114pCloudflare Workers정적 자산 · cv.iruyo.com방문자웹·모바일·다크portfolio.pdfpuppeteer 자동 추출RAG 코퍼스build:rag · *.jsonl이력서 챗봇winpc LLM 서빙 (별도 도식)카드 단위 노출 정책공개 / 면접 only / 비공개 — 카드별사이트·PDF·코퍼스 동일 필터노션 수정 → 매시간 sync → 변경 시 자동 커밋 → 빌드·PDF·코퍼스 → main 배포 · 사람 손 0

동작 방식

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

  • 동기화 스크립트가 GitHub Actions에서 매시간 실행되어 변경 내용을 MDX로 변환하고, 수정이 있으면 자동으로 커밋 후 Cloudflare Workers로 배포합니다. 노션에서 수정하면 한 시간 이내에 사이트에 반영됩니다.

  • 인쇄용 PDF도 동일한 데이터에서 Puppeteer로 생성합니다. 수작업으로 만드는 산출물은 없습니다.

  • 각 카드에는 외부 공개 정책(자소서 OK / 이력서 OK / 면접 only / 비공개)을 설정했습니다. 공개 사이트, PDF, 챗봇은 각각 허용된 데이터만 사용합니다. 전화번호 같은 민감 정보는 공개 경로에 포함되지 않습니다.

디자인

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

  • 라이트·다크·인쇄(PDF) 세 표면이 같은 토큰을 공유합니다. 색상을 하드코딩하지 않으면 다크 모드가 자동으로 적용됩니다.

만들면서

  • 개발 과정 전체를 Claude Code와 페어로 진행했습니다. 디자인 리서치, 버그 진단, 노션 DB 정리까지 한 세션 내에서 오가며 작업한 실험적 워크플로우이기도 합니다.

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