상세정보
말하는 대로 제미나이 × 3D 바이브 코딩
- 저자
- 배인진
- 출판사
- 제이펍
- 출판일
- 2026-09-10
- 등록일
- 2026-11-03
- 파일포맷
- PDF
- 파일크기
- 0
- 공급사
- 북큐브
- 지원기기
-
PC
PHONE
TABLET
프로그램 수동설치
뷰어프로그램 설치 안내
책소개
말하는 순간, 상상이 3D 공간으로 살아난다
코딩을 몰라도 괜찮다. 중요한 건 문법이 아니라 여러분의
바이브
니까. 만들고 싶은 모습을 AI에게 말하면, 하나씩 만들어지는 결과가 눈앞에 펼쳐진다. 간단한 웹 이력서로 시작해 시선을 사로잡는 3D 포트폴리오를 지나 상상이 현실이 되는 전시 공간까지 대화만으로 완성할 수 있다. 구글 AI 스튜디오와 안티그래비티, 나노 바나나와 Hunyuan 3D, React Bits와 Three.js까지, 복잡해 보이는 도구들도 AI와 대화하다 보면 어느새 손에 익는다. 완성한 아이디어는 Netlify로 직접 세상에 공개한다. AI와 함께
슥
만들고
싹
배포하며, 지금 바로 상상을 현실로 바꾸는 바이브 코딩을 시작해보자.
저자소개
배인진
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
