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

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

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

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

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

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

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

PART I Antigravity로 첫 웹페이지 만들기

CHAPTER 1 이제는 '공부'보다 '바이브'가 먼저인 시대
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 대화를 담당하는 LLM 25
__1.3.2 주요 AI 어시스턴트와 모델 30
__1.3.3 코드 생성을 보조하는 AI 에디터 32
1.4 AI의 잠재력을 깨우는 한마디, 프롬프트 엔지니어링 36
__1.4.1 초보자를 위한 프롬프팅 핵심 원칙 36
__1.4.2 구글 AI 스튜디오 Playground 38
__1.4.3 시스템 지침을 통한 AI의 역할 고정 41

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

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

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

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

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

CHAPTER 5 Three.js로 만드는 3D 웹페이지
5.1 화면에 깊이를 더하는 Three.js 122
__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.10 Three.js와 R3F
5.2 빌드부터 실행까지 막힘없이 뽑아내는 3D 결과물 141
__5.2.1 프롬프트 실행 143
__5.2.2 핵심 기능이 동작하지 않는 문제 150
__5.2.3 프로젝트에서 사용하는 패키지 151
__5.2.4 실행과 배포를 이어주는 npm 명령어 154
5.3 3D 우주선 게임과 지렁이 게임 155
__5.3.1 레트로 스타일 3D 우주선 게임 155
__5.3.2 네온빛으로 살아나는 3D 지렁이 게임 166

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

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

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

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

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

찾아보기 319

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