00:00:00AI를 활용한 더 나은 디자인을 할 수 있는 새로운 AI 도구들을 소개하는 디자인 시리즈의 또 다른 에피소드에 오신 것을 환영합니다.
00:00:07Opus 4.5,
00:00:08Gemini 3 Pro 같은 모델들 덕분에 한 번의 프롬프트로 디자인하는 것이 훨씬 발전했습니다.
00:00:14하지만 정말 멋진 디자인을 만드는 데 도움이 되는 다양한 도구들과 워크플로우가 있으며,
00:00:19이 영상에서 그것들을 보여드릴 것입니다.
00:00:21ShadCN은 React와 Next.js 프로젝트와 완벽하게 통합되는 아름답고 완전히 커스터마이징 가능하며 접근성 있는 UI 컴포넌트를 제공하는 라이브러리입니다.
00:00:30새로운 기능을 통해 프로젝트에 임포트할 프리셋을 만들 수 있습니다.
00:00:34새 프로젝트를 클릭하면 페이지 한쪽에는 샘플 컴포넌트가,
00:00:37다른 쪽에는 프리셋이 표시되며,
00:00:39여기서 원하는 컴포넌트 스타일을 찾을 때까지 실험해볼 수 있습니다.
00:00:43임포트하고 싶은 스타일을 정했다면 프로젝트 생성을 클릭하고,
00:00:46프로젝트가 사용하는 프레임워크를 선택한 후 설치 명령어를 복사해서 터미널에 붙여넣으면 프리셋이 적용된 새 프로젝트가 바로 설치됩니다.
00:00:54코딩 에이전트에게 보내기 전에 미리 웹사이트 디자인을 준비해두는 것이 좋습니다.
00:00:58그래야 원하는 대로 안 나온다고 해서 계속 수정을 요청할 필요가 없거든요.
00:01:02이를 위해서는 Google Stitch가 최고의 도구입니다.
00:01:06이제 Gemini 3 Pro 사고 모드와 Nano Banana를 지원해서 생성된 이미지로 디자인을 향상시킬 수 있기 때문입니다.
00:01:13디자인에 들어가기 전에 먼저 애플리케이션의 색상 테마를 정하는 것이 가장 중요한 단계입니다.
00:01:18이를 위해서는 Coolers가 최고의 선택입니다.
00:01:21이것은 색상 팔레트 생성 도구로, 여러 색상을 나란히 놓고 조합을 분석해볼 수 있습니다..
00:01:28마음에 드는 색상을 찾을 때까지 계속 조정한 후 자신에게 맞는 형식으로 색상 팔레트를 내보내세요.
00:01:34약 4분 후 Stitch로 만든 UI는 매우 미니멀했으며 메인 색상과 강조 색상 사이의 균형이 명확했습니다.
00:01:40Google Stitch의 새로운 기능 중 하나는 디자인의 모든 화면을 선택해서 테스트 목적으로 프로토타입을 생성할 수 있다는 것입니다.
00:01:48프로토타입은 웹 앱이든 모바일 앱이든 프로젝트가 실제로 어떻게 작동하는지 보여주는 데모입니다.
00:01:53네비게이션 흐름을 자동으로 조정하고,
00:01:55클릭 가능한 영역을 찾아내며,
00:01:56디자인에서 바로 완전히 작동하는 프로토타입을 만들어줍니다.
00:02:00AI가 혼자서도 꽤 좋은 디자인을 만들 수 있지만, 좋은 영감의 출처를 참고하는 것도 나쁘지 않습니다.
00:02:06이를 위해 히어로 섹션,
00:02:07네비게이션 바,
00:02:08푸터,
00:02:08심지어 커스텀 404 페이지까지 포함된 여러 갤러리가 있으며,
00:02:12여기서 창의적이고 매력적인 영감의 원천을 찾을 수 있습니다.
00:02:15이 모든 리소스의 링크는 설명에서 확인할 수 있으며,
00:02:18저는 Superhero에서 히어로 섹션 디자인 영감을 얻고,
00:02:21그 페이지의 스크린샷을 Stitch에 제공해서 우리 웹사이트에 맞게 디자인을 복제했습니다..
00:02:28또 하나의 중요한 새 기능이 있습니다.
00:02:30Google Stitch는 디자인을 내보내는 방식을 개선했습니다.
00:02:34AI Studio,
00:02:35코딩 에이전트 Jules로 직접 내보내거나 코드를 클립보드에 복사할 수 있지만,
00:02:39저는 이것을 ZIP 파일로 내보내서 Claude에 임포트했습니다..
00:02:43Claude에서 서브 에이전트를 사용할 때,
00:02:45다른 작업을 처리하느라 많은 시간을 낭비했고 상당한 지연이 발생했습니다.
00:02:49Claude는 최근에 서브 에이전트가 백그라운드에서 실행될 수 있는 기능을 추가해서 이 문제를 해결했습니다.
00:02:54저는 브라우저 테스트를 위해 Puppeteer MCP를 설정했으며,
00:02:57이를 통해 Claude가 브라우저 접근으로 UI를 테스트할 수 있습니다.
00:03:01브라우저 테스트에는 시간이 오래 걸리므로,
00:03:03이 작업을 백그라운드에서 실행하면서 동시에 에이전트에게 다른 작업을 할당할 수 있습니다.
00:03:08이렇게 하면 여러 에이전트가 동시에 다양한 작업을 처리할 수 있어 시간을 훨씬 효율적으로 사용할 수 있습니다.
00:03:13다만 이 에이전트들은 토큰을 사용하므로 토큰 사용량과 비용을 항상 모니터링해야 합니다.
00:03:18원하는 만큼 많은 에이전트를 동시에 실행하고 작업을 할당할 수 있습니다.
00:03:21각 에이전트는 작업을 완료하면 결과를 반환합니다.
00:03:24백그라운드 에이전트에 대해서는 별도 영상에서 더 자세히 다루겠으니 계속 지켜봐 주세요.
00:03:28Claude는 아무리 여러 번 요청해도 작은 UI 문제를 수정하기 어려워합니다.
00:03:32이런 문제를 해결하기 위해 나온 정말 멋진 도구가 Drawbridge입니다.
00:03:36저희 채널에서 이미 소개한 적 있는 도구입니다.
00:03:39예전에는 Cursor에서만 작동했지만,
00:03:41이제 Claude 코드 통합과 다른 훌륭한 업데이트들이 추가되었습니다.
00:03:44그들은 자신들의 릴리스 중 하나에서 우리를 감사하기까지 했으며,
00:03:47우리도 이 멋진 프로젝트에 정말 감사하고 있습니다.
00:03:50저희 채널에서 Drawbridge 사용법에 관한 영상을 시청할 수 있지만,
00:03:54이전 영상 이후로 섹션을 더 정확하게 선택할 수 있게 해주는 기능들이 개선되어서 비기술 사용자도 문제를 더 쉽게 설명할 수 있게 되었습니다.
00:04:01또한 지난번에 겪었던 스크린샷 문제도 해결했습니다..
00:04:06추가로 Claude 코드용 슬래시 명령어를 자동으로 설정해서 이제 수동으로 할 필요가 없어졌습니다.
00:04:11이런 모든 개선 사항들이 당신의 워크플로우를 훨씬 더 효율적이고 인상적으로 만들어줍니다.
00:04:15수백만 명에게 AI로 제품을 만드는 방법을 가르친 후,
00:04:18저희도 이런 워크플로우를 직접 구현해보기 시작했습니다.
00:04:21그리고 예전보다 훨씬 빠르게 더 나은 제품을 만들 수 있다는 걸 알게 되었습니다.
00:04:25저희는 앱이든 웹사이트든 당신의 아이디어를 현실로 만드는 것을 도와드립니다.
00:04:29혹시 "좋은 아이디어는 있는데 개발팀이 없다"고 생각하며 저희 영상을 봐본 적 있나요?
00:04:33그것이 바로 저희가 나서는 순간입니다.
00:04:35저희를 당신의 기술 파트너로 생각하세요.
00:04:37저희는 수백만 명에게 가르친 같은 워크플로우를 당신의 프로젝트에 직접 적용해서,
00:04:41개념을 실제로 작동하는 솔루션으로 바꿔드립니다.
00:04:43개발팀을 고용하고 관리하는 번거로움도 없습니다.
00:04:46당신의 아이디어를 현실로 가속화할 준비가 되셨나요?
00:04:48hello@autometer.dev로 연락주세요..
00:04:52이것으로 이 영상을 마치겠습니다.
00:04:54채널을 지원하고 이런 영상들을 계속 만드는 데 도움을 주고 싶다면 아래의 슈퍼 감사 버튼을 사용해주세요.
00:05:00항상 시청해주셔서 감사합니다.
00:05:02다음 영상에서 뵙겠습니다..