1. 핵심 사용 도구 및 플랫폼

고급 랜딩 페이지 제작은 AI 스튜디오를 중심으로 다섯 가지 외부 도구를 조합해서 만들 수 있다.

도구 이름 역할 및 기능 활용 방법
AI 스튜디오 (AI Studio) 제미나이 3.0 프로를 무료로 무제한 사용할 수 있는 메인 플랫폼. 모든 외부 소스를 임베드 코드, URL, 또는 스크린샷 형태로 붙여 넣어 디자인을 요청하는 곳.
유니콘 스튜디오 (Unicorn Studio) 멋진 배경 모션이나 애니메이션, 화려한 배경, 3D 요소를 쉽게 웹사이트에 삽입하는 곳. 원하는 애니메이션의 **임베드 코드(Embed Code)**를 복사하여 AI 스튜디오에 붙여 넣습니다.
수파 히어로 (Supahiro) 여러 랜딩 페이지의 히어로 섹션 라이브러리를 모아 놓은 웹사이트. 원하는 히어로 섹션 디자인 레이아웃을 스크린샷으로 캡처하여 AI에게 제공합니다.
아이코니파이 (Iconify) 전 세계 수많은 오픈소스 아이콘을 탐색하고 활용할 수 있는 도구 (예: 솔라 아이콘). 원하는 아이콘 세트의 URL을 AI 스튜디오에 제공하여 디자인의 일관성을 높이도록 명령합니다.
벤토 그리즈 (Vento Grids) 홈페이지의 중단부나 하단부에 들어가는 소개 영역 요소(그리드 형식 등)를 모아 놓은 곳. 하단부 디자인 구성을 위해 원하는 그리드 형식 요소를 스크린샷으로 캡처하여 AI에게 제공합니다.

2. 제미나이 3.0을 활용한 랜딩 페이지 제작 단계

고퀄리티의 랜딩 페이지는 AI 스튜디오에서 위의 다섯 가지 요소를 효과적으로 결합하고 정교하게 프롬프트를 작성하는 과정을 통해 완성

A. 배경 및 히어로 섹션 구성 (유니콘 스튜디오 & 수파 히어로)

  1. 배경 코드 삽입: 유니콘 스튜디오에서 원하는 배경 모션(예: 마우스에 반응하는 라이트 효과)을 선택하고 임베드 코드를 복사.
  2. 레이아웃 참고 이미지 삽입: 수파 히어로에서 히어로 섹션의 디자인 레이아웃을 캡처하여 AI 스튜디오에 붙여 넣음
  3. 초기 프롬프트: 복사한 배경 코드와 캡처 이미지를 AI 스튜디오 빌드 탭에 넣은 뒤, "배경은 내가 주는 유니콘 스튜디오의 배경을 활용하고 히어로 섹션의 디자인 레이아웃은 내가 주는 스크린샷을 활용해서 만들어 줘"와 같이 구체적으로 요청.

B. 일관성 유지 및 하단부 완성 (아이코니파이 & 벤토 그리즈)

  1. 아이콘 시스템 지정: 아이코니파이에서 솔라 아이콘과 같은 마음에 드는 아이콘 세트의 URL을 복사하여 프롬프트에 첨부.
  2. 하단부 요소 지정: 벤토 그리즈에서 홈페이지 중단부/하단부 소개 영역 요소를 캡처하여 AI 스튜디오에 첨부함.
  3. 종합 프롬프트 작성: 다음 요소들을 모두 포함하여 최종 디자인을 요청

3. 고품질 디자인을 위한 개선 및 반복 작업 (반복 프롬프팅)

제미나이 3.0을 사용할 때 가장 좋은 결과를 얻으려면 지속적인 개선 프롬프팅이 필수적.

  1. 구체적인 문제점 지적: 첫 번째 결과물이 만족스럽지 않다면, 단순히 '더 좋게 만들어 줘'가 아니라 구체적인 개선 가이드를 제공해야 함.
  2. 반복 요청 전략: AI에게 "디자인 퀄리티를 한번 높여 달라"는 요청을 다섯 번에서 여섯 번 정도 반복하는 것이 좋은 팁. AI가 한 번의 프롬프팅에서 소모하는 토큰(컨텍스트 윈도우)의 양이 많을수록 더 좋은 디자인을 뽑아내기 때문에, 반복 요청을 통해 최종적으로 더 나은 디자인을 얻을 수 있다.