AI에 말하니 3D 웹사이트가 만들어진다?

《말하는 대로 제미나이 × 3D 바이브 코딩》을 기획하고 편집하는 과정은 처음부터 끝까지 순탄하지만은 않았습니다. 처음에는 Gemini CLI를 중심으로 원고를 구성하고 진행하고 있었는데, '구글 I/O 2026'에서 개인 사용자 대상으로 서비스를 종료한다는 발표가 있었습니다. 청천벽력! 책의 중심 도구가 사라진 셈이니 소식을 들었을 때는 막막했습니다. 저자인 배인진 님에 비할 것이 안 되지만요. 이미 완성된 원고에서 도구 이름만 바꿀 수 있는 상황도 아니었고, 실습 환경부터 진행 방식, 화면, 프롬프트, 결과물까지 모두 달라졌기 때문입니다.

 

결국 실습 도구를 안티그래비티로 바꾸고, 책의 상당 부분을 새롭게 정리했습니다. 배인진 님은 실습을 다시 만들고 원고를 고쳤으며, 저도 바뀐 내용을 하나씩 따라 해보면서 설명과 화면을 다시 확인했습니다. 처음 계획과는 다른 길로 접어들었지만, 오히려 덕분에 빠르게 달라지는 AI 도구를 어떻게 활용해야 하는지 더 깊이 고민할 수 있었습니다. 특정 도구의 사용법만 익히는 것보다 도구가 달라져도 원하는 결과물을 만들어가는 방법을 배우는 일이 중요하다는 것도 실감했습니다.

 

《말하는 대로 제미나이 × 3D 바이브 코딩》에서 근사하게 바뀌는 프로젝트들을 보니 저도 직접 무언가를 만들어보고 싶어졌습니다. 그래서 구글 AI 스튜디오만으로 간단한 편집자 포트폴리오를 만들었습니다.

 

간단하게 만들어본 페이지~ https://jpub-bookeditor-sss.netlify.app/

 

아직 제가 작업한 책과 경력을 모두 정리한 완성본은 아닙니다. 우선 몇 가지 프로젝트만 넣어 가볍게 만들어본 페이지에 가깝습니다. 그래도 코드를 직접 작성하지 않고 원하는 구성과 분위기를 설명하며 웹페이지를 만들어가는 과정은 꽤 재미있었습니다. 물론 처음부터 마음에 드는 결과가 나온 것은 아닙니다. 글자가 가려지기도 하고, 모바일 화면에서 이미지가 잘리기도 하고, 요청하지 않은 효과가 생기기도 했습니다. 그때마다 문제를 설명하고 다시 고쳐달라고 요청했습니다. 여러 번 대화를 주고받다 보니 조금씩 상상했던 모습에 가까워졌죠.

 

여기에서 용기를 얻어 《말하는 대로 제미나이 × 3D 바이브 코딩》을 소개하는 웹페이지도 직접 만들었습니다. 미흡하지만 AI 스튜디오에서 기본 웹페이지를 만들고, 안티그래비티로 코드를 확인하고 수정하면서 열심히 다듬었습니다. 

 

구경 오세요~ https://gemini-3d-vibecoding.netlify.app/

 

《말하는 대로 제미나이 × 3D 바이브 코딩》의 가장 큰 특징은 바이브 코딩으로 단순한 웹페이지를 만드는 데서 끝나지 않고, 3D 웹사이트까지 만들어본다는 점입니다. 처음에는 익숙한 웹 이력서부터 시작합니다. 이후 프로젝트 이미지가 입체적인 공간을 지나가게 만들고, 직접 만든 3D 모델을 배치해 포트폴리오와 가상 갤러리로 발전시킵니다. '3D 웹사이트'라고 하면 어렵고 거창하게 느껴질 수 있지만, 책의 순서대로 하나씩 따라가다 보면 평면이었던 화면이 점차 움직이고 입체적인 공간으로 바뀌는 모습을 확인할 수 있습니다.

 

누구나 쉽게 할 수 있는 3D 바이브 코딩

 

저 역시 처음에는 AI에게 잘 설명하기만 하면 원하는 결과가 곧바로 나올 것이라고 생각했습니다. 하지만 직접 만들어보니 바이브 코딩은 한 번의 멋진 프롬프트로 모든 것을 완성하는 작업이 아니었죠. 결과를 살펴보고, 무엇이 어색한지 찾고, 더 구체적으로 요청하며 계속 다듬는 과정에 가까웠습니다. AI가 코드를 작성해주더라도 무엇을 만들지 정하고, 결과가 괜찮은지 판단하는 일은 결국 사람의 몫이었습니다.

 

도구가 갑자기 바뀌어 다시 작업해야 했던 시간이 쉬운 건 아니었지만, 우여곡절 덕분에 책의 과정을 더 꼼꼼히 경험할 수 있었습니다. 작게나마 웹페이지도 직접 만들었고요. 여러분도 평소 머릿속으로만 그려보았던 자신만의 공간을 직접 만들어보세요!


■ 미리보기(앞부속, 본문 일부)

 

■ 도서구매 사이트(가나다순)

[교보문고]  [도서11번가]  [알라딘]  [예스이십사]  [쿠팡]

■ 제이펍 소식 더 보기(제이펍의 소통 채널에서 더욱 다양한 소식을 확인하세요!)

블로그  유튜브  인스타그램  트위터  페이스북