코딩 몰라도 앱 만든다고? 바이브 코딩, 직접 해보니 작성일 02-20 43 목록 <div id="layerTranslateNotice" style="display:none;"></div> <div class="article_view" data-translation-body="true" data-tiara-layer="article_body" data-tiara-action-name="본문이미지확대_클릭"> <section dmcf-sid="XMun6o8BDI"> <p contents-hash="80022b9e2b19d0b20300510b66a42823d7efa79a9336205106c388053ac7312c" dmcf-pid="ZR7LPg6brO" dmcf-ptype="general">[IT동아 김예지 기자] 코딩의 ‘코’자도 모르지만 익히 들어 봤던 ‘바이브 코딩(Vibe Coding)’에 도전해봤다. 최근 화두가 된 바이브 코딩은 코드를 수동으로 작성하는 대신 AI에게 자연어로 지시해 결과물을 만드는 최신 소프트웨어 개발 방식이다.</p> <figure class="figure_frm origin_fig" contents-hash="6e79c97382ee1d4c5a10c188de27b8d22c8ed9263ca4b1fe5ce7036c29e5c8d4" dmcf-pid="5ezoQaPKDs" dmcf-ptype="figure"> <p class="link_figure"><img alt="레플릿 화면 / 출처=IT동아" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104507778tvqp.jpg" data-org-width="1920" dmcf-mid="uHLFy0Tssk" dmcf-mtype="image" height="auto" src="https://img1.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104507778tvqp.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 레플릿 화면 / 출처=IT동아 </figcaption> </figure> <p contents-hash="39ca55b999a59272e7515b897385fd1cd40853ccb5bc1fea0c28c023a4781bfe" dmcf-pid="1dqgxNQ9Im" dmcf-ptype="general">코딩에 익숙하지 않은 비개발자도 AI 도구를 활용해 원하는 앱을 만들 수 있다는 점에서 유명세를 탔다. 말 그대로 결과물의 느낌(Vibe)을 확인하며 앱을 완성한다는데, 과연 A부터 Z까지 가능할지 직접 해봤다.</p> <h3 contents-hash="20037f65105d9304d19a655f2c510a1676704503f6772f3b4139fe83a0006440" dmcf-pid="tJBaMjx2sr" dmcf-ptype="h3"><strong>바이브 코딩이란?</strong></h3> <p contents-hash="de03fb2c3ccca42e72a8c1f9a5b50b5bfc6f5aef944137d799799eff4b79e293" dmcf-pid="FibNRAMVIw" dmcf-ptype="general">원리는 간단하다. ‘사람이 기획하고, AI가 구현하는’ 구조다. 사용자가 머릿속 아이디어를 설명하면, AI가 코드 작성부터 배포까지 돕는다. 원리만큼 사용 방법도 쉽게 느껴졌다. 바이브 코딩 도구를 선택하고, 프롬프트 명령을 입력하고, 코드 수정 작업을 거쳐 배포하면 끝난다. </p> <p contents-hash="1cfeb5ea0280641f0f1ed186958afbe5f0e0a0aad20cab85ad2883a8436cf578" dmcf-pid="3o2cJEd8DD" dmcf-ptype="general">하지만 바이브 코딩 도구 선정부터 난항을 겪었다. 도구는 생각보다 더 다양했다. 코딩 지식이 필요 없는 초보자용(노코드 또는 로우코드 수준)부터, 엔터프라이즈용, 전문가용까지 있다. 우리에게 흔한 챗GPT나 제미나이(Gemini) 등 AI 챗봇도 코딩 작업을 지원하기 때문에 넓은 의미에서는 바이브 코딩 도구로 볼 수 있지만, 보통은 커서(Cursor), 클로드 코드(Claude Code) 같은 AI 통합 개발 환경(IDE)을 일컫는다.</p> <h3 contents-hash="44f4b97ddb8e1fa3fb331ddc318421a0d75c31ba048a80b9a421af3a5b02d4ca" dmcf-pid="0gVkiDJ6mE" dmcf-ptype="h3"><strong>AI 도구 고르기</strong></h3> <figure class="figure_frm origin_fig" contents-hash="6f627eaf0daa75c209f1f2492b129f77d600e73e936b80db5361cecc36022bd6" dmcf-pid="pafEnwiPsk" dmcf-ptype="figure"> <p class="link_figure"><img alt="파이어베이스 스튜디오 / 출처=구글 클라우드" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104509055zecw.jpg" data-org-width="1920" dmcf-mid="6URHCZIkwe" dmcf-mtype="image" height="auto" src="https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104509055zecw.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 파이어베이스 스튜디오 / 출처=구글 클라우드 </figcaption> </figure> <p contents-hash="e92f4e79754b9c7e06d1e49e991e1e4d88f1653aedd9d3206c6f87b0d8c580fc" dmcf-pid="UN4DLrnQwc" dmcf-ptype="general">도구는 성능, 비용에 따라 나뉜다. 웹 기반 또는 설치형으로도 구분된다. 대표적으로 ▲커서 ▲클로드 코드 ▲깃허브 코파일럿(GitHub Copilot) ▲안티그래비티(Antigravity) ▲윈드서프(Windsurf) 등이 개발 도구에 AI가 통합된 설치형이다. 최근에는 설치형 코딩 AI 에이전트 ‘오픈클로(OpenClaw, 구 몰트봇)’가 오픈소스로 등장해 화제를 모으기도 했다. 또한 ▲구글 AI 스튜디오(Google AI Studio) ▲레플릿(Replit) ▲러버블(Lovable) ▲볼트(Bolt.new) 등 웹브라우저 기반 서비스는 초보자에게 더 적합하다.</p> <p contents-hash="7741e69c412ae50e9b4773975db615f443a71e960a8798b2799a8980a88d2a55" dmcf-pid="uj8womLxrA" dmcf-ptype="general">파이썬이나 자바스크립트가 개발 용어라는 정도만 아는 입장에서는 가장 유명한 도구부터 써보려 했으나, 월 20달러(약 2만 8000원)의 비용과 중급자용이라는 점이 걸림돌이었다. 사용량에 따라 과금되는 클로드 코드도 초보자에게는 진입장벽이 높았다. </p> <p contents-hash="6d2328eaedd8611664a6e2c6ee2dee21ed744d4f70dd5610fbf166caed50edf0" dmcf-pid="7A6rgsoMwj" dmcf-ptype="general">그래서 가장 접근성이 좋고 무료 체험이 가능한 레플릿을 활용했다. 더불어 구글 클라우드가 제공하는 웹 기반 구글 AI 스튜디오와 파이어베이스 스튜디오(Firebase Studio, 구 Project IDX)도 사용해보기로 했다. 모두 웹 기반 프로토타입 제작을 지원해 간단한 생성형 AI 애플리케이션 개발에 적합하다는 설명이 붙었다. 더불어 파이어베이스 스튜디오는 인증 등 실제 서비스가 가능한 수준의 백엔드가 필요한 앱 개발을 지원한다. </p> <h3 contents-hash="02bde568e08fb9d979f47f5837706f83e9b2af4052d6f6f685025db956cd22d2" dmcf-pid="zcPmaOgRON" dmcf-ptype="h3"><strong>레플릿 사용해보니</strong></h3> <figure class="figure_frm origin_fig" contents-hash="f09852fb2d74768c9b122399f1890ef56c50bd4067f23d6a5bf2bad080bbec6c" dmcf-pid="qkQsNIaesa" dmcf-ptype="figure"> <p class="link_figure"><img alt="음식 메뉴 추천 및 레시피 웹앱 제작을 시도해봤다 / 출처=레플릿" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104510492mwmt.jpg" data-org-width="1920" dmcf-mid="zlJ1vFSrIp" dmcf-mtype="image" height="auto" src="https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104510492mwmt.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 음식 메뉴 추천 및 레시피 웹앱 제작을 시도해봤다 / 출처=레플릿 </figcaption> </figure> <p contents-hash="a88d27bd7409ade19fc15cfcc8d449c947862a806ee6baaa149b9bafff044b10" dmcf-pid="BExOjCNdOg" dmcf-ptype="general">기획자 입장에서 어떤 앱을 개발할지 정하는 것도 중요한 부분이다. 바이브 코딩으로 시도해볼만한 간단한 프로젝트는 많지만, 사실 코딩 지식이 적으면 난이도를 파악하기도 어렵다. 대략 날씨 앱, 할 일 관리 앱, 금 시세 추이 변동 알림 앱, 쇼핑몰 앱 등을 고민해봤다. 이번에는 ‘음식 메뉴 추천 및 레시피 웹앱’을 만들어보기로 했다.</p> <p contents-hash="28bd986686ee6b8fb79092b5e8e827bdedc07c3fd3582a5c0ed0ccc35a128f6c" dmcf-pid="bYk1vFSrso" dmcf-ptype="general">레플릿은 별도 설치 없이 구글 계정으로 로그인하면 바로 쓸 수 있었고, 페이지 구성이 AI 챗봇 서비스와 유사해 익숙했다. 채팅 인터페이스에 “음식 메뉴 추천을 주제로 한 레시피 웹앱을 만들어 줘. 사용자의 기분이나 날씨에 따라 메뉴를 추천하고, 레시피를 알려 줘. 또한 사람들이 함께 투표해서 메뉴를 선정하고 결과를 실시간으로 볼 수 있게 해줘”라고 입력했다. </p> <figure class="figure_frm origin_fig" contents-hash="dd6b071e9b23fcc04ec6482832a2cfaaf49cb36027fbca94929a04a5826b4015" dmcf-pid="KGEtT3vmsL" dmcf-ptype="figure"> <p class="link_figure"><img alt="자연어 명령만으로 만들어진 프로토타입 / 출처=레플릿" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104511751nzpc.jpg" data-org-width="1920" dmcf-mid="y3kBtK1ysv" dmcf-mtype="image" height="auto" src="https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104511751nzpc.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 자연어 명령만으로 만들어진 프로토타입 / 출처=레플릿 </figcaption> </figure> <p contents-hash="690e59daec3b34acaa090c8d21215a88b70f92be73dae5050fd671b8aa10a801" dmcf-pid="9HDFy0TsOn" dmcf-ptype="general">코딩이다보니 모든 언어가 영어인 점도 어려움 중 하나였지만, 한국어로 입력해도 약 3분 만에 프로토타입을 생성해줬다. 웹 번역기를 사용하면 한국어로 표기되는데, 서비스 내 언어를 한국어로 요청하면 만들어준다. 설명과 함께 미리보기 화면이 나온다. 새 탭에서 볼 수도 있다. ‘FlavorMatch’라는 앱 이름을 붙여줬다. 메인 화면에는 ‘무엇이 땡기냐?(What are you craving?)”는 텍스트가 나타났다. </p> <p contents-hash="4c96af912aff84b7635b81a62e1cddc7b473998c8d0c9ed8d88b20e26186dcd3" dmcf-pid="2Xw3WpyOmi" dmcf-ptype="general">실제 작동도 무리없이 됐다. 기분과 날씨를 정하고, 기타 요청사항에 ‘매운 음식’ 등을 입력하면 추천 메뉴와 함께 재료, 요리 방법이 표시됐다. 다만 메뉴 사진이나, 정보 출처 표기는 없었다. ‘레시피 저장’ 메뉴는 요청하지 않았지만, 사람들이 상호작용하는 기능이 있다는 점을 기반으로 만들어진 듯했다. </p> <figure class="figure_frm origin_fig" contents-hash="89725688f6794da7c906428bce52189d4a4f11d65f7d26e80e3c7070052bb117" dmcf-pid="VZr0YUWIrJ" dmcf-ptype="figure"> <p class="link_figure"><img alt="프롬프트를 입력해 기능을 추가했다 / 출처=레플릿" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104513012emsc.jpg" data-org-width="1920" dmcf-mid="WpmVU4pXmS" dmcf-mtype="image" height="auto" src="https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104513012emsc.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 프롬프트를 입력해 기능을 추가했다 / 출처=레플릿 </figcaption> </figure> <p contents-hash="c39f008dd4bb4d4d78302edafdb05026576a9510e2c4d9466e5fca443bec886f" dmcf-pid="f5mpGuYCmd" dmcf-ptype="general">‘그룹 투표’ 메뉴에는 투표를 만들고 참여하는 기능이 있었다. 회원가입하지 않아도 되도록 추가 프롬프트를 입력해 수정을 요구했다. 그러나 레플릿 무료 버전은 질의응답 횟수가 제한돼 세밀한 수정이 어려웠다. 또한 무료 버전에서는 퍼블릭 URL로만 배포 가능했다. 배포 후 확인해 보니, 구현하지 않은 로그인 기능에서 에러가 났다. 무료 버전에서 제약이 많았다는 점은 확실하지만, 이 정도면 비개발자도 어느 정도 앱을 구축할 수 있다는 가능성을 확인했다. 그러나 이 정도라면 우리에게 친숙한 AI 챗봇 서비스로 만들겠다는 생각도 들었다.</p> <figure class="figure_frm origin_fig" contents-hash="d8498ac42526fea31ae7fab7bc85bfbdbd1eb881d2c5776fa6b22ee0ed4f0fc6" dmcf-pid="41sUH7Ghre" dmcf-ptype="figure"> <p class="link_figure"><img alt="구글 AI 스튜디오에서 코드를 작성하는 모습 / 출처=구글 AI 스튜디오" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104514272tdkd.jpg" data-org-width="1839" dmcf-mid="YwX6qQztml" dmcf-mtype="image" height="auto" src="https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104514272tdkd.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 구글 AI 스튜디오에서 코드를 작성하는 모습 / 출처=구글 AI 스튜디오 </figcaption> </figure> <p contents-hash="772fe8f5764947c3f448e76df91ef0a15e823c815dda0b7d7eb19325688bc878" dmcf-pid="8tOuXzHlDR" dmcf-ptype="general">한편, 구글 AI 스튜디오에서도 동일하게 명령하자, 코드가 작성됐다. 실행을 위해 html 파일로 요구했다. 파일을 열자 앱이 실행됐지만, 전체 뼈대만 있을 뿐 기능은 구현되지 않았다. 구글 AI 스튜디오는 코드 작성을 돕는 수준에 그치며, 실제 운영되는 모습을 확인하려면 파이어베이스 스튜디오에서 진행해야 하기 때문이었다. </p> <p contents-hash="8d2c69a0ac74f56fa1b9067c2029e1ba48e60c8303485dd329822ed95485b7e2" dmcf-pid="6bG476u5IM" dmcf-ptype="general">AI 스튜디오에서 만든 코드를 파이어베이스 스튜디오로 옮겨와 실제 작동 모습을 보기 위한 프로토타입을 생성했다. 프롬프트 개선 단계를 거치며 추가 요구 사항을 프롬프트로 전달했다. 예컨대, 날씨 API 연동 기능이나, 사용자 참여코드 기반 입장 기능을 추가하도록 자연어로 명령했다. </p> <p contents-hash="b691e1600fd30510305cd2d7ff36e266e6c9236d9df87ddf134c6706c5843b4f" dmcf-pid="PKH8zP71rx" dmcf-ptype="general">프롬프트 반영 시간은 오래 걸렸지만, 프로토타입을 보면서 AI와 대화로 수정 가능한 점이 편리했다. 파이어베이스 스튜디오 자체는 무료다. 그러나 생성 가능한 작업 공간 수에 제한이 있고, 추가 기능에 따라 과금될 수 있다. 또한 배포 후 사용량에 따라 요금이 측정된다.</p> <h3 contents-hash="a007fdd1358ae6db52f23d248aa3fe426551cedeec94551c88ed9af03e654015" dmcf-pid="Q9X6qQztIQ" dmcf-ptype="h3"><strong>마법이 아니라 도구다</strong></h3> <figure class="figure_frm origin_fig" contents-hash="eac3b73057f9f8b872028b5973e28aafce29ad9635a7de27a2a1a882cb3c68e8" dmcf-pid="x2ZPBxqFrP" dmcf-ptype="figure"> <p class="link_figure"><img alt="구글 AI 스튜디오에서 코드를 작성해 만든 프로토타입 / 출처=IT동아" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104515512qchu.jpg" data-org-width="1841" dmcf-mid="GxH8zP71Oh" dmcf-mtype="image" height="auto" src="https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104515512qchu.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 구글 AI 스튜디오에서 코드를 작성해 만든 프로토타입 / 출처=IT동아 </figcaption> </figure> <p contents-hash="bafa775c8c7305d78f732f0da30fa437713257fe4b1c9e37d9e63cbb44098ccf" dmcf-pid="yOivwyDgE6" dmcf-ptype="general">바이브 코딩을 해보며 느낀 점은 아직은 개발자를 위한 보조 도구에 가깝다는 것이다. 자연어로 간단한 앱을 만드는 건 기존 챗봇 서비스에서도 가능하며, AI 개발 도구는 비개발자가 충분히 활용하기에는 한계가 있다. AI에게 상세히 명령해 간단한 앱을 개발 및 배포하는 건 가능하지만, 비개발자로서 무엇이 필요한지, 어떻게 동작하는지 이해하지 못하는 상태에서 전부 해결하기에는 부족함이 느껴졌기 때문이다. 특히 보안 문제에 있어 안전한 행위인지 온전히 믿기 어렵다는 위험성도 존재한다.</p> <p contents-hash="4cb6fe837f8586d0466f7d5cc115f0165aac6d914f1269f0e33986fef4c7e6cd" dmcf-pid="WInTrWwaw8" dmcf-ptype="general">마치 “떡볶이 만들어 줘” 라고 말해서 음식이 뚝딱 나오는 게 아니라, “떡을 얼마나 불려 줘”, “양파를 어떻게 썰어서 언제 넣어 줘” 등 세세하게 명령하면 AI가 수행하는 모양새와 같다. 기초 지식이 있어야 AI를 제대로 부릴 수 있다는 의미다. 물론 시작 부분조차도 AI에게 물을 수는 있다. 하지만 많은 시간이 소요되며, 방대한 레시피 때문에 혼동하기 쉽다. </p> <figure class="figure_frm origin_fig" contents-hash="92084d2034341dfc34ee8bbbfa6cde8ae393e6a43fa65383b7258ea17e4f459f" dmcf-pid="YCLymYrNI4" dmcf-ptype="figure"> <p class="link_figure"><img alt="구글 파이어베이스 스튜디오에서 자연어로 대화하며 개선하는 모습 / 출처=IT동아" class="thumb_g_article" data-org-src="https://t1.daumcdn.net/news/202602/20/itdonga/20260220104516777hxrt.jpg" data-org-width="1920" dmcf-mid="HL7LPg6bIC" dmcf-mtype="image" height="auto" src="https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202602/20/itdonga/20260220104516777hxrt.jpg" width="658"></p> <figcaption class="txt_caption default_figure"> 구글 파이어베이스 스튜디오에서 자연어로 대화하며 개선하는 모습 / 출처=IT동아 </figcaption> </figure> <p contents-hash="cbc155da47cb82191c6f2a7e3e0c7c136f8ac5c959eea4576b71c5e36a89f4e4" dmcf-pid="GhoWsGmjsf" dmcf-ptype="general">결국 내가 구현하는 바를 명확히 알고 있어야 잘 사용할 수 있다. 그런 점에서 바이브 코딩 도구는 개발 용어와 원리를 이해하는 초보 개발자 수준 이상에게 매우 유용해보인다. 또한 아이디어를 MVP(최소 기능 제품)로 만들고 싶은 기획자, 디자이너, 스타트업 창업자에게도 큰 이점을 준다. 숙련된 개발자라면 강력한 무기로 쓸 수 있을 것이다. </p> <p contents-hash="f969b54cc99ffe0c88cccf1b5ff28ea7662f0bc007fcfa4cda9f1ea976ccac7c" dmcf-pid="HlgYOHsAEV" dmcf-ptype="general">바이브 코딩이 소프트웨어 개발의 패러다임을 바꾸고 있다는 사실은 분명하다. 단순한 유행이 아니라 앞으로 나아가는 길이다. 그리고 도구가 진화할수록 중요한 것은 기술보다 그것으로 구현할 새로운 아이디어일 것이다. 문제를 정의하고, 협업하며, 창의성을 조합하는 새로운 개발 문화가 자리잡아가는 과정이 중요한 셈이다. 직관적인 방식이 앞으로 소프트웨어 개발의 판도를 어떻게 재편할지 주목된다.</p> <p contents-hash="1c3776dcf21c6b8989d233f8ee62328451fc87b20cb65530f0aaeedbc25acdb4" dmcf-pid="XJBaMjx2O2" dmcf-ptype="general">IT동아 김예지 기자 (yj@itdonga.com)</p> <p contents-hash="a83a48bf4b2e087e959b2c566acc582f5b30c38fcda437911c353b6b06db0264" dmcf-pid="ZibNRAMVI9" dmcf-ptype="general">사용자 중심의 IT 저널 - IT동아 (<span>it.donga.com</span>)</p> </section> </div> <p class="" data-translation="true">Copyright © IT동아. 무단전재 및 재배포 금지.</p> 관련자료 이전 "이거 없이 일 못해요"…2030 '月 845억' 팍팍 긁었다 [테크로그] 02-20 다음 “국적 바꾸면 배신, 다 빼앗아야”…러시아 장관, 귀화 선수들 향해 협박 02-20 댓글 0 등록된 댓글이 없습니다. 로그인한 회원만 댓글 등록이 가능합니다.
