[00:00]
[음악]
[00:03]
[박수]
[00:04]
안녕하세요, 또 다른 영상에 오신 것을 환영합니다. 저는
[00:08]
멋진 디자인을 만들기 위한 여정에 푹 빠져 있었습니다.
[00:10]
오늘은 AI로 만든 디자인을 어떻게 하면
[00:13]
돋보이게 만들 수 있는지 몇 가지 방법을 보여드리려 합니다.
[00:15]
AI로 만든 디자인을 어떻게 차별화할 수 있는지
[00:17]
보여드리겠습니다.
[00:19]
이 영상은 제가 예전에 만든 Shad CN 디자이너 영상의
[00:22]
두 번째 파트라고 볼 수 있으니, 그 영상도 확인해 보세요.
[00:25]
어쨌든, 오늘은 AI를 사용해서
[00:29]
기본적으로 실제 같은 디자인을 어떻게 만들 수 있는지
[00:31]
보여드리려고 합니다. 무작위로 요소들을 모아놓은 것처럼 보이지 않는
[00:34]
진짜 같은 디자인 말이죠.
[00:36]
요소들을
[00:37]
간단하게 하기 위해 바로 워크플로우로 들어가서
[00:41]
실제 같은 디자인을 어떻게 만들 수 있는지 보여드리겠습니다.
[00:44]
일반적으로 AI로 무언가를 만들면
[00:47]
모델이 아무리 좋아도 기본적이고
[00:50]
단순하게 보이는 경향이 있습니다.
[00:52]
왜냐하면 우리가 좋은 디자인을 만드는
[00:55]
기본 원칙을 놓치고 있기 때문입니다.
[00:58]
제가 보여드릴 방법들은 빠르고 쉽게 적용할 수 있습니다.
[01:01]
그러나 그전에
[01:03]
온디맨드에 대해 말씀드리겠습니다.
[01:06]
온디맨드는 올인원 최고의 AI
[01:08]
운영 시스템으로, AI 에이전트와 AI 자동화
[01:11]
워크플로우를 몇 초 만에 만들 수 있도록 도와줍니다.
[01:12]
LinkedIn, Instagram, Twitter용 소셜 미디어 포스팅 에이전트와 같은
[01:15]
다양한 실행 가능한 에이전트를 만들 수 있습니다.
[01:17]
또한 자동 거래를 위한 에이전트나
[01:20]
원하는 어떤 것이든 만들 수 있습니다.
[01:21]
그뿐만 아니라 온디맨드는
[01:24]
에이전트 플로우 빌더도 제공하는데,
[01:26]
이를 통해 에이전트, 모델
[01:28]
엔드포인트, 이행 프롬프트, 채팅
[01:30]
프롬프트를 하나의 일관된 워크플로우로 조합할 수 있습니다.
[01:32]
이러한 워크플로우는 매 분마다,
[01:34]
시간별, 일별, 주별, 월별 또는
[01:36]
원하는 간격으로 실행되도록 예약할 수 있습니다.
[01:39]
심지어 고급 음성 모드도 있어서
[01:41]
음성 에이전트를 만들 수 있는데,
[01:43]
이것도 정말 멋진 기능입니다.
[01:46]
또한 이메일, 슬랙을 통해
[01:47]
결과물을 전달하거나 실행 가능한
[01:49]
에이전트로 만들 수도 있습니다.
[01:51]
현재 무료로 $50 크레딧을 제공하고 있어서
[01:53]
완전히 무료로 사용해보고 꽤 멋진
[01:56]
것들을 만들어 볼 수 있습니다.
[01:58]
꼭 확인해보시고
[02:00]
멋진 프로젝트를 시작해보세요.
[02:02]
이제 본 영상으로
[02:04]
돌아가겠습니다.
[02:06]
자, 이제 어떻게 시작해야 할까요?
[02:08]
일반적으로 항상 기본 디자인부터 시작해야 합니다.
[02:13]
무언가를 만들기 위한 예시로,
[02:15]
저는 랜딩 페이지를 만들겠습니다. 좋은 디자인이
[02:18]
가장 필요한 것이 바로 랜딩 페이지이기 때문이죠.
[02:20]
랜딩 페이지의 주제로는 그냥 'King Bench'를 사용하겠습니다.
[02:23]
실제로 이 랜딩 페이지를 사용하지는 않을 겁니다.
[02:25]
의미가 없기 때문이죠. 하지만 랜딩 페이지를 만드는
[02:27]
좋은 주제입니다.
[02:31]
디자인을 만들기 위해서는 Figma를 사용하는 것이 좋습니다.
[02:33]
디자인을 만들어야 하는 이유는 AI 코더를
[02:35]
안내하기 위해서입니다.
[02:38]
AI는 자산이나 그런 것들을 사용할 수 없기 때문에
[02:41]
단순한 디자인만 만들 수 있습니다.
[02:44]
하지만 먼저 디자인을 만들면,
[02:47]
AI에게 디자인과 함께 필요한 자산을
[02:51]
제공할 수 있어서 더 멋진 결과물을 만들 수 있습니다.
[02:53]
꽤 멋진 방법이죠.
[02:55]
디자인을 시작하기 위해서는 Dribble이나
[02:59]
다른 곳에서 영감을 얻고
[03:01]
만들고 싶은 것이 무엇인지 이해하는 것이 좋습니다.
[03:03]
저는 그라데이션을 좋아합니다. 디자인을 멋지게 만들어주죠.
[03:06]
디자인을 시작하려면 Dribble이나
[03:09]
다른 곳에서 영감을 얻는 것이 좋습니다.
[03:11]
다른 곳에서 영감을 얻고 무엇을
[03:14]
만들고 싶은지 이해해 보세요. 저는
[03:18]
그라데이션을 좋아합니다. 디자인을 생동감 있게
[03:20]
만들어주죠, 특히 애니메이션이
[03:23]
적용되었을 때 더욱 그렇습니다. 이제 멋진
[03:25]
그라데이션을 만드는 방법부터 시작해 볼게요.
[03:28]
제가 사용하는 가장 쉬운 방법은 구글의 이미지
[03:31]
FX입니다. 매우 간단하고 무료예요. 여기에
[03:34]
접속해서 그라데이션을 만들어 달라고
[03:37]
요청하면 됩니다. 더 좋은 결과물을 위해
[03:40]
프롬프트를 최대한 자세하게
[03:42]
작성하세요. 미드저니도 사용할 수 있지만
[03:45]
유료 서비스입니다. 어쨌든 그라데이션을
[03:49]
얻었다면 피그마 디자인에 넣고
[03:52]
원하는 모습이 될 때까지 약간
[03:54]
디자인을 조정하면 됩니다.
[03:57]
피그마는 디자인 작업에 정말 좋습니다.
[04:01]
최고의 결과를 얻는 핵심은
[04:02]
피그마라고 생각합니다. 디자인이 있으면
[04:06]
AI가 참조할 가이드가 생기고
[04:08]
또한 명확한 목표가
[04:11]
생깁니다. 많은 사람들이 그냥 감으로
[04:14]
디자인하라고 말하는 것을 알지만
[04:17]
저는 그런 생각을 갖고 있지
[04:20]
않습니다. 어쨌든 이제 디자인이 완성되었습니다.
[04:23]
꽤 깔끔하고 단순하게 보이네요. 일반적으로
[04:26]
히어로 섹션, 중간 섹션, 그리고
[04:28]
푸터가 필요합니다.
[04:31]
보기 좋고, 디자인하는 데 10분 정도
[04:34]
걸렸습니다. AI 코드를 사용하기 시작할 때
[04:37]
대부분의 페이지에 이 방식을
[04:39]
추천합니다. 이렇게 하면 정확히 원하는 것을
[04:41]
만들 수 있고 토큰을 낭비하지
[04:44]
않을 수 있거든요. 이제 이 디자인을
[04:47]
JPG로 다운로드해서 저장하세요. 이제
[04:51]
코더를 실행할 차례입니다. 무엇을 사용할지는
[04:54]
여러분에게 달려 있습니다. 다운로드하고
[04:57]
Next.js 프로젝트를 초기화한 다음 열어보세요.
[05:02]
이제 제가 하는 방식은 사용하려는 에셋을
[05:05]
public 폴더에 넣는 것입니다. 에셋이
[05:09]
위치해야 할 곳이니까요. 또한
[05:11]
히어로 섹션에 있는 배경을
[05:13]
애니메이션으로 만들고 싶습니다.
[05:17]
그러니 VO2를 사용해서
[05:19]
애니메이션을 적용해 보겠습니다.
[05:22]
AI 스튜디오로 가서 V2를 사용할 수 있는데,
[05:26]
여기서는 무료로 사용할 수 있습니다. 이미지를
[05:28]
업로드하고 약간의 애니메이션을 적용해 달라고
[05:32]
요청하면 잠시 후에
[05:34]
영상을 받을 수 있습니다. 페이지 로딩 속도를
[05:38]
위해 이것을 webm 형식으로 변환하는 것을
[05:41]
추천하지만, 지금은 그대로
[05:43]
두겠습니다. 파일을 넣은 후에는
[05:46]
태스크 파일을 만들어 보세요.
[05:50]
이 태스크 파일에 우리가 원하는 작업을
[05:53]
구체적인 방식으로 작성할 겁니다. 첨부된
[05:57]
이미지를 리디자인해 달라고 요청할 것인데,
[06:00]
이 파일을 읽고 작업하라고 할 때
[06:04]
첨부할 것입니다. 에셋 파일의 이름도
[06:07]
알려줘야 합니다. 이렇게
[06:09]
작성하면 됩니다. 또한 shad CNN을 초기화하고
[06:12]
필요한 곳에 사용하도록 요청해야 합니다.
[06:15]
약간의 변경은 허용하되, 대체로
[06:19]
유사하게 유지해야 합니다. 이제 이것으로
[06:21]
PRD를 만들고 태스크마스터를 사용하면
[06:24]
더 좋은 결과를 얻을 수도 있습니다.
[06:26]
하지만 저는 간단하게 유지하고
[06:29]
코더에게 이것을 구현해 달라고
[06:32]
요청할 것입니다. 저는 이 작업에
[06:35]
킬로 코드를 사용할 예정입니다. 한동안
[06:38]
사용해 왔는데, 기본적으로 클라인과
[06:40]
루코드의 수퍼셋입니다.
[06:43]
잠시 동안 사용해 왔는데, 이것은
[06:46]
기본적으로 클라인과 루코드의
[06:48]
킬로 코드는 클라인과 루코드의
[06:51]
세심하게 선별된 최고의 기능들을
[06:53]
둘 다 하나로 통합한
[06:56]
슈퍼셋이라고 할 수 있습니다. 오픈 소스이면서
[07:00]
모델 사용을 위한 20달러 무료 크레딧도 제공합니다.
[07:03]
자체 제공 업체가 있거나
[07:05]
직접 API 키를 설정할 수도 있습니다.
[07:08]
자체 제공 업체는 20달러의 무료 크레딧을 주며
[07:12]
여기에는 소넷이나 GPT 4.1 같은
[07:15]
모델들이 포함됩니다. 루코드나 클라인도
[07:19]
사용할 수 있지만, 이것도 한번 시도해보세요.
[07:21]
무료 크레딧이 있고 기본적으로 루코드와 비슷하니까요.
[07:24]
어쨌든, 이걸 실행하도록 요청하면
[07:26]
구현을 시작하는 것을 볼 수 있습니다. 잠시 기다리면
[07:30]
완료됩니다.
[07:32]
이걸 실행하면 정말 멋진 결과가 나옵니다.
[07:35]
랜딩 페이지가 거의 복제되었고
[07:38]
더 세밀하게 개선하도록 요청할 수도 있습니다.
[07:41]
하지만 한 번의 시도로 이 정도면 정말 멋집니다.
[07:43]
이 전체 워크플로우가 정말 마음에 들고
[07:46]
이 모든 것은 특별한 기술 없이도 쉽게 달성할 수 있습니다.
[07:49]
피그마는 드래그 앤 드롭 방식이고, AI 코더는
[07:52]
요즘 거의 모든 사람들이 사용하고 있잖아요.
[07:55]
러버블이나 V0, 볼트 같은 것을 사용해서
[07:57]
디자인을 복제하고 단일 구독으로 비용을 절약할 수도 있는데
[08:01]
이 방식으로도 잘 작동합니다.
[08:04]
어떻게 하고 싶은지에 따라 다릅니다.
[08:07]
대부분의 사람들은 디자인 없이 시작해서
[08:10]
원하는 결과를 얻기 위해 토큰에 많은 비용을 지출한다고 생각합니다.
[08:14]
반면에 이런 방식을 사용하면
[08:16]
원하는 것을 얻을 수 있고 잘 작동합니다.
[08:18]
저는 항상 목업을 만들어서
[08:21]
원하는 것을 정의하는 것을 추천합니다.
[08:24]
그러면 항상 최상의 결과를 얻을 수 있습니다.
[08:27]
이 방법은 정말 멋지다고 생각하고
[08:29]
여러분도 꼭 시도해보고 적절히 활용해보세요.
[08:32]
AI로 좋은 디자인을 만드는 방법을
[08:35]
보여드리고 싶었고, 이것이 도움이 되길 바랍니다.
[08:37]
전반적으로 정말 멋진 방법입니다.
[08:40]
목업을 통해 원하는 것을 정의하는 것이
[08:43]
항상 최상의 옵션을 얻는 방법이라고 생각합니다.
[08:46]
이 방법은 정말 멋지고
[08:49]
꼭 시도해보고
[08:51]
적절히 활용해보세요.
[08:53]
AI로 좋은 디자인을 만드는 방법을
[08:55]
보여드리고 싶었고, 이것이
[08:57]
도움이 되길 바랍니다.
[09:00]
전반적으로 정말 멋진 방법입니다.
[09:04]
아무튼, 아래에 여러분의 생각을 공유하고
[09:06]
채널을 구독해주세요. 슈퍼 땡스 옵션으로
[09:08]
기부하거나 채널에 가입해서
[09:10]
특전을 받을 수도 있습니다.
[09:12]
다음 영상에서 만나요. 안녕!
[09:15]
[음악]
