vibe coding 퀄리티 올리기 위한 필수 기본개념
음식점으로 이해하는 웹
새로고침하면 날아간다
AI한테 "할 일 관리 앱 만들어줘" 했더니 진짜 만들어줬다. 화면도 나오고 버튼도 생기고, 할 일을 입력하면 리스트에 추가까지 된다.
그런데 새로고침을 눌렀더니 다 날아가고 입력한 할 일이 전부 사라졌다.
이게 많은 사람들이 겪는 바이브코딩의 현실이다.
바이브코딩은 2025년 2월, Andrej Karpathy가 만든 용어다. 코드를 직접 쓰지 않고, AI에게 말로 지시해서 프로그램을 만드는 방식이다. "코드가 존재한다는 사실조차 잊어라"가 그의 설명이다.
Cursor, Replit, Claude Code 같은 도구들 덕분에 실제로 가능해졌다. 코딩을 모르는 사람도 앱을 만들 수 있는 시대다.
그런데 문제가 있다. 바이브코딩은 결국 AI와의 대화다. 대화가 통하려면 상대 세계의 기본 구조를 알아야 한다. 프로그래밍 언어를 배우라는 말이 아니다. 웹과 앱이 어떤 부품으로 구성되어 있는지, 그 구조만 알면 된다.
프론트엔드, 백엔드, API, 데이터베이스. 이 네 단어를 음식점으로 연결지어 보자.
음식점으로 이해하는 웹의 구조
프론트엔드는 홀이다.
손님이 보고 만지는 모든 것이다.
메뉴판, 테이블, 인테리어. 웹에서는 버튼, 텍스트, 이미지, 화면 레이아웃이 프론트엔드다. 사용자가 직접 눈으로 보고 손으로 터치하는 영역이다.
백엔드는 주방이다.
손님 눈에 보이지 않는 곳이다. 주문이 들어오면 재료를 확인하고, 레시피대로 요리하고, 완성된 음식을 내보낸다. 웹에서는 로그인 확인, 결제 처리, 데이터 정리 같은 작업이 백엔드에서 돌아간다. 진짜 일이 벌어지는 곳이다.
API는 웨이터다.
홀과 주방을 연결한다. 손님이 주문하면 주방에 전달하고, 요리가 나오면 손님 테이블로 가져다준다. 웹에서 API는 프론트엔드의 요청을 백엔드로 전달하고, 결과를 다시 프론트엔드로 돌려보내는 통신 통로다.
데이터베이스는 냉장고다.
재료가 보관되는 곳이다. 냉장고가 없으면 재료가 없고, 재료가 없으면 요리를 못 한다. 웹에서 데이터베이스는 회원 정보, 게시글, 주문 내역 같은 데이터가 저장되는 곳이다. 여기에 넣어야 꺼내 쓸 수 있다.
이 네 가지가 웹 앱의 전부다. 어떤 서비스든 이 구조 위에서 돌아간다.
인스타 '좋아요' 버튼을 눌렀을 때 벌어지는 일
개념은 알겠는데, 실제로 어떻게 움직이는지 인스타그램을 비유로 알아보자.
흔히 우리가 손가락 딸깍 좋아요 버튼을 누를 때 아래와 같은 다양한 일이 벌어진다.
프론트엔드 — 하트 아이콘 클릭을 감지
API — "이 사용자가 이 게시물에 좋아요를 눌렀다"는 요청을 백엔드로 전달
백엔드 — 이 사용자가 로그인 상태인지 확인한다. 이미 좋아요를 눌렀는지 중복 체크
데이터베이스 — 좋아요 기록을 저장
백엔드 — "저장 완료"라는 응답을 만듬
API — 그 응답을 프론트엔드로 전달
프론트엔드 — 하트를 빨갛게 바꾸고, 좋아요 숫자를 1 올림
버튼 하나에 7단계가 돌아간다.
그리고 처음에 새로고침하면 데이터가 날아간 이유도 여기서 보인다. AI가 만들어준 할 일 앱에는 냉장고가 없었다. 프론트엔드에서 화면에 표시만 했을 뿐, 데이터베이스에 저장하지 않았다. 냉장고 없이 음식점을 연 거다. 문을 닫으면 모든 게 사라진다.
이 흐름을 아는 것과 모르는 것의 차이가 크다.
모르면 터지는 것들
구조를 모르면 AI와의 대화부터 비효율적이다.
"좋아요가 안 돼요, 고쳐줘."
이렇게 말하면 AI도 어디를 고쳐야 할지 헤맨다. 문제가 프론트엔드에 있는지, 백엔드에 있는지, 데이터베이스에 있는지 모르기 때문이다. AI는 만능이 아니다. 맥락이 부족하면 엉뚱한 곳을 건드린다.
흐름을 알면 대화가 달라진다:
"프론트에서 API 호출이 안 되는 것 같은데 확인해줘"
"백엔드에서 중복 좋아요 방지 로직 추가해줘"
"DB에 좋아요 테이블 만들어줘"
같은 문제에 대해 AI가 받는 정보의 질이 다르다.
보안은 더 심각하다. 구조를 모르면 위험한 코드가 나와도 알아차리지 못한다.
비밀번호를 프론트엔드에 넣으면 누구나 볼 수 있다. 주방의 비밀 레시피를 메뉴판에 써놓는 거다. 이런 실수는 생각보다 자주 일어난다.
보안 회사 Tenzai가 주요 AI 코딩 에이전트 5종으로 동일한 앱을 만들어 테스트했다. 15개 앱에서 발견된 보안 취약점은 총 69개. 인증 우회, 서버 요청 위조, 보안 헤더 미설정. 15개 앱 중 기본적인 보안 장치를 제대로 갖춘 앱은 단 하나도 없었다. 연구진의 결론은 명확하다. "어떤 에이전트를 쓰든 취약점은 거의 확실히 도입된다."
AI는 돌아가는 코드를 만든다. 안전한 코드를 만드는 건 별개의 문제다. 그리고 안전한지 판단하려면, 최소한 어디가 홀이고 어디가 주방인지는 알아야 한다.
세 가지 질문
복잡하게 생각할 필요 없다. 바이브코딩을 시작하기 전에 이 세 가지만 습관 들이면 된다.
1. 화면 문제야, 로직 문제야, 저장 문제야? 문제가 생겼을 때 홀(프론트)인지, 주방(백엔드)인지, 냉장고(DB)인지 구분하는 것이다. 이것만으로 AI에게 전달하는 정보의 정확도가 올라간다.
2. 민감한 정보가 사용자한테 보이진 않아? 비밀번호, API 키, 관리자 권한 같은 것이 프론트엔드에 노출되어 있으면 안 된다. 주방에 있어야 할 것이 홀에 나와 있는지 확인하는 것이다.
3. 새로고침해도 데이터가 남아있어야 해? 남아있어야 한다면 데이터베이스가 필요하다. 냉장고 없이 음식점을 열면 안 된다.
이 질문들이 습관이 되면 "앱 만들어줘" 대신 "프론트는 이렇게, 백엔드는 이렇게, DB는 이렇게" 라고 말할 수 있다. AI와의 대화가 달라진다. 결과물의 질이 달라진다.
바이브코딩의 진짜 시작은 도구를 여는 순간이 아니다. 이 구조를 이해하는 순간이다.
참고 자료
[1]: Andrej Karpathy, "vibe coding" tweet, X, 2025년 2월. 링크
[2]: "Bad Vibes: Comparing the Secure Coding Capabilities of Popular Coding Agents," Tenzai, 2026년 1월. 링크
