1. 바이브 코딩이란

한 줄 요약
AI에게 원하는 화면을 설명하고, 결과를 보며 고치는 과정을 알아봅니다.
예상 읽기·실습 시간
8~12분 · 개인차 있음
읽는 방식
설명과 사례

짧게 체험하고 읽고 싶다면 먼저 화면 하나 만들어 보기에서 제목 한 줄을 만들어 보세요. 설명부터 읽어도 좋습니다.

말로 설명하고 화면을 만드는 방법

친구들과 읽은 책을 한곳에 모으고 싶다고 해 봅시다. 책 제목과 짧은 감상을 보여 주는 화면은 떠올릴 수 있지만, 만드는 방법은 모를 수 있습니다.

바이브 코딩은 만들고 싶은 것을 일상적인 말로 AI에게 설명하고, 나온 결과를 보며 고쳐 가는 방식입니다. AI는 부탁을 받아 화면에 필요한 코드를 만들어 줍니다. 코드는 컴퓨터가 무엇을 보여 주고 어떻게 움직일지 적은 글입니다.

처음부터 코드를 줄마다 이해할 필요는 없습니다. 대신 무엇을 만들지 정하고, 나온 화면이 맞는지 확인하는 일은 내가 맡습니다.

한 번 부탁한 뒤 다시 고칩니다

아래는 취미 소개 페이지를 만드는 대화의 예입니다. 지금은 읽기만 하면 됩니다.

나: 별명은 ‘봄’이고 책 읽기를 좋아해. 소개글 두 문장과 좋아하는 책 세 권이 있는 페이지를 만들어 줘.

AI: 소개글 아래에 책 세 권을 나란히 놓았어요.

나: 휴대전화에서는 책 제목이 작아. 세 권을 위아래로 놓고 글자를 키워 줘.

첫 부탁으로 화면을 만들고, 실제로 보이는 불편을 다음 부탁에 담았습니다. “예쁘게 고쳐 줘”보다 “책 제목을 키워 줘”라고 말하면 바꿀 곳이 분명해집니다.

AI가 “고쳤어요”라고 답해도 끝난 것은 아닙니다. 책 제목이 읽히는지 직접 화면을 봐야 합니다. 링크가 있다면 눌러서 내가 정한 주소가 열리는지도 확인합니다.

처음 화면에 책이 네 권 보인다면 ‘AI가 뭘 했지?’부터 알아낼 필요는 없습니다. 부탁한 것은 세 권이므로 “내가 말한 세 권만 남겨 줘”라고 할 수 있습니다. 수정 뒤에는 다시 세 권인지 셉니다.

한 번의 대화는 부탁하기 → 화면 보기 → 다른 점 말하기 → 다시 보기로 이어집니다. 글이 맞는지와 링크가 제대로 열리는지는 각각 확인합니다. 답변에 적힌 “완료”라는 말만으로 둘 다 확인한 셈이 되지는 않습니다.

부탁한 뒤 화면에서 다시 확인하기한 번에 끝내려 하지 않고, 확인한 결과를 다음 요청에 사용합니다.
1부탁
원하는 것을 말하기

소개글 두 문장과 책 세 권이 있는 페이지를 만들어 줘.

무엇을 만들지 정하기
2결과
화면 열어 보기

책 제목이 세 권 보이는지 직접 봅니다.

AI의 답변만 읽지 않기
3수정
다른 점을 말하기

휴대전화에서 글자가 작으면 크기와 배치를 고쳐 달라고 합니다.

고칠 곳을 좁히기
4재확인
같은 화면 다시 보기

글자가 읽히고 책이 세 권 그대로인지 확인합니다.

필요하면 다시 부탁하기

AI와 내가 맡는 일

독서 모임에 자신을 소개할 지수가 별명, 소개글, 기록 링크를 AI에게 줬다고 해 봅시다. AI는 글과 링크를 배치한 화면을 만듭니다. 지수는 소개글이 정확한지 읽고, 링크를 눌러 봅니다.

링크 글자는 맞는데 엉뚱한 주소가 열렸다면 지수는 “링크가 내가 준 주소로 열리게 고쳐 줘”라고 말할 수 있습니다. 링크를 만드는 코드를 몰라도 기대한 결과와 실제 결과의 차이를 알려 줄 수 있습니다.

AI가 넣은 별점이나 경력이 사실이 아니라면 그 내용도 빼야 합니다. 화면의 모양과 코드는 AI의 도움을 받을 수 있지만, 내 정보가 맞는지와 남에게 보여 줘도 되는지는 내가 판단합니다.

지수가 링크를 눌러 보지 않았다면 링크의 작동은 아직 확인하지 않은 상태입니다. 화면에 링크 글자가 보이는 것과 원하는 곳으로 이동하는 것은 다른 결과입니다. “글이 맞게 보인다”와 “링크가 맞게 열린다”를 나눠 확인하면 어디까지 끝났는지 분명해집니다.

고칠 곳이 여러 개라면 우선 내용부터 봅니다. 별명과 소개글이 맞으면 다음으로 읽기 편한지, 마지막으로 링크가 열리는지 확인합니다. 한꺼번에 “전부 고쳐 줘”라고 말하면 어떤 부분이 바뀌었는지 놓치기 쉽습니다.

만든 페이지에 AI가 들어 있는 것은 아닙니다

AI로 만든 소개 페이지는 보통 정해 둔 글과 링크를 보여 줍니다. 누군가 페이지를 열 때마다 AI가 새 글을 쓰는 것은 아닙니다.

방문자의 질문에 AI가 답하게 만들려면 별도의 연결과 비용, 보내는 자료를 생각해야 합니다. 이 책의 첫 페이지에는 그런 기능이 필요하지 않습니다.

예를 들어 소개 페이지에 “좋아하는 책은 세 권”이라고 적혀 있다면 방문자가 보는 문장은 내가 준비한 내용입니다. 페이지가 방문자의 취향에 맞는 책을 새로 추천해 주지는 않습니다. 나중에 그런 기능을 추가하려면 지금과 다른 준비가 필요합니다.

이 차이를 알면 첫 결과물에 무엇을 기대해야 하는지도 명확해집니다. 이번에는 소개글을 읽고 링크를 여는 경험까지 확인하면 됩니다.

코드가 길게 나오면 어떻게 하나요?

코드가 길게 나오면

코드 전체를 이해하려고 멈추지 말고 실제 페이지를 여세요. 내가 요청한 글이 있는지, 읽기 편한지, 링크가 정한 곳으로 열리는지 순서대로 봅니다. 궁금한 부분은 “이 코드가 화면에서 하는 일을 쉬운 말로 설명해 줘”라고 물어보세요.

꼭 기억하세요

바이브 코딩의 기본은 원하는 것을 설명하고, 결과를 보고, 필요한 부분을 고치는 대화입니다.