포스트

[Side Project] 바이브 코딩으로 구축한 제로 코스트(0원) 포트폴리오 & 취미 아카이브

AI와의 대화(바이브 코딩)를 통해 유지 비용 없이 업무 포트폴리오와 취미 프로젝트를 이원화하여 관리하는 정적 웹 아카이브 구축기

한 줄 요약: 별도의 웹 개발 지식이나 유지 비용(0원) 없이, AI와의 대화(바이브 코딩)를 통해 업무 포트폴리오와 업무 외 취미 프로젝트를 이원화하여 관리·공유할 수 있는 개인 정적 웹 아카이브를 구축했습니다.

1. 기획 배경 및 운영 방향성

커리어와 직무 역량을 정리하는 업무 포트폴리오 공간과, 평소 취미로 진행하는 바이브 코딩 결과물 및 사이드 프로젝트를 체계적으로 기록할 개인 공간이 필요했습니다. 상용 SaaS(Notion 등) 대신 아래 4가지 기준을 충족하는 맞춤형 웹 환경을 직접 구축했습니다.

  • 유지 비용 Zero (0원): 서버비나 구독료 없이 영구적으로 무료 운영 가능한 구조
  • 데이터 영속성: 특정 플랫폼 정책에 종속되지 않고 로컬 PC에 원본 마크다운(.md) 자산이 온전히 보관되는 형태
  • 원활한 편집 환경: 복잡한 코드 수정 없이 로컬 메모장(Obsidian)에서 작성하면 웹에 즉시 반영되는 워크플로우
  • 콘텐츠 이원화 운영:
    1. 업무 포트폴리오 (Portfolio): 직무 역량, 운영 프로세스 개선, 문제 해결 회고 공유
    2. 취미 아카이브 (Side-Project): 업무 외 시간에 바이브 코딩으로 제작한 토이 프로젝트 및 실험 결과물 기록

2. 기술 스택 및 아키텍처

AI와 협업하며 유지보수 리소스를 최소화한 노코드·로우코드 파이프라인을 설계했습니다.

구분사용 도구 / 기술선정 이유 및 역할
호스팅 (Hosting)GitHub Pages무료 정적 웹 호스팅 및 버전 관리
웹 엔진 / 테마Jekyll (Chirpy Theme)마크다운 기반 자동 빌드 및 다크모드·검색·카테고리 기본 지원
로컬 에디터 (CMS)Obsidian직관적인 마크다운 편집 및 로컬 지식 베이스 관리
배포 파이프라인GitHub Desktop클릭 두 번(Commit → Push)으로 로컬 작성 글을 웹에 즉시 배포

3. 카테고리 이원화 설계 및 예시

단일 웹사이트 안에서 방문자가 목적에 맞게 글을 탐색할 수 있도록 카테고리와 태그 체계를 분리했습니다.

구분카테고리 / 태그 구조주요 게시 콘텐츠
업무 포트폴리오Portfolio, WorkCS·운영 관리 프로젝트, 업무 자동화 파이프라인 설계 및 정량적 성과 회고
취미 아카이브Side-Project, Vibe-Coding업무 외 취미로 제작한 웹/앱 토이 프로젝트, 바이브 코딩 제작기 및 실험 로그

4. 진행 회고 및 향후 계획

  • 개발 진입장벽 해소: 프론트엔드/백엔드 환경을 바닥부터 구축하지 않아도, 명확한 구조 설계와 AI 피드백 루프만으로 목적에 딱 맞는 개인 플랫폼을 단기간에 완성할 수 있었습니다.
  • 지속적인 콘텐츠 확장: 앞으로 업무 영역의 핵심 프로젝트 회고와 더불어, 취미로 만들어가는 다양한 바이브 코딩 결과물들을 이곳에 꾸준히 아카이빙할 예정입니다.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.