출처: NotebookLM 「빌더 조쉬 Builder Josh」 라벨 '제미나이 디자인' (영상 6개) · 2026.10.04 생성
제미나이 3.0 핵심은 '디자인'입니다. 증명합니다｜안티그래비티와 AI 스튜디오 활용법
- 디자이너 관점의 특이점과 핵심 워크플로우: SK텔레콤 출신 디자이너가 검증한 제미나이 3.0의 뛰어난 디자인 레퍼런스 해석 능력을 바탕으로, 스크린샷 레퍼런스와 RFP/이력서 문서를 결합해 고품질 웹사이트를 제작하는 기법을 소개합니다.
- 개인 포트폴리오 웹사이트 제작: 구글 AI 스튜디오에 이력서와 모빈(Mobbin) 포트폴리오 레퍼런스를 전달하여 AI 어시스턴트가 탑재된 포트폴리오 초안을 생성하고, 다크 모드와 롤오버 인터랙션을 적용해 다듬습니다.
- Netlify Drop을 활용한 초고속 라이브 배포: AI 스튜디오에서 완성된 프로젝트 파일(ZIP)을 다운로드해 네틀리파이 드롭(Netlify Drop)에 드래그 앤 드롭하여 30초 만에 커스텀 주소로 라이브 배포합니다.
- 클라이언트용 빵집 웹사이트 구축 (RFP 연동): ChatGPT로 가상의 빵집 구축 요구사항 기획서(RFP)를 작성한 뒤 모빈 스타일 레퍼런스와 함께 제미나이에 전달하여 정교한 랜딩 페이지를 완성합니다.
- '나노 바나나'를 통한 고품질 이미지 자체 생성: 제미나이의 이미지 생성 모델인 나노 바나나(Nano Banana) 명령어를 결합하여 깨지거나 외부에서 가져온 이미지 대신 빵집 브랜드에 딱 맞는 맞춤형 자산을 자동 생성합니다.
- 인터랙티브 법률 자문 AI 채봇(LegalMate AI) 구현: 법률 자문 서비스 PRD 문서와 인퍼페이스 레퍼런스를 기반으로 웹 화면 프로토타입을 설계하고 안티그래비티(Antigravity)로 프로젝트를 이전합니다.
- 안티그래비티 IDE 환경 구축 및 API 키 연동: 개발 환경 세팅(
npm run dev) 후 AI 스튜디오에서 발급받은 제미나이 API 키를 연결하여 실제 대화 및 질문 답변이 동작하는 법률 AI 채봇을 완성합니다.
애플 홈페이지처럼 움직이는 웹사이트, 제미나이로 10분 만에 만들었습니다.
- 스크롤 반응형 3D 인터랙티브 웹사이트 연출: 애플 공식 홈페이지처럼 마우스 스크롤 속도와 방향에 따라 3D 제품 이미지가 자연스럽게 회전하고 반응하는 웹사이트 제작 프로세스를 설명합니다.
- 베오 3(VEO 3)를 활용한 360도 회전 영상 생성: 제품 스크린샷(아이폰 에어 등)을 제미나이에 업로드하고 동영상 생성 기능을 실행하여 360도로 부드럽게 돌아가는 3D 루프 영상을 추출합니다.
- VMake 기반 동영상 배경 투명화: 생성된 MP4 영상의 배경을 투명하게 지워주기 위해 브이메이크(VMake) 비디오 백그라운드 리무버 도구를 활용해 트랜스패런트(Transparent) 영상으로 변환합니다.
- FreeConvert 및 WebM 포맷 최적화: 투명 배경 영상을 웹 브라우저에서 가볍고 원활하게 구동하기 위해 MP4를 WebM 최적화 포맷으로 변환합니다.
- 수파베이스(Supabase) 스토리지를 활용한 CDN 호스팅: 변환된 WebM 동영상 파일을 수파베이스 스토리버킷(Public Bucket)에 업로드하여 어디서나 접근 가능한 고유 미디어 URL을 확보합니다.
- 구글 AI 스튜디오 프롬프팅 및 프레임 스크러빙 구현: 호스팅된 비디오 URL과 함께 스크롤 프레임 제어 프롬프트를 전달하여, 스크롤 위치에 따라 영상 프레임이 세밀하게 프레임 단위로 움직이는 웹 코드를 생성합니다.
- 실전 활용 사례 (도날드덕 테마파크 & 테슬라 모델 Y): 도날드덕이 인사하며 등장하는 놀이공원 소개 웹과 스크롤에 따라 차체가 입체적으로 회전하는 테슬라 모델 Y 웹사이트를 손쉽게 구현해 냅니다.
99%가 모르고 있는 제미나이 3.0으로 3D 웹사이트 만드는 방법 공개합니다｜Spline + AI 스튜디오 조합
- 3D 웹 디자인을 위한 3가지 필수 도구 조합: 브라우저 기반 리얼타임 3D 도구인 스플라인(Spline), 핀터레스트/모빈(Pinterest/Mobbin) 레퍼런스, 구글 AI 스튜디오(제미나이 3.0)의 시너지 전략을 제시합니다.
- Spline 3D 모델 커뮤니티 리믹스 및 iFrame 추출: 스플라인 커뮤니티에서 완성도 높은 3D 로봇/아이콘/코인 모델을 선택해 'Remix'한 후 퍼블릭 임베드 코드를 복사합니다.
- 테슬라 로봇(옵티머스) 마우스 반응형 3D 랜딩 페이지: 스플라인 임베드 코드와 모빈 랜딩 페이지 스크린샷을 AI 스튜디오에 전달하여, 마우스 시선 추적에 따라 3D 로봇이 돌아가는 입체적 테슬라 옵티머스 웹사이트를 생성합니다.
- AI 스튜디오 '아노테이트(Annotate)' 스케치 수정: 완성된 결과물 위에서 스크린샷을 찍고 직접 스케치를 그리거나 코멘트를 남겨 디테일한 디자인 개선 지시를 내립니다.
- 애플 비전 OS(Vision OS) 인터랙티브 웹사이트: 스플라인의 3D 비전 아이콘과 애플 웹사이트 캡처를 조합하여, 마우스 각도에 따라 입체감이 극대화되는 애플 비전 프로덕트 소개 페이지를 구현합니다.
- 크립토 코인 및 네오 브루탈리즘 소다팝 랜딩 페이지: 3D 회전 코인 애니메이션과 핀터레스트의 소다팝 감성 레퍼런스를 연동하여 웹3 크립토 사이트 및 감각적인 네오 브루탈리즘 웹사이트를 제작합니다.
- 1인 웹 에이전시의 포트폴리오 및 수익화 기회: 고난도 3D 인터랙티브 랜딩 페이지를 몇 분 만에 제작하여 외주 포트폴리오를 구성하고 1인 에이전시 수익을 창출할 수 있는 잠재력을 보여줍니다.
제미나이 3.0은 '디자인 + 애니메이션'의 절정 고수입니다.｜안티그래비티 + AI 스튜디오 조합
- 모션 디자인 및 인터랙션 구현력의 우수성: 단순한 정적 웹 디자인이나 코드 생성을 넘어, 고난도 모션 애니메이션과 인터랙티브 연출을 자유자재로 다루는 제미나이 3.0의 성능을 검증합니다.
- 도자기 갤러리 드래그 앤 드롭 캔버스 인터랙션: 모빈 레퍼런스 바탕으로 화면을 드래그하면 캔버스상에 도자기들이 팝업("뿅뿅")으로 등장하고 탭 시 상세 페이지가 뜨는 인터랙티브 웹을 구축합니다.
- 마우스 호버 반응형 3D 물결(Fluid Wave) 모션: 비주얼 레퍼런스 URL과 캡처를 전달하여 마우스 커서 위치와 움직임에 따라 실시간 3D 물결 패턴이 형성되는 웹사이트를 연출합니다.
- 타이핑 애니메이션 및 속도·커서 커스텀 조절: 사용자가 입력한 텍스트가 부드럽게 타이핑되며 화면에 출력되는 인터랙티브 웹과 타이핑 속도, 커서 스타일 변경 옵션을 구현합니다.
- 그라데이션 흐름 및 플라즈마 배경 모션: 프레이머(Framer)의 트렌디한 모션 스타일을 참조하여, 느리게 흘러가는 배경 그라데이션 및 버튼 클릭에 따라 색상이 전환되는 모션 히어로 섹션을 제작합니다.
- 네오 브루탈리즘 마우스 트레일 및 로고 스크롤 수축 연출: 마우스를 따라 이미지·이모티콘 꼬리가 따라다니는 트레일 효과(Ugly Cash)와 스크롤 시 헤더 상단으로 로고가 자연스럽게 줄어들며 이동하는 모션(Touch Coffee)을 완벽 구현합니다.
상위1% 구글러들이 만든 바이브코딩 툴 "안티그래비티" 출시, AI 스튜디오도 성능이 미쳤습니다. 제미나이 3로 전부 갈아탑니다.
- 제미나이 3.0과 안티그래비티(Antigravity)의 등장: 구글이 자체 개발한 에이전틱 바이브 코딩 전용 IDE '안티그래비티'와 최강의 프론트엔드 디자인 능력을 갖춘 제미나이 3.0의 시너지를 조명합니다.
- 70초 만에 완성하는 3D 웹 애플리케이션: 3JS 및 리액트 기반으로 단 70초 만에 직접 블록을 쌓는 '3D 레고 에디터'와 파스텔톤 '3D 비행기 슈팅 게임'을 바이브 코딩으로 완벽하게 연출합니다.
- 피그마 레퍼런스 기반 안티 브루탈리즘 AI 뉴스 웹사이트: 피그마 공식 웹사이트 스크린샷을 전달하여 고난도 안티 브루탈리즘 스타일의 감각적인 AI 뉴스 랜딩 페이지를 단번에 생성합니다.
- 구글의 에이전틱 바이브 코딩 전용 IDE '안티그래비티': 커서(Cursor), 윈드서프(Windsurf)에 대응하여 구글이 공개한 개발 도구로, 플래닝 모드(Planning Mode)를 통해 깊은 사고 후 코딩을 진행합니다.
- 실제 항공권 검색 API(Aviationstack) 실전 연동: 에비에이션스택 API 키를 안티그래비티에 연결하고, 인천-나리타 출발/도착지 선택 후 실제 항공편 데이터를 조회해 보여주는 라이브 웹사이트를 제작합니다.
- 구글의 수직 계열화 경쟁력과 프론트엔드 압도: TPU 하드웨어부터 소프트웨어, AI 엔진(제미나이), 크롬 생태계까지 수직 계열화된 구글의 기술적 해자와 기존 코딩 AI(클로드, 코덱스) 대비 독보적인 디자인 구현력을 증명합니다.
99%가 모르는 제미나이 3.0으로 프로급 디자인 뽑아내는 방법 5가지｜구글 AI 스튜디오
- 5가지 무료 도구 조합을 통한 1분 만의 프로급 디자인: AI 스튜디오, 유니콘 스튜디오, 수파 히어로, 아이코니파이, 벤토 그리드를 조합하여 시니어 디자이너 수준의 완성도 높은 랜딩 페이지를 1분 만에 추출합니다.
- 유니콘 스튜디오(Unicorn Studio) 모션 배경 결합: 오로라, 메탈 반사 등 화려하고 감각적인 배경 애니메이션 임베드 코드를 가져와 웹사이트 상단 히어로 섹션에 자연스럽게 입힙니다.
- 수파 히어로(Supa Hero) 기반 최상단 레이아웃 구성: 수천 개의 고성능 히어로 섹션 라이브러리 중 마음에 드는 구조 캡처를 전달하여 시선을 사로잡는 타이틀 영역을 설계합니다.
- 아이코니파이(Iconify) 오픈소스 아이콘 시스템 연동: 전 세계 오픈소스 아이콘이 모인 아이코니파이(솔라 아이콘 등) URL을 제미나이에 전달하여 일관성 있고 미려한 아이콘 디자인을 적용합니다.
- 벤토 그리드(Bento Grids)를 통한 중·하단 요소 정돈: 홈페이지 중·하단부의 기능 소개 영역을 모아둔 벤토 그리드 레이아웃을 결합하여 정돈된 모듈식 디자인을 구성합니다.
- 5~6회 다중 프롬프팅을 통한 토큰 소비 및 퀄리티 극대화: 한 번의 프롬프트로 끝내지 않고 "디자인 퀄리티 높여줘", "볼드한 폰트 적용해줘", "흘러가는 마키 텍스트 추가해줘" 등 반복 지시를 통해 토큰 사용량을 늘려 최종 프로급 랜딩 페이지를 완성합니다.
라벨 종합 정리
- 선택된 영상들은 구글 제미나이 3.0, 구글 AI 스튜디오, 안티그래비티(Antigravity) 도구를 핵심축으로 활용하여 기존 AI 도구들을 뛰어넘는 독보적인 웹 디자인, 3D 인터랙션, 모션 애니메이션 구현 능력을 증명합니다.
- Spline, VEO 3, 유니콘 스튜디오, 수파베이스 등 우수한 3D·비디오·모션 도구 및 CDN 포맷과 결합함으로써 스크롤 반응형 프레임 스크러빙, 360도 회전, 마우스 추적 트레일 등 시니어 디자이너급 고품질 웹사이트를 초고속 구축합니다.
- 디자인 레퍼런스(모빈/핀터레스트)와 RFP/PRD 문서의 정확한 전달, 5~6회에 걸친 다중 프롬프팅 개선, 실전 API 연동 및 네틀리파이 원클릭 배포 파이프라인을 통해 1인 빌더가 실전 프로덕트 개발과 에이전시 비즈니스를 주도할 수 있는 전략을 제시합니다.