AI 에디터(Cursor 등)를 활용하여 코드를 생성하며 개발을 진행하는 'Vibe Coding'은 빠른 개발을 실현하지만, 적절한 설계나 프롬프트 관리를 하지 않을 경우 컴포넌트의 비대화, 컨텍스트 파탄, 배포 시 빌드 오류가 빈번하게 발생합니다.
본 글에서는 Vibe Coding을 사용하여 개인 개발을 진행할 때의 실질적인 워크플로우, 설계 절차, Cursor 규칙 설정, 그리고 배포까지의 흐름을 설명합니다.
-
Vibe Coding이 무너지지 않도록 하는 사전 설계와 프로젝트 구조
-
Cursor의 .cursorrules를 활용한 AI 지시 표준화 - 요구사항 정의부터 구현, 테스트, Vercel 배포까지 구체적인 절차
-
개발 시 자주 발생하는 트러블과 대처법
-
Cursor 등의 AI 지원 에디터를 이용해 개인 개발을 하고 싶은 엔지니어
-
Next.js (App Router) / TypeScript / Tailwind CSS의 기본 지식이 있는 분
Vibe Coding에서는 AI에게 모든 코드를 한 번에 생성하게 하기보다, 컴포넌트 단위나 기능 단위로 단계적으로 코드 생성을 진행하는 것이 중요합니다.
루트 디렉터리에 .cursorrules (또는 .cursor/rules 내의 규칙 파일)을 생성하여 AI가 출력한 코드의 일관성을 유지해야 합니다.
{
"instruction": "You are an expert in Next.js App Router, TypeScript, and Tailwind CSS.",
"rules": [
...
먼저 뼈대가 되는 디렉터리 구조를 생성하게 합니다.
프롬프트 예시:
Next.js (App Router)로 할 일 관리(Task Management) 앱을 만듭니다. 다음 요구사항을 충족하는 최소한의 디렉터리 구조를 정의해 주세요.
- 할 일 목록 표시, 추가, 삭제 기능
- TypeScript 대응
- UI 컴포넌트와 데이터 처리의 분리
AI에게 먼저 데이터 타입을 정의하게 하여 사양의 흐트러짐을 방지합니다.
// src/types/task.ts
export interface Task {
id: string;
...
단일 책임 원칙(Single Responsibility Principle)에 따라 코드를 작게 나누어 작성하게 합니다.
// src/components/TaskItem.tsx
import React from 'react';
import { Task } from '@/types/task';
...
로컬에서 빌드 오류가 없는지 사전에 확인합니다.
# 타입 체크와 린터 실행
npm run lint
# 프로덕션 빌드 확인
...
# Vercel CLI 설치 (미설치 시)
npm install -g vercel
# 로그인
...
| 트러블 현상 | 원인 | 대처 방법 |
|---|
| AI가 오래된 문법(Pages Router 등)을 출력함 | 컨텍스트 부족 | .cursorrules에 App Router 사용 명시를 철저히 할 것 |
| 빌드 시 TypeScript 타입 에러 발생 | AI가 일시적으로 any나 불일치한 타입을 생성함 | tsconfig.json의 strict: true를 활성화하고, 오류가 난 부분을 직접 AI에게 전달하여 수정 요청을 할 것 |
| 하이드레이션 에러 발생 | Client/Server 컴포넌트 경계 또는 Date.now() 등의 불일치 | 'use client' 디렉티브 배치를 재검토하고, 렌더링 결과의 불일치를 해소할 것 |
.cursorrules를 루트에 배치하여 사용 기술이나 코딩 규약을 정의했는지 - 타입 정의(TypeScript)를 구현 전에 작성하게 했는지- 컴포넌트 단위로 코드 생성과 수동 리뷰를 진행하고 있는지
- 민감 정보(API 키 등)가
.env.local에 분리되어 있고, .gitignore에 포함되어 있는지 - npm run build가 오류 없이 통하는지 확인했는지 - 배포처(Vercel 등)의 환경 변수가 설정되어 있는지
Vibe Coding은 모든 것을 AI에게 맡기는 것이 아니라, '전체 타입 정의와 구조 설계'를 사람이 지시하고 개별적인 코드 생성을 AI에게 위임함으로써 최대의 효과를 발휘합니다. 적절한 규칙 설정과 확인 플로우를 도입하여 개발을 진행해 보세요.
참고: 사용되는 라이브러리나 툴체인의 최신 사양에 대해서는 각 공식 문서(Next.js, Vercel 등)를 확인해 주십시오.
