"> 제미나이로 3D 웹사이트 만들기: 바이브코딩 실전 가이드 | 양파고 "> 제미나이로 3D 웹사이트 만들기: 바이브코딩 실전 가이드 | 양파고 ">

<head>
  <meta charset="UTF-8" />
  <title> 제미나이로 3D 웹사이트 만들기: 바이브코딩 실전 가이드 | 양파고 </title>
  <meta
    name="description"   content="구글 제미나이와 바이브코딩을 활용해 전문가급 3D 웹사이트를 직접 구축하는 방법을 설명함. Spline, React Three Fiber(R3F) 적용법부터 바로 복사해 쓰는 하이엔드 애니메이션 프롬프트까지 실무 노하우를 모두 담았음."   />
  <meta name="keywords" content="바이브코딩, 3D 웹사이트 제작, 구글 제미나이 활용법, React Three Fiber 가이드, Spline 3D 튜토리얼, 인터랙티브 웹 디자인, AI 코딩 프롬프트, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta   property="og:title"   content="제미나이로 3D 웹사이트 만들기: 바이브코딩 실전 가이드"  />
  <meta  property="og:description" content="코딩 몰라도 500만원짜리 3D 웹사이트 '딸깍' 완성! 제미나이와 바이브코딩으로 만드는 미래형 웹 디자인의 모든 것을 확인해보셈. 지금 바로 실전 프롬프트 복사 가능!, 양파고, Yang Phago, 노션, 양파고 노션"  />
  <meta property="og:image" content="<https://oopy.lazyrockets.com/api/rest/cdn/image/dea8732c-6ded-4ed1-acbb-bb09521bdb3a.png?d=16>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/2e462b09-b72b-8071-aea7-ce9d470d52f2>" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 3D 컴포넌트 템플릿을 프롬프트에 포함하여 바이브 코딩하기 vs 3D컴포넌트 템플릿을 생성할 수 있는 리액트 라이브러리를 프롬프트에 포함하여 바이브 코딩하기

</aside>

[참고 영상]

https://www.youtube.com/watch?v=tpTOb_6wNOU

1. 기초 방법

https://yangphago.oopy.io/2e262b09-b72b-8013-98dc-ed08644115f7

1-1. 3D디자인과 웹디자인을 레퍼런스로 제시

이미 준비되어 있는 템플릿과 콘텐츠를 가져오기

스플라인에서 원하는 애미네이션을 선택

예시 디자인

Stackable Glass

[확인하기]리믹스 버튼을 누른 후 중앙 상단의 ‘▶️’버튼 눌러보기

[활용]을 위해 ‘export’버튼을 눌러보자
- 혹시나 ‘export’활성화가 안되는 경우는 왼쪽의 Layer에서 최상단 레이어가 선택되지 않은 경우이니 최상단 레이어를 선택 후 다시 ‘ export’ 선택

[copy]embed 버튼을 통해 주소를 복사

[복사된 embed ]내용

<iframe src="<https://my.spline.design/stackableglass-h3UH4czsorR0a36R8zmRJkL1-pUz/>" frameborder="0" width="100%" height="100%"></iframe>

1-2.구글 AI Studio에서 작업해보기

구글 AI studio의 ‘build’를 선택한 다음
원하는 LLM모델을 선택할 수 있음

구글 gemini모델 중에서 하나를 선택

이후 템플릿을 2개 중에 하나 선택함

구분	Angular (TypeScript)	React (TypeScript)
정의	구글에서 개발한 '프레임워크'	메타(페이스북)에서 개발한 '라이브러리'
개발 언어	TypeScript 필수 사용	JavaScript/TypeScript 선택 가능 (이미지는 TS 기반)
데이터 바인딩	양방향(Two-way) 바인딩 지원	단방향(One-way) 바인딩 지향
핵심 구조	MVC (Model-View-Controller) 아키텍처	컴포넌트 기반 UI 라이브러리
코드 스타일	HTML, CSS, 로직(TS)의 명확한 분리	JSX(TSX)를 통한 HTML과 로직의 결합
학습 곡선	가파름 (RxJS, 의존성 주입 등 개념 복잡)	상대적으로 낮음 (유연한 생태계)
제공 기능	라우팅, 상태 관리, HTTP 클라이언트 등 기본 내장	외부 라이브러리(React Router, Axios 등) 조합 필요

뭘 선택해야 될지 모르겠다면 ‘react’타입을 선택하면 됨

1-3.간편한 지침

다음과 같이 단순한 프롬프트를 넣어보자

<iframe src="<https://my.spline.design/stackableglass-h3UH4czsorR0a36R8zmRJkL1-pUz/>" frameborder="0" width="100%" height="100%"></iframe>
이 스플라인 iframe 애니메이션을 웹사이트의 히어로 섹션에 넣어서 3D 에니메이션 웹 사이트를 만들기 위한 초보자 가이드 웹사이트를 만들어봐

히어로 섹션: 사용자가 웹 페이지에 접속했을 때 가장 먼저 마주하게 되는 상단 영역을 의미함