빌더 조쉬_제미나이 디자인

99%가 모르고 있는 제미나이 3.0으로 3D 웹사이트 만드는 방법 공개합니다｜Spline + AI 스튜디오 조합

• 등장인물 및 사용 도구: 빌더 조쉬(진행자)가 출연하며, 브라우저 기반 리얼타임 3D 디자인 도구인 스플라인 3D(Spline 3D), 핀터레스트(Pinterest), 레퍼런스 수집용 모빈(Mobbin), 프레이머(Framer), 그리고 구글 AI 스튜디오(제미나이 3.0 플래시/프로)가 활용됩니다.
• 주요 수치: 스플라인은 약 8~9년 된 검증된 3D 도구이며, 테슬라 옵티머스 3D 로봇, 애플 비전 OS 아이콘, 크립토 코인, 소다팝 큐브 등 4가지 실전 3D 랜딩 페이지 예시를 선보입니다.
• 3D 웹사이트 구축 방법 및 절차:
  1. 스플라인 커뮤니티 탭에서 마음에 드는 3D 모델(로봇, 비전 OS, 코인 등)을 선택하고 Remix를 누릅니다.
  2. Export 메뉴에서 퍼블릭 URL의 Copy Embed(iFrame 코드)를 복사합니다.
  3. 모빈이나 핀터레스트에서 스타일 레퍼런스 이미지를 캡처한 뒤, 구글 AI 스튜디오 'Build' 탭에 iFrame 코드와 스크린샷을 함께 주입합니다.
  4. 제미나이 3.0(프로/플래시) 프롬프팅을 실행하여 마우스 시선 추적 3D 테슬라 로봇, 비전 OS, 네오 브루탈리즘 소다팝 랜딩 페이지를 자동 도출합니다.
• 주의점: 스플라인 하단의 'Built with Spline' 로고 마크를 지우려면 유료 결제가 필요하며, 랜딩 페이지 디테일을 수정할 때는 AI 스튜디오의 아노테이트(Annotate) 기능으로 스크린샷 위 스케치나 코멘트를 그려 전달해야 정교하게 고쳐집니다.
• 활용 팁: 핀터레스트에서 '소다팝 스타일' 등 키워드를 타고 타고 검색해 독창적인 레퍼런스를 확보할 수 있으며, 고난도 3D 인터랙티브 웹을 단 몇 분 만에 만들어 1인 웹 에이전시 외주 포트폴리오로 활용할 수 있습니다.

99%가 모르는 제미나이 3.0으로 프로급 디자인 뽑아내는 방법 5가지｜구글 AI 스튜디오

• 등장인물 및 사용 도구: 빌더 조쉬가 출연하며, 구글 AI 스튜디오(제미나이 3.0 프로), 모션 배경 도구 유니콘 스튜디오(Unicorn Studio), 상단 레이아웃 라이브러리 수파 히어로(Supa Hero), 오픈소스 아이콘 모음 아이코니파이(Iconify), 중·하단 모듈 모음 벤토 그리드(Bento Grids), 이미지 생성 모델 나노 바나나(Nano Banana)가 조합됩니다.
• 주요 수치: 프로 디자이너급 디자인 퀄리티를 완성하는 데 단 1분의 시간이 소요되며, 5가지 무료 도구를 결합해 5~6회 다중 프롬프팅으로 퀄리티를 극대화합니다.
• 5가지 도구 결합 및 제작 절차:
  1. 유니콘 스튜디오 커뮤니티에서 오로라/메탈 반사 모션 배경을 선택하고 Embed Code를 복사해 AI 스튜디오에 주입합니다.
  2. 수파 히어로 섹션과 롤스로이스 등 목표 브랜드 캡처 이미지를 결합합니다.
  3. 아이코니파이(Iconify - 솔라 아이콘 등) 오픈소스 URL과 벤토 그리드(Bento Grids)의 하단 모듈 스크린샷을 프롬프트 지침에 함께 첨부합니다.
  4. 제미나이 3.0 프로 모델로 디자인 에이전시 웹사이트, 마우스 반응형 히어로 섹션, 메탈릭 고급 랜딩 페이지를 완성합니다.
• 주의점: 한 번의 프롬프팅만으로는 최상의 아웃풋이 나오지 않습니다. AI가 한 번에 소모하는 토큰 양이 많을수록 디자인이 좋아지므로, "디자인 개선해줘", "볼드한 폰트 적용해줘", "흘러가는 마키 텍스트 추가해줘" 등 5~6회 연속 다중 프롬프팅으로 AI를 계속 작동시켜야 합니다.
• 활용 팁: 외부에서 이미지 소스를 가져올 때 깨짐이 발생하면 "부족한 이미지는 나노 바나나로 새로 생성해줘" 프롬프트를 추가하면 완벽하게 매칭되는 고화질 자산이 자동 입혀집니다.

상위1% 구글러들이 만든 바이브코딩 툴 "안티그래비티" 출시, AI 스튜디오도 성능이 미쳤습니다. 제미나이 3로 전부 갈아탑니다.

• 등장인물 및 사용 도구: 빌더 조쉬, 구글 AI 스튜디오(제미나이 3.0), 구글의 에이전틱 바이브 코딩 전용 IDE 안티그래비티(Antigravity), 3JS/리액트(React), 피그마(Figma) 안티 브루탈리즘 스타일, 실시간 항공권 API 에비에이션스택(Aviationstack), 워렌 버핏(알파벳 주식 매입)이 다뤄집니다.
• 주요 수치: 단 70초 만에 3D 레고 에디터 및 비행기 게임 완성, 워렌 버핏의 버크셔 해서웨이가 구글(알파벳) 주식 약 6조 원대를 매입한 기술적 우위를 강조합니다.
• 바이브 코딩 및 실전 연동 절차:
  1. AI 스튜디오 앱 갤러리 프롬프트 입력만으로 3D 레고 블록 조립 에디터와 파스텔톤 3D 비행기 슈팅 게임을 70초 만에 추출합니다.
  2. 피그마 공식 웹사이트의 안티 브루탈리즘 스타일 스크린샷을 전달하여 고감도 AI 뉴스 랜딩 페이지를 생성합니다.
  3. 안티그래비티 설치 후 오픈 폴더 -> 플래닝 모드(Planning Mode) 선택 -> 비행기 예약 웹사이트 요구사항 작성.
  4. 에비에이션스택(Aviationstack) API 키를 연동하여 인천(ICN) to 나리타(NRT) 실시간 실제 항공편 조회 라이브 웹사이트를 빌드합니다.
• 주의점: 안티그래비티 구동 시 패스트 모드보다는 플래닝 모드(Planning Mode)를 선택해야 AI가 깊은 사고를 거친 후 완결성 높은 코드를 출력합니다. API 키는 노출에 주의하고 사용 직후 삭제해야 합니다.
• 활용 팁: 구글은 TPU 하드웨어부터 소프트웨어, 제미나이 엔진, 크롬 생태계까지 수직 계열화되어 있어 클로드나 ChatGPT 대비 프론트엔드 디자인 및 API 연동 성능에서 독보적인 우위를 보입니다.

애플 홈페이지처럼 움직이는 웹사이트, 제미나이로 10분 만에 만들었습니다.

• 등장인물 및 사용 도구: 빌더 조쉬, 제미나이(베오 3 / VEO 3) 비디오 생성 모델, 영상 배경 제거 브이메이크(VMake), 포맷 변환기 프리컨버트(FreeConvert), 호스팅 수파베이스(Supabase Storage Public Bucket), 구글 AI 스튜디오가 사용됩니다.
• 주요 수치: 전체 구축 시간 단 10분, VMake 무료 5초 프리뷰 동영상 활용, 수파베이스 스토리버킷 생성 3~4분 소요.
• 스크롤 반응형 웹사이트 제작 5단계 절차:
  1. 제품 사진(아이폰 에어, 테슬라 모델 Y 등)을 제미나이에 업로드하고 베오 3(VEO 3)로 360도 회전 동영상을 도출합니다.
  2. 브이메이크 비디오 백그라운드 리무버에서 Transparent Background를 적용해 배경을 투명하게 지웁니다.
  3. 프리컨버트(FreeConvert)에서 MP4 영상을 웹 최적화 포맷인 WebM으로 변환합니다.
  4. 수파베이스 스토리 지에 퍼블릭 버킷(Public Bucket)을 생성하고 WebM 파일 업로드 후 Public URL을 추출합니다.
  5. 구글 AI 스튜디오에 Public URL과 비디오 프레임 스크러빙 프롬프트 지침을 주입하여 스크롤 위치에 따라 360도 회전하는 반응형 랜딩 페이지를 완성합니다.
• 주의점: 단순 MP4 파일은 웹에서 프레임 제어가 원활하지 않으므로 반드시 WebM 포맷으로 변환해야 하며, 기술적 프레임 제어 코드를 프롬프트에 함께 첨부해야 스크롤에 맞춰 매끄럽게 회전합니다.
• 활용 팁: 아이폰 에어 360도 회전, 도날드덕 인사 애니메이션, 테슬라 모델 Y 차체 회전 등 강렬한 제품 소개 및 브랜딩 페이지 제작에 극적인 비주얼 효과를 선사합니다.

제미나이 3.0 핵심은 '디자인'입니다. 증명합니다｜안티그래비티와 AI 스튜디오 활용법

• 등장인물 및 사용 도구: 벨거씨(SK텔레콤 15년 차 디자이너 출신, A- 및 티전화 제작자), 빌더 조쉬, 구글 AI 스튜디오(제미나이 3.0 프로), 모빈(Mobbin), 네틀리파이 드롭(Netlify Drop), ChatGPT, 나노 바나나(Nano Banana), 안티그래비티(Antigravity)가 사용됩니다.
• 주요 수치: SKT 15년 차 디자이너 출신 검증, Netlify Drop 원클릭 배포 30초 소요, 3가지 실전 사례(포트폴리오, 클라이언트 빵집, 법률 AI 챗봇) 완성.
• 3가지 실전 사례 구축 절차:
  1. 개인 포트폴리오: 이력서 문서 + 모빈(Mobbin) 스크린샷 주입 -> AI 어시스턴트 챗봇 내장 포트폴리오 생성 -> 다크 모드 및 롤오버 보정 -> ZIP 다운로드 후 Netlify Drop 드래그 앤 드롭으로 30초 만에 무상 도메인 라이브 배포.
  2. 클라이언트 빵집: ChatGPT로 가상 RFP(요구사항 기획서) 자동 생성 -> 모빈 스타일 스크린샷 주입 -> "부족한 이미지는 나노 바나나로 새로 생성해줘" 프롬프팅으로 고화질 브랜딩 자산 자동 입히기.
  3. 법률 AI 챗봇(LegalMate AI): PRD 작성 -> 웹 화면 생성 -> ZIP 프로젝트 다운로드 후 안티그래비티로 이전 -> npm run dev 환경 세팅 -> 제미나이 API 키 연결로 실제 동작하는 챗봇 완결.
• 주의점: 웹에 떠도는 깨지는 파일 대신 "나노 바나나로 새로 생성해줘" 지침을 추가해야 퀄리티가 비약적으로 향상됩니다. API 키는 노출 시 무제한 과금 위험이 있으므로 보안 관리가 필수적입니다.
• 활용 팁: AI 스튜디오의 무료 랜딩 페이지 생성 기능과 Netlify Drop 무료 배포를 결합하면 크몽 등에서 외주 제작 에이전시 서비스를 초고속으로 수행할 수 있습니다.

제미나이 3.0은 '디자인 + 애니메이션'의 절정 고수입니다.｜안티그래비티 + AI 스튜디오 조합

• 등장인물 및 사용 도구: 빌더 조쉬(15년 차 디자이너 경력), 모빈(Mobbin - 팔머, 어글리캐시, 터치커피), 구글 AI 스튜디오(제미나이 3.0), 안티그래비티(Antigravity), 프레이머(Framer)가 다뤄집니다.
• 주요 수치: 15년 차 디자이너의 고난도 모션 연출 검증, 5가지 실전 모션 디자인 케이스 스터디.
• 5가지 모션 디자인 구축 절차:
  1. 도자기 캔버스: 모빈 팔머 스크린샷 + URL 전달 -> "드래그 앤 드롭 캔버스형, 그릇 이미지는 뿅뿅 등장, 탭 시 상세 페이지" 모션 구현 -> 안티그래비티 이전 후 API 키 연결.
  2. 3D 물결(Fluid Wave): 마우스 커서 위치에 반응하는 3D 물결 모션 연출.
  3. 타이핑 애니메이션: 입력 텍스트가 부드럽게 타이핑되며 속도 및 커서 스타일을 실시간 커스텀 변경하는 인터랙션 웹 구축.
  4. 플라즈마/그라데이션: 프레이머(Framer) 감성의 느리게 흐르는 오로라 배경 및 버튼 클릭별 색상 전환 모션 연출.
  5. 네오 브루탈리즘 마우스 트레일 & 수축 로고: 마우스를 따라 이모티콘 꼬리가 따라다니는 트레일(어글리캐시) 및 스크롤 시 상단으로 로고가 수축 이동하는 애니메이션(터치커피) 완결.
• 주의점: AI 스튜디오상에서 API 오버나 이미지 미출력 이슈가 발생할 경우, 프로젝트 ZIP 파일을 다운로드받아 안티그래비티 환경에서 API 키를 연결하면 원활하게 동작합니다.
• 활용 팁: 제미나이 3.0은 네오 브루탈리즘 스타일과 인터랙티브 모션 표현력에 독보적이며, 고객 설득용 브로슈어나 모바일 대응 원페이지 프로토타입을 손쉽게 도출할 수 있습니다.