구글 AI 스튜디오 | 프로급 디자인 뽑아내는 5가지 방법

## AI 스튜디오와 5가지 도구로 프로급 랜딩 페이지 만들기 이 영상은 Gemini 3.0 Pro와 AI 스튜디오를 활용하여 단 1분 만에 시니어 디자이너 수준의 고품질 랜딩 페이지를 제작하는 방법을 소개합니다. 특히, 5가지 핵심 도구의 조합을 통해 프로페셔널한 디자인을 구현하는 과정을 상세히 보여줍니다. ### 핵심 활용 도구 * **AI 스튜디오:** Gemini 3.0 Pro를 활용하여 웹사이트를 구축하는 메인 도구. * **유니콘 스튜디오 (Unicorn Studio):** 멋진 모션 배경 및 애니메이션을 제공. * **수파히어로 (SupaHero):** 다양한 랜딩 페이지 히어로 섹션 디자인 라이브러리. * **아이코니파이 (Iconify):** 무료 오픈소스 아이콘 모음. * **벤토그리즈 (BentoGrid):** 홈페이지 중단부 및 하단부 섹션 디자인 라이브러리. ### 랜딩 페이지 제작 과정 및 활용 팁 1. **모션 배경 활용:** * 유니콘 스튜디오에서 원하는 모션 배경을 선택하고 임베드 코드를 복사합니다. * AI 스튜디오에 코드를 붙여넣고 "이 배경을 활용한 고급스러운 랜딩 페이지를 하나 만들어 줘"와 같이 간단한 프롬프트를 입력하여 기본 랜딩 페이지를 생성합니다. * **팁:** 롤스로이스 웹사이트와 같은 고급스러운 레퍼런스 이미지를 함께 제공하면 더욱 정교하고 분위기 있는 디자인을 얻을 수 있습니다. 2. **히어로 섹션 디자인 결합:** * 유니콘 스튜디오의 반응형 모션 배경과 수파히어로의 히어로 섹션 디자인을 결합합니다. * 유니콘 스튜디오의 임베드 코드와 수파히어로에서 캡처한 히어로 섹션 이미지를 AI 스튜디오에 제공합니다. * "랜딩 페이지의 히어로 섹션을 만들어 보자. 배경은 내가 주는 유니콘 스튜디오의 배경을 활용하고, 히어로 섹션의 디자인 레이아웃은 내가 주는 스크린샷을 활용해서 만들어 줘"와 같이 구체적인 프롬프트를 통해 마우스 반응형 애니메이션이 적용된 멋진 히어로 섹션을 구현합니다. 3. **종합적인 랜딩 페이지 완성 (5가지 도구 조합):** * **목표:** 디자인 에이전시 웹사이트 제작. * **입력 요소:** * 유니콘 스튜디오의 그라디언트 모션 배경 (임베드 코드). * 수파히어로의 히어로 섹션 디자인 (스크린샷). * 아이코니파이의 솔라 아이콘 URL. * 벤토그리즈의 중단부/하단부 섹션 디자인 (스크린샷). * **프롬프트 예시:** "디자인 에이전시 웹사이트를 만들고 싶어. 1. 히어로 섹션의 배경은 유니콘 스튜디오를 활용해 줘. 2. 히어로 섹션의 디자인 레이아웃은 내가 첫 번째 준 이미지의 레이아웃을 활용해 줘. 3. 아이콘은 아이코니파이의 솔라 아이콘을 활용해 줘. 4. 하단부의 부분은 내가 준 두 번째 이미지를 활용해서 그리드 형식으로 만들어 줘." * **디자인 개선 (반복 프롬프팅의 중요성):** * 초기 결과물에서 부족한 점(배경 가림, 폰트 등)을 구체적으로 지적하며 개선을 요청합니다. * "히어로 섹션을 가리는 이미지는 하단으로 배치하고 배경 모션을 더 잘 보이게 해 줘. 전체적인 폰트 디자인을 지금보다 더 많이 개선해 줘. 더 볼드한 느낌으로 만들어 줘. 중단부에는 흘러가는 마퀴 텍스트를 넣어 줘. 디자인 퀄리티를 한번 높여 달라"와 같이 여러 번 반복하여 프롬프트를 수정하고 개선안을 요청하면 AI가 더 많은 작업을 수행하여 최종적으로 매우 높은 퀄리티의 디자인을 얻을 수 있습니다. ### 결론 AI 스튜디오와 전문화된 외부 도구들을 조합하고, 구체적이고 반복적인 프롬프팅을 통해 프로 디자이너 수준의 랜딩 페이지를 빠르고 효율적으로 제작할 수 있습니다. ### 추가 정보 * **수파노바 (SupaNova):** AI 스튜디오의 단점(다양한 시안 테스트 및 내용 변경의 어려움)을 개선한 솔루션으로, 대기 신청을 통해 더 멋진 랜딩 페이지를 만들 수 있습니다.