VIBE CODING.

구글에서 제미나이 3 발표와 더불어 Anti Gravity 통합 개발 플랫폼을 같이 선보였습니다. 기존에 무수한 하위 조직에서 개발했던 웹 버전의 IDE 형태의 서비스들이 존재함에도 아예 설치형 통합 개발툴을 별도로 선보인건데요. 사실 아무리 CLI 가 날고 긴다 하더라도, 결국 광활한 IDE 화면에서 모든 요소를 커스텀해서 AI 기반의 개발을 할 수 있다는 것은 터미널 기반의 UX의 한계를 훨씬 뛰어넘는 편리함을 제공합니다. 커서나 윈드서프를 사용하셨던 분들이라면, 거의 이질감 없이 사용하실 수 있고, 병렬 처리되는 에이전트, 기존의 playwright 가 아닌 크롬 브라우저 확장 기반의 네이티브 프리뷰 브라우징으로 AI가 실제 결과물을 보며 개발한다는 잇점을 제공합니다. 무엇보다 현재 안티 그래비티가 최강인 이유는 "공짜"라는 점입니다. 물론 사용하다 보니 트래픽이 몰려서 그런지 작업 실패 오류가 뜰 때도 빈번하지만, 아직까지 제미나이 3, 클로드 소넷 4.5를 무료로 쓸 수 있는 AI IDE 로서는 유일하기 때문에 지금 당장 써보시는 걸 추천하지 않을 수 없습니다. 커서의 진정한 경쟁자가 생겼네요. https://antigravity.google/

요즘 바이브 코딩 툴로는 러버블이 대세지만, 그 외에도 유사한 서비스들이 우후죽순 쏟아지고 있다. 오늘 간단히 소개할 코딩용 플랫폼 역시 러버블과 거의 동일한 UI가진 서비스이며, 러버블과는 달리 자체 PostgreSQL을 구축해서 실시간으로 데이터 베이스 구조까지도 확인할 수 있는 서비스인 Zoer.ai 다. 딱히 설명할게 많지 않을 정도로 러버블과 유사하지만, 앞서 설명한대로 자체적으로 데이터베이스를 구축하고 있고 이 뿐만 아니라 인증, AI 이미지 생성, 결제 서비스인 스트라이프 까지도 모두 지원을 한다. 위 초기페이지에 프롬프트를 작성하고, 원하는 연결 서비스(예: 데이터베이스)를 클릭하고 서비스를 생성하면 된다. 재미있게 사용자들의 프롬프트를 AI 를 통해 증강하여 PRD(기능요구 문서) 형태로 자동으로 작성하고, 이를 토대로 서비스를 구축한다. 실제 화면도 러버블과 딱히 다르지 않다. 다만 러버블과 차이점이라면 Zoer.ai 는 프로젝트 빌드시 NextJS를 사용하여 구축이 된다. SEO 가 필수적인 블로그나 콘텐츠 서비스라면 이러한 프레임워크를 사용하는 것은 꽤나 도움이 되지만, 라이트한 서비스에 무조건 NextJS를 사용하는 것은 개인적으로는 별로 반기진 않는다. 이러한 프레임웍이나 라이브러리를 Firebase Studio에서 처럼 선택할 수 있게 하는 것이 사실상 베스트일테지만, 이러한 신생 업체들이 수많은 선택지를 모두 고려한다는 것은 쉽지 않은 상황일테니 일견 이해가 가기도 한다. 여튼 위 화면처럼 Zoer.ai sql 쿼리를 자체적으로 생성하고, 자체 DB에서 모두 실행시켜 테이터 베이스 탭에서 실시간으로 확인할 수 있다. Zoer.ai 역시 유료 서비스이기 때문에 무료 유저에게는 월간 한정된 크레딧만 제공한다. 새로가입하면 15 크레딧을 주는데, 하나의 가벼운 프로젝트를 간신히 만들 수 있는 정도에 가깝다. 러버블이 매일 크레딧이 갱신되는 형태로 무료 티어 서비스를 제공하는것에 비해 아쉬운 부분이다. 아마도 연수나 강의 등에서는 러버블이 더욱 유용할테지만, 러버블이 막혔을 때 대안 정도로 사용하기에는 Zoer.ai 도 꽤나 편리한 서비스다. 캔바 코드도 이젠 캔바 스프레드 시트 기능이 도입 되면서 스프레드 시트를 데이터 베이스로 쓸 수 있는 시대가 되었다. 원한다면 누구나 딸깍으로 서비스를 만들수 있는 세상이고 기획과 아이디어만 참신하다면, 누구나 서비스 프로바이더, 서비스 빌더가 될 수 있다. 도전할 것인가 말것인가는 스스로의 선택에 달려 있을 뿐.

3장. 자바스크립트 이 - 웹페이지에 생명을 불어넣는 언어 정적인 화면에 '생명'을 넣는 일 HTML과 CSS로 완성된 웹페이지는 예쁘지만, 아직 '움직이지 않는 그림'에 불과합니다. 버튼을 눌러도 아무 일도 일어나지 않고, 입력창에 글자를 써도 반응이 없습니다. 이 상태는 마치 전원을 꺼둔 스마트폰 화면처럼 '멈춰 있는 세상'이죠. 그런데 버튼을 누르면 팝업이 열리고, 입력창에 문자를 치면 자동으로 추천 단어가 뜨는 그 순간—이 모든 마법을 담당하는 존재가 바로 자바스크립트(JavaScript) 입니다. 자바스크립트는 웹페이지에 '생명'을 불어넣는 언어입니다. HTML이 뼈대라면, CSS는 옷이고, 자바스크립트는 그 옷을 입고 움직이는 사람의 근육과 신경입니다. 웹의 무대 위, 배우는 자바스크립트 앞 장에서 살펴보았듯 브라우저는 하나의 건축물처럼 동작합니다. 그리고 그 위에 세 요소가 있다는 것도 함께 알아보았습니다. HTML은 기본적인 집의 뼈대를 구축하고, CSS는 인테리어를 담당하며, JavaScript는 전기와 수도를 담당하죠. 예를 들어, HTML로 버튼을 하나 만들고, CSS로 색깔을 예쁘게 칠했다고 해보겠습니다. 이 상태에서 브라우저는 위 버튼 영역의 코드를 해석해 그저 정적인 버튼을 보여줄 뿐입니다. 하지만 여기에 다음과 같은 자바스크립트 한 줄을 추가하면 이야기가 달라집니다. *html 파일을 생성한 뒤 위 내용을 붙여넣고 브라우저에서 실행해보세요.

2장. 웹페이지를 구성하는 세 친구 HTML, CSS, JavaScript 웹페이지를 만드는 '세 친구들' 여러분이 PC나 모바일 웹 브라우저를 통해 자주 접속하는 웹서비스가 있을 겁니다. 뉴스 포털, 온라인 커뮤니티, 혹은 커피 주문 웹서비스일 수도 있죠. 그런데 그 화면 속 버튼, 사진, 글자 하나하나가 어떻게 만들어지는지 생각해본 적 있나요? 여러분이 보시는 웹페이지는 단순한 그림이 아닙니다. 그 안에는 수많은 명령어와 언어가 어우러져 살아 움직이고 있습니다. 그리고 그 중심에는 언제나 세 명의 친구가 있습니다. 웹의 세 친구 ― HTML, CSS, JavaScript. 이 셋은 브라우저 안에서 각자의 역할을 수행하며 우리 눈에 익숙한 웹페이지를 만들어냅니다. 각기 서로 다른 일을 하지만, 하나라도 빠지면 지금의 웹페이지는 제대로 동작하기 어렵습니다. 그렇기 때문에 이 요소를 이해하는 순간, '웹사이트'에서 표현되는 화면이 단순한 화면이 아니라 하나의 정교한 시스템으로 느껴질 겁니다. 이 세 요소는 각각의 고유한 문법을 가지고 있는 서로 다른 언어들이지만 같이 어우러져 하나의 완성된 웹페이지로 표현됩니다. HTML ― 화면의 뼈대를 세우는 건축가 먼저, HTML(HyperText Markup Language) 은 웹페이지의 '뼈대'를 담당합니다. 이 언어는 웹페이지의 구조를 짜는 건축가와 같습니다. 건축가가 건물을 설계할 때 방의 위치, 문과 창문의 크기, 층의 구조를 도면에 그리듯, HTML은 화면의 각 부분이 어디에 있고, 어떤 역할을 하는지 정의합니다. 예를 들어, 제목은 <h1> 단락은 <p> 이미지 영역은 <img> 버튼은 <button>

🧑🏻‍💻 Source : unsplash.com 1장. 웹 서비스는 어떻게 작동할까? 부제 : 눈에 보이는 세상과 보이지 않는 세상의 대화 우리가 매일 쓰는 앱, 사실은 "대화 중" 아침에 눈을 뜨자마자 인스타그램을 열어본다고 해봅시다. 피드가 열리고, 친구의 사진이 뜨고, 좋아요 버튼을 누르면 하트 색이 변하죠. 그 몇 초 사이에 스마트 폰에서는 무슨 일이 일어날까요? 사실, 그 짧은 순간 동안 여러분의 스마트폰은 인스타그램의 서버와 "대화"를 하고 있습니다. 스마트폰(혹은 브라우저)이 "이 사진들 좀 보여줘!"라고 요청(Request)을 보내면, 서버는 "알겠어, 여기에 네 친구 사진들이야."라며 응답(Response)을 보내주는 것이죠. 이 대화를 눈에 보이게 바꿔 표현하면 이렇게 됩니다. [스마트 폰] → "사진 목록 좀 보여줘요!" ← "여기 있습니다! (사진 데이터 전달)" 이처럼 요청과 응답(Request & Response)이 오가는 구조가 모든 웹 서비스의 기본입니다. 우리가 '클릭한다', '검색한다', '로그인한다'는 모든 행동은 결국 서버와의 대화이자 데이터의 왕복인 셈입니다. 클라이언트와 서버 ― 두 세계의 협력 이제 이 대화의 주인공 두 명을 좀 더 알기 쉽게 정리해볼까요? 클라이언트(Client): 사용자가 직접 보는 쪽, 즉 스마트폰 앱이나 웹 브라우저 화면입니다. 서버(Server): 데이터를 저장하고 처리하는 보이지 않는 쪽, 즉 컴퓨터의 뒤편에서 일하는 두뇌입니다.

바이브 코딩이 널리 유행하면서 다양한 도구들이 많이 나타나고 있습니다만, 그 가운데에서도 구글이 제공하는 바이브 코딩이 가능한 플랫폼들에 대한 관심도 커지고 있습니다. 이번 시간에는 구글의 대표적인 두 바이브 코딩 활용이 가능한 두 플랫폼을 간단히 비교해보도록 하겠습니다. 먼저 두 플랫폼 모두 웹 상에서 직접 AI 기반의 코딩이 가능한 통합 개발환경(IDE)을 갖추고 있습니다. 하지만 두 플랫폼은 큰 틀에서 엄밀히 차이가 있는데요. 먼저 두 서비스는 궁극적으로 "서비스 목적"에서 차이가 있습니다. AI Studio Build Google AI Studio는 주로 Google의 최신 AI 모델, 특히 제미나이(Gemini) 제품군을 테스트하고 실험하기 위한 웹 기반 도구입니다. 따라서 AI STUDIO의 개발 실행환경은 사용자의 프롬프트에 따라 AI 모델이 어떻게 반응하고 코드를 생성하는지 확인하는 데 초점이 맞춰져 있습니다. 쉽게 말하면 AI Studio의 목적은 개발자가 인공지능 모델을 빠르게 실험하고, 대화형 애플리케이션이나 프롬프트 엔지니어링을 수행할 수 있도록 하는 것입니다. 특히 최신 인공지능 모델을 적용하기 위한 매우 쉬운 연동 기능들을 토대로 인공지능 성능을 간단히 테스트할 수 있는 어플리케이션 개발에 주로 초점이 맞춰져 있습니다. Firebase Studio 반면 Firebase Studio는 애플리케이션의 전체 생애주기를 지원하는 플랫폼으로, 백엔드 인프라를 단순화하고 앱의 배포, 운영, 사용자 관리까지 포함한 '서비스의 실현'을 위한 도구입니다. AI Studio가 아이디어를 구체화하는 '간단한 테스팅 플랫폼'이라면, Firebase Studio는 그 아이디어를 실제 서비스로 구현하고 유지하는 본격적인 '운영 인프라 플랫폼'이라 할 수 있습니다. Firebase Studio 는 실제 상용 규모의 서비스 개발에도 유연한 확장성을 제공하기 때문에 실제 상업용 서비스 개발에도 무리 없이 적용이 가능합니다. 결과적으로 Google AI Studio와 Firebase Studio는 Google에서 제공하는 AI 기반 개발 도구이지만, 개발 환경의 목적과 기능 면에서 명확한 차이점을 보입니다. AI Studio가 AI 모델 자체에 대한 실험과 프로토타이핑에 중점을 두는 반면, Firebase Studio는 AI를 활용하여 전체 애플리케이션을 개발, 테스트, 배포하는 통합 개발 환경(IDE)+백엔드+배포의 전체 서비스를 제공하는 것이 특징이구요. 이런 차이로 인해 바이브 코딩을 하실 때 주의하셔야 할 부분이 있는데요. AI Studio는 사실상 React + Typescript , Angular + Typescript 만을 지원하고, 다른 유명 프레임워크(NEXT.JS)등은 사용할 수 없습니다. 따라서 매우 다양한 라이브러리, 프레임워크를 설치해서 사용해야하는 서비스들이라면 외부 서비스들의 연동이나 외부 데이터베이스를 적극적으로 사용하는데 꽤 많은 제약이 뒤따릅니다. 반면 AI Studio는 매우 간단하게 구글 자체의 인공지능을 활용해서 소규모 앱을 만드는데, 혹은 인공지능과 기타 백엔드나 추가 기능이 필요하지 않다면 어플리케이션을 프로토타이핑하는데 매우 간편하고 유용합니다. 이와 대조적으로 구글의 Firebase Studio는 매우 많은 프레임워크를 선택할 수 있으며, 확장성 측면에서 매우 우수하기 때문에 풍부한 개발 자원을 쉽게 활용할 수 있습니다. 하지만 그만큼 초기 세팅의 번거로움이나 조금의 지식이 더 필요할 수 있습니다. 따라서 실제 바이브 코딩을 하실 때에는 두 플랫폼을 비교해보시고 서비스 규모에 적합한 플랫폼을 선택하시는 것이 좋습니다. 🥭 AI STDUIO 추천 : 간단한 인공지능 활용 단순 실행용 어플리케이션, 백엔드나 기타 데이터 베이스 연동 불필요한 앱 🍒 FIREBASE STUDIO 추천 : 다양한 라이브러리와 프레임워크를 사용해야 하는 데이터베이스 기반의 다양한 서비스