IT 정보

코딩 포기자가 구글 'Antigravity'로 10분 만에 React 앱 만든 썰

드림로그 2025. 12. 17. 23:30

(부제: 개발자가 아니라 '팀장'이 되어 Accept 버튼만 눌렀다)

구글 Antigravity AI 코딩 툴로 10분 만에 리액트 앱 만들기. 팀장 모자를 쓴 캐릭터가 Accept all 버튼을 누르고 있는 일러스트
개발자가 아니라 '팀장'이 되어 AI에게 지시만 내리면 되는 'Antigravity'의 핵심 컨셉. 복잡한 코딩 없이 클릭 한 번으로 앱이 완성되는 과정을 우주 무중력(Antigravity) 테마로 표현했습니다

1. 이름값 하는 녀석이 나타났다

앱 하나 만들고 싶어서 기웃거려 보면 늘 '진입장벽(중력)'에 부딪혔다. 언어는 뭘 쓸지, 디자인은 어떻게 할지... 배워야 할 게 산더미라 시작도 하기 전에 포기하기 일쑤였다.

그런데 구글이 **Antigravity(반중력)**라는 툴을 내놨다. 개발의 중력을 없애주겠단다. 설치하고 실행해 보니 화면이 까만 게, 예전에 코딩 배워보겠다고 깔았다가 3일 만에 지웠던 VS Code랑 똑같이 생겼다. (소름)

하지만 겁먹을 필요 없다. 겉모습만 비슷하지, 안에 들어있는 엔진이 다르다. Gemini 3. 단순한 챗봇이 아니라 스스로 행동하는 '에이전트'다.

"유튜브 영상 랭킹 보여주는 웹앱 만들어줘. 디자인은 좀 있어 보이게."

그러자 이 녀석이 나에게 **'작업 계획서'**를 들이밀었다.


2. 내가 모르는 용어로 계획을 짜왔다 (뻔뻔함)

Antigravity 화면 가운데 쪽에 뜬 **[작업 목록]**을 보고 살짝 당황했다. 나는 그냥 파이썬이나 좀 깔짝거려 볼까 했는데, 녀석의 계획은 달랐다.(결과는 영문으로 출력 되는데 한글로 요청하면 한글로 출력해 준다)

Google Antigravity 에이전트가 작성한 유튜브 웹앱 개발 작업 목록. Vite React 프로젝트 생성과 글래스모피즘 디자인 제안 확인
내가 시키지 않아도 AI가 알아서 'Vite + React', 'Tailwind CSS', 최신 트렌드인 '글래스모피즘 디자인'까지 제안한 작업 계획서입니다. 코딩 초보자도 이 목록을 보고 지시만 하면 됩니다.

  • Vite + React 프로젝트 생성? (요즘 이게 웹 개발 국룰이라며?)
  • Tailwind CSS? (디자인 쉽게 하는 거라던데...)
  • 프리미엄 디자인 (글래스모피즘)? (오, 반투명 유리 질감? 비싸 보인다.)

AI가 나보다 트렌드를 더 잘 안다. "주인님, 촌스럽게 그냥 짜지 말고 React에 글래스모피즘 얹어서 갑시다." 라고 제안하는 꼴이다.

나는 고민하지 않았다. 나는 **'코더(Coder)'**가 아니라 **'팀장(Leader)'**이니까. 실무자가 좋다면 좋은 거다. 쿨하게 승인했다. "진행시켜."


3. 상황실에서 벌어진 일

승인을 하자마자 내 화면은 **'미션 컨트롤 상황실'**로 변했다.

Google Antigravity IDE 실행 화면. 중앙에는 npm install 명령어가 포함된 사용 가이드(Walkthrough)가 있고, 우측 에이전트 매니저 패널 하단에는 파란색 'Accept all' 버튼이 활성화되어 있다.
나의 '미션 컨트롤 상황실' 모습. 가운데 화면에서는 AI가 친절하게 사용설명서(Walkthrough)를 써주고 있고, 오른쪽에서는 에이전트가 작업 보고를 올린다. 내 역할은 우측 하단의 파란색 [ Accept all ] 버튼을 누르는 것, 그리고 마지막에 터미널에 npm install 을 쳐주는 것뿐이었다.

  • 왼쪽 (Explorer): tsx, json 같은 파일들이 미친 속도로 생성된다. (난 저거 문법 모른다.)
  • 가운데 (Walkthrough): AI가 나를 위해 **'사용 설명서'**를 실시간으로 쓰고 있다.
  • 오른쪽 (Agent Manager): 여기가 핵심이다. 에이전트가 실시간으로 보고를 올린다.
    • "유튜브 서비스 컴포넌트 구현 완료"
    • "검색바(SearchBar) 구현 완료"

그리고 가장 중요한 순간. 에이전트가 작업을 마치고 나에게 묻는다. "변경 사항을 적용하시겠습니까?"

우측 하단에 파란색 버튼이 빛나고 있다. [ Accept all ]

나는 코드를 한 줄 한 줄 검토하지 않는다. (봐도 모르니까.) 그저 쿨하게 Accept all 버튼을 딸깍 눌렀다.


4. 끝날 때까지 끝난 게 아니다 (반전)

버튼을 누르고 팔짱을 꼈다. "자, 이제 멋진 화면을 보여줘!" 그런데 화면이 조용하다. 에이전트가 마지막 메시지를 띄웠다.

"주인님, 구현은 다 했는데 설치는 직접 하셔야죠? 터미널에 npm install 치세요."

아... 역시 100% 자동은 없구나. 마치 자율주행 차를 타고 왔는데, 주차장에 들어갈 때는 "핸들 잡으세요"라고 하는 느낌이다. 하긴, 내 컴퓨터에 라이브러리를 까는 건데 보안상 주인이 직접 하는 게 맞긴 하다.

하지만 괜찮다. 코드를 짜라는 게 아니니까. AI가 친절하게 알려준 명령어 **npm install**을 복사해서, 터미널에 붙여 넣고 엔터를 쳤다.

그러자 까만 화면에서 게이지가 쭈욱 차오르더니, 드디어 설치가 끝났다. 그리고 npm run dev를 치는 순간.


5. 중력이 사라진 순간

브라우저 창이 열리면서, '반투명 유리(Glassmorphism)' 디자인이 적용된 유튜브 랭킹 검색기가 떴다. 10분 전만 해도 나는 React가 뭔지도 몰랐던 사람이다.

파이썬이냐 자바스크립트냐 공부할 필요가 없었다. 기술 스택 선정부터 구현까지 AI가 알아서 했으니까. 이게 Antigravity다. 지루한 과정은 생략하고, 결과로 직행하는 것.


6. 결론: 이제 '상상'만 하세요

오늘 앱을 만들면서 내가 한 코딩은 '0줄'이다. 대신 내가 한 일은 명확하다.

  1. **"만들어줘"**라고 지시하기 (기획).
  2. AI가 가져온 계획표 보고 **"진행시켜"**라고 지시하기
  3. 에이전트가 작업 진행 중 필요사항을 요청하면 "Accept" 또는 "Accept all" 누르기 (승인).
  4. 마지막에 "npm install" 치고 엔터 누르기 (화룡점정).

이제 개발은 영어 단어를 외우는 암기 과목이 아니다. **"무엇을 만들 것인가"**를 상상하고, 유능한 AI 에이전트에게 일을 시키는 **'리더십'**의 영역이다.

(추신: 아, 근데 유튜브 데이터를 진짜로 가져오려니 'API 키'라는 게 필요하단다. 이건 구글 클라우드 가서 받아와야 하는데... 귀찮지만 이것도 3분 컷으로 해결했다. 이 방법은 다음 포스팅에서 공개하겠다.)