"> 스플라인 X 모빈: 바이브코딩으로 3D 웹사이트 만들기 (실습 예제) | 양파고 "> 스플라인 X 모빈: 바이브코딩으로 3D 웹사이트 만들기 (실습 예제) | 양파고 ">
<head>
  <meta charset="UTF-8" />
  <title>스플라인 X 모빈: 바이브코딩으로 3D 웹사이트 만들기 (실습 예제) | 양파고</title>
  <meta
    name="description"   content="바이브코딩 결과물이 밋밋한가요? 3D 디자인 툴 스플라인(Spline)과 UI 라이브러리 모빈(Mobbin)을 활용해 전문가급 웹사이트를 만드는 방법을 소개합니다. 레퍼런스 복사부터 실제 프롬프트 적용까지 단계별 가이드를 확인하세요."   />
  <meta name="keywords" content="바이브코딩, 스플라인, Spline, 모빈, Mobbin, 3D 웹사이트 만들기, AI 코딩 디자인, 웹 디자인 레퍼런스, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <meta   property="og:title"   content="스플라인 X 모빈: 바이브코딩으로 3D 웹사이트 만들기 (실습 예제)"  />
  <meta  property="og:description" content="AI로 코딩했는데 디자인이 아쉽다고요? '스플라인'으로 3D 요소를 넣고, '모빈'으로 레이아웃을 베끼면 해결됩니다. 똥손도 가능한 고퀄리티 랜딩페이지 치트키 대공개! 👇"  />
  <meta property="og:image" content="<https://prod-files-secure.s3.us-west-2.amazonaws.com/9f3c9c6b-c056-484e-9466-231ab1f2008a/9a35e240-d6a4-47f0-b432-7a6b6252129f/free-icon-ai-8131880.png>" />
  <meta property="og:url" content="<https://yangphago.oopy.io/2e262b09-b72b-8013-98dc-ed08644115f7>" />
  <meta property="og:type" content="website" />
</head>

<aside> 💡 바이브 코딩시에 만들어지는 웹 페이지의 느낌이 다 고만고만하기 때문에 시각적 요소를 더하기 위한 사이트: 스플라인 + 모빈

</aside>

1. 3D디자인_스플라인

Spline

1-1. 커뮤니티 활용

image.png

image.png

1-2.실제 remix과정

image.png

image.png

image.png

image.png

2. 전체 프레임_모빈

Mobbin — UI & UX design inspiration for mobile & web apps