GitHub를 CMS로 활용: 모듈식, 손쉬운 개발자 포트폴리오
발행: (2026년 2월 2일 오후 03:27 GMT+9)
4 min read
원문: Dev.to
Source: Dev.to
문제: 포트폴리오 회전
포트폴리오를 관리하고 새로 고치는 데 시간이 많이 소요됩니다. 많은 개발자들이 다음과 같은 어려움을 겪습니다:
- 지속적인 콘텐츠 업데이트
- 시각 자산 동기화 유지
- 변경 후 사이트 파손 방지
혁신: GitHub를 헤드리스 CMS로 활용
- 콘텐츠 – 로컬 MDX 파일에 저장됩니다.
- 자산 –
public/폴더에서 직접 관리하여 GitHub 실시간 미리보기가 가능합니다. Next.js가 이미지를 자동으로 최적화하므로 시각 자료 처리에 따르는 번거로움이 사라집니다. - 검증 – Velite가 강제합니다; 형식이 맞지 않는 데이터(예: 프로젝트 날짜 누락)는 GitHub Action이 PR 검사를 실패하게 하여 빌드 파손을 방지합니다.
Google AI 도구 활용
- Google Gemini Pro – 심층 연구, 데이터 분석, 보고서 작성에 사용되었습니다. 포트폴리오의 일반적인 문제점을 파악하고 기술 스택 선택, 타당성 평가, 위험 완화에 대한 가이드를 제공했습니다.
- Google Antigravity agents – 추가 자동화를 위해 통합되었습니다(세부 내용은 생략).
기술 스택
| 구성 요소 | 기술 |
|---|---|
| 프레임워크 | Next.js 16.1 (App Router) with React 19 |
| 스타일링 | Tailwind CSS v4.1 – CSS‑first 설정, 즉시 테마 적용을 위한 의미론적 변수 |
| 콘텐츠 레이어 | Velite 0.1.8 + Zod – MDX 파일에 대한 엄격한 빌드‑시 스키마 검증 |
| 배포 | Docker 로 컨테이너화, Google Cloud Run 에 배포, GitHub에서 연속 배포 파이프라인 운영 |
“자율 주행” 저장소
GitHub 자체가 CMS 역할을 합니다:
- 콘텐츠와 이미지는 전부 GitHub Web UI를 통해 업데이트됩니다.
- 안전한 업데이트(린터, 타입 체크)는 자동으로 병합됩니다.
- 프레임워크 업그레이드는 수동 검토를 위해 표시되어, 지속적인 유지보수 없이 포트폴리오가 진화하도록 합니다.
조합 가능한 LEGO 아키텍처
사이트는 모듈식 “블록”(예: Hero, Gallery, Testimonials)으로 구성됩니다. 모든 블록은 하나의 파일(page.tsx)에 조립되어 복잡한 코드를 건드리지 않고도 무한히 재배열할 수 있습니다.
고성능 시각 자료
- Lighthouse 점수는 지속적으로 **98+**를 기록합니다.
- 커스텀 MDX 이미지 가로채기 컴포넌트가 Cumulative Layout Shift (CLS) 를 제거하여 업로드된 이미지가 부드럽고 일관되게 렌더링됩니다.
기술 심층 분석
Google AI 덕분에 이번 리프레시의 동기가 생겼습니다. 이 솔루션은 개인적인 고통점을 해결할 뿐만 아니라, 유지보수가 적고 고성능 포트폴리오를 원하는 다른 개발자들에게 재사용 가능한 패턴을 제공합니다.