본문으로 건너뛰기
포트폴리오로 돌아가기
[git-cv] Github Page 기반 이력서

[git-cv] Github Page 기반 이력서

관리자 UI에서 코드 수정 없이 이력서와 포트폴리오를 관리·배포할 수 있는 오픈소스 개발자 CV 플랫폼

기간2026.08
역할풀스택 단독 개발 (100%)
팀 규모1
사용 스택
  • Next.js
  • TypeScript
  • Supabase
  • Tailwind CSS
  • Github Actions
  • Github Pages

코드 수정 없이 관리하는 오픈소스 개발자 CV · 포트폴리오 플랫폼

git-cv 어드민 활용 예시 입니다

01. 프로젝트 개요

기존 개발자 포트폴리오는 내용을 업데이트할 때마다 Markdown, JSON 또는 소스 코드를 직접 수정하고 Git 커밋과 재배포 과정을 거쳐야 하는 불편함이 있습니다. git-cv는 이러한 문제를 해결하기 위해 GitHub Pages와 Supabase를 결합하여 개발한 셀프 호스팅 오픈소스 CV · 포트폴리오 플랫폼입니다.

  • /admin 관리자 UI에서 프로필, 경력, 학력, 수상, 프로젝트 등의 콘텐츠를 직접 관리할 수 있으며, 저장된 변경사항은 방문자 화면에 즉시 반영됩니다.
  • 별도의 서버를 운영하지 않고 GitHub Pages와 Supabase Free Tier를 활용하여 운영 비용을 최소화했으며, 정적 사이트의 SEO 장점과 동적 CMS의 실시간 콘텐츠 관리 기능을 함께 구현했습니다.

02. 주요기능 소개

GitHub Pages는 서버 런타임이 없는 정적 호스팅 환경이기 때문에 SEO를 위한 정적 HTML과 관리자 수정사항의 실시간 반영을 동시에 만족시키기 어렵습니다.

  • 이를 해결하기 위해 빌드 시점에는 Supabase 데이터를 조회하여 검색엔진용 정적 HTML을 생성하고, 실제 방문 시에는 브라우저에서 Supabase의 최신 데이터를 다시 조회하여 UI를 동기화하는 하이브리드 렌더링 구조를 설계했습니다.
  • 아직 정적 페이지가 생성되지 않은 신규 프로젝트는 404.html에서 slug를 판별해 클라이언트 렌더링하고, 이후 GitHub Actions 재배포를 통해 정적 페이지를 생성하도록 구성했습니다.
① 실시간 Admin CMS

① 실시간 Admin CMS

  • /admin 전용 관리자 UI를 통해 프로필·학력·경력·수상·프로젝트 콘텐츠 CRUD
  • 코드 및 Markdown 파일 수정 없이 포트폴리오 관리
  • 저장된 데이터를 방문자 화면에 즉시 반영
② 블록 기반 프로젝트 상세 페이지

② 블록 기반 프로젝트 상세 페이지

  • 제목, 본문, 기능 소개, 이미지, 이미지 갤러리, 영상, 코드, 강조 박스, 기술 스택, 링크 등 다양한 콘텐츠 블록 지원
  • 블록 순서를 기반으로 상세 페이지를 자유롭게 구성
  • 제목 블록을 활용한 자동 목차(TOC) 제공
③ 다국어 · 반응형 포트폴리오

③ 다국어 · 반응형 포트폴리오

  • 한국어/English 이중언어 콘텐츠 관리
  • 모바일·태블릿·데스크톱 반응형 레이아웃
  • Light/Dark Theme 지원
  • 600개 이상의 기술 스택 아이콘 자동 매핑

④ 이미지 및 미디어 최적화

  • 이미지 업로드 시 브라우저에서 WebP 변환 및 리사이징
  • 원본 이미지 크기를 저장하여 CLS 최소화
  • YouTube/Vimeo 콘텐츠는 poster-first 방식으로 지연 로딩
⑤ 보안 및 권한 제어

⑤ 보안 및 권한 제어

  • Supabase Authentication 기반 관리자 인증
  • Row Level Security(RLS)를 통한 데이터 접근 제어
  • 익명 사용자는 공개된 콘텐츠만 조회 가능
  • 관리자 계정에 한해 콘텐츠 생성·수정 권한 부여

Frontend

  • Next.js
  • TypeScript
  • Tailwind CSS

Backend / DB

  • Supabase

Auth / Security

  • Supabase Auth
  • Row Level Security

Deployment

  • Github Pages
  • Github Actions

Storage

  • Supabase Storage