AI틱한 UI가 지겹다면? 더 나은 UI 만드는 방법

AI Jason 구독자 167,000명

요약

이 영상은 대형 언어 모델을 활용해 기본 AI UI에서 벗어나 나만의 브랜드 톤과 높은 품질을 지닌 사용자 인터페이스를 만드는 워크플로우를 소개합니다. 'Flow Engineering' 개념을 적용해 레이아웃, 스타일(scene design), 애니메이션 단계를 거쳐 반복적으로 결과를 다듬는 과정을 설명합니다. ASCII 와이어프레임으로 빠르게 레이아웃을 검증하고, Twix CN 같은 툴로 색·폰트·그림자 등 스타일을 커스터마이징하며, 마이크로 인터랙션을 설계해 UI 완성도를 높입니다. 마지막으로 한 번 다듬은 컴포넌트를 여러 뷰에 확장 적용하는 방법과 Super Design 확장 기능, AI Builder Club 커뮤니티 활용 팁을 공유합니다.

주요 키워드

Flow Engineering ASCII Wireframe Scene Design Micro-interactions Mermaid Chart Super Design Twix CN Cursor AI Builder Club

하이라이트

🔑 Flow Engineering: 단순히 프롬프트 하나로 끝내지 않고 디자인 단계를 워크플로우로 나눠 반복적으로 결과를 개선합니다.
⚡ ASCII 와이어프레임으로 레이아웃을 빠르게 검증하면 전체 UI 구조에 대한 오해 없이 요구사항을 손쉽게 전달할 수 있습니다.
🌟 Scene Design 단계에서 Twix CN 같은 플랫폼을 활용해 색상·폰트·그림자 등 스타일 요소를 직접 조정하면 80% 이상의 디자인 퍼포먼스를 달성합니다.
🚀 마이크로 인터랙션과 애니메이션을 키프레임 단위로 설계하면 단순히 예쁜 UI를 넘어 UX 품질을 획기적으로 끌어올릴 수 있습니다.
📌 한 컴포넌트를 완성하면 캘린더 뷰, 맵 뷰 등 다른 화면에도 동일한 워크플로우로 확장해 전체 애플리케이션에 일관된 퀄리티를 유지합니다.
🤖 Super Design 확장 기능은 IDE 안에서 레이아웃, 스타일, 애니메이션을 단계별로 미리 보고 즉시 반복할 수 있어 개발 생산성을 높입니다.
🎯 AI Builder Club 커뮤니티에서 공유되는 상세 프롬프트와 워크플로우를 활용하면 곧바로 더 나은 UI 결과를 얻을 수 있습니다.

용어 설명

Flow Engineering

프롬프트 엔지니어링을 넘어 디자인 단계를 유기적으로 연결해 결과물을 반복 개선하는 개념입니다.

ASCII Wireframe

ASCII 문자로 UI 레이아웃을 빠르게 스케치해 모델이 전체 구조를 이해하도록 돕는 방법입니다.

Scene Design

색상·타이포그래피·그림자 등 비주얼 스타일을 설정해 브랜드 아이덴티티를 반영하는 단계입니다.

Micro-interactions

작은 애니메이션·피드백 요소로 사용자의 인터랙션 품질을 높이는 UI 구성 요소입니다.

Mermaid Chart

텍스트 기반으로 플로우차트를 그릴 수 있는 문법으로, 사용자 플로우를 시각화할 때 활용합니다.

Twix CN

장면 디자인 커스터마이징을 지원하는 플랫폼으로, 스타일 요소를 손쉽게 조정하고 CSS 코드를 추출할 수 있습니다.

Super Design

Cursor IDE 확장 프로젝트로, 레이아웃→스타일→애니메이션을 단계별로 미리 보고 반복하며 UI를 생성하도록 돕습니다.

Cursor

AI 모델을 활용해 코드와 UI를 생성하는 플랫폼이며, 프롬프트에 따라 다양한 결과물을 만들어 냅니다.

기본 AI UI는 ‘AI틱’하다는 인상을 주기 쉽습니다. 영상에서는 모델이 브랜드 색을 반영한 개인화된 UI 컴포넌트를 만들어 전체 애플리케이션에 일관된 퀄리티를 제공하는 방법을 설명합니다.

[00:00] AI가 생성한 일반적인 UI의 문제점을 소개하고, 더 개인화되고 독특한 디자인을 만들어내는 방법에 대한 연구를 시작했다고 설명합니다.

단순 프롬프트 → 결과 도출 방식에서 벗어나, 레이아웃·스타일·애니메이션 단계를 포함한 워크플로우로 전문 디자이너의 사고를 모델에 전달하는 ‘Flow Engineering’을 소개합니다.

[00:31] 앤드류 캥지가 제안한 플로우 엔지니어링 개념을 소개하며, 단순한 프롬프트 엔지니어링 대신 전문 지식을 플로우로 정제하여 반복적으로 구성하는 방법을 제안합니다.

[00:56] 디자이너의 실제 작업 프로세스를 설명하며, 레이아웃 파악, 테마와 브랜딩 결정, 애니메이션 추가, 프론트엔드 구현이라는 4단계 워크플로우를 소개합니다.

[01:24] 4단계 워크플로우가 실험의 시작점이며, 참조 모드, 사용자 플로우, 콘텐츠 계층 등 더 많은 요소들을 실험할 수 있다고 설명합니다.

모델에게 ASCII 와이어프레임을 요청해 빠르게 레이아웃을 검증합니다. 핵심 기능·정보 계층을 반영했는지 확인하고, 1초 이내 반복 피드백으로 요구사항을 정렬합니다.

[01:41] 전형적인 AI 생성 UI의 문제점을 구체적으로 분석하며, 중앙 정렬의 부적절함과 필요한 정보 누락 등을 지적하고 레이아웃 정렬의 중요성을 강조합니다.

[02:03] 키를 활용한 대형 언어 모델과의 빠른 레이아웃 정렬 방법을 소개하며, 채팅 UI 제작 경험을 예시로 들어 설명합니다.

[02:12] AI 모델과 레이아웃을 논의할 때 ASCII 와이어프레임을 사용하는 것이 매우 효과적이다. 모델이 전체 HTML이나 React 페이지를 구현하는 것보다 ASCII 형태로 UI를 빠르게 생성하는 것이 훨씬 빠르고 효율적이다.

[02:28] 실제로 Superdesign이나 Cursor 작업에서는 ASCII 와이어프레임을 먼저 요청하여 1초 만에 빠른 결과를 얻을 수 있다. 이를 통해 빠른 피드백과 조정이 가능하며, 모델과의 소통 비용을 크게 줄일 수 있다.

[02:54] ASCII 와이어프레임은 채팅 UI 같은 상호작용도 표현할 수 있으며, 햄버거 메뉴 클릭시 사이드바가 나타나는 등의 복잡한 기능도 시연할 수 있다. 암호화폐 거래 같은 복잡한 UI도 창의적으로 표현할 수 있다.

[03:10] AI 빌더 클럽 포스터 디자인처럼 창의적 작업도 가능하다. 삼각형 모양 같은 특별한 레이아웃을 포함한 적절한 그래픽 디자인 포스터를 한 번에 생성할 수 있다.

[03:27] ASCII 사용의 단점은 폰트 크기 차이 등을 표현하기 어려워 콘텐츠 계층이 너무 단순해진다는 것이다. 하지만 실험을 통해 적절한 추상화 수준을 찾거나 새로운 레이아웃 소통 방법을 개발할 수 있을 것이다.

[04:09] 워크플로우의 두 번째 단계는 테마 설정이다. 색상, 폰트, 그림자, 테두리 등을 포함하는 테마는 기본 AI스러운 UI를 브랜딩에 맞게 개인화하는 가장 효과적인 방법이다. Dribbble이나 다른 웹사이트에서 UI 레퍼런스를 찾아 CSS 스타일시트를 추출할 수 있다.

Dribbble 이미지나 Twix CN 같은 툴로 컬러·폰트·그림자·테두리 등을 커스터마이징합니다. 추출한 CSS로 모델에게 스타일 가이드를 제공해 80% 이상의 품질을 확보합니다.

[04:29] UI 레퍼런스를 얻어 CSS 스타일시트를 추출하는 방법을 설명합니다. 목업에서 시작하면 보통 80% 정도의 완성도에 도달하지만 100% 유사하게 만들기는 어렵다고 합니다.

[04:43] Twix CN 플랫폼을 소개합니다. 씬 디자인에 집중하는 플랫폼으로, 색상, 폰트, 그림자, 테두리 등을 변경해서 독특한 스타일을 만들 수 있습니다.

[04:55] 인간의 취향이 중요하며, 폰트와 기본 색상이 디자인에 큰 영향을 미친다고 설명합니다. 스타일이 확정되면 코드 버튼을 클릭해서 스타일시트를 복사할 수 있습니다.

[05:14] 스타일 확정 후 UI 품질이 극적으로 향상되는 예시를 보여줍니다. 클라우드에서 받은 원본과 스타일 변경 후의 결과를 비교하며 품질 차이를 설명합니다.

[05:28] 슈퍼 디자인의 스타일시트 생성 과정을 설명합니다. 레이아웃 확인 후 스타일시트 목록을 생성하고, 마음에 안 들면 다시 생성할 수 있습니다. 씬 디자인에 토큰 할당의 중요성을 강조합니다.

키프레임과 트리거 타이밍을 간단한 텍스트 포맷으로 정의해 모델에게 전달합니다. 인라인 편집·호버·슬라이드 등 마이크로 인터랙션을 설계해 UI를 ‘좋음’에서 ‘훌륭함’으로 끌어올립니다.

[05:54] 애니메이션의 중요성을 설명합니다. 마이크로 인터랙션, 호버 효과, 슬라이드 인/아웃 인터랙션이 UI를 좋은 것에서 훌륭한 것으로 만든다고 합니다.

[06:11] 에이전트에게 핵심 사용자 인터랙션과 애니메이션 디자인을 프롬프트하는 방법을 설명합니다. 애니메이션할 요소, 키프레임, 트리거 시점을 간단한 형식으로 표현하는 것이 효과적입니다.

[06:33] 더 고급 기능으로 머메이드 차트를 이용한 사용자 플로우 생성을 소개합니다. 머메이드 차트는 그래프 표현의 한 형태라고 설명합니다.

완성된 리스팅 카드 컴포넌트를 기반으로 캘린더 뷰·맵 뷰 등 다른 화면을 동일한 흐름으로 생성합니다. 일관된 레이아웃·스타일·애니메이션을 유지한 채 페이지를 구성하는 방법을 보여줍니다.

[06:42] 대형 언어 모델이 머메이드 차트를 잘 이해하며, 복잡한 프로젝트에서는 고급 기능도 활용할 수 있지만 대부분의 경우 간단한 키프레임 생성으로 충분하다고 설명합니다.

[06:59] 하나의 컴포넌트를 제대로 만들면 다른 모든 UI 컴포넌트로 확장할 수 있다는 핵심 장점을 강조하며, 속성 리스팅 카드 예시를 들어 설명합니다.

[07:12] 실제 작업 과정을 보여주며, 커서나 슈퍼 디자인에 프롬프트를 주면 캘린더 뷰, 맵 뷰, 가격 히스토리 카드 등을 동일한 스타일로 생성할 수 있다고 설명합니다.

[07:41] 지난 며칠간 경험한 네 가지 플로우 단계를 소개하며, 더 많은 실험을 통해 출력 품질을 향상시킬 수 있다고 조언합니다.

IDE 내 Super Design 확장으로 단계별 결과물을 미리 보고 반복 제작할 수 있습니다. AI Builder Club 커뮤니티에서 공유되는 상세 프롬프트와 워크플로우를 활용해 생산성을 높이는 팁을 안내합니다.

[08:00] 슈퍼 디자인 확장 프로젝트를 소개하며, 잭과 함께 개발하고 있는 오픈 소스 커서 확장이라고 설명합니다. IDE 내에서 UI 생성이 가능하고 완전히 무료로 사용할 수 있다고 강조합니다.

[08:14] 슈퍼 디자인의 기능을 자세히 설명하며, 레이아웃 제안부터 여러 번 반복 작업까지 가능하고, 최종적으로 무한 캔버스에서 다양한 UI 변형을 미리 볼 수 있다고 설명합니다.

[08:32] 4단계 UI 플로우에 대해 더 깊이 알고 싶은 사람들을 위해 AI 빌더 클럽을 소개하며, 최고의 AI 빌더들이 모여 심층적인 학습과 워크플로우를 공유하는 커뮤니티라고 설명합니다.

[08:53] 레이아웃 디자인, 씬 디자인, 핵심 애니메이션 디자인을 거쳐 실제 UI를 생성하는 워크플로우를 체계화했으며, 프롬프트를 복사해서 사용자 정의 모드로 만들면 즉시 더 나은 결과를 얻을 수 있다고 설명합니다.

[00:00] 대부분의 경우 커서에게 UI를 생성하라고 요청하면

[00:01] 기본적으로 항상 이런 유형의 UI를 생성합니다

[00:03] 보면 바로 AI가 생성한 것인지 알 수 있는 UI 말이죠

[00:05] 그래서 지난 며칠 동안

[00:07] 어떻게 하면 모델이 훨씬 더 개인화되고

[00:09] 독특한 디자인을 생성할 수 있는지 연구해왔습니다

[00:10] 당신의 브랜딩이 담긴 디자인을 말이죠

[00:12] 흥미로운 상호작용 패턴과 함께

[00:14] 그리고 가장 중요한 것은

[00:16] 당신의 품질과 취향에 맞는 UI 컴포넌트를 하나 만들면

[00:18] 이를 모든 종류의 다른 UI 컴포넌트로 확장할 수 있다는 것입니다

[00:20] 애플리케이션 전체에서 동일한 기준과 품질을 가지는

[00:22] 컴포넌트들을 만들 수 있다는 것이죠

[00:24] 여기서 제가 보여드리고 싶은 것은

[00:25] 제 전체 워크플로우입니다

[00:27] 여러분이 정말로 디자인 레벨을 높일 수 있도록

[00:29] 대형 모델이 여러분을 위해 생성할 수 있는 디자인의 레벨을 말이죠

[00:31] 먼저 플로우 엔지니어링이라는 개념에 대해

[00:32] 이야기하고 싶습니다. 이것은 앤드류 캥지가

[00:34] 약 1년 반 전에 언급한 개념입니다

[00:35] 프롬프트 엔지니어링 대신에

[00:37] 모델에게 프롬프트를 주고 결과를 기대하는 것이 아니라

[00:39] 가장 정교한 방법은 실제로

[00:41] 전문 지식을 플로우로 정제하는 것입니다

[00:43] 그래서 대형 언어 모델의 출력이

[00:45] 반복적으로 구성될 수 있도록 하는 것입니다

[00:47] 제가 의미하는 바는

[00:48] 가능한 완벽한 프롬프트를 찾으려고 하는 대신

[00:50] 정말 시니어 디자이너가

[00:52] 독특한 디자인을 만들기 위해 수행하는

[00:54] 핵심 요소들이 무엇인지 생각해보는 것입니다

[00:56] 디자이너로서의 제 경험으로는

[00:57] 보통 여러 단계로 디자인을 합니다

[00:59] 먼저 레이아웃을 파악하려고 합니다

[01:00] 어떤 유형의 사용자 여정이 될지를 말이죠

[01:02] 그래서 정보 계층을 결정할 수 있습니다

[01:04] 레이아웃을 확정하고 나면

[01:05] 올바른 테마와 브랜딩을 파악하려고 합니다

[01:08] 그래서 고해상도 목업을 만들 수 있도록

[01:09] 통합할 수 있도록 하는 것이죠

[01:11] 그리고 동시에 약간의 애니메이션도 추가하고 싶습니다

[01:13] 그 이후에야

[01:14] 프론트엔드 구현을 시작할 수 있습니다

[01:16] 그리고 각 단계에서

[01:17] 대형 언어 모델은 여러 다른 결과를 생성할 수 있습니다

[01:19] 제가 마음에 드는 버전을 얻을 때까지

[01:20] 계속 반복할 것입니다

[01:22] 여기서 제가 나열한 이 4단계는

[01:24] 지난 며칠 동안 제가 실험한 시작점일 뿐입니다

[01:26] 시도하고 고려할 수 있는 것들이 훨씬 더 많습니다

[01:28] 참조 모드나

[01:29] 사용자 플로우, 콘텐츠 계층 같은 것들 말이죠

[01:31] 실험할 수 있는 것들이 훨씬 더 많이 있습니다

[01:33] 하지만 저는 지금까지 시도한

[01:34] 이 기본 플로우에 대해서만 이야기하겠습니다

[01:36] 여러분이 다양한 것들을 실험할 수 있도록 말이죠

[01:38] 먼저 레이아웃에 대해 이야기하고 싶습니다

[01:39] 이것은 전형적인 원샷 UI입니다

[01:41] 그런 모델들에서 얻을 수 있는 UI 말이죠

[01:42] 기능적으로는 느껴지지만

[01:44] 많은 세부사항들이 제대로 보이지 않았습니다

[01:46] 예를 들어, 이것이 중앙 정렬되어 있는 것은 말이 안 됩니다

[01:48] 아마도 왼쪽 정렬되어야 할 것이고

[01:49] 또한 제가 유용하다고 생각하는 일부 정보가 누락되었을 수도 있습니다

[01:51] 속성에 대한 설명이나

[01:53] 일부 행동 유도 버튼 같은 것들 말이죠

[01:55] 제가 정말 유용하다고 발견한 것은

[01:57] 실제로 레이아웃을 꽤 일찍 정렬하는 것입니다

[01:59] 제가 발견한 흥미로운 경험 중 하나는

[02:00] 실제로 키를 매우 빠르고 신속한 방법으로 사용할 수 있다는 것입니다

[02:03] 대형 언어 모델과 레이아웃을 정렬하는 방법으로 말이죠

[02:04] 한번은 채팅 UI를 만들려고 했을 때

[02:07] 그냥 프롬프트로 요청했습니다

[02:08] 채팅 UI를 만들어달라고

[02:10] 그리고 그 당시 저는 꽤 시간이 있었습니다

[02:12] 레이아웃을 먼저 생각해보자고 해달라고 하면

[02:13] 모델이 전체 UI를 ASCII로 출력해줘요

[02:15] 그때 정말 놀랐던 게 이게 사실 꽤 효과적인 방법이었어요

[02:17] 모델이 제가 원하는 걸 이해했는지 파악하는 데 말이죠

[02:19] 제가 구현하려던 모든 기능을 실제로 포함했는지

[02:21] 확인할 수 있었어요

[02:22] 가장 중요한 건 모델이 전체 HTML이나

[02:24] React 페이지를 구현하는 것보다

[02:26] 이런 ASCII 와이어프레임을 생성하는 게 훨씬 빠르다는 거예요

[02:28] 제가 Superdesign이나 Cursor로 작업할 때

[02:30] 일반적으로 거치는 과정이 이런 거였어요

[02:32] UI가 어떻게 보여야 하는지

[02:34] ASCII 와이어프레임을 빠르게 출력해달라고 하면

[02:35] 여기서 보시는 것처럼 실시간으로 편집하지 않은 채로

[02:37] 매우 빠르게 1초 만에 빠른 결과를 얻을 수 있어요

[02:39] 그러면 빠르게 피드백을 줄 수 있고

[02:41] 제가 원하는 것에 맞춰 다시 조정할 수 있어요

[02:43] 그러면 아주 빠르게 새로운 UI를 생성해줘요

[02:45] 당연히 몇 번 정도 주고받을 수 있죠

[02:47] 이게 모델과 레이아웃에 대해 소통하는

[02:49] 매우 빠르고 저렴한 방법이에요

[02:51] 그리고 출력물이 우리 요구사항을 만족할 가능성을

[02:53] 극적으로 높여줘요

[02:54] 상호작용을 전달하는 데도 사용할 수 있어요

[02:56] 채팅 UI를 시연해보려는 이 예제에서

[02:58] 먼저 채팅의 메인 UI를 생성하지만

[02:59] 사용자가 햄버거 메뉴를 클릭하면

[03:01] 사이드바가 나타나서 메인 인터페이스를 밀어내는 것도 보여줘요

[03:02] 좀 더 복잡한 UI도 처리할 수 있어요

[03:05] 암호화폐 거래 같은 경우, 창의적인 방법으로

[03:07] UI를 표현하고 소통하는 방법을 찾아내요

[03:08] 더 창의적인 작업도 시도해봤는데

[03:10] AI 빌더 클럽 포스터를 디자인해달라고 했을 때

[03:12] 얻은 결과가 이거예요

[03:14] 이런 콘텐츠 계층이나 포스트 계층도 생성할 수 있어요

[03:16] 모델이 실제로 레이아웃을 꽤 잘 따라해요

[03:18] 결국 이런 삼각형 모양 같은 특별한 레이아웃을 가진

[03:20] 적절한 그래픽 디자인 포스터를 출력해줘요

[03:22] 이건 그렇게 흔하지 않은 건데

[03:24] 한 번에 자체적으로 해결해내요

[03:25] 제가 발견한 단점은 ASCII를 사용하면

[03:27] UI가 너무 단순해지는 경향이 있다는 거예요

[03:29] ASCII에서는 이 폰트가 다른 것보다 커야 한다는 걸

[03:31] 쉽게 표시할 방법이 없거든요

[03:33] 그래서 콘텐츠 계층이 좀 너무 단순하게 느껴져요

[03:35] 하지만 몇 가지 실험을 통해

[03:37] ASCII 프레임을 적절한 추상화 수준으로 유지하거나

[03:39] 레이아웃을 소통하는 새로운 추상화 수준을

[03:41] 찾아낼 수 있을 것 같아요

[03:43] 이게 레이아웃 정렬의 첫 번째 단계이고

[03:45] 워크플로우의 두 번째 단계는 테마예요

[03:46] 테마는 색상, 폰트, 그림자, 테두리, 라디오 등

[03:48] 온갖 것들을 포함해요

[03:50] 이건 아마 기본 AI스러운 UI를

[03:53] 브랜딩에 맞게 정말 개인화된 느낌으로 만들 수 있는

[03:55] 가장 크고 쉬운 레버리지일 거예요

[03:57] 스타일을 제대로 만드는 방법은 여러 가지가 있어요

[03:58] Dribbble이나 Mob, 또는 다른 웹사이트에서

[04:02] UI 레퍼런스를 찾고 이미지를 복사해서

[04:04] Cursor나 Superdesign에 CSS 스타일시트를 추출해달라고

[04:06] 요청할 수 있어요

[04:08] 이게 레이아웃의 첫 번째 단계이고

[04:09] 플로우의 두 번째 단계는 같아요

[04:11] 테마는 색상, 폰트, 그림자, 테두리, 라디오 등

[04:13] 모든 종류의 것들을 포함해요

[04:15] 이게 아마 기본 AI스러운 UI를

[04:17] 브랜딩에 맞게 정말 개인화된 느낌으로 만들 수 있는

[04:18] 가장 크고 쉬운 레버리지일 거예요

[04:20] 스타일을 제대로 만드는 방법은 여러 가지가 있어요

[04:22] Dribbble이나 Mob, 또는 다른 웹사이트에서

[04:24] UI 레퍼런스를 찾을 수 있어요

[04:25] 이미지를 복사해서 Cursor나 Superdesign에

[04:27] CSS 스타일시트를 추출해달라고 요청할 수 있어요

[04:29] UI 레퍼런스를 얻고 이미지를 복사해서

[04:31] 커서나 슈퍼 디자인에 UI 목업에서

[04:33] CSS 스타일시트를 추출하도록 요청할 수 있습니다.

[04:35] 하지만 일반적으로 목업에서 시작하면

[04:37] 보통 80% 정도까지만 도달합니다.

[04:38] 100% 유사하게 보이는 경우는 거의 없죠.

[04:41] 이때 Twix CN 같은 플랫폼이

[04:43] 정말 유용합니다.

[04:45] Twixen은 씬 디자인에만

[04:47] 집중하는 플랫폼입니다.

[04:48] 여기서 색상, 폰트, 그림자, 테두리 등

[04:51] 모든 요소를 변경해서

[04:53] 매우 다르고 독특한 스타일을 만들 수 있습니다.

[04:55] 이때 인간의 취향이 들어가서

[04:56] 정말 다른 것을 만들 수 있습니다.

[04:58] 폰트 같은 것은 디자인에

[05:00] 정말 큰 영향을 미치고

[05:02] 기본 색상도 마찬가지입니다.

[05:04] 이런 UI를 제공해서

[05:05] 스타일을 가지고 놀 수 있고

[05:07] 스타일이 맞으면

[05:08] 코드 버튼을 클릭해서

[05:10] 커서나 슈퍼 디자인으로

[05:12] 스타일시트를 복사하면

[05:13] 같은 스타일을 재현해줍니다.

[05:14] 스타일이 확정되면

[05:16] UI 품질이 극적으로 향상됩니다.

[05:18] 이 예시처럼 원래 클라우드에서

[05:20] 받은 것입니다. 스타일을 바꾸면

[05:21] 이런 모습으로 만들 수 있습니다.

[05:23] AI에서 보통 얻는 것과 비교하면

[05:25] 정말 다르고 높은 품질입니다.

[05:26] 슈퍼 디자인에서도

[05:28] 동일한 생성 과정을

[05:30] 간소화했습니다. UI 레이아웃을 확인한 후

[05:32] 스타일시트 목록을 생성해서

[05:34] 어떤 스타일인지 미리 볼 수 있습니다.

[05:37] 특정 스타일이 마음에 안 들면

[05:38] 만족할 때까지

[05:40] 다시 생성하라고 요청할 수 있습니다.

[05:42] 중요한 점은

[05:43] 씬 디자인에

[05:44] 일정량의 토큰을 할당하고

[05:46] 원하는 모습을 만들도록

[05:47] 확실히 하는 것입니다.

[05:49] 다시 말하지만, 이것이

[05:50] UI를 극적으로 개선하는

[05:52] 핵심 요소 중 하나입니다.

[05:54] 마지막으로 애니메이션입니다.

[05:55] 어떤 UI가 좋게 느껴지는 것은

[05:57] 단순히 좋아 보이기 때문만이 아니라

[05:59] 마이크로 인터랙션이

[06:01] 인라인 편집과 동기화되어 있고

[06:03] 좋은 호버 효과와

[06:05] 슬라이드 인/아웃 인터랙션이 있어서

[06:07] UI를 좋은 것에서 훌륭한 것으로 만들기 때문입니다.

[06:09] 실제로 에이전트에게

[06:11] 핵심 사용자 인터랙션과

[06:12] 애니메이션 디자인을 생각해보라고

[06:14] 간단히 프롬프트할 수 있습니다.

[06:17] 간결하게 하고 애니메이션을

[06:19] 이런 간단한 형식으로

[06:20] 표현하려고 합니다.

[06:22] 어떤 유형의 요소가

[06:23] 애니메이션되어야 하는지, 키프레임이 무엇인지

[06:25] 언제 트리거되어야 하는지.

[06:27] 이런 간단한 것만으로도

[06:29] 모델이 UI를 구축할 때

[06:30] 이런 인터랙션을 고려해야 한다는

[06:32] 좋은 맥락을 제공합니다.

[06:33] 그리고 더 고급 기능도 있습니다.

[06:36] 머메이드 차트로 핵심 인터랙션의

[06:38] 사용자 플로우를 생성하라고 요청하는 것입니다.

[06:40] 머메이드 차트는 왼쪽과 같은

[06:42] 대형 언어 모델은 이런 유형의 머메이드

[06:44] 차트를 이해하는 데 정말 뛰어나며

[06:45] 실제로 모든 상호작용을 세부적으로

[06:47] 나열하는 것과 같은 더 고급 기능도

[06:49] 가능합니다. 하지만 이런 기능들은

[06:51] 복잡한 프로젝트에서 더 유용할 것 같고

[06:52] 대부분의 프로젝트에서는

[06:54] 모델에게 애니메이션을 분석하고

[06:56] 키프레임을 생성하도록 요청하는 것처럼

[06:57] 간단하게 접근할 수 있습니다.

[06:59] 정말 멋진 점은

[07:01] 하나의 컴포넌트를 제대로 만들면

[07:03] 원하는 모든 UI 컴포넌트로

[07:05] 확장하여 전체 페이지를

[07:06] 구성할 수 있다는 것입니다. 예를 들어

[07:08] 제가 만족스럽게 생각하는

[07:10] 속성 리스팅 카드가 있는데

[07:12] 커서나 슈퍼 디자인에게

[07:14] 좋아, 이제 사람들이 검사를 예약할 수 있는

[07:16] 캘린더 뷰를 만들어달라고

[07:17] 프롬프트를 주면

[07:19] 다시 레이아웃을 확인하고

[07:22] 디자인 스타일링과 애니메이션을 적용해서

[07:24] 최종적으로 실제로 꽤 괜찮게 보이는

[07:26] 캘린더 컴포넌트를 만들어줍니다.

[07:28] 동일한 스타일과 상호작용을 가지고 있죠.

[07:30] 그 후에 맵 뷰도 생성해달라고 요청하면

[07:32] 동일한 버튼 콘텐츠 스타일과

[07:34] 애니메이션을 가진 맵 뷰를 만들어주고

[07:36] 속성 상세 페이지에 추가할 수 있는

[07:39] 가격 히스토리 카드도 생성해줍니다.

[07:41] 이런 식으로 계속해서 전체 UI

[07:43] 컴포넌트를 구축하고

[07:45] 이 모든 것들을 모델에게

[07:46] 맥락으로 제공하여 이 모든 컴포넌트로

[07:49] 페이지를 구성해달라고 요청하면 됩니다.

[07:50] 이것들은 제가 지난 며칠간

[07:52] 경험한 네 가지 플로우 단계입니다.

[07:54] 여러분도 실험해볼 수 있는

[07:55] 더 많은 방법들이 있으니

[07:56] 어떤 부분이 실제로 출력에

[07:58] 많은 도움이 되는지 알아보세요.

[08:00] 한편, 이 워크플로우를 슈퍼 디자인 확장에

[08:02] 적용하고 있습니다. 슈퍼 디자인을

[08:04] 모르신다면, 잭과 제가 구축하고 있는

[08:05] 오픈 소스 프로젝트입니다.

[08:08] 기본적으로 IDE 내에서 열어서

[08:10] UI 생성을 시작할 수 있는 커서 확장입니다.

[08:12] 완전히 공개되어 있고 무료로 사용할 수 있습니다.

[08:14] 먼저 레이아웃을 제안하고 생성한 다음

[08:16] 동일한 것을 생성할 수 있고

[08:18] 여기서 바로 미리 볼 수 있는

[08:20] 멋진 UX를 제공하며

[08:22] 여러 번 반복하도록 요청할 수 있습니다.

[08:24] 최종적으로 모든 것을 통합하여

[08:25] ID에서 직접 무한 캔버스에서

[08:27] 같은 화면에서 UI의 모든 다양한

[08:29] 변형을 미리 볼 수 있습니다.

[08:32] 하지만 이런 4단계 UI 플로우에 대해

[08:33] 더 깊이 알고 싶다면

[08:35] 제가 커서 클라우드 코드와 슈퍼 디자인에

[08:37] 평소에 사용하는 프롬프트로

[08:39] 이를 체계화했습니다. AI 빌더 클럽에서

[08:41] 말인데, 이는 제가 구축하고 있는

[08:43] 커뮤니티로 최고의 AI 빌더들이

[08:44] AI 제품을 출시하고 구축하는

[08:45] 그룹입니다.

[08:47] 저와 다른 사람들이 계속해서

[08:49] AI 제품을 구축하고 출시하는 방법에 대한

[08:51] 심층적인 학습과 워크플로우를 공유하고 있습니다.

[08:53] 스타일링 아이콘 스크립트에 대한

[08:55] 지침과 가장 중요한 것은

[08:58] 여기 있는 워크플로우입니다.

[09:00] 레이아웃 디자인, 씬 디자인,

[09:02] 핵심 애니메이션 디자인을 거쳐

[09:04] 더 자세한 분석 예시와 함께

[09:07] 실제 UI를 생성하는 워크플로우를

[09:09] 따르도록 요청했습니다. 처음에는

[09:11] 그냥 이 프롬프트를 복사해서

[09:13] 커서나 클라우드 코드에서 사용자 정의 모드를

[09:15] 만들면 거의 즉시 더 나은

[09:16] 결과를 얻을 수 있습니다.

[09:18] 관심이 있으시다면 아래 설명란의

[09:19] 링크를 클릭해주세요.

[09:21] UI 생성을 더 쉽고 빠르고

[09:23] 더 나은 방법을 계속 탐구해보겠습니다.

[09:25] UI AI 생성 디자인에 대한

[09:26] 좋은 팁을 알고 계시다면

[09:27] 꼭 알려주세요. 감사합니다. 다음에 또 뵙겠습니다.