AI 바이브 코딩, 한 달 걸리던 블로그를 하루 만에 만들다

최근 Claude Code를 활용해 블로그를 만들어봤습니다. 이전에 Next.js로 비슷한 블로그를 만들 때 한 달 넘게 걸렸던 작업이 하루 만에 끝났습니다. AI를 활용한 개발, 이른바 "바이브 코딩"을 직접 경험한 후기를 공유합니다.

바이브 코딩이란?

바이브 코딩(Vibe Coding)은 AI와 대화하며 코드를 작성하는 새로운 개발 방식입니다. 세세한 구현보다 전체적인 방향과 의도를 전달하고, AI가 코드를 생성하면 개발자가 검토하고 피드백하는 협업 형태입니다.

코딩 프로세스 비교

한 달 vs 하루: 체감 생산성

이전 프로젝트 (Next.js 블로그)

이번 프로젝트 (React + Claude Code)

생산성이 대략 25배 이상 증가한 셈입니다.

팀장이 된 기분

Claude Code를 사용하면서 느낀 점은 마치 프론트엔드 개발 팀장이 된 것 같았습니다.

실제 협업 느낌

나: "블로그 검색 기능 추가해줘.
    시리즈는 !로, 카테고리는 @로, 태그는 #으로 필터링하고 싶어."

Claude: (검색 파서 구현, 컴포넌트 연동, URL 쿼리 파라미터 처리...)

나: "AND/OR 조건도 지원해줘. 괄호로 우선순위도."

Claude: (AST 기반 재귀 하강 파서로 재구현...)

마치 팀원에게 요구사항을 전달하고 결과물을 리뷰하는 과정과 유사했습니다.

바닐라 상태로도 충분

특별한 에이전트 설정이나 플러그인 없이 기본 Claude Code만으로도 이 정도 생산성을 낼 수 있다는 게 놀라웠습니다. 앞으로 더 배우고 튜닝하면 효율이 더 올라갈 것 같습니다.

• 커스텀 프롬프트 최적화
• MCP 서버 연동
• 프로젝트별 컨텍스트 설정
• 워크플로우 자동화

중요한 깨달음: AI를 쓰려면 해당 분야를 알아야 한다

바이브 코딩이 만능은 아닙니다. 오히려 해당 분야에 대한 이해가 필수라는 걸 깨달았습니다.

왜 전문 지식이 필요한가

1. 중간 검토가 필수

AI가 생성한 코드를 그대로 수락하면 안 됩니다. 구현 방향이 맞는지, 더 좋은 방법은 없는지 확인이 필요합니다.

// AI가 제안한 코드
const data = await fetch('/api/data');
const json = await data.json();
setData(json);

// 리뷰 후 수정 - 에러 처리, 로딩 상태 추가
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

try {
  setLoading(true);
  const data = await fetch('/api/data');
  if (!data.ok) throw new Error('Failed to fetch');
  const json = await data.json();
  setData(json);
} catch (e) {
  setError(e.message);
} finally {
  setLoading(false);
}

2. 보안 위협 가능성

AI가 보안에 취약한 코드를 생성할 수 있습니다.

// 위험한 예시 - XSS 취약점
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// SQL Injection 가능성
const query = `SELECT * FROM users WHERE id = ${userId}`;

이런 코드가 섞여 있어도 모르면 그냥 넘어갈 수 있습니다.

3. 비효율적인 구현

동작은 하지만 성능이나 유지보수 측면에서 좋지 않은 코드가 나올 수 있습니다.

// 비효율적 - 매 렌더링마다 필터링
{posts.filter(p => p.category === selected).map(p => ...)}

// 개선 - useMemo로 캐싱
const filteredPosts = useMemo(
  () => posts.filter(p => p.category === selected),
  [posts, selected]
);

바이브 코딩을 잘하는 방법

경험을 통해 느낀 효과적인 AI 활용법입니다.

1. 명확한 요구사항 전달

❌ "검색 기능 만들어줘"

✅ "블로그 검색 기능 추가해줘.
   - 제목, 내용에서 키워드 검색
   - !시리즈명, @카테고리, #태그 필터
   - URL 쿼리 파라미터로 상태 유지
   - 디바운스 적용"

2. 점진적 구현

한 번에 모든 것을 요청하기보다 단계별로 진행합니다.

1. 기본 기능 구현
2. 동작 확인
3. 추가 기능 요청
4. 리팩토링

3. 적극적인 리뷰

생성된 코드를 꼼꼼히 검토합니다.

• 로직이 의도대로인가?
• 예외 처리가 되어있는가?
• 성능 문제는 없는가?
• 보안 취약점은 없는가?

4. 컨텍스트 공유

프로젝트 구조, 코딩 컨벤션, 기술 스택 등을 미리 공유하면 더 일관된 결과를 얻을 수 있습니다.

앞으로의 계획

AI 코딩 도구는 계속 발전하고 있습니다. 앞으로도 적극적으로 활용할 예정입니다.

더 배워볼 것들

• 프롬프트 엔지니어링: 더 효과적인 요청 방법
• MCP 서버: 외부 도구 연동으로 기능 확장
• 커스텀 설정: 프로젝트별 최적화된 설정
• 자동화: 반복 작업 워크플로우 구성

활용 예정 영역

• 사이드 프로젝트 빠른 프로토타이핑
• 보일러플레이트 코드 생성
• 리팩토링 및 코드 리뷰
• 문서화 및 테스트 코드 작성

마무리

AI를 활용한 바이브 코딩은 확실히 생산성을 크게 높여줍니다. 하지만 마법의 도구가 아닙니다.

핵심은 이것입니다:

AI는 강력한 도구지만, 도구를 잘 쓰려면 그 분야를 알아야 한다.

개발 지식이 있어야 올바른 방향을 제시하고, 결과물을 검증하고, 문제를 발견할 수 있습니다. AI가 개발자를 대체하는 게 아니라, 개발자의 능력을 증폭시켜주는 것입니다.

앞으로도 AI와 함께 더 많은 것을 만들어볼 예정입니다. 여러분도 한번 경험해보세요!