크레마클럽

시작하며 5이 책에 대하여 6프로젝트 미리보기 12PART I Antigravity로 첫 웹페이지 만들기CHAPTER 1 이제는 ‘공부’보다 ‘바이브’가 먼저인 시대1.1 왜 지금 바이브 코딩인가? 16__1.1.1 오해는 금물! 바이브 코딩의 진짜 의미 17__1.1.2 사이먼 윌리슨이 정의한 바이브 코딩 18__1.1.3 바이브 코딩 역량이 확장되는 단계 191.2 바이브 코딩이 완전히 바꾼 개발 환경 22__1.2.1 상상하는 즉시 코드가 시작되는 마법 22__1.2.2 개발을 몰라도 괜찮아진 시대 23__1.2.3 같은 도구로 남다른 결과를 만드는 ‘바이브’의 차이 241.3 내 머릿속 아이디어를 현실로 옮겨줄 도구들 24__1.3.1 대화를 담당하는 LLM 25__1.3.2 주요 AI 어시스턴트와 모델 30__1.3.3 코드 생성을 보조하는 AI 에디터 321.4 AI의 잠재력을 깨우는 한마디, 프롬프트 엔지니어링 36__1.4.1 초보자를 위한 프롬프팅 핵심 원칙 36__1.4.2 구글 AI 스튜디오 Playground 38__1.4.3 시스템 지침을 통한 AI의 역할 고정 41CHAPTER 2 Antigravity와 함께하는 바이브 코딩 첫걸음2.1 복잡한 준비는 끝! 쾌적한 코딩 환경 만들기 50__2.1.1 Node.js 설치 50__2.1.2 Antigravity 2.0 설치 542.2 Antigravity 2.0 첫 만남 57__2.2.1 첫 프로젝트 58__2.2.2 모델 선택과 활용 60__2.2.3 슬래시 명령어와 구현 계획 62__2.2.4 이력서 웹페이지 구현 68PART 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 디자인 레퍼런스 분석 863.2 Build를 활용한 웹 이력서 프로토타입 구현 90__3.2.1 개발 환경 구성 91__3.2.2 클릭 한 번으로 웹 이력서 배포 97CHAPTER 4 AI 스튜디오와 Antigravity 연동4.1 AI 스튜디오와 Antigravity 2.0 105__4.1.1 Build 코드 모드 활용 105__4.1.2 Antigravity와 프로젝트 연결 1064.2 Antigravity IDE 110__4.2.1 Antigravity IDE 설치 110__4.2.2 프로젝트 작업 준비 115PART 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와 R3F5.2 빌드부터 실행까지 막힘없이 뽑아내는 3D 결과물 141__5.2.1 프롬프트 실행 143__5.2.2 핵심 기능이 동작하지 않는 문제 150__5.2.3 프로젝트에서 사용하는 패키지 151__5.2.4 실행과 배포를 이어주는 npm 명령어 1545.3 3D 우주선 게임과 지렁이 게임 155__5.3.1 레트로 스타일 3D 우주선 게임 155__5.3.2 네온빛으로 살아나는 3D 지렁이 게임 166CHAPTER 6 결과물에 생기를 더하는 Nano Banana와 React Bits6.1 Nano Banana Pro를 활용한 무드보드 에셋 제작 172__6.1.1 구글 AI 스튜디오 유료 API 키 설정 172__6.1.2 무드보드 제작 175__6.1.3 사용 비용 확인 1796.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 무드보드를 활용한 스타일 변경 1976.3 Antigravity 2.0을 활용한 프로젝트 개선 206__6.3.1 Antigravity로 프로젝트 전송 206__6.3.2 Modern Web Guidance 플러그인을 활용한 반응형 개선 210__6.3.3 Chrome DevTools 플러그인을 활용한 사용성 검사 214PART IV 상상 속 전시장을 현실로 만들기CHAPTER 7 전시 공간의 주인공, 나만의 3D 모델 준비7.1 Nano Banana Pro로 완성하는 고품질 3D 소스 이미지 223__7.1.1 원본 이미지 선정 223__7.1.2 3D 모델링에 적합한 이미지로 수정 226__7.1.3 측면 및 후면 이미지 수정 2307.2 Hunyuan 3D 기반의 입체 모델 변환과 생성 231__7.2.1 이미지 업로드 가이드라인 232__7.2.2 3D 모델 겉면 개수 235__7.2.3 Geometry와 Texture 생성 236__7.2.4 GLB 파일 용량 최적화 245CHAPTER 8 몰입감이 살아나는 전시 공간 연출8.1 구글 AI 스튜디오를 이용한 전시관 구조 설계 252__8.1.1 프롬프트 템플릿 252__8.1.2 전시장 기본 구조 254__8.1.3 3D 모델 추가 2618.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 전시장 분위기와 어울리는 재질로 수정 285CHAPTER 9 완성한 프로젝트를 세상에 공개할 시간9.1 Gemini를 활용한 배포 전 최종 점검 291__9.1.1 배포 전 검사 291__9.1.2 터미널 명령어 실행 294__9.1.3 배포 파일 빌드 296__9.1.4 빌드 결과물 확인 및 에러 수정 3009.2 Netlify 배포를 통한 가상 전시 공간 오픈 304__9.2.1 Netlify 배포 및 결과 확인 305__9.2.2 경고 메시지 해결 후 재배포 310찾아보기 319

펼쳐보기접어보기

상세 이미지

저자 소개 (1명)

저 : 배인진

관심작가 알림신청

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