제미나이로 3D 랜딩 페이지 만드는 법 (Spline + AI Studio 조합)

Summary Spline, Pinterest, 및 Google AI Studio를 활용하여 코딩 없이 고품질의 3D 인터랙티브 랜딩 페이지를 만드는 방법을 설명합니다. Spline에서 3D 모델을 찾고, Google AI Studio에 임베드 코드를 붙여넣어 스타일 레퍼런스와 결합하여 랜딩 페이지를 생성합니다. 이 방법을 통해 1인 개발자나 에이전시도 전문가 수준의 3D 웹사이트를 빠르게 제작할 수 있습니다.

이 영상은 ‘빌더 조쉬 Builder Josh’ 채널의 “99%가 모르고 있는 제미나이 3.0으로 3D 웹사이트 만드는 방법 공개합니다"입니다. Spline 3D, 핀터레스트, 그리고 구글 AI 스튜디오(Gemini)를 조합하여 코딩 지식 없이도 고품질의 3D 인터랙티브 랜딩 페이지를 만드는 방법을 설명합니다.

주요 내용 요약:

1. 사용 도구

• Spline: 브라우저 기반의 3D 디자인 도구로, 웹사이트에 넣을 3D 요소를 찾거나 만드는 데 사용합니다.
• 핀터레스트 (Pinterest): 디자인 레퍼런스와 스타일(예: 네오 브루탈리즘, 애플 스타일 등)을 찾는 데 활용합니다.
• Google AI Studio: Spline의 3D 임베드 코드와 핀터레스트의 레퍼런스 이미지를 입력받아 실제 웹사이트 코드를 생성하는 역할을 합니다.

1. 제작 과정

• Spline 커뮤니티에서 원하는 3D 모델(예: 로봇, 3D 오브젝트)을 찾아 ‘Copy Embed’로 코드를 복사합니다.
• Google AI Studio에 해당 임베드 코드를 붙여넣습니다.
• 만들고자 하는 웹사이트의 스타일 레퍼런스 이미지(모빈, 핀터레스트 등에서 캡처)를 함께 업로드합니다.
• 프롬프트로 “이 3D 요소와 레퍼런스 스타일을 결합해 랜딩 페이지를 만들어줘"라고 요청합니다.
• Gemini가 생성한 결과물을 확인하고, 수정이 필요한 부분은 스크린샷을 찍어 ‘Annotate’ 기능으로 구체적인 수정 사항을 지시하여 완성도를 높입니다.

1. 영상에서 시연된 예시

• 테슬라 옵티머스 로봇 스타일의 랜딩 페이지
• 애플 Vision OS 느낌의 깔끔한 제품 소개 페이지
• 크립토/Web3 스타일의 코인 애니메이션 페이지
• 네오 브루탈리즘 스타일의 팝한 디자인 페이지 이 방법을 사용하면 1인 개발자나 에이전시도 빠르게 전문가 수준의 3D 웹사이트 포트폴리오나 결과물을 만들 수 있다고 강조합니다.

원본 영상: https://www.youtube.com/watch?v=4DS9nLOk8To