홈앤서비스 SK BROADBAND

말하는 순간, 상상이 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