Date: 2026.01.31
Tool/Model: Spline + AI 스튜디오
course : https://www.youtube.com/watch?v=4DS9nLOk8To
Spline - 3D Design tool in the browser with real-time collaboration
Spline is a free 3D design software with real-time collaboration to create web interactive experiences in the browser. Easy 3d modeling, animation, textures, and more.
spline.design
Spline
브라우저에서 리얼타임으로 돌아갈 수 있는 3D 디자인 도구, 히어로 섹션 혹은 3D 인터랙티브를 제작할 때 사용할 수 있다
1. Spline - 구글 계정을 이용해 회원가입한다.
2. Spline - community
유저들이 만들어 놓은 멋진 페이지들을 볼 수 있다 0o0..!!
이 중 하나 맘에 드는 것을 고른다.
마우스 움직임에 따라 로봇도 같이 따라 움직이는 이 페이지를 골랐다
Remix 버튼을 눌러 수정 페이지로 넘어간다
(Mac) - option + 마우스 왼 => 화면을 움직일 수 있다
상단 export - Copy Embed
링크를 복사한다
2. 구글 AI 스튜디오
Google AI Studio
The fastest path from prompt to production with Gemini
aistudio.google.com
AI 스튜디오 - Build App - 복사한 링크 붙여넣기
3. 모빈
https://mobbin.com/discover/apps/web/latest
Discover Web apps | Mobbin — UI & UX design inspiration for mobile & web apps
Browse and search across hundreds of Web apps for UI & UX research.
mobbin.com
모빈 - Sunday 검색
Sunday 는 로봇 관련 회사에 도움이 되는 페이지
Sections -> Nevigation 을 선택한다
Full page 를 선택한다
마우스 오른쪽 클릭 - Copy png
모빈에서 찾은 페이지의 맥락을 활용해 나만의 웹페이지를 제작해 볼 예정이다.
다시 구글 AI 스튜디오에 접속한다
이미지를 붙여넣기 한 후 프롬프팅을 작성한다
prompt :
내가 주는 Spline 3d와 이미지를 가지고 테슬라 로봇 웹사이트를 만들어보자. 디자인을 예쁘게 만들어서 고급스럽게 만들어줘
포인트 : Gemini 3 Pro 모델을 사용해 시간이 더 걸리지만 고퀄리티로 제작한다
이렇게 결과물이 나왔다
위의 내용을 응용해서 네이버페이 카드 웹사이트를 제작해보았다
1. N PAY CARD Website
https://website-portfolio-eta-six.vercel.app/
N Pay Card - Global Prepaid
A PAYMENT CURATION AGENCY Naver Pay shapes how value is exchanged. ALGORITHMS PLAY IT SAFE. WE PLAY IT SMART. AS A FINTECH CURATION AGENCY, OUR HANDCRAFTED BENEFITS GIVE SPACES THEIR BEAT. EVERYTHING WE DO IS DESIGNED WITH INTENTION, SHAPED BY USAGE PATTER
website-portfolio-eta-six.vercel.app
최근 네이버페이 카드를 발급했다. ㅎ
네이버페이 카드의 경우 검은색과 네이버의 대표색인 녹색의 카드를 골랐는데, 팝아트랑 잘 어울릴 것 같아 "'Spline 3D'에서 인터랙티브 + '모빈' 팝아트 느낌의 이미지"를 레퍼런스로 제작했다
Spline 3D - Connecting Card
https://app.spline.design/community/file/aa06bcbf-929d-41c6-97a5-1f1590169b77
Connecting Card
app.spline.design
모빈 - Cassette
https://mobbin.com/sites/sections/0480a1ad-8d04-4a04-b751-5b7af7a659f2?fullpage=true
Cassette section | Mobbin — UI & UX design inspiration for mobile & web apps
Save hours of UI & UX research with our library of 400,000+ fully searchable mobile & web app screenshots.
mobbin.com
2. 2026 신인 남자아이돌 웹사이트
임의로 y2k + Kitsch 컨셉의 sm 신인남자아이돌 웹사이트를 제작해보았다.
https://website-portfolio-eta-six.vercel.app/projects/y2k-idol-landing/index.html
NEO-SIGNAL | DEBUT COUNTDOWN
website-portfolio-eta-six.vercel.app
- 러버블로 만든 웹사이트
https://neon-retro-launchpad.lovable.app
Lovable App
Lovable Generated Project
neon-retro-launchpad.lovable.app
크레딧 이슈로 이정도까지 수정해보았다
Spline 3D - Traffic light
https://app.spline.design/community/file/d8bc6f34-7be4-41bc-9a64-7f430cd1bc54
Traffic light
app.spline.design
핀터레스트 - y2k website
260131_y2k website
ujk0978님의 컬렉션 260131_y2k website을(를) 둘러보세요.
kr.pinterest.com
제작일지
- Spline 3D, 모빈 사이트를 알게 되었다
- 웹페이지를 만들어보자라고 할 때 막상 하다보면 프롬프팅에서도 막힐 때가 있다. 지금은 '이렇게 이렇게 해서 디자인해줘' 혹은 '디자인 개선해줘' 라고 요청하지만 처음에는 이것조차 "이렇게 해도 되나?" 싶어서 망설였다. 전에 비해 프롬프팅을 하고, AI 다뤄 디자인하는 것에 익숙해진 것 같아 조금 뿌듯하다.
- UX & UI 대한 지식 필요
아무리 AI 디자인 시간이 단축됐다고 해도, 왜 이 디자인이 좋고 어떤게 사용자에게 이익을 주고 사용자 친화적인지에 대해서 모르다 보니 내가 하고 있는 것이 맞는 행동인지 모른다. 왜 버튼이 이 곳에 존재해야하고, 왜 이 모션이 들어가야하고, 왜 이 색을 써야하는지 이유를 댈 수 없는 점이 답답했다. AI가 발전하는 속도 만큼 사람도 빠르게 지식을 습득해야 올바르게 AI를 사용할 수 있지 않을까 생각한다. 지금은 아는 게 없어서 따라가기만 한다. 그래도 명확히 공부해야 되는 지점을 알 수 있는 것만 해도 감사하다 ~! 언제 이렇게 디자인을 해보겠어 ^V^
- AI 완벽하지 않다.
아직 완벽하게 무엇인가를 해주지 못한다고 생각한다. 부족한 부분을 채우는게 AI를 사용하는 사람의 역활이다. 아직까지 AI를 이용해 만든 것들은 완벽하지 않고 어디가 불완전한 것들이다. 앞으로 AI를 이용하는 건 당연한데 '어떻게 완벽하게 만들 수 있을까' 에 대해 매일 고민해한다.