말하는 대로 제미나이 × 3D 바이브 코딩

배인진

저자:배인진
10년간소프트웨어개발자이자코딩교육자로활동하며기술트렌드의변화를업무에적용해왔다.하지만AI가산업전반의지형을바꾸는흐름을보며,이제는특정기술의전문가가되는것보다AI를도구로삼아문제를정의하고해결하는경험이더중요한시대라고생각한다.이책을통해기술과거리가멀었던사람들도AI를업무현장에서활용할수있게되기를바란다.

시작하며5
이책에대하여6
프로젝트미리보기12

PARTIAntigravity로첫웹페이지만들기

CHAPTER1이제는‘공부’보다‘바이브’가먼저인시대
1.1왜지금바이브코딩인가?16
__1.1.1오해는금물!바이브코딩의진짜의미17
__1.1.2사이먼윌리슨이정의한바이브코딩18
__1.1.3바이브코딩역량이확장되는단계19
1.2바이브코딩이완전히바꾼개발환경22
__1.2.1상상하는즉시코드가시작되는마법22
__1.2.2개발을몰라도괜찮아진시대23
__1.2.3같은도구로남다른결과를만드는‘바이브’의차이24
1.3내머릿속아이디어를현실로옮겨줄도구들24
__1.3.1대화를담당하는LLM25
__1.3.2주요AI어시스턴트와모델30
__1.3.3코드생성을보조하는AI에디터32
1.4AI의잠재력을깨우는한마디,프롬프트엔지니어링36
__1.4.1초보자를위한프롬프팅핵심원칙36
__1.4.2구글AI스튜디오Playground38
__1.4.3시스템지침을통한AI의역할고정41

CHAPTER2Antigravity와함께하는바이브코딩첫걸음
2.1복잡한준비는끝!쾌적한코딩환경만들기50
__2.1.1Node.js설치50
__2.1.2Antigravity2.0설치54
2.2Antigravity2.0첫만남57
__2.2.1첫프로젝트58
__2.2.2모델선택과활용60
__2.2.3슬래시명령어와구현계획62
__2.2.4이력서웹페이지구현68

PARTII구글AI도구로나만의웹이력서만들기

CHAPTER3AI스튜디오로웹이력서초안완성
3.1Playground를활용한웹이력서기획78
__3.1.1Codeexecution을활용한프로젝트성과섹션기획78
__3.1.2디자인레퍼런스탐색81
__3.1.3URLcontext활용84
__3.1.4디자인레퍼런스분석86
3.2Build를활용한웹이력서프로토타입구현90
__3.2.1개발환경구성91
__3.2.2클릭한번으로웹이력서배포97

CHAPTER4AI스튜디오와Antigravity연동
4.1AI스튜디오와Antigravity2.0105
__4.1.1Build코드모드활용105
__4.1.2Antigravity와프로젝트연결106
4.2AntigravityIDE110
__4.2.1AntigravityIDE설치110
__4.2.2프로젝트작업준비115

PARTIII개성있는3D포트폴리오만들기

CHAPTER5Three.js로만드는3D웹페이지
5.1화면에깊이를더하는Three.js122
__5.1.1프로젝트기본설정122
__5.1.2씬128
__5.1.3카메라129
__5.1.4렌더러130
__5.1.5지오메트리131
__5.1.6재질131
__5.1.7메시135
__5.1.8조명135
__5.1.9애니메이션136
__5.1.10Three.js와R3F
5.2빌드부터실행까지막힘없이뽑아내는3D결과물141
__5.2.1프롬프트실행143
__5.2.2핵심기능이동작하지않는문제150
__5.2.3프로젝트에서사용하는패키지151
__5.2.4실행과배포를이어주는npm명령어154
5.33D우주선게임과지렁이게임155
__5.3.1레트로스타일3D우주선게임155
__5.3.2네온빛으로살아나는3D지렁이게임166

CHAPTER6결과물에생기를더하는NanoBanana와ReactBits
6.1NanoBananaPro를활용한무드보드에셋제작172
__6.1.1구글AI스튜디오유료API키설정172
__6.1.2무드보드제작175
__6.1.3사용비용확인179
6.2ReactBits로만드는3D효과181
__6.2.1시스템지침설정181
__6.2.2프롬프트템플릿184
__6.2.3바이브코딩초기시행착오184
__6.2.4ReactBits를활용한홈화면구현190
__6.2.5무드보드를활용한스타일변경197
6.3Antigravity2.0을활용한프로젝트개선206
__6.3.1Antigravity로프로젝트전송206
__6.3.2ModernWebGuidance플러그인을활용한반응형개선210
__6.3.3ChromeDevTools플러그인을활용한사용성검사214

PARTIV상상속전시장을현실로만들기

CHAPTER7전시공간의주인공,나만의3D모델준비
7.1NanoBananaPro로완성하는고품질3D소스이미지223
__7.1.1원본이미지선정223
__7.1.23D모델링에적합한이미지로수정226
__7.1.3측면및후면이미지수정230
7.2Hunyuan3D기반의입체모델변환과생성231
__7.2.1이미지업로드가이드라인232
__7.2.23D모델겉면개수235
__7.2.3Geometry와Texture생성236
__7.2.4GLB파일용량최적화245

CHAPTER8몰입감이살아나는전시공간연출
8.1구글AI스튜디오를이용한전시관구조설계252
__8.1.1프롬프트템플릿252
__8.1.2전시장기본구조254
__8.1.33D모델추가261
8.2AntigravityIDE에서완성도를끌어올린3D전시관266
__8.2.1AntigravityIDE작업을위한AI스튜디오프로젝트준비267
__8.2.2반가사유상을가리는반응형레이아웃개선269
__8.2.3주목도를높이는화면배치간결화276
__8.2.4프롬프트수정제안을되살리는Rule설정280
__8.2.5전시장분위기와어울리는재질로수정285

CHAPTER9완성한프로젝트를세상에공개할시간
9.1Gemini를활용한배포전최종점검291
__9.1.1배포전검사291
__9.1.2터미널명령어실행294
__9.1.3배포파일빌드296
__9.1.4빌드결과물확인및에러수정300
9.2Netlify배포를통한가상전시공간오픈304
__9.2.1Netlify배포및결과확인305
__9.2.2경고메시지해결후재배포310

찾아보기319

웹이력서에서3D전시관까지,상상이자라는바이브코딩
"이걸정말내가만들었다고?"

웹이력서로시작한화면은디자인기획을거쳐점점나다운소개페이지가되고,직접만든3D모델은조명과재질이더해진가상전시장한가운데놓입니다.만들고싶은모습을제미나이에게말하고,눈앞의결과를하나씩확인하며고쳐나가다보면머릿속아이디어가살아움직이는3D웹으로바뀝니다.복잡한코드를붙잡고있지않아도됩니다.이책은제미나이와대화하며웹이력서부터3D전시공간까지직접만들어보는바이브코딩입문서입니다.

“나를소개하는웹이력서를만들어줘.”
“박물관처럼어둡고웅장한분위기의3D전시공간으로만들어줘.”
“반가사유상이조명을받았을때은은하게빛나는유물처럼보이게수정해줘.”

원하는모습을말하고,결과를확인하고,마음에들지않으면다시요청합니다.그렇게평범한웹이력서는입체적인3D포트폴리오로,한장의이미지는가상전시공간을채우는작품으로발전합니다.

구글AI스튜디오와안티그래비티로기능과디자인을구현하고,나노바나나와Hunyuan3D로이미지와모델을만듭니다.ReactBits와Three.js로화면에움직임과깊이를더한뒤,완성한프로젝트는Netlify로직접배포합니다.결과물이기대와다르면다시요청하고,오류가있으면원인을찾아고칩니다.모바일화면까지점검하며완성한결과물을다시배포하는과정도함께경험합니다.

시작은만들고싶은모습을한문장으로말하는것만으로충분합니다.머릿속에만있던아이디어를제미나이와함께웹페이지로만들고,눈앞에서살아움직이는3D공간으로펼쳐보세요.

책속에서

구글AI스튜디오(GoogleAIStudio)는별도의개발환경을구축하지않고도프로토타입을빠르게만들어볼수있는도구다.무료사용량도비교적넉넉하게제공되는편이라개발경험이많지않더라도프롬프트를여러번실행하며아이디어의실현가능성을확인해볼수있다.아이디어검증을마친후에는Antigravity로내보내기기능을사용해지금까지의대화이력과결과물을그대로유지한채Antigravity프로젝트를생성하고개발을이어갈수도있다.(38쪽)

스크롤을내려전체내용을확인해보자.경력사항은모델이임의로생성한데이터다.각회사에서담당한역할과성과는다소보완이필요해보이지만,전체적인디자인요구사항은비교적잘반영한편이다./프로젝트성과섹션은실제데이터를기반으로막대그래프를생성해시각화했다.구현결과를보니막대그래프가가장효과적인표현방식은아니라는생각이들었다.텍스트대비를활용하거나다른시각화방안을적용하도록모델에추가요청을해보는것도좋겠다.(95~96쪽)

입문자입장에서는3D기술을웹페이지에적용했을때어떤장점이있는지바로떠올리기어려울수있다.3D기술은일반적인웹페이지와차별화된효과를만들수있고,이를통해사용자에게브랜드나상품을각인시킬수있다.다만눈에띄는효과를만들수있는만큼구현하기어렵기때문에진입장벽이있는기술이기도하다./구글도이러한점을의식했는지Gemini3Pro를발표하며공개한레트로3D우주선게임은단한번의프롬프트실행만으로시각적으로화려한결과물을만들수있다는것을보여준다.그만큼Gemini의코딩성능을효과적으로보여주는사례라고볼수있다.(155쪽)

복사한코드는6.2.2절에서작성한프롬프트템플릿의태그에추가할내용이다.다만방금복사한코드처럼긴텍스트를붙여넣으면입력창상단에칩(chip)형태로자동추가된다.칩오른쪽의[Inlinefile]버튼을클릭하면텍스트로변환할수있지만,복사한코드는1,000줄이넘어가므로그대로펼치면프롬프트가길어져읽기어려워진다./프롬프트에포함한코드,PDF,이미지등이칩형태로표시되면입력창이훨씬깔끔해진다.따라서특별히텍스트로펼쳐야할이유가없다면칩형태를유지하는편이좋다.이경우프롬프트에서는칩내용을직접붙여넣는대신'첨부한코드'라고명시하면된다.(193쪽)

3D개발과정에서는슬라이더컨트롤이자주사용된다.색상이나조명강도를바꿀때마다코드를수정해결과를확인하는것보다,슬라이더를조정하며실시간으로효과를비교하고최종구현방향을정하는편이훨씬빠르기때문이다.요구사항에는없었지만,개발과정에서자주활용하는방식이라모델이알아서추가한것으로보인다.이처럼AI가요청하지않은기능을제안할때는실제작업에도움이되는지확인하며받아들이는것이좋다.(256쪽)