AI 코딩 시작하기

AI 도구 설치부터 첫 번째 앱 만들기까지, 바이브 코딩의 모든 것.

Ad Space — guide-start-top

01바이브 코딩이란?

바이브 코딩(Vibe Coding)은 AI에게 자연어로 설명해서 코드를 생성하는 방식입니다. 프로그래밍 경험이 없어도 아이디어를 현실로 만들 수 있습니다.

과거에는 코딩을 배우려면 몇 달간 문법을 공부해야 했습니다. 바이브 코딩에서는 '블로그를 만들고 싶어'라고 말하면 AI가 수백 줄의 코드를 생성합니다.

핵심은 좋은 를 작성하는 것입니다. AI에게 명확하게 원하는 것을 설명할수록 더 좋은 결과를 얻습니다. (프롬프트 예시 보기)

바이브 코딩으로 만들 수 있는 것들:

개인 블로그

쇼핑몰

SaaS 서비스

포트폴리오

커뮤니티

AI 챗봇

대시보드

랜딩 페이지

😅개발자솔직한 감정

솔직히 말하면, 경험 많은 개발자도 AI 코딩 도구를 처음 쓰면 놀랍니다. "이걸 이렇게 빨리 만들어준다고?" 하는 감정이요. 하지만 동시에 "이 코드가 진짜 맞나?" 하는 불안감도 있습니다. 이 두 감정은 정상입니다.

02AI 코딩 도구 선택

가장 많이 사용되는 AI 코딩 도구 3가지:

Cursor

무료 / $20/월

AI가 내장된 코드 에디터. VS Code 기반으로 익숙함. 가장 추천.

코드를 보면서 AI와 대화할 수 있어서 수정 결과를 바로 확인할 수 있습니다. VS Code를 써본 적 있다면 가장 자연스럽게 시작할 수 있습니다.

Claude (Anthropic)

무료 / $20/월

긴 대화에 강함. 복잡한 코드 생성과 디버깅에 탁월.

복잡한 로직이나 긴 코드를 이해하는 능력이 뛰어납니다. 특히 프로젝트 전체 구조를 파악하고 여러 파일을 한 번에 수정할 때 강합니다.

ChatGPT (OpenAI)

무료 / $20/월

가장 대중적. 다양한 언어와 프레임워크 지원.

가장 많은 사람이 사용해서 관련 자료와 팁이 풍부합니다. 코딩 외에도 기획, 디자인 아이디어 등 다양한 용도로 활용할 수 있습니다.

💡 Tip: 처음이라면 Cursor를 추천합니다. 코드 에디터 안에서 바로 AI와 대화할 수 있어 편리합니다. 더 자세한 비교는 AI 모델 비교를 참고하세요.

🧑‍💻개발자이렇게 접근해요

개발자들은 도구를 선택할 때 "커뮤니티가 활발한가?", "문서가 잘 되어 있나?"를 먼저 봅니다. 도구 자체의 성능보다 "막혔을 때 답을 찾을 수 있는가?"가 더 중요하거든요. 그래서 처음에는 사용자가 많은 도구부터 시작하는 게 좋습니다.

Ad Space — guide-start-mid

03개발 환경 설정

코딩을 시작하기 전에 설치해야 할 것들:

🖥️ 터미널이란?

터미널은 텍스트로 컴퓨터에 명령을 내리는 프로그램입니다. 마우스 대신 글자를 입력해서 파일을 만들거나, 프로그램을 실행하거나, 도구를 설치합니다.

Mac

상단 오른쪽 🔍 클릭 → "터미널" 입력 → 검은 창이 열림

Windows

시작 메뉴 → "PowerShell" 검색 → 파란 창이 열림

1Node.js 설치: nodejs.org에서 LTS 버전 다운로드. — JavaScript 코드를 실행하는 엔진입니다. 웹 앱의 서버 부분을 동작시키는 데 필수입니다.
2패키지 매니저: Node.js 설치하면 npm이 함께 설치됩니다. pnpm을 추천하지만 npm도 충분합니다. — 다른 개발자가 만든 코드(라이브러리)를 쉽게 설치하고 관리하는 도구입니다. 앱스토어처럼 필요한 기능을 검색해서 설치합니다.
3코드 에디터: Cursor (cursor.com) 또는 VS Code (code.visualstudio.com) 설치.
4Git 설치: git-scm.com에서 다운로드. — 코드의 변경 이력을 기록하는 도구입니다. 실수로 코드를 망쳐도 이전 상태로 되돌릴 수 있습니다. 게임의 세이브 포인트와 같습니다.
5GitHub 계정: github.com에서 가입. — Git으로 관리하는 코드를 온라인에 저장하는 곳입니다. 백업 역할을 하고, Vercel 같은 배포 서비스와 자동으로 연동됩니다.

😅개발자솔직한 감정

개발 환경 설정은 현직 개발자도 귀찮아하는 작업입니다. "코드를 짜고 싶은데 설정만 하고 있네..." 하는 감정은 누구나 같아요. 한 번 설정하면 다시 안 해도 되니까 참고 넘어가세요.

04첫 번째 앱 만들기

환경 설정이 끝났다면, AI에게 첫 앱을 만들어달라고 해봅시다:

1Cursor를 열고 새 폴더를 만듭니다.
2터미널을 열고 'npx create-next-app@latest my-app'을 실행합니다.
3AI에게 원하는 기능을 설명합니다: '간단한 할 일 관리 앱을 만들어줘. 할 일 추가, 완료, 삭제 기능.'
4AI가 생성한 코드를 확인하고, 'npm run dev'로 실행합니다.
5브라우저에서 localhost:3000을 열어 결과를 확인합니다.
6수정이 필요하면 AI에게 '여기서 X를 Y로 바꿔줘'라고 요청합니다.

💡 명령어 뜻 풀이

npx — npm에 있는 도구를 바로 실행하는 명령어

create-next-app — Next.js 프로젝트를 자동으로 만들어주는 도구

npm run dev — 개발 서버 시작. 내 컴퓨터에서 앱을 미리 보는 것

localhost:3000 — "내 컴퓨터의 3000번 문"이라는 뜻. 브라우저 주소창에 입력하면 내 앱이 보임

💡 Tip: 한 번에 완벽한 결과를 기대하지 마세요. AI와 대화하며 조금씩 수정하는 것이 바이브 코딩의 핵심입니다. 다양한 프롬프트 예시는 프롬프트 라이브러리에서 확인하세요.

05좋은 프롬프트 작성법

❌ 나쁜 예

웹사이트 만들어줘

✅ 좋은 예

Next.js와 Tailwind CSS로 포트폴리오 웹사이트를 만들어줘. 프로젝트 3개를 보여주는 카드 섹션, 자기소개, 연락처 폼을 포함해줘.

❌ 나쁜 예

에러 고쳐줘

✅ 좋은 예

다음 에러를 고쳐줘: [에러 메시지]. 현재 Next.js 16을 사용중이고, 이 에러는 페이지를 새로고침할 때 발생해.

❌ 나쁜 예

더 좋게 만들어줘

✅ 좋은 예

이 페이지의 로딩 속도를 개선해줘. 이미지 최적화, 코드 스플리팅, 불필요한 리렌더링 제거를 해줘.

❌ 나쁜 예

스타일 바꿔줘

✅ 좋은 예

메인 페이지의 배경을 흰색에서 연한 그레이(#f9fafb)로 바꾸고, 카드에 그림자(shadow-md)를 추가해줘. 전체적으로 깔끔한 SaaS 스타일로.

❌ 나쁜 예

DB 연결해줘

✅ 좋은 예

Supabase PostgreSQL을 연결하고, users 테이블(id, email, name, created_at)과 posts 테이블(id, title, content, author_id, created_at)을 만들어줘. Prisma ORM을 사용해줘.

💭개발자이렇게 생각해요

개발자도 AI에게 요청할 때 첫 시도에서 완벽한 결과를 기대하지 않습니다. 보통 3-5번은 수정 요청을 합니다. "한 번에 안 되면 내가 잘못한 건가?"라고 생각하지 마세요. 반복 수정이 정상적인 프로세스입니다.

AI 코딩 시작하기

01바이브 코딩이란?

02AI 코딩 도구 선택

Cursor

Claude (Anthropic)

ChatGPT (OpenAI)

03개발 환경 설정

🖥️ 터미널이란?

04첫 번째 앱 만들기

05좋은 프롬프트 작성법

관련 콘텐츠

프롬프트 템플릿

스택 추천기

서비스 연결하기

AI 모델 비교