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

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

[본 문]

구글 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쪽)