최근 'vibe coding'에 대해 들어보셨을 겁니다. AI는 이제 우리가 매일 듣고 보는 일상적인 주제가 된 것 같습니다. 쏟아지는 새로운 제품과 업데이트, 그리고 이 흐름에 합류하는 방법을 모두 따라가기란 쉽지 않습니다.

언젠가 한 번쯤 만들고 싶었던 사업 아이디어나 일상적인 문제를 해결할 방법, 혹은 지역 사회에 의미 있는 도움을 줄 방법을 생각해 본 적이 있을 것입니다. 문제는 무엇일까요? 그 생각은 머릿속에만 머물거나 잊힌 공책 속에 남겨져 있을 뿐입니다. 어디서부터 시작해야 할까요? 무엇을 시작해야 할까요? 첫걸음을 어떻게 떼야 할까요?

우리는 그 기분을 잘 알고 있으며, 바로 그것이 아이디어를 가진 누구든 머릿속에 있는 것을 무엇이든 만들어낼 수 있도록 돕는다는 사명을 갖게 된 이유입니다.

어디서나 쏟아지는 정보와 빠른 변화의 시대에, 우리는 잠시 멈춰 가기로 했습니다. 시간을 내어 Vibe Coding에 대해 우리가 아는 모든 것을 적어 내려가기로 한 것이죠. 이제 막 이 분야에 발을 들인 분들을 환영합니다. 매주 Vibe Coding의 기초를 다지는 'zero to hero' 시리즈를 통해 함께 배워봅시다.

이번 글에서 우리의 목표는 간단합니다.

Vibe Coding이란 실제로 무엇인지, 그리고 왜 이전에 들었던 AI 관련 이야기들과 다른지
비개발자가 Vibe Coding을 가능하게 하는 단 하나의 사고의 전환
빈 페이지에서 실제 결과물로 이어지는 첫 번째 빌드 세션의 단계별 가이드

**Vibe Coding이란 무엇인가?**그렇다면 Vibe Coding이란 무엇일까요? 가장 먼저 우리가 무엇에 대해 이야기하는지 명확히 정의해 봅시다. 사실 Vibe Coding이라는 용어는 2025년 2월 Andrej Karpathy가 X에 올린 단 하나의 게시물에서 처음 등장했습니다. 만약 이 이름이 생소하다면, 이 글을 읽고 나면 기억하게 될 것입니다.

Karpathy는 현존하는 가장 존경받는 AI 연구자 중 한 명으로 꼽힙니다. OpenAI의 창립 멤버인 그는 Tesla의 AI 팀을 이끌며 Autopilot을 구동하는 컴퓨터 비전 시스템을 구축했습니다. Vibe Coding 분야에 입문하는 분들이라면 그를 팔로우하는 것을 추천합니다. 그는 매일 수백만 명이 의존하는 시스템을 구축하며 최고 수준의 코드를 작성하는 데 평생을 바친 인물이기 때문입니다.

그런데 왜 Vibe Coding을 이해하는 데 그를 언급하는 걸까요? 그가 남긴 말은 다음과 같습니다.

"코드가 존재한다는 사실조차 잊어라"

그의 말은 매우 강렬합니다. 그는 "분위기(vibes)에 완전히 몸을 맡기는" 새로운 구축 방식을 설명했습니다. 자신이 원하는 바를 쉬운 언어로 설명하고, 내부에서 어떤 일이 일어나는지 걱정할 필요 없이 AI가 코드를 작성하도록 맡기는 것입니다. 이것은 코드가 중요하지 않아서가 아니라, 이제는 당신이 직접 코드를 쓰거나 읽을 필요가 없기 때문입니다.

완벽한 정의는 이렇습니다. Vibe Coding이란 원하는 소프트웨어를 평이한 언어로 설명하여(무엇을 해야 하는지, 어떤 모습이어야 하는지, 누구를 위한 것인지 등) AI가 그 설명을 실시간으로 작동하는 코드로 변환하게 만드는 것입니다. 당신은 코드를 작성하지 않습니다. 코드를 읽지도 않습니다. 당신은 설명하고, 결과물을 확인하고, 다시 설명하며 다듬고, 머릿속에 있는 모습과 결과물이 일치할 때까지 반복합니다.

여기서 필요한 기술은 프로그래밍 지식이 아닙니다. 명확함과 창의성입니다. 즉, AI가 구현할 수 있을 만큼 정확하게 결과물을 묘사하는 능력입니다. 이는 모든 창업자, 모든 기획자, 아이디어를 가진 모든 사람이 이미 가지고 있는 능력입니다. 단지 지금까지는 이를 '빌더(builder)'의 기술로 간주하지 않았을 뿐입니다.

모든 것을 바꾸는 사고의 전환

여기에 사고의 전환이 필요합니다. 대부분의 비개발자는 적절한 단어, 전문 용어 또는 특정 지식이 필요하다고 생각하며 AI 도구에 접근합니다. 이것은 잘못된 접근 방식이며, 우리는 여러분이 올바른 방향으로 나아갈 수 있도록 돕고자 합니다.

사고의 전환은 이것입니다. 당신은 개발자가 아니라 감독입니다. 당신의 일은 그것을 어떻게 달성할지 명시하는 것이 아니라, 원하는 결과를 설명하는 것입니다. 영화 촬영장의 감독은 카메라 오퍼레이터에게 조리개를 어떻게 설정해야 하는지 설명하지 않습니다. 그저 "이 장면은 차갑고 거리감이 느껴졌으면 좋겠어"라고 말할 뿐입니다. 나머지 작업은 오퍼레이터가 알아서 합니다.

좋은 소식은 여러분이 평생 이 기술을 쌓아왔다는 것입니다. 무언가를 원할 때마다 설명했던 모든 순간들, 기대에 미치지 못하는 결과물에 대해 피드백을 주었던 모든 순간들, 친구에게 아이디어를 설명하고 그 친구의 표정을 보며 이해했는지 확인했던 모든 순간들이 바로 그렇습니다. 그것이 바로 Vibe Coding이 사용하는 근육입니다.

단지 지금까지 컴퓨터를 대상으로 그 능력을 발휘해보지 않았을 뿐입니다.

첫 번째 빌드 세션, 단계별 가이드

이제 본격적으로 시작해 봅시다. 첫 글자를 입력하는 순간부터 게시 버튼을 누르는 순간까지, 바로 여기 Enter에서 진행하는 실제 빌드 과정을 안내해 드리겠습니다.

우리의 사명은 간단합니다. 아이디어가 있는 사람이라면 누구나 그것을 만들 수 있어야 한다는 것입니다. 무언가를 실현하기 위해 컴퓨터 공학 학위나 개발자 공동 창업자, 혹은 5만 달러의 예산이 필요해서는 안 됩니다. Enter는 당신의 설명이 실제 작동하는 제품이 되는 플랫폼이며, 이 섹션이 그것을 증명할 것입니다.

이 글을 다 읽을 때쯤이면, 여러분은 머릿속으로 한 번 만들어본 셈이 될 것입니다. 그리고 두 번째에는 실제로 해보게 될 것입니다.

무엇을 입력하기 전에 — 좋은 프롬프트의 구조

결과물을 설명하는 것이 당신의 역할이라면, 좋은 설명이란 과연 어떤 모습일까요?

좋은 프롬프트는 세 부분으로 나뉩니다. 어떤 부분도 기술적인 지식을 요구하지 않습니다.

무엇을 만들 것인가(What to build): 만들고 싶은 핵심 요소입니다. 낯선 사람도 이해할 수 있을 만큼 구체적이어야 합니다. "앱 하나"가 아니라 → "StreakUp이라는 일일 습관 추적기."
어떻게 보일 것인가(How it looks): 시각적인 방향입니다. 색상, 레이아웃, 분위기, 느낌 등을 말합니다. 디자인 전문 용어는 필요 없습니다. 솔직하기만 하면 됩니다. "미니멀하고 깔끔하게"도 좋고, "흰색 배경, 녹색 포인트, 각 습관을 보여주는 간단한 카드"도 좋습니다.
어떻게 작동할 것인가(How it works): 기능입니다. 누군가 클릭했을 때 어떤 일이 일어나는지, 흐름은 어떤 느낌인지, 앱이 실제로 무엇을 하는지 설명하세요. 기계적인 원리가 아니라 경험을 묘사하세요.

이제 이 세 가지가 하나의 프롬프트에 어떻게 담기는지 확인해 보세요.

"StreakUp이라는 일일 습관 추적기를 만들어줘. 흰색 배경에 녹색 포인트, 미니멀한 디자인으로 해줘. 사용자가 자신만의 습관을 추가하고 매일 체크할 수 있어야 하며, 며칠 연속으로 습관을 유지했는지 보여주는 카운터가 있어야 해. 만약 하루라도 빠뜨리면 카운터가 0으로 초기화되고 짧은 응원 메시지가 나오게 해줘."

무엇을 만들 것인가 → StreakUp이라는 일일 습관 추적기
어떻게 보일 것인가 → 흰색 배경, 녹색 포인트, 미니멀한 카드
어떻게 작동할 것인가 → 습관 추가, 일일 체크, 연속 카운터, 초기화 및 응원 메시지

1단계 — 첫 번째 프롬프트 작성하기

Enter를 여세요. (네, 이 글을 읽으면서 지금 바로 해보세요. 직접 해보는 것이 배우는 가장 좋은 방법입니다.) 채팅창에 프롬프트를 입력하세요. 그리고 Enter를 누르세요.

이게 전부입니다.

너무 깊게 생각하지 마세요. 완벽하려고 애쓰지 않아도 됩니다. 첫 번째 프롬프트는 최종 결과물이 아니라 대화의 시작일 뿐입니다. 세 가지 요소가 포함되었는지 확인하고, 쉬운 언어로 작성한 뒤 전송하세요.

몇 초 안에 화면에 무언가가 나타날 것입니다.

기억해야 할 한 가지: 모호한 프롬프트는 일반적인 결과를 낳습니다. 다음 두 가지를 비교해 보세요.

모호함 → "습관 추적기 만들어 줘." 좋음 → "StreakUp이라는 일일 습관 추적기를 만들어 줘. 흰색 배경에 초록색 강조 포인트로..."

같은 아이디어지만 완전히 다른 결과가 나옵니다. 항상 구체적인 방향을 제시하세요.

2단계 — 생성된 결과물 검토하기

이제 화면에 무언가가 나타났을 것입니다. 이것은 실제 작동하며 상호작용이 가능한 라이브 앱입니다. 목업도, 와이어프레임도 아닙니다. 실제로 작동하는 앱입니다.

다음 사항을 확인해 보세요: 요청한 핵심 기능을 수행하나요? 전반적인 구조가 갖춰져 있나요? StreakUp의 경우, 습관을 추가할 수 있는 목록이 보이나요? 체크하면 반응이 있나요? 연속 기록(streak) 카운터가 있나요?

지금은 무시해도 되는 것들: 아직 완벽하지 않은 사소한 시각적 디테일들입니다. 색상이 약간 다르거나, 간격이 조금 좁은 것들은 2단계에서 중요하지 않습니다. 여러분은 장식이 아닌 토대를 확인하는 것입니다.

토대가 올바르다면 3단계로 넘어가세요. 핵심 기능이 빠져 있다면, 무엇이 부족한지 설명하고 다시 전송하세요.

3단계 — 변경하고 싶은 내용을 설명하여 수정하기

코드를 건드리지 마세요. 수동으로 편집하려고 하지 마세요. 동료에게 말하듯이 무엇이 잘못되었는지 설명하기만 하면 됩니다.

나쁜 수정 요청: "streak counter 컴포넌트의 CSS를 바꿔 줘." 좋은 수정 요청: "streak counter가 너무 작아서 읽기 힘들어. 더 크게 만들고, 화면 상단 중앙에 배치하고, 굵은 초록색 숫자를 사용해 줘."

하나는 기술적인 조치를 설명하고, 다른 하나는 결과를 설명합니다. 항상 결과를 설명하세요.

전송하세요. 업데이트되는 것을 지켜보세요. 다시 검토하세요.

4단계 — 만족스러울 때까지 반복하기

이것이 루프입니다. 설명하기 → 검토하기 → 수정하기 → 반복하기.

정해진 횟수는 없습니다. 두 번의 수정만으로 만족스러운 결과가 나오기도 하고, 열 번이 걸리기도 합니다. 어느 쪽이든 틀린 것은 없습니다. 각 단계는 여러분의 머릿속에 있던 생각을 더 정확하게 구현해 나가는 과정일 뿐입니다.

거의 다 왔다는 좋은 징조: 피드백이 점점 구체적으로 변하고 있습니다. 버튼 라벨을 조정하거나, 카드 사이의 간격을 조절하거나, 초록색의 정확한 색조를 맞추는 식이죠. 메모가 구체적일수록 빌드는 거의 완료된 것입니다.

5단계 — 클릭 한 번으로 게시하기

만족스럽다면 게시 버튼을 누르세요.

Enter는 즉시 전 세계 누구와도 공유할 수 있는 라이브 URL로 배포합니다. 호스팅 설정도, 도메인 설정도, 승인 대기도 필요 없습니다. 클릭 한 번이면 세상에 존재하는 앱이 됩니다.

의견을 신뢰하는 사람과 공유해 보세요. 그들이 사용하는 모습을 지켜보세요. 그들의 망설임, 질문, 기쁨의 순간들이 다음에는 무엇을 만들어야 할지 정확히 알려줄 것입니다.

이것이 여러분의 첫 번째 세션입니다. 여러분은 방금 진짜 무언가를 만들어 냈습니다!!

시리즈의 다음 내용

첫 번째 빌드를 성공적으로 마쳤습니다! 축하합니다! 여러분은 이제 vibe coding이 무엇인지, 프롬프트를 어떻게 작성하는지, 그리고 어떻게 실시간으로 앱을 배포하는지 알게 되었습니다. 이제 토대가 마련되었습니다.

다음 시간에는 한 단계 더 깊이 들어가 보겠습니다. 만드는 법을 아는 것과 피해야 할 실수를 아는 것은 별개의 문제이기 때문입니다. 대부분의 초보자는 첫 세션에서 자신도 모르게 같은 벽에 부딪힙니다. 우리는 그것들이 무엇인지 이름을 붙이고, 왜 발생하는지 설명하며, 어떻게 하면 정확히 피할 수 있는지 보여드릴 것입니다.

곧 다시 만나요!