코딩없이 AI로 1시간만에 3D 홈페이지 만들기
구글 AI 스튜디오 이용한 현실적인 3D 웹사이트 제작 Workflow
달콤 쌉싸름한 회사 밖, 생존 꿀팁 A to Z!_시즌 2_1편
- 해당 글은 [달콤쌉쌀 뉴스레터]를 통해 발행되었습니다.
- 뉴스레터를 구독하시면 매주 수요일 프리랜서, 1인 사업가를 위한 인사이트 및 꿀팁자료를 받아보실 수 있어요
안녕하세요. 달콤쌉쌀 뉴스레터입니다. 오늘도 모니터 앞에서 “어떻게 하면 내 브랜드가 조금 더 특별해 보일 수 있을까?” 고민하고 계신가요?
최근 제가 팔로우하고 있던 개발자와 디자이너분의 영상을 보다 입이 떡 벌어졌는데요. 마우스 움직임에 따라 살아 움직이는 3D 오브젝트, 스크롤 한 번에 자연스럽게 화면 전환... 이 모든 고퀄리티 사이트를 코딩 한 줄 없이 AI로 뚝딱 완성하시더라고요.
그래서 오늘은 제가 직접 총 정리한 ‘코딩 없이 3D 웹사이트를 만드는 워크플로우’부터 바로 실무에 적용 할 수 있는 현실적인 꿀팁까지 전부 공개할게요!
1. 요즘 홈페이지가 3D로 바뀌는 이유
우리는 쏟아지는 정보의 홍수 속에 살고 있습니다. 인스타그램 릴스와 피드를 넘기듯 웹사이트도 1~2초 만에 이탈 여부가 결정되곤 하죠.
이 짧은 순간, 사용자의 손가락을 멈추게 만드는 가장 강력한 무기가 바로 3D 요소인데요. 텍스트와 평면적인 이미지만 가득한 사이트 사이에서 3D 인터랙션은 브랜드의 첫인상을 만드는 데 굉장히 강력합니다.
- 마우스를 따라 움직이는 생동감 넘치는 오브젝트
- 스크롤에 맞춰 부드럽게 회전하는 입체적인 제품샷
- 살아 움직이는 듯한 우리 브랜드만의 캐릭터
문제는 딱 하나, "이 고퀄리티 작업을 내가 할 수 있을까?" 하는 걱정이죠. 하지만 막막해하실 필요 없어요! 복잡한 툴 공부 없이도 바로 시작할 수 있는 방법, 지금부터 아주 자세히 알려드릴게요!
2. 실제 제작 워크플로우 : 기획부터 구현까지
STEP 01 : 히어로(Hero) 섹션 애니메이션 구현
히어로 섹션은 웹사이트의 첫 페이지 상단으로 홈페이지 방문자가 가장 먼저 마주하는 화면입니다. 그래서 보통 브랜드의 첫인상을 결정하는 핵심 공간이라고 이야기하는데요. 이 히어로 섹션에 3D 요소가 들어가면, 단순한 첫 화면을 넘어 강력한 인상을 심어줄 수 있습니다.
히어로 섹션에 3D 애니메이션을 적용하는 방법에는 2가지가 있습니다.
방법 1) Whisk + Google Flow 이용하기
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Whisk 이미지 생성(1)우선, Google Whisk로 접속한 후, 히어로 섹션에 사용할 제품 이미지를 가지고 와주세요. 저는 임의로 타사 브랜드의 화장품 이미지를 활용해 보았는데요.
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Whisk 이미지 생성(2)피사체에는 화장품 제품컷 사진을 그리고 스타일에는 연출하고자 하는 이미지 모습을 삽입해 주세요.이후, 원하는 연출 모습의 프롬프트를 입력해 주세요.
해당 화장품이 핑크색 콜라겐 사이에 놓여있는 사진. 화장품과 핑크색 콜라겐 말고는 다른건 표시하지마
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Whisk 이미지 생성(3)2개의 이미지가 생성되었는데요. 해당 이미지 중 가장 마음에 드는 사진을 저장해 주세요.
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Whisk 이미지 생성(4)그리고 이번에는 After 사진을 연출하기 위한 프롬프트를 입력해 주세요.
분홍색 콜라겐이 동통 움직이는 이미지. 퓨어하고 깨끗한 이미지. 분홍색 콜라겐이 시원한 물줄기가 터지듯 사방으로 움직이는 이미지.
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Whisk 이미지 생성(5)생성된 이미지 중에 가장 마음에 드는 사진을 다시 한번 저장해 줍니다. 즉, 우리는 Whisk에서 2가지 연출된 이미지를 저장해야 해요! 이후 영상을 만들기 위해 Google Flow로 접속해 주세요.
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Flow 영상 만들기(1)
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Flow 영상 만들기(2)첫 번째 이미지와 같이 설정을 해준 다음, 시작과 종료에 생성한 2개의 이미지를 넣어주세요. 몇 분 뒤, 연출된 동영상을 다운로드만 해주시면 끝!
코딩없이 AI로 3D 홈페이지 만들기 - 구글 Flow 영상 만들기(3)브런치에선 50%만 소개했어요.
홈페이지 벤치마크 사이트 3가지 /
구글 AI 스튜디오를 활용한 3D 홈페이지 만들기 /
1인 사업가가 바로 적용하는 3가지 꿀팁
더 많은 내용은 여기서(클릭!) 확인해보세요!
1. 달콤쌉쌀 인재풀 등록
다양한 프로젝트가 찾아올 때 마다, 함께 일할 수 있는 디자인, 마케팅 등 다양한 프리랜서 분들을 모집합니다. 자세한 사항은 링크로 확인해주세요!
2. 달콤쌉쌀 고민상담소
회사 밖 세상, 생각보다 물어볼 곳이 많지 않죠? 고민이 있다면 여기 살짝 남겨 주세요. 달콤쌉쌀이 함께 답을 찾아볼게요!
3. 달콤쌉쌀 후기 및 문의 남기기
딱 10초! 시간을 내어 피드백과 후기를 보내주세요.
달콤 쌉쌀 뉴스레터는요,
도합 25년 차 (구) 직장인, (현) 대표들이 알려주는 달콤 쌉싸름한 회사 밖, 생존 꿀팁들! 막막한 꿈을 현실로 만들고 싶은 당신을 위해, 두 대표가 직접 겪고 검증한 단계별 생존 독립 가이드를 전합니다! 매주 수요일 저녁, 당신의 메일함에서 만나보세요! (달콤 쌉쌀 주의!)
- 한대표 : INTP, 자칭 일머리 천재. 극한의 효율충. 7년간의 회사 생활 끝에 계획 없이 과감히 프리랜서 세계에 뛰어듦.
- 박대표 : ENTJ, 모든 것이 계획적이어야 속이 편한 완벽주의자. 18년 짬바로 무장. 철저한 전략과 시간관리만이 유일한 빽