오토프로그1강: 바이브 코딩이 뭔가요?
AI에게 방향만 알려주면 코드가 완성돼요
5분 뒤 내 화면에 생기는 것
오늘 끝나면 이런 걸 갖게 돼요: 내 이름과 소개가 들어간 웹페이지가 컴퓨터 화면에 떠요. 코드를 직접 쓰거나 터미널을 열 필요는 없어요.
먼저 claude.ai에 로그인하세요. 클로드 같은 인공지능(AI)에게 아래 문장을 붙여 넣고 시작해요.
먼저 한 줄로 시켜 볼게요
클로드에게 이렇게 말하세요.
자기소개 페이지 만들어줘
이 한 줄만 받으면 클로드가 이름, 디자인, 넣을 내용을 모두 추측해요. 원하는 모습과 달라도 다음 결과와 비교만 하면 돼요.
이번에는 방향을 알려주세요
새 대화를 열고 아래 프롬프트를 붙여 넣으세요. 대괄호 안은 자기 정보로 바꾸면 돼요.
HTML(웹페이지의 뼈대를 만드는 언어)과 CSS(웹페이지를 꾸미는 언어)를 한 파일에 담아 달라는 요청이에요.
HTML과 CSS로 자기소개 페이지를 만들어줘.구조:1. 히어로 섹션(페이지 맨 위 대문 영역): 이름 "[내 이름]", 한 줄 소개 "[나를 소개하는 한 문장]"2. 소개 섹션: 3개 카드로 "[내가 하는 일 1]", "[내가 하는 일 2]", "[내가 하는 일 3]"3. 연락처 섹션: 이메일, GitHub(코드 저장 서비스), LinkedIn(링크드인, 경력 공유 서비스) 아이콘디자인:- 어두운 배경 (#0a0a0a)- 포인트 색상은 청록빛 (#00e5ff)- 폰트는 깔끔한 산세리프(삐침 없는 깔끔한 글꼴)- 모바일 반응형(휴대폰 화면에서도 깨지지 않게)파일 하나에 HTML과 CSS를 같이 넣고, 완성된 코드는 코드 블록 하나로 보여줘.
두 요청의 차이는 코딩 지식이 아니에요. 무엇을 만들지, 무엇을 넣을지, 어떤 모습일지 알려줬다는 점이에요.
만든 페이지를 열어볼까요?
로그인, 코드 복사와 저장, 파일 열기는 사람이 해야 해요. 이것만 직접 하시면 나머지는 클로드가 해요.
- 클로드가 만든 코드 블록을 복사해요.
- 컴퓨터에서 메모장이나 텍스트 편집기를 열고 붙여 넣어요.
- 파일 이름을
index.html로 저장해요. - 저장한 파일을 더블클릭해요.
윈도우 메모장에서 이름 뒤에 .txt가 붙으면 파일 형식을 모든 파일로 바꾸고 index.html로 다시 저장하세요.
브라우저에 자기소개 화면이 보이면 끝나요. 코드는 클로드가 쓰고, 여러분은 방향을 정했어요.
이게 바이브 코딩이에요
운전자는 엔진을 조립하지 않아도 목적지를 정하고 차를 움직여요. 바이브 코딩(Vibe Coding, 느낌을 말로 전해 만드는 개발 방식)도 비슷해요.
AI가 코드를 쓰고, 사람은 목적지와 조건을 알려줘요. 결과를 본 뒤 "이 부분은 바꿔줘"라고 말하며 다듬어요.
전통 코딩과는 이렇게 달라요.
| 전통 코딩 | 바이브 코딩 | |
|---|---|---|
| 하는 일 | 코드를 직접 한 줄씩 입력 | 원하는 결과를 AI에게 설명 |
| 필요한 지식 | 프로그래밍 언어 문법, 알고리즘(문제 해결 절차) | 만들고 싶은 것과 필요한 조건 |
| 문제가 생기면 | 코드를 읽고 직접 수정 | 오류를 AI에게 보여주고 수정 요청 |
AI는 유능한 신입사원과 닮았어요. 여러 프로그래밍 언어로 일할 수 있지만, 우리에게 필요한 결과가 무엇인지는 먼저 알려줘야 해요.
왜 바이브 코딩이라고 부를까요?
안드레이 카파시(Andrej Karpathy)가 2025년 2월 X(옛 트위터)에 소개한 표현이에요. 카파시는 OpenAI(ChatGPT를 만든 회사) 공동 창립 멤버이자 테슬라에서 AI를 이끌었던 인물이에요.
그는 코드가 있다는 사실도 잊고 느낌에 맡기는 새로운 코딩 방식을 이야기했어요. 이 표현은 2025년 콜린스 영어사전 올해의 단어로 선정됐어요.
2026년 2월에는 AI 에이전트(여러 작업을 스스로 이어서 처리하는 AI)로 프로그래밍하는 방식이 전문가들의 기본 작업 방식이 되어가고 있다고 말했어요.
이번 강에서 기억할 것
- 바이브 코딩에서는 AI가 코드를 쓰고, 사람은 방향을 정해요.
- "알아서 해줘"보다 내용과 디자인을 구체적으로 말할수록 원하는 결과에 가까워져요.
- 코드를 몰라도 결과를 확인하고, 바꿀 부분을 말하면 돼요.
저희가 이 방식으로 만들어 회사에서 쓰는 모습은 자동화 사례에서 볼 수 있어요. 견적서 작성, 블로그 발행, 주문 처리 사례가 있어요.
이런 분께 추천해요
코딩은 몰라도 아이디어를 화면으로 확인하고 싶은 사장님·직장인·예비창업자에게 맞아요.
이 강의, 영상으로도 있어요
글로 이해하기 어려웠던 부분은 10분 영상으로도 볼 수 있어요.
참고 링크
- Andrej Karpathy의 원문 트윗: x.com/karpathy — vibe coding
- Claude AI (무료 체험): claude.ai
- 바이브 코딩 위키백과: Vibe coding — Wikipedia
- IBM의 바이브 코딩 해설: What is Vibe Coding? — IBM
다음 강
2강: AI 시대의 기본 용어에서는 AI에게 시킬 때 필요한 말 몇 개를 생활 비유로 익혀요.