최고의 Gemini 3 디자인 워크플로우

생성형 AI와 Google Gemini 3의 등장으로 놀라운 랜딩 페이지들이 만들어지고 있지만, 실제로는 단일 도구가 아닌 여러 도구의 조합이 필요합니다. Google은 Gemini 3와 Nano Banana로 구동되는 실험적 도구들을 출시했지만, 이들을 함께 사용하는 방법은 제공하지 않습니다. 일반적인 AI 도구로는 애니메이션 프레임을 생성할 때 일관된 결과를 얻기 어렵다는 근본적인 문제가 있습니다. 따라서 이 모든 도구를 효과적으로 결합하는 완전한 워크플로우가 필요하며, 이번 영상에서 그 방법을 소개합니다.

Google의 WISC는 에셋 생성을 위해 특별히 설계된 실험 도구로, Nano Banana로 구동되어 일관된 이미지 시퀀스를 만들 수 있습니다. 주제, 장면, 스타일 프레임워크를 사용해 이미지 생성을 가이드하며, 카메라 종류, 렌즈 반사, 해상도, 이미지 깊이 등 세부 사항을 명확히 정의할 수 있습니다. WISC의 가장 큰 장점은 길고 상세한 프롬프트가 필요 없다는 것으로, Gemini 3가 중간 레이어로 작동하여 간단한 말을 상세한 프롬프트로 변환해줍니다. 이미지가 기대에 부응하지 않을 때는 간단히 변경 사항을 언급하면 새로운 비주얼에 반영되며, 이를 통해 히어로 섹션용 첫 번째와 마지막 키프레임을 효과적으로 생성할 수 있습니다.

Nano Banana는 광범위한 텍스트 프롬프트가 필요하고 Mix Board는 무드 보드용으로 설계되어 있어, 빠르고 통제된 이미지 리믹싱에는 WISC가 최적화되어 있습니다. WISC의 핵심 강점은 참조 이미지를 결합하여 더 나은 제어로 이미지를 생성할 수 있다는 점입니다. 실제 사례로 첫 번째 프레임을 얻은 후, 카메라의 측면 각도로 렌즈를 분해해서 구성 요소를 보여주는 마지막 프레임을 만들었습니다. 기술적 단면도를 생성하도록 프롬프트했지만 첫 시도에서는 내부 회로까지 분해되어 원하지 않는 결과가 나왔고, 렌즈 레이어링만 보여달라고 지시하여 성공적으로 원하는 이미지를 생성했습니다.

WISC는 하나의 이미지를 애니메이션하는 데 초점을 맞추므로, 여러 키프레임을 연결하기 위해 Google Flow를 사용합니다. Flow는 스토리 기획을 위해 Gemini를, 안정적인 캐릭터 디자인을 위해 Google의 이미지 모델을, 비디오 콘텐츠 생성을 위해 VIO를 활용합니다. 프레임을 비디오로 변환할 때는 시작 프레임이 어떻게 끝 프레임으로 이어지는지를 프롬프트에 명시하여 모델에게 논리적인 경로를 제공해야 합니다. 처음에는 회전 방향과 끝 프레임이 잘못되어 어색한 전환이 생성되었지만, 카메라 회전 방향을 변경하도록 프롬프트를 다시 작성하여 원하는 버전을 얻었습니다.

비디오 생성 모델은 비용이 많이 들어 무료 플랜에서는 지역에 따라 월 180 크레딧만 제공되며, VIO 3.1로 비디오 한 번 생성 시 20 크레딧을 사용하므로 한 달에 최대 9개의 비디오만 만들 수 있습니다. Flow에서 생성된 MP4 형식의 비디오는 스크롤 애니메이션에 매핑하기 어려워 Hero 섹션에서 직접 사용할 수 없습니다. 이를 해결하기 위해 무료 온라인 변환기를 사용하여 WebP로 변환했으며, 이 형식은 미디어 플레이어 래퍼가 필요 없는 이미지로 취급되어 스크롤 인터랙션을 더 쉽게 매핑할 수 있습니다. WebP 파일은 더 작고 향상된 성능을 제공하여 단편 애니메이션 콘텐츠에 이상적이며, 변환된 파일을 Next.js 프로젝트의 public 디렉토리에 추가했습니다.

애니메이션이 준비된 후 랜딩 페이지의 Hero 섹션에 추가하기 위해 Claude에게 XML 형식으로 프롬프트를 작성했습니다. Claude의 모델들은 XML을 이해하도록 최적화되어 있어 구조화된 의도를 더 안정적으로 파싱하고 각 섹션을 독립적으로 추론할 수 있기 때문입니다. 프롬프트에는 만들고자 하는 것에 대한 맥락, 애니메이션 에셋의 위치, 스크롤 애니메이션 작동 방식, 그리고 context 태그 안의 목표가 포함되었습니다. requirement 태그에 모든 요구사항을, animation behavior 태그에 애니메이션 동작 설명을, 각 태그 안에 구현 세부사항, 제약 조건 및 필요한 출력을 명시했고, Claude는 원하는 대로 정확하게 애니메이션을 자동으로 구현했습니다.

Hero 섹션은 괜찮았지만 나머지 컴포넌트들은 AI가 생성하는 일반적인 웹사이트처럼 보였는데, 이는 바닐라 CSS로 고품질 결과를 기대했기 때문입니다. 각각 고유한 전문 스타일과 디자인 테마를 가진 여러 UI 라이브러리 중에서 프로젝트 스타일에 가장 적합한 것을 선택해야 합니다. 카메라 랜딩 페이지의 경우 Apple 스타일 UI를 목표로 했고, Hero UI가 가장 적합했습니다. Hero UI는 Tailwind CSS 위에 구축되었으며 Framer Motion을 활용하여 컴포넌트에 생동감을 불어넣고, Next.js, Vite, Laravel 같은 인기 프레임워크를 지원하여 기존 설정과 함께 사용하기 쉬웠으며, 기존 컴포넌트를 Hero UI 컴포넌트로 교체하여 훨씬 더 전문적인 외관을 갖추게 되었습니다.

사용자는 UI가 얼마나 매력적인지를 보고 몇 초 안에 랜딩 페이지에 머물지 여부를 결정하며, 모션은 방문자의 시선을 주목하길 원하는 기능으로 유도하여 사용자 유지율을 높입니다. 바닐라 JavaScript로 처음부터 애니메이션을 구현하는 것은 어렵기 때문에, 기존 라이브러리를 활용하여 프로세스를 단순화하는 것이 좋습니다. Motion.dev는 다양한 즉시 사용 가능한 애니메이션을 제공하는 무료 오픈 소스 라이브러리로, DOM 업데이트와 애니메이션 타이밍을 내부적으로 처리하여 복잡한 로직을 추상화합니다. 모션 컴포넌트는 props에 시작 상태와 종료 상태가 정의되어 있으며 라이브러리가 전환 로직을 자동 처리하고, Claude에게 이 라이브러리를 사용하여 패럴랙스 및 스크롤 애니메이션을 구현하도록 지시하여 사용자 경험을 개선했습니다.

페이지 섹션을 일일이 설명하는 것은 지루하므로, 기존 갤러리에서 영감을 얻는 것이 더 효율적입니다. 21st.dev는 여러 디자이너가 만든 다양한 UI 컴포넌트에 대한 영감을 제공하는 플랫폼으로, Aceternity UI, Prism UI, Coconut UI, Magic UI 등의 인기 라이브러리를 기반으로 제작된 컴포넌트들을 제공합니다. 가장 큰 장점은 AI 코딩 에이전트를 위해 특별히 맞춤화된 프롬프트를 복사할 수 있다는 점으로, ShadCN 및 TypeScript 지원 같은 프로젝트 요구사항, 코드 구현 지침, 필요한 종속성과 경로, NPM 패키지 목록, 그리고 통합 가이드까지 포함되어 있습니다. 콜 투 액션 섹션과 푸터의 프롬프트를 Claude에게 전달했을 때, Claude는 정확히 해당 컴포넌트를 통합했을 뿐만 아니라 프로젝트와 관련 없는 요소는 생략하고 관련된 아이콘만 포함하도록 맞춤 제작하여 완벽하게 어울리는 결과물을 만들었습니다.

영상의 마무리 부분으로, 시청자들에게 채널을 후원하고 이런 영상을 계속 제작할 수 있도록 도와달라는 요청을 합니다. 아래의 슈퍼 땡스 버튼을 이용해 후원할 수 있다고 안내하며, 시청에 대한 감사 인사를 전합니다. 다음 영상에서 다시 만나자는 인사로 영상을 마무리합니다. 이 섹션은 전체 워크플로우에 대한 설명을 완료한 후 시청자들과의 관계를 강화하고 채널의 지속 가능성을 위한 후원을 요청하는 표준적인 마무리 부분입니다.