[AI 코딩] Antigravity IDE + Gemini로 3D Babylon.js 개발 시작하기 (하이브 코딩 #1)

※ 하이브 코딩은 AI코딩으로 만든 산출물을 코딩을 공부하면서 내것으로 소화하고 재활용 가능한 모듈로 묶어 자산화하는 방법으로 제가 만든 용어입니다. 실험적 접근이라 어디까지 될지 장담할수 없는 도전 단계인 점 참조 부탁드립니다.

# 첫 도전은.

하이브 코딩으로 무엇을 해볼까 구상하던 중 3D 컨텐츠를 AI를 이용해 도전해보면 어떨까요?
특히 babylon.js 라는 강력한 라이브러리는 과거에 기술 자료가 워낙 적어 접근이 힘들었는데요.
AI 코딩을 이용하면 쉽게 구현이 가능합니다.

우선 코딩 에이전트인 Antigravity IDE 프로그램으로, 그리고 Gemini 기본 구독(월 29,000원) 정도는 하는 선에서 시작하겠습니다. 3D 컨텐츠 개발은 AI도 머리를 많이 쓰거든요 :)

# 안티그래비티 IDE 설치

Antigravity와 Antigravity IDE 가 있는데 IDE 버전을 다운받아 설치하셔야 합니다.
기본 Antigravity 는 코드창이 없어 기능을 모듈화할수 없거든요
아래 링크에서 다운 받아 기본 설치해주시면 끝-
설치 방법같은건 뻔하니 패스

https://antigravity.google/product/antigravity-ide

# 구글 로그인

화면 우측 상단의 로그인 버튼을 눌러 로그인해주시면 됩니다.
당연히 제미나이 구독 계정으로!

# 확장 프로그램 설치 ( 한국어 + 라이브 서버 )

이 2가지를 한번 설치해두면 세상 편해집니다.
1) 좌측 확장 프로그램 탭, 2) '한국어' 검색 - 3) Korean 어쩌고를 설치 후

언어를 바꾸고 다시 실행하겠느냐는 'Change Language and Restart' 버튼이 뜨면 눌러주시면,

짜잔~ UI 가 한글로 바뀌지요. ( 100%는 아니지만.. )

같은 방식으로 라이브 서버를 설치해주시면 되는데요.
라이브 서버는 '영어'로 입력해주셔야 합니다.

'live'로 검색 후, 아래 확장 프로그램을 설치해 주세요.
이걸로 쉬운 개발 준비 끝!

# 폴더 만들고 열기

안티 그래비티는 폴더를 기준으로 코딩을 합니다.
그러니 폴더를 생성하고 진행해야 하는데요.
윈도우 탐색기에서 폴더를 하나 먼저 만들고 파일 - 폴더 열기 메뉴로 해당 폴더를 열어주시면 됩니다.
저의 경우 babylonjs 라는 폴더를 하나 만들었습니다.

처음에는 이런 창이 뜨는데 반!드!시! 체크 상자는 체크하지 말고 '예, 작성자를 신뢰합니다.' 를 선택해 주세요.

# 하이브 코딩 시작

이제 안티그래비티 AI에게 3D 세계를 생성하는 걸 부탁하겠습니다.
그런데 요새 AI 토큰낭비가 심하잖아요.
3D 컨텐츠는 그냥 생성 요청하면 막 뭘 설치하고 복잡하게 하다가 토큰 다 써버리는 수가 있습니다.

명확하게 절약할수 있는 기술과 키워드는 아래와 같은데요.
'babylon js', 'cdn', 'jquery' !

바빌론JS는 3D 컨텐츠를 생성하는 우수한 플랫폼이고,
CDN은 AI 가 직접 코드를 분석하지 못하게 외부 저장소를 가져다 쓰는 방법입니다.
그리고 jquery(제이쿼리)는 코드량을 엄청 절약하게 해주는 사장될 법했었는데 AI시대에 다시 유용하게 될 것 같은 기술입이다. 이걸로 만들면 코드량이 워낙 적다 보니 토큰 소모도 적거든요.

우측 화면 채팅창이 AI와 대화하는 창인데요.

여기에 이렇게 적어볼까요?

"babylon js 로 3차원 공간 안에 땅바닥을 만들어줘. CDN과 jquery를 사용해줘."

이렇게 하면 간단한 걸 만들때도 있고 엄청난 걸 만들 때도 있습니다.

좌측 화면에 index.html 파일이 생겨났을텐데요. ( 안 보이면 제일 위에 탭 선택 )

이 파일을 마우스 우클릭, 'Open with Live Server' 를 선택하시면 됩니다.
다른 방법으로 열면 일부 기능이 작동되지 않을수 있어요.

저같은 경우 와우~할만한 걸 만들어 주었네요. 여러분은 아마 완전 다른 화면이 나오실 겁니다.

하지만 이렇게 만든 코드들은 제대로 내것으로 소화하지 못하면 실제 프로젝트에 활용했을 때 큰 기술적 부채로 남을수 있습니다. 다음 시간에는 기술적 부채가 되지 않게 모듈화하면서 하나씩 내 자산으로 소화하는 방향으로 진행하겠습니다.

오늘 샘플은 아래URL에 올려두었습니다.

https://cray7.mycafe24.com/babylonjs/

AI코딩을 다루지만 이 게시글은 순수 '사람 크레이글'입니다 :)