이 비밀 Gemini 3 Flash 프롬프트로 AI 디자인을 100배 더 향상시키는 방법

Income stream surfers 구독자 130,000명

요약

이 영상은 Google AI Studio의 Gemini 3 Flash를 활용해 단 두 개의 프롬프트로 고품질 UI/UX 디자인을 자동 생성하는 과정을 소개합니다. 메타포 기반 스타일링과 코드 추출 방식을 통해 디자인 시스템을 구성하고, 개인 프로젝트인 Harbor SEO의 주요 기능도 살펴봅니다. 실제 예시와 직접 비교 실험으로 Gemini 3 Flash의 효율성을 입증하며, Claude 모델과의 성능 차이를 확인하고 차세대 UI/UX 툴로서의 가능성을 논의합니다.

주요 키워드

Gemini 3 Flash prompt engineering UI/UX 디자인 AI Studio 디자인 시스템 Harbor SEO Topical Authority backlink streaming CSSJS 애니메이션

하이라이트

🔑 Gemini 3 Flash를 활용하면 단 두 개의 프롬프트만으로 고품질 UI/UX 컴포넌트를 자동 생성할 수 있습니다.
⚡️ 생성된 디자인의 코드와 사용된 프롬프트를 즉시 추출해 웹사이트 전체로 재사용할 수 있습니다.
🌟 첫 번째 프롬프트는 비유적 스타일 네이밍을, 두 번째는 실제 HTML/CSS 코드 생성을 담당해 효율성을 극대화합니다.
🚀 호스트가 개발한 Harbor SEO 도구는 AI 기반 기사 작성, 통계 삽입, 키워드 리서치, 백링크 구축, 트렌드 스카우트 기능을 제공합니다.
📌 메타포 기반 스타일링(예: serrated obsidian monolith)으로 디자인 시스템을 통일해 시각적 일관성을 확보합니다.
🔄 프롬프트 확장으로 생성 옵션(예: 샘플 수 6개)이나 추가 메타포를 적용해 다양한 디자인을 얻을 수 있습니다.
✅ 마지막으로 Gemini 3 Flash는 Claude 대비 더 나은 UI/UX 결과를 보여주며 차세대 디자인 툴로 주목받았습니다.

용어 설명

Gemini 3 Flash

Google AI Studio에서 제공하는 프롬프트 기반 UI/UX 자동 생성 모델

prompt engineering

모델에 원하는 결과를 얻기 위해 설계하는 입력 프롬프트 기법

UI/UX

사용자 인터페이스(User Interface) 및 사용자 경험(User Experience) 디자인

CSSJS animations

고성능 CSS 및 JavaScript 애니메이션 기술

Topical Authority (토픽 권위)

특정 주제 분야에서의 전문성 및 권위 점수를 높이는 전략

backlink

웹사이트 SEO를 강화하기 위해 외부 사이트로부터 연결되는 링크

streaming

모델의 실시간 응답을 스트리밍 방식으로 받아보는 기능

design system

일관된 디자인을 위해 색상·타이포그래피·레이아웃 등 규칙을 체계화한 시스템

Google AI Studio의 Gemini 3 Flash 기능을 발견하고 Amaresi 디자이너를 소개합니다. UI/UX 자동 생성 기능에 대한 기대감과 간략한 개요를 제시합니다.

[00:01] 구글 AI 스튜디오에서 발견한 Gemini 3 Flash를 이용한 UI UX 생성 기능을 소개합니다. 구글 AI 스튜디오의 리드 프로덕트 디자이너가 만든 이 도구로 미래형 로그인 폼을 시연해보겠습니다.

‘create a futuristic login form’ 프롬프트로 Flash UI가 생성한 로그인 폼 디자인과 코드 추출 과정을 시연합니다. 초기 결과를 직접 확인합니다.

[00:48] Harbor SEO 스폰서 소개 시간입니다. 제가 직접 개발한 SEO 도구로, 웹사이트 URL과 키워드만으로 AI가 통계가 포함된 고품질 아티클을 생성해줍니다. 리서처, 토픽 스케일러, 리워커, 링커, 스카우트 등 다양한 기능을 월 29달러에 제공합니다.

호스트가 직접 개발한 Harbor SEO 도구를 소개합니다. 사이트 URL만으로 AI 기사 생성, 통계 삽입, 키워드 리서치, 토픽 스케일러, 백링커, 스카우트 기능을 설명합니다.

타임라인 정보가 없습니다.

두 파트 프롬프트 동작 원리를 살펴봅니다. 첫 파트는 메타포 기반 스타일 네이밍, 두 번째는 HTML/CSS 코드 생성이며, 타이포그래피·모션·레이아웃 규칙을 해설합니다.

[02:30] AI가 생성한 디자인 요소들의 이름이 정말 인상적입니다. '톱니모양 흑요석 모놀리스', '생체발광막', '키네틱 브러시드 탄탈룸' 등 창의적인 명명이 돋보입니다. 간단해 보이지만 프롬프트를 확인할 수 있고 코드를 가져다 활용할 수 있다는 점이 매우 유용합니다.

[03:08] 웹사이트 제작 도구인 Board를 사용하여 SaaS 홈페이지를 만드는 실시간 데모를 진행하며, 동시에 Flash UI의 프롬프트 구조를 살펴본다고 설명합니다.

[03:32] 코드를 살펴보며 Flash UI가 제공하는 창의적 예제들을 분석합니다. 이 예제들을 복사하지 말고 톤의 가이드로 활용하라고 조언합니다.

[03:57] Flash UI가 2부분 프롬프트 시스템으로 작동한다고 설명합니다. 첫 번째 부분은 이름과 스타일을 생성하고, 두 번째 부분은 실제 코드를 생성하는 구조입니다.

프롬프트 옵션을 확장해 생성 개수를 늘리거나 새로운 메타포(Nano Banana)를 적용하는 방법을 제시합니다. Stitch 빌드 과정 언급과 전체 웹사이트 제작 가능성을 모색합니다.

[04:13] Flash UI의 상세한 프롬프트 지침을 읽어줍니다. 메타포를 활용한 CSS 선택, 고품질 타이포그래피, 미묘한 애니메이션, 과감한 레이아웃 등의 구체적인 가이드라인을 제시합니다.

[04:56] 이 개념을 확장하여 3개 대신 6개를 생성하거나, 나노 바나나를 도입하는 등의 응용 가능성을 제시합니다.

[05:12] 이 시스템이 실제로 Google의 Stitch를 구축한 방법일 수 있다고 추측하며, Google이 이런 핵심 정보를 공개한 것에 대해 놀라움을 표현합니다.

[05:35] Google이 공개한 정보의 가치를 깨닫고 혹시 삭제될까 봐 복사해두려 한다고 말하며, 이것이 AI 애플리케이션 구축의 청사진이라고 평가합니다.

[06:13] Gemini Flash UI로 만든 디자인을 확장하고 개선하여 더 많은 가능성을 탐구할 수 있다고 설명합니다. 이는 매우 간단한 예시일 뿐이라고 언급합니다.

[06:21] Flash UI는 AI Studio에서 제공하는 매우 쉬운 UI/UX 생성 도구라고 소개하며, build.ai Studio에서 바로 접근할 수 있다고 안내합니다.

[06:45] Flash UI의 결과물을 보며 UI/UX의 새로운 가능성에 대해 감탄하고, 로그인 스타일을 전체 홈페이지에 적용한 결과를 보여줍니다.

[07:09] 하나의 컴포넌트에서 전체 애플리케이션을 구축할 수 있다고 설명하며, Gemini 3 Flash의 UI/UX 생성 능력을 높이 평가합니다.

[07:34] 물리적이고 재질적인 은유를 활용한 디자인 방식에 대해 극찬하며, 단순한 두 부분 프롬프트 시스템의 효과를 강조합니다.

Claude 모델에 동일 프롬프트를 적용해 결과를 비교합니다. Gemini 3 Flash가 더 우수한 UI/UX 결과를 보임을 확인하고 시청자에 감사하며 크리스마스 인사로 마무리합니다.

[08:10] 디자인 시스템이 완성되면 전체 웹사이트를 구축할 수 있다고 설명하며, 보라색 클래식 추가에 대한 약간의 불만을 표현합니다.

[08:34] 이전에 Claude에게 준 프롬프트와 동일한 것을 Gemini 3 Flash로 테스트해보기로 하며, 아직 아티팩트 기능이 없다는 점을 아쉬워합니다.

[09:00] Gemini 3 Flash의 결과가 Claude보다 훨씬 뛰어나다며 큰 감동을 표현하고, 이것이 UI/UX의 새로운 방법일 수 있다고 결론짓습니다.

[00:01] 안녕하세요 여러분, 구글의 AI 스튜디오에서 꽤 흥미로운

[00:02] 것을 발견했는데 여러분께 보여드리고 싶어서

[00:06] 왔습니다. 제게는 정말 매혹적인

[00:09] 내용이거든요. 이건

[00:11] Gemini 3 Flash로 훌륭한 UI UX를

[00:14] 생성하는 방법입니다. 이는 구글 AI 스튜디오의

[00:18] 리드 프로덕트 플러스 디자인 담당자인

[00:21] 아마레시라는 분이 만든 건데요. 구글

[00:24] AI 스튜디오는 지금 정말 대단한

[00:26] 것들을 만들어내고 있어요. 그럼 바로

[00:29] 들어가기 전에 실제로 작동하는

[00:30] 모습을 한번 보죠. 미래형 로그인

[00:34] 폼을 만들어보겠습니다.

[00:35] 자, 이게 정말 정말 멋진

[00:37] 결과물이에요. 그리고 저는

[00:39] 지난 며칠간 이걸로 작업하고 있었는데,

[00:42] 여러분이 지금 보시는 것과는 다르긴 하지만

[00:44] 말이죠. 확실히 이건 정말

[00:46] 멋지죠?

[00:48] 영상을 계속하기 전에 오늘의 스폰서,

[00:50] Harbor SEO에 대해 말씀드릴게요. 완전히

[00:53] 투명하게 말씀드리면, Harbor는

[00:55] 제가 만든 서비스입니다. 원래는

[00:56] 다른 팀이 만들었는데, 최근에 다시

[00:58] 제가 맡아서 지난 몇 년간

[01:00] 코딩에 대해 배운 모든 것을 활용해

[01:02] 처음부터 다시 구축했습니다. Harbor가 하는 일은

[01:04] 여러분의 웹사이트, 사이트맵이나

[01:07] 사이트맵 없이도 단지 사이트 URL과

[01:09] 키워드만으로 AI를 사용해 정말

[01:12] 훌륭한 AI 아티클을 생성하는 것입니다.

[01:15] 아티클 안에 통계를 넣어주는

[01:19] 새로운 기능도 있어요. 이는

[01:21] 구글 랭킹뿐만 아니라 ChatGPT나

[01:24] 다른 LLM에서도 순위를 올리는 데 도움이 됩니다.

[01:28] 이들은 데이터가 풍부한 아티클을

[01:31] 찾고 있거든요. 모든 이미지를 처리하고

[01:33] 모든 것을 다 해주는데 한 달에

[01:35] 29달러입니다. 제 자체 시스템과

[01:39] AI를 활용해 웹사이트의

[01:41] 잠재적 키워드를 찾아주는

[01:44] 리서처 기능이 있어요.

[01:46] 토피컬 오써리티에서 빠진 부분을

[01:48] 찾아주는 토픽 스케일러가 있고,

[01:52] 이전에 작성한 아티클을 가져와서

[01:53] 더 좋게 만들어주는 리워커 기능도

[01:56] 있습니다. 백링크를 찾아주는

[01:58] 링커 기능도 있어요. 이미 준비된

[02:01] 백링크를 제공하므로 그냥

[02:04] 해당 업체에 메시지를 보내고

[02:06] 돈을 지불하면 백링크를

[02:08] 받을 수 있어요. 그리고 최신 기능인

[02:11] 스카우트 기능이 있는데, 이는

[02:13] 여러분 분야의 트렌딩 토픽을

[02:14] 찾아주는 기능이에요. 이커머스에 특화되어

[02:17] 있지만 모든 웹사이트에서 작동하며,

[02:19] 특히 Shopify와 WordPress

[02:21] 웹사이트에 최적화되어 있습니다.

[02:24] 확인해보세요. 링크는 설명란과

[02:25] 고정 댓글에 있습니다.

[02:27] 시청해주셔서 감사합니다. 이제

[02:29] 영상으로 돌아가겠습니다.

[02:30] 정말 멋진 건 여기 있는

[02:32] 이름들입니다. 톱니모양 흑요석 모놀리스,

[02:35] 생체발광막, 점도,

[02:38] 키네틱 브러시드 탄탈룸. 이것들이 정말

[02:42] 놀라워 보이죠. 물론

[02:44] 이건 정말 정말

[02:45] 간단한 거라는 걸 알고 있어요. '오 마이 갓

[02:47] 이걸 봐, 이걸로 모든 게 바뀌었어'

[02:50] 라고 말하는 건 아니지만

[02:52] 멋진 점은 먼저 이걸 만드는 데 사용된

[02:55] 프롬프트를 볼 수 있다는 것이고 두 번째로

[02:57] 원한다면 이 코드를 가져올 수

[03:00] 있다는 거예요. 소스에서 이 코드를

[03:03] 가져와서 나머지 부분을 만드는 데

[03:05] 사용할 수 있어요

[03:08] 웹사이트를 만드는 거죠. 그러니까 제가 말하는 동안

[03:11] 빠르게 실제로 어떻게 작동하는지 봅시다

[03:13]

[03:14] 보드를 사용하겠습니다. 당연히

[03:17] 아티팩트 기능이 있으니까요. 그래서 그냥

[03:20] 아래 스타일을 사용해서 SaaS 홈페이지를 만들어줘라고 할게요

[03:26] 맞죠? 그리고 잠깐 기다려볼게요

[03:29] 그게 처리되는 동안 여러분

[03:32] 코드로 들어가서

[03:33] 프롬프트를 살펴봅시다. 왜냐하면 여기서부터

[03:35] 정말 흥미로워지거든요

[03:36]

[03:38] 그리고 기억하세요, 우리는 실제로

[03:39] 이것들을 가져다 쓸 수 있어요, 맞죠? 창의적인

[03:42] 예제들

[03:44] 단순히 복사하지 말고, 톤을 위한 가이드로 사용하세요

[03:47] 예제 A. 우리는 여기 있는 이 예제들을 가져다가

[03:50] 기본적으로

[03:52]

[03:54] 원하는 것은 무엇이든 만들 수 있어요, 맞죠?

[03:57] 이것은 2부분으로 된 프롬프트 같아요

[03:58] 첫 번째 부분은

[04:00] 이름을 만들어내고, 따라서 생성될 UI의 스타일도 결정합니다

[04:03] 그리고 두 번째 부분은

[04:05] 실제 코드를 생성하는 것 같아요

[04:09] 추측컨대요, 맞죠?

[04:13] 여기서 볼 수 있듯이, 당신은 Flash UI입니다

[04:15] 트림 인풋을 위한 놀라운 고해상도 UI

[04:17] 컴포넌트를 만드세요. 이것은

[04:20] 첫 번째 프롬프트의 출력이 될 거예요

[04:22] 개념적 방향, 스타일 지침

[04:25] 시각적 실행 규칙

[04:27] 재질감, 지정된 메타포를 사용해서

[04:30] 모든 CSS 선택을 이끌어내세요. 정말 좋아요

[04:33] 타이포그래피, 고품질 웹을 사용하세요. 굵은 산세리프와

[04:36] 세련된 모노스페이스를 데이터용으로 페어링하세요

[04:39] 모션은 미묘한 고성능 CSS/JS

[04:42] 애니메이션을 포함합니다

[04:44] 지적재산권 보호, 아티스트 이름이나 상표는 금지

[04:47] 레이아웃은 네거티브 스페이스와 계층 구조를 과감하게 사용하세요

[04:50] 일반적인 카드는 피하고

[04:51] HTML만 반환하고, 마크다운 펜스는 안 돼요

[04:54] 여러분, 이 개념을 가져다가

[04:56] 정말로 확장할 수 있어요

[04:58] 예를 들어, 3개 대신 6개를 생성하게 만들 수도 있죠

[05:01] 맞죠? 예를 들어

[05:03] 아마 여기에 나노 바나나도 도입할 수 있을 것 같아요

[05:08] 그러면 훨씬 더 흥미로울 텐데요

[05:10] 맞죠? 실제로 이것이

[05:12] 스티치를 구축한 방법일 수도 있어요

[05:15] 생각해보니까, 이걸 공개했어야 했는지 모르겠어요

[05:18] 솔직히 말해서. 이게 실제로

[05:20] 스티치를 구축한 방법이에요

[05:22] 이 2부분 시스템이

[05:25] 대부분의 AI 애플리케이션을 구축하는 방법일 거예요

[05:27] 사실, 이걸 공개했어야 했는지 확신이 안 서요

[05:29]

[05:30] 스트리밍도 볼 수 있어요, 맞죠?

[05:32] 혹시 모르신다면, 기본적으로

[05:35] 와, 이거 미친 거예요

[05:37] 사실, 혹시 그들이 이걸 내려버릴까 봐

[05:39] 복사해둬야겠어요

[05:41] 그들이 공개하지 말았어야 할

[05:44] 엄청난 정보를 그냥 공개해버렸어요

[05:46] 아마르, 이걸 우리에게 공개해줘서

[05:48] 정말 고마워요. 솔직히 이거 미친 거예요

[05:51] 방금 뭔가를 깨달았어요. 이건

[05:53] 기본적으로

[05:55] 이런 걸 만들기 위한 청사진 같은 건데

[05:57] 원하는 건 뭐든지 할 수 있는 버전이에요

[06:00] 맞죠? 아마 이 두 개가 필요할 것 같아요

[06:02] 흥미롭네요

[06:05] 이런 것들이 백엔드에서... 아니 백엔드도 아니고

[06:07] 프론트엔드에서 어떻게 작동하는지 보는 게

[06:09] 정말 좋아요. 뭐, 모르겠지만

[06:10] 어쨌든, 그리고

[06:13] 이걸 확장하고 개선해서

[06:15] 뭘 만들 수 있는지 보는 거예요

[06:17] 이건 정말 간단한 예시일 뿐이거든요

[06:19] 그렇죠?

[06:21] 하지만 처음에 말했듯이

[06:23] 이건 정말

[06:25] UI/UX를 만드는 아주 쉬운 방법이에요

[06:29] 정말 쉬워요. 이 도구만으로도

[06:32] AI Studio에서 그냥

[06:34] build.ai Studio에 들어가면 되거든요

[06:38] 저는 지금 build에 있고, 여기에 Flash UI가 있어요

[06:41] 정말 대단해요. 정말 대단합니다

[06:45] 이걸 보면 정말

[06:46] UI/UX로 뭐가 가능할지 생각하게 되네요

[06:50] 여기서 아이디어를 얻을 수 있을 것 같은데

[06:52] 와, 정말 흥미롭네요

[06:56] 정말 정말 흥미로워요

[06:59] 로그인 스타일을 가져다가

[07:03] 그냥 넣었어요

[07:06] 전체 홈페이지에 말이에요. 여기서부터

[07:09] 알아두시면 좋은 건 기본적으로

[07:11] 전체 애플리케이션을 만들 수 있다는 거예요

[07:15] 말 그대로

[07:17] 의심할 여지없이 이제 우리는

[07:20] Gemini 3 Flash로 만든 UI/UX를 가져올 수 있어요

[07:24] 젠장, Gemini 3 Pro도 아니고

[07:27] 이 Flash UI를 사용한 Gemini 3 Flash로요. 아니면

[07:31] 여기 있는 걸 개선할 수도 있고요

[07:34] 더 좋게 만들 수 있어요. 저라면 몇 가지

[07:36] 아이디어가 있는데 예를 들어

[07:38] 6개를 생성하게 하고, 더 많은

[07:41] 이런

[07:43] 은유를 뽑아내려고 할 거예요. 저는 이런

[07:47] 물리적이고 재질적인

[07:49] 은유가 정말 마음에 들어요. 이렇게

[07:51] 만든 방식이 정말 좋아요. 정말 많은

[07:54] 아이디어를 주고 너무 간단하기까지 해요

[07:56] 그냥 두 부분으로 된 프롬프트예요

[07:58] 프롬프트 1, 프롬프트 2, 그게 다예요

[08:00] 이렇게 효과적인 UI/UX 제작 방법치고는

[08:04] 미친 거죠. 그리고 이걸 가져다가

[08:06] 전체 웹사이트를 만들 수 있어요. 왜냐하면

[08:10] 일단 디자인 시스템이 생기면

[08:12] 디자인 시스템을 갖게 되는 거잖아요

[08:15] 실제로 필요한 건

[08:17] 디자인 시스템뿐이고 결과가 정말 좋아 보여요

[08:21] 보라색 클래식을 추가한 게 싫지만

[08:24] 보라색 추가를 참을 수 없나 보네요

[08:26] 그래도 전반적으로는

[08:28] 정말 놀라운 결과예요. 마지막으로

[08:31] 빠르게 해보고 싶었던 건

[08:34] Gemini 3 Flash가 이전에

[08:35] Claude에게 줬던 프롬프트와 같은 걸로

[08:38] 어떻게 처리하는지 보는 거였어요

[08:40] 어쨌든 봐야죠. 여기 코드를

[08:42] 복사해봅시다. 아직 아티팩트가 없어서

[08:45] 아쉽긴 하지만. 붙여넣고

[08:46] 실행해보겠습니다. 오, 와

[08:49] 아, 젠장. 이건 어...

[08:56] 이건 훨씬 더 좋네요. 세상에

[09:00] 이건 훨씬 더 좋아요. 맙소사

[09:03] 욕하지 않기로 약속했는데. 정말

[09:05] YouTube가 제가 욕하는 걸

[09:07] 좋아하지 않는 것 같다는 생각이 들어요

[09:10] 젠장, 정말 인상적이긴 해요

[09:13] 여러분, 이게 UI/UX의

[09:15] 새로운 방법일지도 몰라요. 스킬보다도 더 좋아요

[09:18] 여기서 영상을 마치겠습니다

[09:19] 시청해주셔서 정말 감사합니다

[09:21] 크리스마스를 축하하신다면 메리 크리스마스

[09:23] 그리고 곧 더 많은

[09:25] 콘텐츠로 뵙겠습니다. 그리고

[09:26] 영상 끝까지 보시는 분들은

[09:27] 정말 대단한 분들이에요

[09:29] 여기 있습니다