[목 차]
시작하며 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
[본 문]
구글 AI 스튜디오(Google AI Studio)는 별도의 개발 환경을 구축하지 않고도 프로토타입을 빠르게 만들어볼 수 있는 도구다. 무료 사용량도 비교적 넉넉하게 제공되는 편이라 개발 경험이 많지 않더라도 프롬프트를 여러 번 실행하며 아이디어의 실현 가능성을 확인해볼 수 있다. 아이디어 검증을 마친 후에는 Antigravity로 내보내기 기능을 사용해 지금까지의 대화 이력과 결과물을 그대로 유지한 채 Antigravity 프로젝트를 생성하고 개발을 이어갈 수도 있다. (38쪽)
스크롤을 내려 전체 내용을 확인해보자. 경력 사항은 모델이 임의로 생성한 데이터다. 각 회사에서 담당한 역할과 성과는 다소 보완이 필요해 보이지만, 전체적인 디자인 요구 사항은 비교적 잘 반영한 편이다. / 프로젝트 성과 섹션은 실제 데이터를 기반으로 막대그래프를 생성해 시각화했다. 구현 결과를 보니 막대그래프가 가장 효과적인 표현 방식은 아니라는 생각이 들었다. 텍스트 대비를 활용하거나 다른 시각화 방안을 적용하도록 모델에 추가 요청을 해보는 것도 좋겠다. (95~96쪽)
입문자 입장에서는 3D 기술을 웹페이지에 적용했을 때 어떤 장점이 있는지 바로 떠올리기 어려울 수 있다. 3D 기술은 일반적인 웹페이지와 차별화된 효과를 만들 수 있고, 이를 통해 사용자에게 브랜드나 상품을 각인시킬 수 있다. 다만 눈에 띄는 효과를 만들 수 있는 만큼 구현하기 어렵기 때문에 진입 장벽이 있는 기술이기도 하다. / 구글도 이러한 점을 의식했는지 Gemini 3 Pro를 발표하며 공개한 레트로 3D 우주선 게임은 단 한 번의 프롬프트 실행만으로 시각적으로 화려한 결과물을 만들 수 있다는 것을 보여준다. 그만큼 Gemini의 코딩 성능을 효과적으로 보여주는 사례라고 볼 수 있다. (155쪽)
복사한 코드는 6.2.2절에서 작성한 프롬프트 템플릿의 〈code_context〉 태그에 추가할 내용이다. 다만 방금 복사한 코드처럼 긴 텍스트를 붙여넣으면 입력창 상단에 칩(chip) 형태로 자동 추가된다. 칩 오른쪽의 [Inline file] 버튼을 클릭하면 텍스트로 변환할 수 있지만, 복사한 코드는 1,000줄이 넘어가므로 그대로 펼치면 프롬프트가 길어져 읽기 어려워진다. / 프롬프트에 포함한 코드, PDF, 이미지 등이 칩 형태로 표시되면 입력창이 훨씬 깔끔해진다. 따라서 특별히 텍스트로 펼쳐야 할 이유가 없다면 칩 형태를 유지하는 편이 좋다. 이 경우 프롬프트에서는 칩 내용을 직접 붙여넣는 대신 '첨부한 코드'라고 명시하면 된다. (193쪽)
3D 개발 과정에서는 슬라이더 컨트롤이 자주 사용된다. 색상이나 조명 강도를 바꿀 때마다 코드를 수정해 결과를 확인하는 것보다, 슬라이더를 조정하며 실시간으로 효과를 비교하고 최종 구현 방향을 정하는 편이 훨씬 빠르기 때문이다. 요구 사항에는 없었지만, 개발 과정에서 자주 활용하는 방식이라 모델이 알아서 추가한 것으로 보인다. 이처럼 AI가 요청하지 않은 기능을 제안할 때는 실제 작업에 도움이 되는지 확인하며 받아들이는 것이 좋다. (256쪽)
웹 이력서에서 3D 전시관까지, 상상이 자라는 바이브 코딩
"이걸 정말 내가 만들었다고?"
웹 이력서로 시작한 화면이 움직이고, 프로젝트 이미지는 전광판처럼 스쳐 지나가며, 직접 만든 3D 모델은 가상 전시장 한가운데 놓입니다. 만들고 싶은 모습을 제미나이에게 말하고, 눈앞의 결과를 하나씩 고쳐 나가다 보면 머릿속 아이디어가 살아 움직이는 3D 웹으로 바뀝니다. 복잡한 코드를 붙잡고 있지 않아도 됩니다. 이 책은 제미나이와 대화하며 웹 이력서부터 3D 공간까지 직접 만들어보는 바이브 코딩 입문서입니다.
"우주 공간처럼 입체감 있게 만들어줘."
"도로 양옆으로 프로젝트 화면이 전광판처럼 지나가게 바꿔줘."
"박물관처럼 어둡고 웅장한 분위기를 더해줘."
원하는 모습을 말하고, 결과를 확인하고, 마음에 들지 않으면 다시 요청합니다. 그렇게 평범한 웹 이력서는 입체적인 3D 포트폴리오로, 한 장의 이미지는 가상 전시 공간을 채우는 작품으로 발전합니다.
구글 AI 스튜디오와 안티그래비티로 기능과 디자인을 구현하고, 나노 바나나 2와 Hunyuan 3D로 이미지와 모델을 만듭니다. React Bits와 Three.js로 화면에 움직임과 깊이를 더한 뒤, 완성한 프로젝트는 Netlify로 직접 배포합니다. 결과물이 기대와 다르면 다시 요청하고, 오류가 있으면 원인을 찾아 고칩니다. 모바일 화면까지 점검하며 완성한 결과물을 다시 배포하는 과정도 함께 경험합니다.
시작은 만들고 싶은 모습을 한 문장으로 말하는 것만으로 충분합니다. 머릿속에만 있던 아이디어를 제미나이와 함께 웹페이지로 만들고, 눈앞에서 살아 움직이는 3D 공간으로 펼쳐보세요.