00:00:00AI 디자인 툴은 빠르게 발전하고 있으며,
00:00:02많은 툴들이 워크플로우를 혁신하겠다고 약속하지만,
00:00:04실제로 그 약속을 지키는 것은 소수에 불과합니다.
00:00:06저는 정말 유용한 것과 그저 소음에 불과한 것을 구분하기 위해 여러 툴을 테스트하는 데 상당한 시간을 투자했습니다.
00:00:12이번 영상에서는 제 디자인 프로세스에 실질적인 영향을 준 툴들을 공유하겠습니다.
00:00:16이 툴들은 기획과 에셋 생성부터 애니메이션과 디자인 변환까지 다양한 범위를 다룹니다.
00:00:20일부는 무료이고, 일부는 유료이며, 몇몇은 동등하게 잘 작동하는 훌륭한 무료 대안이 있습니다.
00:00:25먼저 여러분의 복잡한 아이디어를 체계적인 기술 청사진으로 변환할 수 있는 정말 강력하고 필수적인 기획 툴부터 시작하겠습니다.
00:00:31빌더 메소드에서 만든 Design OS라는 제품입니다.
00:00:34이것은 말 그대로 여러분의 프로세스에서 빠져 있던 퍼즐 조각입니다.
00:00:37GitHub의 오픈 소스 저장소에서 접근할 수 있으며, 거기서 다운로드하여 사용할 수 있습니다.
00:00:42Design OS는 소프트웨어 개발 워크플로우를 모방하도록 특별히 설계되었습니다.
00:00:46여러분은 이해관계자 역할을 하고,
00:00:48Design OS는 제품 기획,
00:00:49디자인 시스템 및 요구사항 명세를 처리합니다.
00:00:51마지막으로 소프트웨어 디자인 계획을 확인한 후 내보낼 수 있습니다.
00:00:55이 툴은 기술적 배경이 있는 빌더와 비기술적 빌더 모두에게 적합합니다.
00:00:58Claude Code, Cursor, Copilot과 같은 모든 인기 있는 AI 툴과 호환됩니다..
00:01:05설치는 간단합니다.
00:01:06git clone 명령어를 복사해서 프로젝트 폴더에 붙여넣고 기본 이름을 실제 프로젝트 이름으로 변경하면 됩니다.
00:01:12설치가 완료되면 프로젝트는 일련의 특수 명령어와 디자인 스킬에 접근할 수 있게 됩니다.
00:01:17localhost 3000으로 이동하면 모든 단계가 하나씩 나열되어 있어 어떤 명령어를 먼저 따라야 할지 혼란스럽지 않습니다..
00:01:24프로젝트 아이디어의 모든 세부 사항을 파악하기 위해 일련의 질문을 던집니다.
00:01:29진행하면서 계획을 다듬고,
00:01:30개요를 제공하고,
00:01:31중간에 승인을 요청하며,
00:01:33AI 모델에 최적화된 방식으로 모든 것을 문서화합니다.
00:01:36시간이 걸리는 프로세스이므로 웹사이트에 대한 최상의 결과를 얻기 위해 인내심을 갖고 끊임없는 질문을 견뎌야 합니다.
00:01:43모든 섹션을 완료하면 계획을 내보낼 준비가 됩니다.
00:01:46내보낸 계획에는 사용 방법에 대한 지침과 함께 데이터 모델, 샘플 데이터 및 문서가 포함되어 있습니다.
00:01:52TypeScript 타입, CSS 토큰 및 필요한 모든 디자인 파일도 포함됩니다.
00:01:56점진적 방법을 선택하든 원샷 프롬프트를 선택하든 앱을 빌드하기 위해 내보낸 파일을 사용하는 방법에 대한 지침을 여기서 찾을 수 있습니다.
00:02:05전반적으로 이것은 디자인의 기획 부분을 훨씬 쉽고 부드럽게 만들어 준 정말 흥미로운 툴입니다.
00:02:10고품질 에셋은 훌륭한 웹사이트의 근간이며,
00:02:12전문적인 제품 비주얼을 빠르게 생성할 방법을 찾고 있다면 VSCOM이 바로 알아야 할 툴입니다..
00:02:19프롬프트를 사용하여 멋진 시각적 이미지를 생성하고,
00:02:22스케치를 사용하여 렌더링을 만들고,
00:02:24심지어 모델링까지 해주는 인상적인 능력을 갖추고 있습니다.
00:02:27놀라운 툴들로 가득 차 있으며 애니메이션도 제공할 수 있습니다.
00:02:30사용하려면 스케치와 설명을 제공하기만 하면 AI가 입력 내용을 기반으로 비주얼을 생성합니다.
00:02:35개별 요소를 편집하고,
00:02:36AI를 사용하여 수정하고,
00:02:37히어로 섹션 비주얼을 위해 4k 품질로 결과물을 다운로드하는 것을 포함하여 많은 작업을 할 수 있습니다..
00:02:43VSCOM은 유료 툴이지만 무료로 시작할 수 있습니다.
00:02:46무료 티어는 관대하며 유용한 기능을 제공하고, 월간 플랜은 더 많은 기능을 제공합니다.
00:02:51다양한 영역에서 제품을 자주 모델링해야 한다면 훌륭한 선택입니다.
00:02:54하지만 유료 툴을 사용하고 싶지 않다면 Mixed Board라는 과소평가된 구글 프로젝트를 사용할 수 있습니다.
00:03:00아직 실험 단계이므로 현재는 무료입니다.
00:03:03이 툴을 사용하면 무드보드를 만들고 나노 바나나의 인상적인 기능을 활용하여 웹사이트용 이미지를 생성할 수 있습니다.
00:03:09프롬프트를 사용하여 이미지를 수정할 수 있으며 원하는 대로 정확하게 새로운 이미지를 생성합니다.
00:03:14샘플 이미지를 업로드할 수도 있으며 그 기능을 사용하여 일치하는 비주얼을 생성합니다.
00:03:19원하는 만큼 많은 생성을 만들 수 있으며 나노 바나나를 사용하여 제품 컨셉을 시각화하기 위한 전체 프레젠테이션을 구축할 수도 있습니다.
00:03:26이미지가 마음에 들지 않으면 재생성하거나,
00:03:28모델에게 유사한 이미지를 만들도록 요청하거나,
00:03:30이미지를 복제하거나,
00:03:32심지어 주석을 달아 모델에게 더 많은 방향을 제시할 수 있습니다.
00:03:35그러면 사양에 따라 모든 세부 사항을 생성합니다.
00:03:38이것은 정말 놀랍습니다.
00:03:39이러한 에셋을 가져와서 웹사이트에 직접 사용하기 위해 다운로드할 수 있기 때문입니다.
00:03:44자신의 웹사이트를 디자인하기 전에 경쟁사 웹사이트가 어떻게 구성되어 있는지 분석하는 것이 항상 좋습니다.
00:03:49이를 위해 저는 GoFullPage라는 확장 프로그램을 사용했는데,
00:03:53이것은 모든 웹사이트의 전체 페이지 스크린샷을 캡처했습니다.
00:03:56이를 통해 참고용으로 완전한 웹사이트 스크린샷을 다운로드할 수 있었습니다.
00:04:00그런 다음 UI 요소를 추출하기 위해 설계된 특수 프롬프트와 함께 이러한 스크린샷을 Claude에게 제공했습니다.
00:04:06이 프롬프트는 Claude에게 이미지에서 모든 제약 조건,
00:04:09객체 배치 및 UI 테마 세부 사항을 식별하도록 지시했습니다.
00:04:13이 특수 프롬프트와 함께 Claude에게 스크린샷을 제공했을 때,
00:04:16모든 UI 스타일 세부 사항을 포괄적으로 추출했습니다.
00:04:19추출된 스타일 가이드라인을 얻은 후,
00:04:21사용하기 위해 다운로드한 에셋이 포함된 프로젝트 폴더의 Claude 코드에 제공했습니다.
00:04:26그러면 Claude는 경쟁사 분석에서 추출한 모든 스타일과 디자인 가이드라인을 적용하여 전체 웹사이트를 생성했습니다..
00:04:35모션은 사용자 유지의 핵심이며,
00:04:37이를 위해 AI 기반 Figma 플러그인을 사용하여 로고부터 전체 인터페이스까지 단 몇 번의 클릭으로 애니메이션을 만들 수 있습니다.
00:04:44Magic Animator는 AI를 사용하여 모든 디자인을 애니메이션화하는 정말 멋지고 강력한 웹사이트입니다.
00:04:49로고부터 소셜 미디어 게시물,
00:04:51사용자 인터페이스까지 모든 것을 애니메이션화할 수 있으며,
00:04:54애플리케이션에서 마이크로 인터랙션을 생성하여 사용자 유지와 관심을 유지하는 데 도움을 줍니다.
00:04:59Magic Animator는 Figma 플러그인으로 제공되어 UI 디자인에 애니메이션을 쉽게 추가할 수 있습니다.
00:05:05플러그인을 실행하면 UI의 레이어를 자동으로 감지하고 선택할 수 있는 네 가지 애니메이션을 생성합니다.
00:05:11그런 다음 선택한 애니메이션을 애니메이션 추가를 위해 특화된 JSON 형식인 Lottie 파일로 내보낼 수 있습니다.
00:05:17Magic Animator는 유료 툴이지만 유사한 대안을 찾고 있다면 Figma 플러그인으로도 제공되는 Lottie files를 사용할 수 있습니다.
00:05:25웹사이트 디자인에 애니메이션을 구현하고 다양한 유형의 Lottie JSON 파일을 포함한 여러 형식으로 내보낼 수 있습니다.
00:05:31애니메이션 파일을 Claude 코드에 제공하면 UI에 애니메이션을 적용해 줍니다.
00:05:36처음부터 Figma에서 디자인하고 싶지 않다면 HTML to design 플러그인을 사용하여 HTML의 모든 웹사이트를 완전히 편집 가능한 Figma 디자인으로 변환할 수 있습니다.
00:05:45무료 및 유료 플랜 모두에서 사용할 수 있으며,
00:05:48무료 플랜에서는 30일마다 최대 10번의 가져오기를 할 수 있습니다.
00:05:51멋진 점은 MCP로 사용할 수 있고 Figma 디자인 내에서 직접 AI 에이전트의 디자인 기능에 접근할 수 있다는 것입니다.
00:05:58이를 위해 Claude나 Cursor와 같은 AI 툴에 연결하고 설정 가이드에 따라 MCP를 구성합니다..
00:06:05디자인을 생성하고 싶을 때마다 AI 에이전트에 프롬프트를 입력하고 Figma로 전송 또는 HTML로 전송이라는 키워드를 사용하면 됩니다.
00:06:12그러면 디자인이 포함된 JSON이 생성되고 승인 후 Figma로 전송됩니다.
00:06:15그런 다음 Figma에서 디자인을 확인하고 좋아하는 AI 도구와 협업하여 마음에 들지 않는 부분을 즉석에서 편집하며 멋진 디자인을 만들 수 있습니다.
00:06:22이제 Automata에 대해 이야기해 보겠습니다.
00:06:25수백만 명의 사람들에게 AI로 개발하는 방법을 가르친 후,
00:06:28우리는 이러한 워크플로우를 직접 구현하기 시작했습니다.
00:06:30그 결과 이전보다 더 빠르게 더 나은 제품을 만들 수 있다는 것을 발견했습니다.
00:06:34우리는 앱이든 웹사이트든 여러분의 아이디어를 현실로 만드는 것을 도와드립니다.
00:06:38어쩌면 여러분은 우리 영상을 보면서 '좋은 아이디어가 있는데 이걸 구현할 기술 팀이 없어'라고 생각했을 수도 있습니다.
00:06:43바로 그 지점에서 우리가 필요합니다.
00:06:45우리를 여러분의 기술 동반자로 생각하세요.
00:06:47우리는 수백만 명에게 가르쳐온 동일한 워크플로우를 여러분의 프로젝트에 직접 적용하여 개발 팀을 고용하거나 관리하는 번거로움 없이 콘셉트를 실제 작동하는 솔루션으로 전환합니다..
00:06:57여러분의 아이디어를 현실로 가속화할 준비가 되셨다면 hello@automata.dev로 연락주세요.
00:07:02이것으로 이번 영상을 마무리하겠습니다.
00:07:04채널을 응원하고 이런 영상을 계속 만들 수 있도록 도와주고 싶으시다면 아래의 Super Thanks 버튼을 이용해 주세요.
00:07:10언제나처럼 시청해 주셔서 감사하고 다음 영상에서 뵙겠습니다..