안녕하세요. 구독자님. 달콤쌉쌀 뉴스레터입니다. 오늘도 모니터 앞에서 “어떻게 하면 내 브랜드가 조금 더 특별해 보일 수 있을까?” 고민하고 계신가요?
최근 제가 팔로우하고 있던 개발자와 디자이너분의 영상을 보다 입이 떡 벌어졌는데요. 마우스 움직임에 따라 살아 움직이는 3D 오브젝트, 스크롤 한 번에 자연스럽게 화면 전환... 이 모든 고퀄리티 사이트를 코딩 한 줄 없이 AI로 뚝딱 완성하시더라고요.
그래서 오늘은 제가 직접 총 정리한 ‘코딩 없이 3D 웹사이트를 만드는 워크플로우’부터 바로 실무에 적용 할 수 있는 현실적인 꿀팁까지 전부 공개할게요!
1. 요즘 홈페이지가 3D로 바뀌는 이유
우리는 쏟아지는 정보의 홍수 속에 살고 있습니다. 인스타그램 릴스와 피드를 넘기듯 웹사이트도 1~2초 만에 이탈 여부가 결정되곤 하죠.
이 짧은 순간, 사용자의 손가락을 멈추게 만드는 가장 강력한 무기가 바로 3D 요소인데요. 텍스트와 평면적인 이미지만 가득한 사이트 사이에서 3D 인터랙션은 브랜드의 첫인상을 만드는 데 굉장히 강력합니다.
- 마우스를 따라 움직이는 생동감 넘치는 오브젝트
- 스크롤에 맞춰 부드럽게 회전하는 입체적인 제품샷
- 살아 움직이는 듯한 우리 브랜드만의 캐릭터
문제는 딱 하나, "이 고퀄리티 작업을 내가 할 수 있을까?" 하는 걱정이죠. 하지만 막막해하실 필요 없어요! 복잡한 툴 공부 없이도 바로 시작할 수 있는 방법, 지금부터 아주 자세히 알려드릴게요!
2. 실제 제작 워크플로우 : 기획부터 구현까지
STEP 01 : 히어로(Hero) 섹션 애니메이션 구현
히어로 섹션은 웹사이트의 첫 페이지 상단으로 홈페이지 방문자가 가장 먼저 마주하는 화면입니다. 그래서 보통 브랜드의 첫인상을 결정하는 핵심 공간이라고 이야기하는데요. 이 히어로 섹션에 3D 요소가 들어가면, 단순한 첫 화면을 넘어 강력한 인상을 심어줄 수 있습니다.
히어로 섹션에 3D 애니메이션을 적용하는 방법에는 2가지가 있습니다.
방법 1) Whisk + Google Flow 이용하기
우선, Google Whisk로 접속한 후, 히어로 섹션에 사용할 제품 이미지를 가지고 와주세요. 저는 임의로 타사 브랜드의 화장품 이미지를 활용해 보았는데요.
피사체에는 화장품 제품컷 사진을 그리고 스타일에는 연출하고자 하는 이미지 모습을 삽입해 주세요.이후, 원하는 연출 모습의 프롬프트를 입력해 주세요.
해당 화장품이 핑크색 콜라겐 사이에 놓여있는 사진. 화장품과 핑크색 콜라겐 말고는 다른건 표시하지마
2개의 이미지가 생성되었는데요. 해당 이미지 중 가장 마음에 드는 사진을 저장해 주세요.
그리고 이번에는 After 사진을 연출하기 위한 프롬프트를 입력해 주세요.
분홍색 콜라겐이 동통 움직이는 이미지. 퓨어하고 깨끗한 이미지. 분홍색 콜라겐이 시원한 물줄기가 터지듯 사방으로 움직이는 이미지.
생성된 이미지 중에 가장 마음에 드는 사진을 다시 한번 저장해 줍니다. 즉, 우리는 Whisk에서 2가지 연출된 이미지를 저장해야 해요! 이후 영상을 만들기 위해 Google Flow로 접속해 주세요.
첫 번째 이미지와 같이 설정을 해준 다음, 시작과 종료에 생성한 2개의 이미지를 넣어주세요. 몇 분 뒤, 연출된 동영상을 다운로드만 해주시면 끝!
방법 2) 3D 히어로 섹션 벤치마크 사이트, Spline 이용하기
스플라인은 웹에서 사용할 수 있는 3D 디자인 툴인데요. 물론, Spline 안에서 3D를 쉽게 구현할 수도 있지만, 처음부터 모든 걸 만들려면 막막할 수 있죠.
여기서 드리는 특급 꿀팁! 바로 전 세계 디자이너들이 미리 만들어둔 '고퀄리티 소스'를 활용하는 것입니다.
Spline 커뮤니티에서 마음에 드는 3D 히어로 섹션을 선택한 뒤 Remix를 클릭해 주세요. 사실 스플라인에서 직접 디자인을 수정하는 재미도 쏠쏠하지만, 오늘은 여러분의 귀한 시간을 아끼기 위해 '준비된 소스로 3D 웹사이트를 뚝딱 만드는 방법'에 집중해 보려 합니다!
* "나도 디자인 수정 법이 궁금한데..?" 하시는 분들은 댓글로 남겨주세요! 요청이 많으면 다음 콘텐츠에서 스플라인 디자인 정복하기 편을 따로 준비해 오겠습니다.
자, 이제 내가 고른 멋진 3D 소스를 내 홈페이지로 옮겨볼까요? 방법은 아주 간단합니다.
1. Export(내보내기) 클릭 : 스플라인 화면 우측 상단에 있는 [Export] 버튼을 눌러주세요.
2. Public URL 확인 상단 탭에서 [Public URL] 항목이 선택되어 있는지 확인합니다.
3. Copy Embed(코드 복사) 클릭 아래에 보이는 [Copy Embed] 버튼을 클릭하면 준비 끝! 이
STEP 02 : Google AI Studio를 활용한 3D 홈페이지 만들기
이제 2가지 방법으로 히어로 섹션에 사용할 3D 영상을 만들었는데요. 이제 이 소스를 활용해 나만의 3D 홈페이지를 만들어볼까요? 구글 AI 스튜디오 Build 탭으로 들어와주세요.
단순히 "3D 소스 붙여 넣고 랜딩 페이지 만들어줘"라고 입력하면 AI도 갈팡질팡하기 마련입니다. 전문가처럼 한 끗 차이의 퀄리티를 만들고 싶다면 아래 두 가지를 꼭 기억하세요!
1.구체적인 '맥락(Context)'을 더해주세요
AI에게 우리 브랜드가 무엇을 하는 곳인지, 어떤 톤앤매너를 지향하는지 친절하게 설명해 줄수록 결과물의 정확도가 올라갑니다.
2.'벤치마크 사이트' 이미지를 보여주세요
말보다 강력한 건 한 장의 사진입니다! 여러분이 평소 '와, 이 사이트 진짜 예쁘다'라고 생각했던 참고용 홈페이지 캡처본을 함께 업로드해 보세요. AI가 디자인의 방향성을 단번에 파악해 훨씬 세련된 레이아웃을 잡아줄 거예요.
원하는 홈페이지 디자인을 캡쳐해서 복사해주세요. 이후 프롬프트를 작성해서 웹사이트를 제작해 주시면 되는데요.
3. 1인 사업가가 바로 적용하는 3가지 팁
처음부터 엄청나게 화려한 3D 홈페이지를 만들 필요는 없습니다. 딱 이 세 가지만 기억하고 시작해 보세요.
1.전부 다 3D로 채우지 마세요.
욕심부리다간 사이트가 너무 무거워져서 로딩 중에 독자가 다 떠납니다. '히어로 섹션(첫 화면)'에만 포인트를 주는 것이 가장 현명합니다.
2. 브랜드 컬러를 유지하세요
3D가 화려하다고 해서 우리 브랜드의 고유 색상을 잊으면 안 됩니다. Spline의 조명(Light) 설정을 통해 톤앤매너를 맞추는 것이 핵심입니다.
3. 인터랙션은 ‘한 가지’만 강조하세요
마우스 움직임에 살짝 반응하는 '인터랙션' 하나만 추가해 보세요. 고객은 "오, 이 브랜드는 뭔가 다르네?"라는 신선한 경험을 하게 됩니다.
남들이 "그거 어려워서 못 해"라고 말할 때, 구독자님은 AI의 도움을 받아 한 발짝 앞서 나가보는 건 어떨까요? 오늘 소개해 드린 툴들을 가볍게 검색해 보는 것부터 시작해 보세요! 구독자님의 비즈니스가 한걸음 더 성장하기를 달콤쌉쌀이 응원하겠습니다!
Copyright© BITTERSWEETLETTER All rights reserved
협업문의 - bittersweet.newsletter@gmail.com
이번 글도 유용하게 읽으셨다면, 달콤쌉쌀을 응원해주세요🧡
다양한 프로젝트가 찾아올 때 마다, 함께 일할 수 있는 디자인, 마케팅 등 다양한 프리랜서 분들을 모집합니다. 자세한 사항은 아래 링크로 확인해주세요!
![[쉬어가기] 도합 5년 차 현직 프리랜서, 1인 사업가는 어떤 AI 툴을 쓸까?의 썸네일 이미지](https://cdn.maily.so/slnopn6645ju9i7ttkisqfud9chc)
의견을 남겨주세요