매번 완벽한 앱 UI 생성하기 – 2단계 Cursor 가이드

AI LABS 구독자 10,300명

요약

이 영상은 Cursor 구독만으로 추가 API 비용 없이 무한 반복 UI 디자인을 만들어 내는 2단계 워크플로우를 소개합니다. 첫 단계에서는 페르소나·기기·지역별 맞춤형 rule 파일로 특정 용도에 최적화된 디자인 변형을 생성하고, 두 번째 단계에서는 기존 디자인을 기반으로 색상과 스타일을 빠르게 반복해 완성도를 높입니다. 간단한 Cursor 룰 시스템과 design.json 활용법을 통해 누구나 손쉽게 일관성 있고 독창적인 앱 UI를 만들어낼 수 있습니다.

주요 키워드

Cursor rule system design.json Superdesign Dev Claude Code extract designd Infinite design generator UI 변형 API 비용 절감

하이라이트

🔑 디자인 아이디어 고유성 확보는 쉽지 않다. 남의 디자인을 복사하거나 AI에 맡기면 반복적이고 밋밋한 결과물이 나온다.
⚡️ Superdesign Dev 같은 API 기반 솔루션은 훌륭하지만, 잦은 API 호출로 비용이 빠르게 증가한다.
🌟 Cursor의 룰 시스템을 활용하면 추가 비용 없이 수많은 UI 변형을 생성·검토할 수 있다.
📌 design.json 파일을 이미지에서 추출해 색상·레이아웃 정보를 일관성 있게 유지하며 다양한 디자인을 자동으로 만들 수 있다.
🚀 1단계는 페르소나·기기 유형·지역별 맞춤형 rule 파일로 특정 사용자 시나리오에 최적화된 UI를 만든다.
🔄 2단계는 ‘무한 반복 디자인’ 룰을 적용해 기존 디자인을 참조하면서 색상과 스타일만 빠르게 변형한다.
💡 Cursor와 Claude Code 모두 유사한 워크플로우를 구현할 수 있지만, Cursor는 별도 API 요금 없이 구독만으로 충분한 성능을 낸다.
🛠 규칙 파일은 워크플로우를 단계별로 서술한 뒤 AI에게 작성하도록 요청하면 초보자도 쉽게 만들 수 있다.

용어 설명

Cursor rule system

Cursor 확장 프로그램 내에서 에이전트 동작을 정의·제어하는 규칙 파일 시스템

design.json

이미지에서 색상·폰트·레이아웃 언어를 추출해 저장하는 JSON 파일

Superdesign Dev

Jason Zho가 공개한 Cursor 기반 UI 반복 생성 확장 프로그램

Claude Code

Anthropic의 AI 모델을 코드·디자인 생성에 활용하는 플랫폼

extract designd command

Cursor에서 이미지로부터 design.json 파일을 생성하는 명령어

Infinite design generator

무한 반복 디자인 변형을 자동으로 만들어 주는 Cursor 룰 파일

앱·웹 디자인은 보기 좋게 만드는 것보다 새로운 아이디어를 내는 게 더 어렵다. 기존 디자인을 베끼거나 AI에 맡기면 개성 없는 결과물이 나오고, 완전히 새로운 디자인은 만들어내기 힘들다.

[00:00] 웹사이트와 앱 디자인의 핵심 문제점을 소개합니다. 멋진 아이디어를 떠올리는 것이 가장 어려운 부분이며, 기존 디자인을 복사할 수는 있지만 독창적인 디자인을 만드는 것은 다른 차원의 문제라고 설명합니다.

[00:17] AI 디자인의 한계와 반복적 디자인 생성의 가능성을 제시합니다. AI가 지루하고 매력 없는 디자인을 만드는 문제점을 지적하면서, 여러 디자인을 반복적으로 생성해서 마음에 드는 것을 선택할 수 있는 새로운 접근법을 소개합니다.

Jason Zho의 Superdesign Dev는 반복 디자인 생성에 유용하지만 API 호출 비용이 빠르게 늘어난다. 이에 저자는 이미 보유한 $20 Cursor 구독만으로 같은 효과를 얻을 수 있는 방법을 고민하게 된다.

[00:40] Jason Zho의 Superdesign Dev 확장 프로그램을 배경으로 설명합니다. 반복적인 UI 디자인 생성 기능은 훌륭하지만, API 기반 사용으로 인한 높은 비용 문제가 있다고 지적합니다. 특히 Anthropic의 Claude API 사용으로 인한 빠른 비용 증가를 문제점으로 제시합니다.

[01:15] 기존 Cursor 구독을 활용한 해결책을 제안합니다. 20달러 Cursor 구독으로 같은 결과를 얻을 수 있는 방법을 모색했으며, Claude Code의 유사한 비용 문제도 언급합니다. 추가 구독이나 API 비용 없이 동일한 기능을 구현하는 것이 목표라고 설명합니다.

Cursor 설정에서 룰 시스템을 수동 모드로 초기화하고 직접 호출하도록 설정한다. 이렇게 만들어진 룰 파일로 원하는 만큼 UI 변형을 생성해 보고, 원하는 디자인을 골라 이어서 작업할 수 있다.

[01:32] Cursor의 내장 규칙 시스템을 활용한 해결책을 구체적으로 설명합니다. 규칙 시스템의 작동 원리와 설정 방법을 안내하며, 수동 모드로 설정된 규칙 파일들을 에이전트에서 직접 호출하는 방식을 소개합니다.

[01:56] 새로운 방법의 장점과 다른 도구와의 비교를 제시합니다. 추가 API 비용 없이 무한한 UI 변형 생성이 가능하며, Claude Code와의 호환성도 있다고 설명합니다. 현재 Claude Code의 유일한 우위점은 다중 에이전트 동시 실행 기능이지만, 규칙 파일만으로도 충분한 성과를 얻을 수 있다고 강조합니다.

[02:42] 커서를 사용한 반복 디자인 생성의 2단계 방법을 소개하기 전에 기본 작동 원리를 설명합니다.

이미지에서 design.json을 추출한 뒤 Cursor와 Claude Code 양쪽에서 동일한 룰 파일로 여러 UI 디자인을 생성한다. To-Do 리스트나 계산기 앱 예시로, 색상·레이아웃 언어는 유지하면서 레이아웃과 스타일만 다양하게 변형한다.

[02:54] 이전 영상에서 다룬 design.json 파일 생성 과정을 설명하며, 이미지에서 디자인 세부사항을 추출하는 방법을 보여줍니다.

[03:04] 간단한 랜딩 페이지 UI 이미지를 시작점으로 하여 일관된 색상 구성과 디자인 언어를 유지하는 방법을 실연합니다.

[03:17] 클로드와 커서 모두에서 같은 사용자 정의 명령을 사용하여 design.json을 기반으로 여러 디자인 변형을 생성하는 과정을 설명합니다.

[03:47] 커서를 사용해 할 일 목록 트래커를 생성한 실제 예시를 보여주며, 모든 디자인이 원본 이미지의 색상 팔레트와 디자인 언어를 따르지만 각각 다른 레이아웃과 스타일을 가지는 것을 설명합니다.

[04:06] 클로드를 사용한 계산기 앱 생성 예시를 소개하고, 클로드와 커서의 차이점을 설명합니다. 클로드는 여러 에이전트를 동시 실행하여 더 빠른 생성이 가능하지만 추가 비용이 발생합니다.

[04:33] 2단계 방법의 첫 번째 단계를 소개합니다. 기존 디자인에서 사용자 정의 규칙 파일을 사용하여 다양한 사용 사례에 맞춤화된 디자인 변형을 생성하는 방법을 설명합니다.

페르소나(rule: Persona)·기기(rule: Device)·지역(rule: Geolocation)별로 커스텀 룰 파일을 만들어, 셰프·학생·임원 등 사용자 유형에 최적화된 UI를 자동으로 생성한다. 모바일·데스크톱·TV용 UI도 손쉽게 변형 가능하다.

[04:50] 음식 주문 앱을 예시로 들어 페르소나 기반 디자인 변형 생성을 설명합니다. 원본 인덱스 파일을 참조하고 페르소나 규칙을 적용하여 셰프용, 학생용 등 다양한 타겟에 맞춤화된 UI를 생성할 수 있습니다.

[05:22] 화자가 자신이 만든 다양한 타겟 제너레이터들을 소개하며, 학생용과 임원용으로 차별화된 UI 디자인을 보여준다. 기기 유형별(모바일, 데스크톱, TV)과 지역별로 맞춤화된 제너레이터들의 활용 예시를 설명한다.

[05:56] 룰 파일을 통해 무한한 타겟 변형을 생성할 수 있으며, 사용자가 작동 방식을 완전히 제어할 수 있다고 강조한다. Claude를 활용한 룰 파일 생성 방법과 복잡한 워크플로우를 위한 특별한 명령어를 언급한다.

[06:21] 화자가 시청자들에게 구독을 요청하고, 채널 멤버십 테스트 현황을 공유한다. 79명의 가입자와 우선 답장 혜택에 대해 소개하며, 추가 티어 출시를 고려하고 있다고 밝힌다.

[06:47] 2단계 방법인 '기존 디자인에서의 빠른 반복 작업'을 소개한다. 타겟 룰 파일과 무한 디자인 제너레이터의 차이점을 설명하며, 각각의 장점과 적합한 사용 시나리오를 비교한다.

‘Infinite design generator’ 룰을 적용해 특정 디자인 파일을 참조하고 색상·스타일만 빠르게 반복 변형한다. 초기 채팅을 새로 시작해 이전 콘텍스트 없이 룰 파일만 정확히 준수하도록 하면 끝없이 새로운 버전을 만들어낼 수 있다.

[07:27] 실제 데모를 통해 기본 노트 앱 디자인에서 시작하여 무한 디자인 룰 파일을 적용하는 과정을 보여준다. 변형 폴더 생성부터 다크 테마, 무지개 스타일 등 다양한 디자인 변형 결과를 제시한다.

[07:57] 깔끔하고 미니멀한 디자인의 장점과 무한 반복 가능성을 설명하며, 워크플로우의 작동 방식을 소개한다.

[08:03] 처음 규칙 실행 시 폴더 구조가 생성되고, 특정 디자인을 반복할 때는 참조 파일을 새 소스로 설정해 같은 폴더에 세 가지 변형을 생성하는 과정을 설명한다.

[08:15] 무지개 디자인을 예시로 들어 구조와 애니메이션은 유지하고 색상과 스타일만 변경하는 실제 반복 과정을 시연한다.

[08:25] 새로운 변형 생성 전 새 채팅을 시작하여 이전 컨텍스트를 배제하고, 규칙 파일 지침을 정확히 따라 진정한 새 변형을 생성하는 방법을 설명한다.

[08:38] design 2.html을 참조한 색상과 스타일 변형 결과를 보여주며, 같은 레이아웃과 애니메이션을 유지하면서 현대적, 바다 테마, 에코 테마 등 다양한 스타일로 변화된 결과를 설명한다.

[08:56] Claude 3.5 Sonnet 대비 사고 모델의 장점을 설명하고, 복잡한 규칙 지침을 더 잘 이해하고 실행할 수 있는 정밀한 제어 능력을 강조한다.

워크플로우를 영어로 단계별 서술한 뒤 AI에 룰 파일 생성을 요청하면 복잡한 규칙도 쉽게 얻는다. 이렇게 만든 룰 파일을 활용해 추가 비용 없이 언제든 다양한 UI 디자인을 실험하고 완성도를 높여보자.

[09:07] 2단계 방법의 완전한 개요를 제시하며, 사용자 정의 규칙 파일로 타겟 변형과 빠른 반복을 통한 무한한 디자인 가능성을 기존 Cursor 구독으로 추가 API 비용 없이 실현하는 방법을 요약한다.

[09:20] 설명란의 규칙 파일 제공을 안내하고, Claude를 활용한 규칙 생성 방법을 설명한다. 워크플로우를 평범한 영어로 단계별 설명하고 영어 프로그래밍을 통해 명확하고 핵심적인 규칙 파일을 생성하는 과정을 소개한다.

[00:00] 웹사이트와 앱을 멋지게 만드는 것은

[00:02] 정말 어려워요. 가장 어려운 부분은

[00:04] 멋진 아이디어를 떠올리는 거예요. 물론

[00:06] 다른 웹사이트의 디자인을 따라할 수는 있지만

[00:08] 알고 계시죠? 누군가는 그 디자인을

[00:10] 처음으로 생각해야 했다는 걸요.

[00:11] 온라인에서 디자인 아이디어를 많이 찾을 수 있어요.

[00:14] 기성 디자인을 가져와서 바로

[00:15] 앱에 넣을 수도 있죠. 하지만

[00:17] 완전히 자신만의 것을 만들고 싶다면 어떨까요?

[00:20] AI에게 새로운 디자인을 요청하면

[00:22] 정말 지루한 걸 만들어낼 거예요.

[00:24] 아무도 좋아하지 않는

[00:26] 절대 쓰고 싶지 않은 걸 말이죠. 하지만

[00:28] 여기서 놀라운 일이 생겨요. 만약 여러분이

[00:30] 여러 디자인을 반복적으로 생성할 수 있는

[00:32] 능력을 가졌다면 어떨까요? 정말 마음에 드는

[00:34] 디자인을 얻을 때까지 말이죠. 바로 여기서

[00:36] 간단한 커서 2단계 방법이 등장해요.

[00:38] 시작하기 전에 약간의

[00:40] 배경지식을 알려드릴게요. 제이슨 조가

[00:42] X에서 슈퍼디자인 Dev라는 걸 공개했어요.

[00:45] 하지만 여기에 문제가 있었고 이게

[00:47] 저를 2단계 방법으로 이끌었어요.

[00:49] 기본적으로 커서 확장 프로그램으로

[00:51] 반복적인 UI 디자인을 계속해서

[00:53] 생성할 수 있게 해줘요. 정말 멋져요.

[00:56] 저도 설치해봤는데

[00:58] 설정도 매우 쉽고 솔직히

[01:00] 정말 잘 작동해요. 하지만 문제가 있어요.

[01:02] API 기반 사용량으로 실행돼요. 지금은

[01:05] 백그라운드에서 앤트로픽의 클로드 API를 사용하고

[01:07] 이게 정말 빠르게 비싸져요.

[01:09] 이런 반복 디자인 에이전트를 사용하면

[01:11] 비용이 많이 들어요. 그래서 생각했죠.

[01:13] 잠깐, 왜 기존의 20달러

[01:15] 커서 구독으로 같은 결과를 얻을 수 없을까?

[01:18] 그러다 다른 영상을 봤는데

[01:20] 클로드 코드를 사용해서 반복 디자인

[01:22] 워크플로를 구축하는 걸 봤어요. 하지만 또

[01:25] 같은 문제예요. 클로드 코드에

[01:27] 추가로 20달러를 구독하거나 API를 사용해야 하는데

[01:29] 이게 비용이 쌓여요. 그래서

[01:32] 대신 이렇게 했어요. 커서의 내장

[01:34] 규칙 시스템을 사용해서 이 반복적인 UI

[01:37] 워크플로를 구축했어요. 이제

[01:38] 이 규칙들이 뭔지 모르신다면, 정말 쉽게

[01:40] 만들 수 있어요. 기본적으로

[01:42] 커서 에이전트의 동작 방식에 영향을 줘요.

[01:44] 정말 쉽게 만들 수 있어요. 설정으로 가서

[01:46] 버튼을 클릭해서

[01:48] 초기화하고 모드를 선택하면 돼요.

[01:50] 오늘 보여드릴 모든 규칙 파일들은

[01:52] 수동으로 설정되고 에이전트에서

[01:54] 직접 호출해야 해요.

[01:56] 이제 추가 API 사용료를 지불하지 않고도

[01:58] 커서에서 직접 원하는 만큼 UI

[02:01] 변형을 생성할 수 있어요.

[02:03] 마음에 드는 걸 선택해서

[02:05] 거기서부터 계속 디자인하면 되고

[02:07] 솔직히 정말 간단해요.

[02:09] 커서 대신 클로드 코드를 사용하고 있다면

[02:11] 이것도 작동해요. 이전 영상에서

[02:13] arguments 태그를 사용해서

[02:15] 커스텀 명령어를 만드는 방법을 보여드렸어요.

[02:17] 프롬프트를 입력하고 변수를 전달하면

[02:19] 정확히 지시한 대로 실행돼요.

[02:22] 커서 규칙도 같은 방식으로 작동해요.

[02:24] 본질적으로 커서 규칙은 이 전체 플로우를

[02:26] 복제할 수 있어요. 클로드 코드가

[02:29] 지금 우위를 점하고 있는 유일한 영역은

[02:31] 여러 에이전트를 동시에 실행하는 거예요.

[02:33] 복잡한 컨텍스트 관리에 좋아요. 하지만

[02:35] 커서가 그 기능을 추가할 때까지는

[02:37] 규칙 파일만 사용해도 꽤 멀리 갈 수 있어요.

[02:39] 무한한 UI 변형을 생성하고 테스트할 수 있어요.

[02:42] 테스트해보고 가장 좋은 것을 선택해서

[02:43] 계속 진행하면 됩니다. 자, 실제로

[02:45] 커서를 사용해서 반복적인 디자인을

[02:48] 생성하는 2단계 방법에 들어가기 전에

[02:50] 기본적인 작동 원리를 간단히

[02:52] 설명해드리겠습니다. 이전 영상에서

[02:54] 어떤 이미지에서든 design.json 파일을

[02:56] 생성한 다음 그것을 사용해서

[02:58] 일관되고 아름다운 디자인을 만드는

[03:00] 방법에 대해 말씀드렸습니다. 그 과정을

[03:02] 차근차근 설명해드리겠습니다. 이 예시에서는

[03:04] 간단한 랜딩 페이지 UI 이미지로

[03:06] 시작했습니다. 이 이미지의 색상 구성과

[03:08] 디자인 언어를 따르는 디자인을

[03:10] 만들고 싶었습니다. 그래서 클로드에서

[03:13] 사용자 정의 명령을 만들고, 커서에서도

[03:15] 같은 명령을 만들었습니다. 여기서 보시는

[03:17] 것처럼 두 명령은 기본적으로

[03:18] 같은 기능을 합니다. extract designd

[03:21] 명령으로 생성된 design.json을 기반으로

[03:23] 여러 디자인을 생성합니다. extract designd로

[03:26] 시작합니다. 커서 안에 이미지를 넣으면

[03:29] 규칙 파일을 사용해서 디자인 세부사항을

[03:32] 추출합니다. 그 작업이 완료되면

[03:34] design.json을 designs 폴더에 저장합니다.

[03:37] 그 다음 클로드와 커서 모두 사용해서

[03:39] 그 파일로부터 UI 디자인을 생성했습니다.

[03:42] 두 폴더가 나란히 있는 것을 보실 수 있습니다.

[03:43] 하나는 커서에서, 하나는 클로드에서 만든 것입니다.

[03:46] 무슨 말인지 보여드리겠습니다. 커서에게

[03:47] multiple UI 규칙 파일을 사용해서

[03:50] 할 일 목록 트래커를 생성하라고 요청했습니다.

[03:52] 이미 design.json 참조가 있었기 때문에

[03:54] 그것을 사용해서 이런 디자인들을 만들었습니다.

[03:56] 모두 같은 색상 팔레트와 원본 이미지의

[03:58] 디자인 언어를 따르고 있는 것을 알 수 있습니다.

[04:00] 하지만 각각은 레이아웃이나

[04:02] 요소 스타일링에서 약간씩 다릅니다.

[04:04] 클로드 코드에서도 똑같은 작업을 했습니다.

[04:06] 이번에는 같은 multiple UI 규칙을 사용해서

[04:08] 계산기 앱을 만들어달라고 요청했습니다.

[04:10] 클로드도 디자인 언어와 일치하는

[04:13] 다양한 디자인 변형을

[04:15] 생성할 수 있었습니다. 이제 핵심 차이점은

[04:17] 클로드는 여러 에이전트를 동시에 실행해서

[04:19] API 비용이나 추가 20달러를 감당할 수 있다면

[04:21] 훨씬 빠르게 디자인을 생성할 수 있습니다.

[04:23] 커서는 하나씩 진행하지만

[04:25] 두 경우 모두 결과물이 놀랍도록 좋았고

[04:28] 매우 일관되었습니다. 이제 2단계 방법의

[04:31] 첫 번째 단계로 넘어가겠습니다.

[04:33] 1단계는 기존 디자인에서 타겟팅된

[04:35] 디자인 변형을 만드는 것입니다.

[04:38] 제가 말하는 것은 사용자 정의 규칙 파일을 사용해서

[04:40] 다양한 사용 사례에 맞춤화된

[04:42] 디자인을 생성할 수 있다는 것입니다.

[04:44] 그리고 그를 위해 다양한 사용 사례에 대한

[04:46] 생성 규칙을 만들 수 있습니다.

[04:48] 예를 들어, 지금 저는 이 음식 주문 앱을

[04:50] 가지고 있고 디자인이 반응형입니다. 그래서

[04:52] 변환하면 적절한 모바일 앱 UI를

[04:54] 가지고 있는 것을 볼 수 있습니다. 하지만

[04:56] 다양한 페르소나를 기반으로 더 많은

[04:58] 디자인을 생성하고 싶다면 어떻게 할까요?

[05:00] 제가 할 수 있는 것은 원본 인덱스 파일을

[05:02] 참조한 다음 페르소나 규칙을 적용하는 것입니다.

[05:04] 이렇게 하면 같은 디자인의 여러 변형이

[05:06] 생성되고, 각각은 다른 페르소나에

[05:08] 맞춤화됩니다. 생성이 완료되면

[05:10] 어떤 결과가 나오는지 정확히

[05:11] 보여드리겠습니다. 페르소나를 기반으로

[05:13] 셰프를 위한 셰프 허브와

[05:15] 학생들을 위한 캠퍼스 이츠 스타일 UI를

[05:17] 생성했습니다.

[05:19]

[05:22] 학생들을 위한 버전과 임원들을 위한

[05:24] 정말 기업적인 웹사이트까지 만들어냈어요. 하지만

[05:26] 이건 단지 하나의 예시일 뿐이에요. 저는 다른

[05:28] 타겟 제너레이터들도 만들었는데, 기기

[05:30] 유형별 제너레이터와 지역별 제너레이터도 있어요. 이렇게

[05:32] 하면 다양한 종류의

[05:34] UI를 실험해볼 수 있거든요. 예를 들어서, 모바일

[05:36] 전용으로 만든 건데 겉보기엔

[05:38] 크게 다르지 않아 보일 수 있지만

[05:40] 아이콘들이 눈에 띄게 커졌어요. 그리고

[05:42] 데스크톱용도 있고, 심지어 TV용으로도

[05:44] 만들어냈는데 이걸 'TV용 푸드 허브'라고

[05:46] 명명했더라고요. 그리고

[05:48] 지역 기반 제너레이터는 특정 지역에 맞는

[05:50] 버전들을 생성했어요. 언어를

[05:52] 바꾸고, 색상을 조정하고

[05:54] 심지어 레이아웃 방향까지

[05:56] 조정했거든요. 요점은 이제 이런 룰 파일들을 사용해서

[05:58] 무한한 타겟 변형들을 만들 수 있다는 거예요. 그리고 가장

[06:00] 좋은 점은 작동 방식을

[06:02] 완전히 제어할 수 있고 만들기도 어렵지 않다는 거예요.

[06:04] Claude에게 부탁해서

[06:06] 생성해달라고 하면 돼요. 마지막에

[06:08] 보여드릴 특별한 명령어가 있어요. 정말

[06:09] 견고한 룰 파일을 만드는 데

[06:11] 도움이 되는데, 특히 복잡한 워크플로우에서 말이에요. 여러분도

[06:13] 연구해볼 수 있도록 이런 타겟 룰 파일들을

[06:15] 아래 설명란에서 찾을 수 있을 거예요. 하지만

[06:17] 그것과 별개로

[06:19] 시작하기는 정말 쉬워요. 아, 그리고

[06:21] 저희가 만드는 콘텐츠를 즐기고 계시다면

[06:23] 구독 버튼을 눌러주시면

[06:25] 정말 감사하겠어요. 저희는 채널

[06:27] 멤버십도 테스트하고 있어요.

[06:29] 첫 번째 티어를 테스트로 출시했는데 지금까지

[06:30] 79명이 가입했어요. 지원이

[06:33] 정말 놀라웠어요. 그래서 추가

[06:35] 티어 출시를 고려하고 있어요. 현재

[06:37] 멤버들은 댓글에 우선적으로

[06:39] 답장을 받을 수 있어요. 피드백이

[06:41] 필요하거나 궁금한 게 있으면 완벽하죠. 이제

[06:43] 2단계 방법의 두 번째

[06:45] 부분으로 넘어가보죠. 2단계는

[06:47] 기존 디자인에서 빠른 반복 작업에 관한 거예요. 이미

[06:49] 마음에 드는 디자인이 있지만 다양한 변형을

[06:52] 빠르게 탐색하고 싶거나

[06:54] 아니면 간단한 디자인으로 새로 시작해서

[06:57] 거기서부터 반복하고 싶다면

[06:58] 이 무한 디자인

[07:01] 제너레이터를 사용할 수 있어요. 이제 왜

[07:02] 타겟 룰 파일을 만드는 대신 이걸

[07:05] 사용하지 않냐고 생각할 수도 있는데

[07:06] 타겟 룰 파일은 예시들과

[07:09] 특정 제약사항들, 그리고 자세한

[07:11] 지침들을 포함할 수 있어서 훨씬 더

[07:13] 정확한 변형들을 만드는 데 도움이 돼요. 단순한

[07:15] 프롬프트를 추가하는 것보다

[07:17] 훨씬 더 강력해요. 하지만 이건

[07:18] 하나의 디자인에 집중한 다음

[07:20] 그 디자인이나 스타일에서 무작위

[07:22] 변형들을 원할 때 특히

[07:24] 강력해요. 어떻게 작동하는지 보여드릴게요. 여기서

[07:27] HTML로 기본적인 노트 앱

[07:29] 디자인을 만들어달라고 했더니 이런

[07:31] 정말 기본적인 디자인을 만들었어요. 이제 이걸 바탕으로

[07:33] 더 많은 변형들을 원해요. 그래서 원본

[07:35] index.html 파일을 참조하고 무한

[07:37] 디자인 룰 파일을 적용했어요. 무슨 일이 일어나는지 보세요.

[07:40] 변형 폴더를 만들고, 세 가지 다른

[07:42] 디자인 유형을 생성하고

[07:44] 참조용으로 원본 디자인을 source.html로

[07:46] 복사해요. 그리고 무엇을 생성했는지 보세요.

[07:49] 다크 테마 버전과 이런 무지개

[07:51] 스타일 웹사이트까지요. 색상은 별로

[07:53] 좋아하지 않지만, 레이아웃은

[07:56] 탄탄해요. 그리고 이런 깔끔하고 미니멀한

[07:57] 깔끔하고 미니멀한 디자인입니다.

[07:59] 가장 멋진 점은 무한히 반복할 수 있다는 것입니다.

[08:01] 워크플로우가 어떻게 작동하는지 보여드리겠습니다.

[08:03] 처음 규칙을 실행하면 폴더 구조가 생성됩니다.

[08:05] 나중에 특정 디자인을 반복하고 싶다면,

[08:07] 참조하는 파일을 가져와서

[08:09] 새로운 소스로 설정하고,

[08:11] 같은 폴더에 세 가지 변형을 더 생성합니다.

[08:13] 실제 예시를 보여드리겠습니다.

[08:15] 이 무지개 디자인의 구조와 애니메이션은 마음에 들지만,

[08:17] 색상과 스타일링은 싫어서

[08:19] 그 특정 디자인만 반복할 수 있습니다.

[08:21] 새로운 변형을 생성하기 전에,

[08:23] 항상 새로운 채팅을 시작합니다.

[08:25] 이전 컨텍스트가 이어지지 않도록 하기 위해서입니다.

[08:27] 이렇게 하면 규칙 파일 지침을 정확히 따르고

[08:30] 진정으로 새로운 변형을 생성할 수 있습니다.

[08:32] 그래서 무한 디자인 규칙으로

[08:34] design 2.html을 참조하고

[08:36] 색상과 스타일 변형을 요청하겠습니다.

[08:38] 완료되면 결과를 볼 수 있습니다.

[08:41] 같은 레이아웃과 애니메이션이지만

[08:43] 완전히 다른 색상과 스타일입니다.

[08:45] 이것은 현대적이고,

[08:48] 이것은 바다 테마입니다.

[08:50] 그리고 이것은 에코 테마입니다.

[08:52] 잘 작동하는 부분은 유지하고

[08:54] 원하는 부분만 바꿨습니다.

[08:56] 참고로 속도를 위해 Claude 3.5 Sonnet을 사용할 수도 있지만,

[08:58] 사고 모델들이 더 정밀한 제어를 제공합니다.

[09:00] 복잡한 규칙 지침을 더 잘 이해하고

[09:02] 실행할 수 있기 때문입니다.

[09:04] 이것이 완전한 2단계 방법입니다.

[09:07] 사용자 정의 규칙 파일로 타겟 변형을 만들고,

[09:09] 그다음 빠른 반복으로

[09:11] 무한한 디자인 가능성을 만들어내는 것입니다.

[09:14] 모두 기존 Cursor 구독을 사용해서 말이죠.

[09:16] 추가 API 비용 없이요.

[09:18] 모든 규칙 파일을 아래 설명란에 넣어두었으니

[09:20] 바로 실험을 시작할 수 있습니다.

[09:22] 한번 시도해보시고

[09:24] 이 방법으로 어떤 디자인을 만드셨는지 알려주세요.

[09:26] 아, 그리고 Claude로 이런 규칙들을

[09:28] 쉽게 만드는 방법을 말씀드렸죠.

[09:30] 워크플로우를 단계별로

[09:32] 평범한 영어로 설명한 다음,

[09:34] 규칙 파일을 작성하고

[09:36] 영어 프로그래밍을 하라고 말하면 됩니다.

[09:39] 이것으로 정말 놀라운 규칙 파일들을

[09:41] 광범위한 워크플로우와 함께 생성했고,

[09:43] AI 에이전트들이 따르는 데 전혀 문제가 없습니다.

[09:45] 규칙이 너무 명확하고 핵심적이기 때문입니다.

[09:47] 이것으로 이 비디오를 마무리하겠습니다.

[09:49] 채널을 지원하고

[09:51] 이런 비디오를 계속 만들 수 있도록

[09:53] 도움을 주고 싶으시다면,

[09:55] 아래 Super Thanks 버튼을 사용하실 수 있습니다.

[09:57] 언제나 시청해주셔서 감사하고,

[09:59] 다음 영상에서 뵙겠습니다.