Unicorn Studio + Gemini 활용해서 웹사이트 목업 만드는 영상입니다.
초반 방법 보고, 제미나이 코드 짜는 부분부터는 2분 4초대까지 건너뛰어도 됩니다.
방법 :
1. Unicorn Studio에 들어간다.
2. 로그인한다.
3. Community 탭에 들어간다.
4. Community 탭에서 원하는 프로젝트/템플릿을 선택한다. (들어가서 보고 선택)
5. 원하는 프로젝트/템플릿을 골랐다면, Remix this Project를 누른다.
6. 연결되는 창에서 우측 상단의 Export를 클릭한다.
7. Export로 나오는 탭에서 Embed를 클릭한다.
8. HTML코드를 Copy한다.
9. Gemini에서 Canvas 기능을 키고, 프롬프트를 입력한다.
10. 검수하고, 수정을 요청한다. (업그레이드)
프롬프트 :
복사한 코드 + 이 배경을 활용한 고급스러운 랜딩 페이지를 만들어줘
프로젝트 이름은 '프로젝트 명'이야.
+ 원하는 기능, 원하는 스타일, 원하는 내용을 추가
+ 프로젝트가 뭐하는건지도 설명해주면 좋음.
뭐 그냥 원하는거 등... 다 넣으시면 됨.
실제 예시 :
<div data-us-project="kHzYU6adjDu4A7bNBlLZ" style="width:1440px; height: 900px"></div><script type="text/javascript">!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/[email protected]/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head{window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head) || document.body).appendChild(i)}}();</script>
이 배경을 활용한 고급스러운 랜딩 페이지를 만들어줘
프로젝트 이름은 AITICS Labs야.
페이지가 길게 내용이 많고, 상호작용하는 (인터랙티브) 형식으로 제공됐으면 좋겠어.
또, 실제 연극하듯이 스토리텔링이 되는 형태면 좋겠어.
사실, 실제 열심히 코딩하시는 분들은 이런 활용방식에 조금 회의적일 수 있을 것 같은데...(실제 기술/기능 개발보다는 그냥 디자인이니...)
나름 이게 비개발자가 바이브코딩을 이용해서 더 많은 것들을 생산해내고, 자기가 원하는 바를 이룰 수 있는 그런 마중물로 작용할 수 있다고 생각하기에 저는 좋다고 생각합니다. (적어도 저는 그렇게 도움 받았음)
그리고, 이렇게 웹디자인, UI 측면에서 쉽게 만들 수 있는 기술을 가지는 것도 유의미하구요.
다른 사람들이 실제 개발과 자기가 원하는 바를 이루는 곳에 관심 가지게 만드는 후킹이 될 수 있지 않을까? 라는 생각도 했습니다.
또, 이렇게 시작한 사람이 엄청난 것들을 만들어내기도 하니깐요.
AI의 시대... 어떻게 AI를 잘 활용하느냐가 관건인 시대인 것 같습니다.