제목은 바이브 코딩 알아보기로 하겠습니다. 근데 이제 LLM 모델을 곁들인

0. 인트로

최근 AI 서비스를 여러 곳에서 자주 활용되고 있는 것을 볼 수 있는데, 저 역시도 업무나 이력서를 정리할 때도 자주 사용하고 있습니다.
또한 최근에 본 카카오 기술 블로그 - AI야, 문서 좀 대신 써줘를 읽고 아이디어를 얻어 지피티 + 딥시크를 활용하여 바이브 코딩에 대해 설명하는 글을 작성하면 재밌지 않을까?라는 호기심에 작성해보고자 했습니다.

1. 바이브 코딩?

바이브 코딩(Vibe Coding)은 Andrej Karpathy가 2025년 2월에 소개한 개념으로 LLM을 사용해 자연어 프롬포트로 코드를 생성하는 방식입니다. 기존의 전통적인 코딩 방식에서 벗어나, 개발자가 자연어로 원하는 기능을 설명하면 AI가 이를 코드로 구현해주는 접근법입니다. 프로그래머는 직접 코드를 작성하지 않고 생성 코드를 테스트하고 수정하는 역할을 맡습니다.

예를 들어 "사용자 로그인 기능을 만들어줘"와 같은 자연어 지시만으로 AI가 기본 코드 구조를 생성하고 이를 바탕으로 세부 기능을 구현하거나 조정할 수 있습니다.

아래 코드는 챗지피티로 "리액트로 사용자 로그인 기능을 만들어줘"를 질문했을 때의 답변입니다.
예시 코드에 UI, 폼 입력 처리, 로그인 요청, 에러 처리까지 포함되어 있습니다.
또한 해당 코드 뿐만아니라 추가적인 팁도 함께 제공해줍니다.

import React, { useState } from 'react';

interface LoginFormState {
  email: string;
  password: string;
}

const LoginForm: React.FC = () => {
  const [form, setForm] = useState<LoginFormState>({ email: '', password: '' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || '로그인 실패');
      }

      const data = await res.json();
      localStorage.setItem('accessToken', data.accessToken);
      alert('로그인 성공!');
      // 예: navigate("/dashboard");
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="p-4 max-w-sm mx-auto bg-white rounded shadow">
      <h2 className="text-xl font-bold mb-4">로그인</h2>

      <label className="block mb-2">
        이메일
        <input
          type="email"
          name="email"
          value={form.email}
          onChange={handleChange}
          className="w-full border px-2 py-1 rounded mt-1"
          required
        />
      </label>

      <label className="block mb-2">
        비밀번호
        <input
          type="password"
          name="password"
          value={form.password}
          onChange={handleChange}
          className="w-full border px-2 py-1 rounded mt-1"
          required
        />
      </label>

      {error && <p className="text-red-500 text-sm mb-2">{error}</p>}

      <button
        type="submit"
        className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded"
        disabled={loading}
      >
        {loading ? '로그인 중...' : '로그인'}
      </button>
    </form>
  );
};

export default LoginForm;

1-1. AI 코딩 도구별 특징 비교

ChatGPT

• 코딩 외에도 다양한 작업이 가능하여 범용성이 뛰어납니다.
• 웹 브라우저에서 바로 사용가능하며 가장 많은 사용자와 예제를 보유하고 있습니다.
• 학습 목적의 코드 생성 및 설명, 코드 리뷰 및 개선 제안을 얻을 때 적합하게 사용할 수 있습니다.

Github Copilot

• 실시간으로 타이핑을 받으며 코드 제안을 해줍니다.
• 프로젝트 패턴을 이해하여 적절하게 코드를 제안합니다.
• 반복적인 코드 패턴이나 함수 자동 완성 등이 필요할 때 적합하게 사용할 수 있습니다.

Claude

• 대용량 코드 파일을 처리할 수 있으며 복잡한 코드 구조의 이해도가 높습니다.
• 코드 품질과 논리적 일관성이 뛰어납니다.
• 코드 품질을 검토하고나 대규모 리팩토링을 할 때 적합하게 사용할 수 있습니다.

Cursor

• 전용 IDE가 있으며 AI와 자연스러운 대화형 개발이 가능합니다
• 프로젝트 전체 맥락을 고려하여 코드를 생성합니다.
• 코드베이스의 전체적인 수정과 빠른 프로토타이핑이 필요할 때 적합하게 사용할 수 있습니다.

2. 바이브 코딩의 장점과 한계

짧은 문장 하나로 기능을 작성해주는 바이브 코딩의 장점과 한계에 대해 알아보겠습니다.

2-1. 장점

1. 반복적인 코드 작성과 보일러플레이트를 AI가 담당하기 때문에 개발 속도가 빨라집니다.
2. 초보 개발자도 복잡한 코드 구조를 이해하고 작성하는 데 도움을 받을 수 있습니다.
3. 기술적인 세부사항보다 문제 해결과 창의적 접근에 집중할 수 있습니다.
4. AI가 제안하는 최적화와 리팩토링으로 코드 품질을 향상시킬 수 있습니다.

2-2. 한계

1. 코드 생성에는 뛰어나지만 디버깅에는 여전한 약점이 존재합니다.
2. 프로토타이핑에는 뛰어나지만 대규모 시스템으로 확정하는 데는 한계가 있습니다.
3. 컨텍스트가 부족한 경우 엉뚱한 코드가 생성되거나 보안 이슈가 포함될 수 있습니다.

3. 프롬프트 작성 팁

AI가 정확하고 실용적인 코드를 생성하도록 만ㄷ르기 위해서는 상세하고 정확하게 지시해야 기대한 품질을 얻을 수 있습니다.

3-1. 기본 원칙: 5W1H + 기술 스택

📝 기본 구조
[역할] + [기술스택] + [구체적 기능] + [제약사항] + [출력 형식]
✅ 좋은 예시

React와 TypeScript를 사용해서 사용자 로그인 폼을 만들어줘.
- 이메일과 비밀번호 입력 필드 필요
- 유효성 검사 포함 (이메일 형식, 비밀번호 최소 8자)
- 로그인 버튼 클릭 시 /api/auth/login으로 POST 요청
- 로딩 상태 표시
- 에러 처리 및 성공 시 페이지 리다이렉트
- Tailwind CSS로 스타일링

❌ 나쁜 예시

로그인 만들어줘

3-2. 고급 프롬프트 기법

체인 오브 씽크 (Chain of Thought)
복잡한 로직을 단계별로 분해하여 요청하는 방법입니다.
사용자 대시보드를 만들고 싶어. 단계별로 접근해줘:

1단계: 레이아웃 구조 먼저 설계해줘 (헤더, 사이드바, 메인 컨텐츠)
2단계: 각 섹션별 컴포넌트 구조 정의
3단계: 데이터 흐름과 상태 관리 방안 제시
4단계: 최종 코드 구현

각 단계마다 설명과 함께 진행해줘.

퓨샷 러닝 (Few-Shot Learning)
구체적인 예시를 제공하여 패턴을 학습시키는 방법입니다.
다음과 같은 패턴으로 API 응답 처리 함수를 만들어줘:

예시 1:

- 함수명: fetchUserData
- 엔드포인트: /api/users/:id
- 응답: { id, name, email, avatar }
- 에러: 404일 때 "사용자를 찾을 수 없습니다" 메시지

예시 2:

- 함수명: fetchPostList
- 엔드포인트: /api/posts
- 응답: { posts: [], totalCount, currentPage }
- 에러: 500일 때 "서버 오류가 발생했습니다" 메시지

이 패턴으로 fetchCommentList 함수를 만들어줘.

역할 기반 프롬프트 (Role-Based Prompting)
AI에게 특정 역할을 부여하여 전문성을 높이는 방법입니다.

당신은 10년 경력의 시니어 React 개발자입니다.
주니어 개발자가 성능 최적화에 대해 문의했습니다.

다음 컴포넌트의 성능 문제점을 찾고 개선된 코드를 제시해주세요:
[기존 코드]

개선 사항을 설명할 때는:
1. 문제점 분석
2. 개선 방법
3. 성능상 이점
4. 주의사항
순서로 설명해주세요.

3. 컨텍스트 관리 기법

프로젝트 컨텍스트 제공

현재 프로젝트 정보:
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Prisma ORM
- PostgreSQL
- 인증: NextAuth.js

기존 폴더 구조:
/src
  /app
  /components
  /lib
  /types

이 구조에 맞게 블로그 CRUD 기능을 구현해줘.

기존 코드 패턴 유지
기존 API 라우트 패턴:

// /app/api/users/route.ts
export async function GET() {
  try {
    const users = await prisma.user.findMany();
    return NextResponse.json(users);
  } catch (error) {
    return NextResponse.json({ error: '서버 오류' }, { status: 500 });
  }
}

이 패턴을 따라서 /app/api/posts/route.ts를 만들어줘.

4. 직접 사용하며 느낀 점

코파일럿과 챗 지피티를 사내에서나 토이 프로젝트에서 자주 사용하고 있는 데, 보일러플레이트를 바로 작성해주고 생각보다 더 구체적으로 코드를 만들어줘서 놀랐습니다. 덕분에 시간이 절약되어 생산성이 크게 향상됨을 느꼈습니다.

UI 라이브러리를 쓰다보면 옵션을 사용할 때 찾아봐야하는 불편함이 있는데, 이를 물어보면 금방 해당 옵션이 포함된 코드를 생성해주어 매우 편리하다고 생각합니다. 하지만 제시해주는 코드를 적용하려면 수정해야하는 부분이 있을 뿐만 아니라 최근에는 슬롭 스쿼팅이라는 해킹 기법도 새로 성행하고 있기 때문에 작성한 코드를 개발자가 검토하여 반영하는 것에 주의를 가져야한다는 것을 느꼈습니다.

출처 및 참고

모두의 연구소
노말틱 - 바이브 코딩을 했을 뿐인데...AI를 활용한 해커들의 공격
카카오 기술블로그