바이브 코딩과 함께하는 깃헙 페이지 업데이트 ✨
이제 귀찮은 작업은 AI에게 맡기세요.
“더 이상 블로그를 방치하지 말자.”
그렇게 시작된 나의 깃헙 페이지 개편 프로젝트.
😅 변경 전 상황: 이력서 박제 블로그
기존 블로그는 사실상 이력서 호스팅용에 가까웠습니다.
- GatsbyJS 기반으로 만들고는 있었음
- SCSS + Bootstrap 조합으로 구성
- 가끔 Gatsby 메이저 버전 나오면 업그레이드만…
- "포스트 작성 기능?" → 귀찮아서 끔 😴
- Bootstrap 특유의 느낌도 점점 촌스럽게 느껴짐
목적은 개발 공유 & 커리어 관리였는데, 현실은 방치된 온라인 이력서였던 셈.
🛠️ 새롭게 하고 싶었던 것들
- Tailwind 기반의 더 모던한 디자인
- Markdown 기반의 편한 블로깅
- AI 도우미와 함께하는 생산성 향상
- 최소한의 내 노력, 최대한의 자동화
🤖 AI와 함께하는 ‘바이브 코딩’
프로젝트는 단순히 기술 리뉴얼이 아니라, 새로운 방식의 개발 실험이었습니다.
📁 .cursor/rules/
├── project-structure.mdc
└── style-guide.mdc
위 두 파일을 만들고 Cursor와 ChatGPT에게 프로젝트의 기준점을 제시한 후, 개발을 지시했어요.
🎯 내가 직접 한 일은?
- 전체 구조와 스타일 가이드 정의
- 반복 실수 방지용 피드백 제공
- 각 기능의 우선순위와 분할 작업 지시
- 최종 결과물만 리뷰하고 커밋
🧠 예시: Tailwind v4 헷갈림 해결
처음에는 Tailwind 스타일을 적용하라고 했지만, Cursor가 자꾸 v3 방식대로 가이드를 주더군요.
# 실제로 v4에서는 아래와 같이 init 해야 하는데…
npx tailwindcss init --ts
그래서 스타일 가이드(style-guide.mdc)에 Tailwind v4 기준을 명확하게 정리하고, 다음처럼 명시했습니다:
“Tailwind는 v4 기준으로 작성하며, 설정 구조 및 커스텀 변수 적용 방식은 v3와 다름.
@theme구문 및 새 config 작성법을 숙지할 것.”
📄 구조화된 프로젝트 예시
project-structure.mdc에는 블로그의 전체 구성과 각 디렉토리 역할이 정의되어 있습니다.
| 디렉토리 | 설명 |
|---|---|
src/pages |
실제 라우팅 되는 페이지들 |
src/components |
UI 컴포넌트 단위 |
src/app |
공통 전역 기능 (Layout, Theme 등) |
덕분에 Cursor가 새로운 기능을 추가하거나 리팩토링할 때 정확히 어느 폴더에 어떤 파일을 넣어야 하는지 실수 없이 따라올 수 있었어요.
💡 바이브 코딩 팁: 업무 분리 전략
Cursor를 쓸수록 느낀 점 하나: 일은 쪼개줘야 잘한다.
기능을 한 번에 요구하면 이상한 방식으로 뭉탱이 코드를 내놓는데, 단계별로 나누면 훨씬 정확하고 유연하게 작업함.
예를 들어 "아티클 기능 추가"는 다음과 같이 분리:
- 아티클 모델 정의 및 파일 생성
- 기본 렌더링 구조 구성
- 스타일 가이드 반영
- 기존 라우팅과 통합
이렇게 나눠서 커밋 단위도 명확하게 나뉘고, PR 관리도 쉬워졌습니다.
🎨 새롭게 바뀐 블로그 모습
(이미 변경된 디자인으로 보고 계실 테니 스샷은 생략)
- 간결하고 세련된 타이포그래피
- Mobile-first 레이아웃
- 커스텀 글 머리표와 CTA 디자인
📌 앞으로의 계획
- Cursor 기반 개발 방식 정리해서 템플릿으로 공유 예정
- Tailwind v4 팁 모음 및 스타일 가이드 공개
- 바이브 코딩 시리즈 연재 예정
🧑💻 마치며
이제는 귀찮은 작업도 AI에게 맡기고,
우리는 좀 더 창의적인 작업에 집중할 수 있는 시대입니다.
개발, 운영, 문서화까지 자동화의 시대.
“바이브 코딩”으로 일상 속 개발을 바꿔보세요!