[Side Project] 바이브 코딩으로 구축한 제로 코스트(0원) 포트폴리오 & 취미 아카이브
AI와의 대화(바이브 코딩)를 통해 유지 비용 없이 업무 포트폴리오와 취미 프로젝트를 이원화하여 관리하는 정적 웹 아카이브 구축기
한 줄 요약: 별도의 웹 개발 지식이나 유지 비용(0원) 없이, AI와의 대화(바이브 코딩)를 통해 업무 포트폴리오와 업무 외 취미 프로젝트를 이원화하여 관리·공유할 수 있는 개인 정적 웹 아카이브를 구축했습니다.
1. 기획 배경 및 운영 방향성
커리어와 직무 역량을 정리하는 업무 포트폴리오 공간과, 평소 취미로 진행하는 바이브 코딩 결과물 및 사이드 프로젝트를 체계적으로 기록할 개인 공간이 필요했습니다. 상용 SaaS(Notion 등) 대신 아래 4가지 기준을 충족하는 맞춤형 웹 환경을 직접 구축했습니다.
- 유지 비용 Zero (0원): 서버비나 구독료 없이 영구적으로 무료 운영 가능한 구조
- 데이터 영속성: 특정 플랫폼 정책에 종속되지 않고 로컬 PC에 원본 마크다운(
.md) 자산이 온전히 보관되는 형태 - 원활한 편집 환경: 복잡한 코드 수정 없이 로컬 메모장(Obsidian)에서 작성하면 웹에 즉시 반영되는 워크플로우
- 콘텐츠 이원화 운영:
- 업무 포트폴리오 (
Portfolio): 직무 역량, 운영 프로세스 개선, 문제 해결 회고 공유 - 취미 아카이브 (
Side-Project): 업무 외 시간에 바이브 코딩으로 제작한 토이 프로젝트 및 실험 결과물 기록
- 업무 포트폴리오 (
2. 기술 스택 및 아키텍처
AI와 협업하며 유지보수 리소스를 최소화한 노코드·로우코드 파이프라인을 설계했습니다.
| 구분 | 사용 도구 / 기술 | 선정 이유 및 역할 |
|---|---|---|
| 호스팅 (Hosting) | GitHub Pages | 무료 정적 웹 호스팅 및 버전 관리 |
| 웹 엔진 / 테마 | Jekyll (Chirpy Theme) | 마크다운 기반 자동 빌드 및 다크모드·검색·카테고리 기본 지원 |
| 로컬 에디터 (CMS) | Obsidian | 직관적인 마크다운 편집 및 로컬 지식 베이스 관리 |
| 배포 파이프라인 | GitHub Desktop | 클릭 두 번(Commit → Push)으로 로컬 작성 글을 웹에 즉시 배포 |
3. 카테고리 이원화 설계 및 예시
단일 웹사이트 안에서 방문자가 목적에 맞게 글을 탐색할 수 있도록 카테고리와 태그 체계를 분리했습니다.
| 구분 | 카테고리 / 태그 구조 | 주요 게시 콘텐츠 |
|---|---|---|
| 업무 포트폴리오 | Portfolio, Work | CS·운영 관리 프로젝트, 업무 자동화 파이프라인 설계 및 정량적 성과 회고 |
| 취미 아카이브 | Side-Project, Vibe-Coding | 업무 외 취미로 제작한 웹/앱 토이 프로젝트, 바이브 코딩 제작기 및 실험 로그 |
4. 진행 회고 및 향후 계획
- 개발 진입장벽 해소: 프론트엔드/백엔드 환경을 바닥부터 구축하지 않아도, 명확한 구조 설계와 AI 피드백 루프만으로 목적에 딱 맞는 개인 플랫폼을 단기간에 완성할 수 있었습니다.
- 지속적인 콘텐츠 확장: 앞으로 업무 영역의 핵심 프로젝트 회고와 더불어, 취미로 만들어가는 다양한 바이브 코딩 결과물들을 이곳에 꾸준히 아카이빙할 예정입니다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.