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

 

말하는 순간, 상상이 3D 공간으로 살아난다

코딩을 몰라도 괜찮다. 중요한 건 문법이 아니라 여러분의 '바이브'니까. 만들고 싶은 모습을 AI에게 말하면, 하나씩 만들어지는 결과가 눈앞에 펼쳐진다. 간단한 웹 이력서로 시작해 시선을 사로잡는 3D 포트폴리오를 지나 상상이 현실이 되는 전시 공간까지 대화만으로 완성할 수 있다. 구글 AI 스튜디오와 안티그래비티, 나노 바나나와 Hunyuan 3D, React Bits와 Three.js까지, 복잡해 보이는 도구들도 AI와 대화하다 보면 어느새 손에 익는다. 완성한 아이디어는 Netlify로 직접 세상에 공개한다. AI와 함께 '슥' 만들고 '싹' 배포하며, 지금 바로 상상을 현실로 바꾸는 바이브 코딩을 시작해보자.

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [쿠팡]

 

출판사 제이펍
도서명 말하는 대로 제미나이 × 3D 바이브 코딩
부제 AI 스튜디오, 안티그래비티, 나노 바나나, Hunyuan 3D, Three.js, Netlify로 웹 이력서부터 3D 포트폴리오, 3D 갤러리까지 말로 구상하고 완성하는 3D 웹 프로젝트
지은이 배인진
출판일 2026. 07. 30
페이지 320쪽
판 형 46배판변형(188*245*13.5)
제 본 무선(soft cover)
정 가 24,000원
ISBN 979-11-24205-54-9 93000
키워드 Gemini, Nano Banana, 반가사유상, 전시, Antigravity, IDE, 레트로, React Bits, 프롬프트, 프롬프트 엔지니어링, 배포, 웹사이트, 웹페이지
분 야 인공지능 / 생성형 AI

관련 사이트
■ (없음)

 

관련 시리즈

■ (없음)

 

관련 포스트

■ 2026.07.16 - [출간 전 책 소식] - AI에 말하니 3D 웹사이트가 만들어진다?

 

관련 도서

■ 21개의 실무 앱으로 배우는 Dify

■ 나는 AI 에이전트 팀과 일한다

■ LUVIT♥ 클로드와 함께하는 LLM 프로젝트

 

관련 파일 다운로드

■ (없음)

 

강의 보조 자료(교재로 채택하신 분들은 https://jpub.tistory.com/notice/1076을 통해 다음 자료를 요청하실 수 있습니다.)
■ 본문의 그림과 표

 

미리보기(앞부속, 본문 일부)

 

정오표 페이지
■ (등록되는 대로 링크를 걸겠습니다.)

 

도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [쿠팡]

 

도서 소개

웹 이력서에서 3D 전시관까지, 상상이 자라는 바이브 코딩

"이걸 정말 내가 만들었다고?"

 

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

 

“나를 소개하는 웹 이력서를 만들어줘.”

“박물관처럼 어둡고 웅장한 분위기의 3D 전시 공간으로 만들어줘.”

“반가사유상이 조명을 받았을 때 은은하게 빛나는 유물처럼 보이게 수정해줘.”

 

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

 

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

 

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

 

지은이 소개

배인진

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

 

차례

시작하며 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