이 클로드 스킬을 사용하고 더 이상 AI 저품질 결과물을 받지 마세요
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00클로드의 프론트엔드 디자인 문제를 해결해 준다는
00:00:03수많은 기술과 플러그인이 존재합니다.
00:00:05하지만 그중에서 말 그대로 수백 가지를 직접 테스트해 본 사람으로서,
00:00:08단연 돋보이는 툴이 하나 있고 최근 엄청난 업그레이드를 거쳤습니다.
00:00:12바로 '임펙커블 4.0(Impeccable 4.0)'에 대한 이야기인데요. 이 툴은 클로드 코드에
00:00:17정말 보기 좋은 프론트엔드 및 웹 디자인을 만들어내는 능력을 부여하며,
00:00:21작업 과정에서 사용자가 직접 제어할 수 있도록 해줍니다.
00:00:24따라서 이번 영상에서는 이 툴이 무엇이고, 어떻게 작동하며,
00:00:27어떻게 하면 이 툴을 최대한 활용할 수 있는지
00:00:30마음에 쏙 드는 프론트엔드 디자인을 구축해 보겠습니다.
00:00:33자, 지난 디자인 관련 영상에서 임펙커블을 살짝 다룬 적이 있지만,
00:00:36그것은 본질적으로 웹 디자인 과정에 '감각(taste)'을 불어넣어
00:00:41일반적인 AI 슬롭(slop) 출력물에서 벗어나는 큰 틀에서의 접근이었습니다.
00:00:44만약 그 영상을 아직 보지 않으셨다면 꼭 시청하시는 것을 추천합니다. 디자인 과정에서
00:00:48자신의 취향을 불어넣고 AI 슬롭을 피하기 위해 이해해야 하는 기본적인 내용들을
00:00:53다시 반복하지 않을 것이기 때문입니다.
00:00:57대신 이번에는 임펙커블이라는 특정 툴을 심층적으로 파헤쳐 보겠습니다.
00:01:01약간의 겹치는 부분은 있겠지만, 배경지식을 갖고 보는 것이 도움이 될 것입니다.
00:01:05자, 툴 자체에 대한 본격적인 심층 분석에 앞서 몇 가지 변경 사항부터 이야기해 보죠.
00:01:09몇 달 전에 이 툴을 사용해 보셨던 분들이라면 아마 이렇게 생각하실 겁니다.
00:01:12“벌써 4.0인데, 도대체 뭐가 바뀐 거지?”라고요.
00:01:15자, 지난 몇 달간 가장 큰 변화는 바로 '라이브 모드'입니다.
00:01:17이 기능은 2.0 버전 대의 알파 단계에 살짝 포함되어 있던 것인데,
00:01:21이제 훨씬 더 구체화되었습니다.
00:01:23훨씬 부드러워졌고,
00:01:24더욱 빠릿해져서 터미널에서 벗어나
00:01:28시각적으로 반복 작업을 할 수 있게 해주며, 디자인 과정을 훨씬 더 단순하게 만들어 줍니다.
00:01:32또 다른 큰 변화는 '월드(Worlds)'입니다.
00:01:34그들은 이 스킬에 평점이 높은 177개의 월드를 추가했다고 말합니다.
00:01:39도대체 이게 무슨 뜻일까요?
00:01:40글쎄요, 이는 웹사이트를 처음부터 만들 때 사용할 수 있는 177가지의 서로 다른 디자인 템플릿과
00:01:46다양한 미적 요소를 기본적으로 생성해 두었다는 뜻입니다.
00:01:50지난 영상에서 수동으로 했던 것처럼 말이죠.
00:01:54임펙커블은 첫 번째 디자인 아이디어를 보여준 다음,
00:01:59완전히 다른 몇 가지 옵션을 추가로 제공합니다.
00:02:03매번 쓰레기 같은 결과물이 나오지 않도록
00:02:05어떻게 이를 만들었는지에 대한 전체 아티클도 존재합니다.
00:02:0915분짜리 토론이 될 수 있으므로 여기서는 깊게 다루지 않겠습니다.
00:02:12하지만 이것이 우리에게 주는 것은 시각적으로 확인할 수 있는 다양한 옵션들입니다.
00:02:17여기에 힉스필드(Higgsfield) MCP 같은 것을 연동하면,
00:02:20우리의 특정 웹사이트에 적용했을 때 어떤 모습일지 실제로 확인할 수 있습니다.
00:02:23그건 나중에 보시게 될 겁니다.
00:02:24그냥 평범한 일반 템플릿처럼 보이지 않죠.
00:02:25다양한 시각적 테마 속에서 내 사이트가 어떻게 보일지 미리 확인할 수 있습니다.
00:02:31라이브 모드와 월드라는 이 두 가지가 지난 몇 달간의 가장 큰 차이점입니다.
00:02:35결코 사소한 기능이 아닙니다.
00:02:36모두 반복 작업과 디자인 과정에서의 선택권을 제공하는 데
00:02:39초점을 맞추고 있기 때문입니다.
00:02:42자, 이제 임펙커블 자체에 대해 간단히 짚어보겠습니다.
00:02:45이 앱을 한 번도 써보지 않은 분들도 계실 테니까요.
00:02:47도대체 우리가 뭘 이야기하고 있는 걸까요?
00:02:48임펙커블은 무료 오픈 소스 스킬로, 깃허브 스타가 약 5만 개에 달합니다.
00:02:53깃허브 팀 자체도 이 툴을 너무 좋아한 나머지 자신들의 AI 툴에 직접 통합했습니다.
00:02:57이 스킬의 핵심 철학은 AI 슬롭 패턴을 찾아내겠다는 것입니다.
00:03:02그들은 보라색 그라데이션, 파란색 그라데이션 같은 약 40가지의 요소를
00:03:05AI 슬롭으로 간주합니다.
00:03:07그리고 이를 본질적으로 더 나은 디자인으로 대체합니다.
00:03:12임펙커블 자체는 하나의 스킬이지만, 디자인의 다양한 영역을 다루는 23개의 서로 다른 명령어를 포함하고 있습니다.
00:03:18여기에는 모양 잡기, 다듬기(polish), 차분하게 만들기, 애니메이션 추가, 온보딩, 색상 지정, 타이포셋 등이 포함됩니다.
00:03:25각각의 기능이 수행하는 역할은 조금씩 다르지만, 핵심은 이렇습니다.
00:03:28오른쪽 화면에서 보실 수 있듯이,
00:03:30클로드는 다소 진부하고 지루한 결과물을 줍니다.
00:03:32우리는 보기만 해도 AI 산출물임을 알 수 있죠.
00:03:34반면 임펙커블은 더 깔끔하고, 진부하지 않으며, 사용자 친화적인 결과물을 만들어 줍니다.
00:03:3923가지 명령어에 대해 말하자면, impeccable.style 웹사이트에 방문하시면
00:03:44모든 명령어가 작동하는 모습을 직접 보실 수 있습니다.
00:03:46여기 클로드 코드 버전과 임펙커블 버전이 있죠.
00:03:50각각의 기능이 실제로 무엇을 하는지 시각적으로 파악할 수 있도록 하나씩 살펴볼 수 있습니다.
00:03:54웹사이트의 문서 내용도 꽤 심도 깊은데, AI 슬롭에 대해 앞서 제가 조금 잘못 말씀드렸더군요.
00:03:58실제로는 AI의 기본값과 제작 결함을 드러내는 64가지의 서로 다른 패턴이 존재합니다.
00:04:04이것이 수년에 걸쳐 어떻게 변해왔는지 확인할 수 있습니다.
00:04:07우리 모두 초기 ChatGPT 시절을 기억하잖아요?
00:04:10그리고 지금의 AI 슬롭은 대략 이런 모습을 띠고 있습니다.
00:04:14여전히 우리가 지양해야 할 부분들이죠.
00:04:16이것이 바로 임펙커블의 핵심입니다.
00:04:18슬롭을 식별한 뒤, 반복 작업을 가능하게 하고 라이브 툴을 통해 시각적 수정까지 지원하는 더 나은 옵션을 제공하죠.
00:04:23자, 이 툴을 실제로 사용하는 방법은 설치부터가 꽤 간단합니다.
00:04:26`npx impeccable install`을 입력하기만 하면 됩니다.
00:04:29만약 그게 너무 헷갈린다면 임펙커블 깃허브 페이지에 접속하셔도 됩니다.
00:04:33이 URL을 복사해서 클로드 코드에 붙여넣고 “임펙커블을 설치해 줄래?”라고 말하면 됩니다.
00:04:39자, 임펙커블을 설치한 후 앞서 말씀드린 대로 설치해야 할 또 다른 하나는 힉스필드 MCP입니다.
00:04:44임펙커블은 월드 기능을 빌드하거나 웹사이트를 위한 다양한 미적 스타일을 보여줄 때 이 힉스필드 MCP를 호출하게 됩니다.
00:04:51참고로 힉스필드 MCP는 세상의 모든 AI 이미지 및 비디오 생성기를 모아둔 어그리에이터인데요,
00:04:57Higgsfield.ai에 접속해 상단의 MCP 및 CLI 메뉴로 이동한 뒤,
00:05:03여기 클로드 코드로 와서 이 프롬프트를 복사해 붙여넣으면 인증 과정을 안내해 줍니다.
00:05:09그 후 우리가 해야 할 첫 번째 단계는 단순히 `impeccable init`을 실행하는 것입니다.
00:05:15이 경우 저는 새 폴더를 열고 이름을 `impecc-test`라고 지었습니다.
00:05:19원하는 폴더나 디렉토리를 생성하면 되지만, 슬래시(``)를 붙여 `impeccable init`을 입력하세요.
00:05:23실행하고 나면 무엇을 만들려고 하는지 묻는 질문들이 나타납니다.
00:05:27저는 실제 랜딩 페이지를 만드는 중이라고 답변하겠습니다.
00:05:31그러면 이 프로젝트에 어떤 스택을 사용할지 물어봅니다.
00:05:33잘 모르겠다면 그냥 알아서 고르게 두면 되는데, 오늘은 그렇게 하겠습니다.
00:05:36그런 다음 데이터에 대해 묻습니다. 본질적으로 이 웹사이트에 어떤 내용이 들어가길 원하나요?
00:05:40제공할 스크린샷이 있거나 실제 수치가 있다면 좋습니다.
00:05:43다른 게 없다면 그냥 전부 지어내라고 지시해도 됩니다.
00:05:47그래서 저는 일단 가짜 데이터를 생성해 달라고 했고, 어떤 결과가 나오는지 본 뒤 나중에 수정하면 됩니다.
00:05:52이 질문들에 답변하고 나면 임펙커블은 힉스필드 MCP를 호출하여 다양한 월드,
00:05:58즉 우리 웹페이지를 위한 다양한 디자인 미학을 생성합니다.
00:06:02그리고 어떤 것을 선택할 것인지 묻죠.
00:06:04로컬호스트에 화면을 띄워주기 때문에 실제로 눈으로 확인할 수 있습니다.
00:06:07이것이 그가 제시한 첫 번째 결과물이었습니다.
00:06:09이것은 기본적으로 '패스파인더(Pathfinder)'의 히어로 섹션이 될 것입니다.
00:06:13그런 다음 다른 모든 옵션들을 보게 됩니다.
00:06:15다시 말하지만, 이는 지난 영상에서 했던 작업과 매우 유사합니다.
00:06:17실제로 확인할 수 있도록 다양한 옵션을 가져오라고 한 것처럼 말이죠.
00:06:20이 옵션도 있고, 저 옵션도 있습니다.
00:06:23이 옵션들이 마음에 들지 않으면 우측 하단에서 다시 돌릴 수 있습니다.
00:06:26또한 선택적 방향성(optional steer)을 부여할 수도 있습니다.
00:06:31“3번이 마음에 드는데, 그걸로 변형을 더 만들어줘” 같은 식이죠.
00:06:33이 경우 저는 처음 나온 결과물이 마음에 듭니다.
00:06:36그래서 그냥 이걸로 빌드하라고 말할 겁니다.
00:06:38그냥 이걸 클릭하면 터미널로 전송됩니다.
00:06:44그러면 우리가 선택한 스타일로 랜딩 페이지 프로토타입을 구축하기 시작합니다.
00:06:48빌드 과정의 일환으로, 해당 특정 스타일의 여러 가지 변형을 보여줍니다.
00:06:50시작할 때는 여러 가지 스타일이 있었고, 하나의 스타일을 선택하면 이제 그 스타일의 변형들이 주어집니다.
00:06:53콘스텔레이션(constellation) 옵션을 제공하고,
00:06:58도시에 분할(dossier split) 및 '이유 찾기(find the why)' 같은 것을 제공합니다.
00:07:03이전과 마찬가지로 방향성을 주고 싶다면 하단의 프롬프트 창을 사용할 수 있습니다.
00:07:06이번에는 3번으로 선택하고 이렇게 빌드하라고 하겠습니다.
00:07:09터미널을 보면 전달된 것을 볼 수 있습니다.
00:07:12“타임라인 승인됨”이라고 나옵니다.
00:07:17서피스 브리프에 승인 기록 후 크래프트 플로어를 로드하고 빌드 중입니다.
00:07:23제가 임펙커블을 좋아하는 이유는 의사결정을 내리는 방식이 매우 시각적이라는 점입니다.
00:07:30그리고 매 단계마다 방향을 수정할 수 있는 옵션이 있습니다.
00:07:31지나치게 규격화된(prescriptive) 스킬이 아닙니다.
00:07:33무작위 깃허브 저장소의 무작위 스킬 같은 것들을 보면 알 수 있죠.
00:07:37만들어지는 웹사이트는 정말 멋져 보이지만, 그게 그 스킬이 만들 수 있는 유일한 종류의 웹사이트입니다.
00:07:41임펙커블 같은 툴은 매우 범용적이어서, 최저 기준(floor)은 조금 낮을 수 있습니다.
00:07:43이런 원트릭 포니(one-trick pony) 식의 스킬들은 항상 꽤 멋진 웹사이트를 만들어주지만 딱 그 종류뿐이죠.
00:07:46반면 임펙커블은 사용자가 개입할 여지가 훨씬 많아서 훨씬 맞춤화된 결과를 만들 수 있습니다.
00:07:51결과적으로 제대로 활용하기만 하면 더 나은 제품을 얻을 수 있다고 생각합니다.
00:07:55자, 임펙커블이 실제로 웹사이트 제작을 마쳤습니다.
00:07:57첫 번째 반복 작업이 끝날 때 웹사이트가 실행하는 것은 '임펙커블 피니시 리뷰어(Impeccable Finish Reviewer)'라는 하위 에이전트입니다.
00:08:02이것은 기본적으로 빌드 과정에서 우리가 실수로
00:08:08소위 말하는 'AI 슬롭 패턴'을 넣지 않았는지 모든 것을 검사합니다.
00:08:14따라서 새로운 컨텍스트 윈도우를 가진 별도의 하위 에이전트를 통해 추가 검토를 수행합니다.
00:08:18우리가 애초에 만들고자 했던 것과 실제로 만들어진 것이 일치하는지 확인하기 위한 두 번째 눈 역할을 하는 셈입니다.
00:08:20자, 이것이 그가 우리를 위해 빌드한 웹사이트입니다.
00:08:26기억하세요, 우리는 임펙커블에 아주 적은 정보만 주었습니다.
00:08:31그냥 패스파인더였으면 좋겠다고 말했을 뿐이죠.
00:08:36참조 이미지도 전혀 주지 않았습니다.
00:08:41CTA(행동 유도 버튼)조차 제대로 주지 않았어요.
00:08:46그저 “이건 가상의 AI 분석 회사야”라고만 했죠.
00:08:47관련 정보를 좀 만들어 달라고 했습니다.
00:08:51그렇게 해서 얻은 결과가 바로 이겁니다.
00:08:52일반 프론트엔드 디자인 스킬을 사용해 같은 프롬프트로 얻었을 결과와 비교해 보면, 결과물이 완전히 다릅니다.
00:08:53무엇보다 흔히 볼 수 있는 그런 진부한 결과물이 아니라는 점이죠.
00:08:55자, 이게 대단한가요?
00:08:58한 번에 우리가 원하는 딱 그 결과가 나왔나요?
00:09:00아마 아닐 겁니다.
00:09:02하지만 AI와 클로드로 창의적인 작업을 할 때면, 이것이 원샷(one-shot)으로 끝날 것이라는 생각에서 벗어나야 합니다.
00:09:09항상 반복적인 과정이기 때문에 '임펙커블 라이브' 기능이 그토록 훌륭한 이유입니다.
00:09:13따라서 임펙커블 라이브 기능을 사용하려면 명령어에 `impeccable/live`를 입력하면 됩니다.
00:09:14그러면 화면에 해당 기능이 실행됩니다.
00:09:16실행하고 나면 웹사이트가 다시 나타나고 하단에 작은 바가 생깁니다.
00:09:17주로 사용하게 될 기능은 바로 아래에 보이는 '요소 선택(pick element)' 기능입니다.
00:09:24삽입(insert) 기능도 있지만, 선택(pick)을 클릭하면 다양한 컴포넌트들을 볼 수 있습니다.
00:09:29가령 이걸 조정하고 싶다면 클릭하면 프롬프트 창이 뜹니다.
00:09:35원하는 내용을 무엇이든 추가할 수 있고 변형을 몇 개나 만들고 싶은지 정할 수 있습니다.
00:09:371개부터 2개, 최대 4개까지 변형을 가질 수 있습니다.
00:09:40마이크를 사용할 수도 있습니다.
00:09:45정확히 무엇을 하고 싶은지 선택할 수도 있습니다.
00:09:49더 대담하게 만들거나, 차분하게 만들거나, 다듬기(polish) 또는 타이포셋 같은 특정 영역을 지정하고 싶다면 그렇게 지정할 수도 있습니다.
00:09:51이것들은 모두 임펙커블 명령어와 관련이 있다는 점을 기억하세요.
00:09:53임펙커블 웹사이트로 돌아가면 이 모든 것을 확인할 수 있습니다.
00:09:57차분하게(quieter), 오버드라이브(overdrive), 성격 부여(characterize) 등등 이런 것들이죠.
00:10:00따라서 “이게 정확히 뭘 요구하는 거지?” 혹은 “이게 뭘 하지?” 싶다면
00:10:02여기서 확인해 보면 됩니다.
00:10:04가령 이걸 더 대담하게 만들고 싶다고 해봅시다.
00:10:12그냥 더 대담하게 만들고 싶은 거죠.
00:10:16프롬프트를 길게 줄 필요도 없고 서로 다른 세 가지 변형을 원합니다.
00:10:19그걸 클릭하고 엔터를 누르면 변형 생성이 시작됩니다.
00:10:25터미널로 돌아가 보면 해당 명령어가 전송된 것을 볼 수 있는데, 현재 세션이 라이브 모드 이벤트를 계속 폴링하고 있기 때문입니다.
00:10:26작업이 진행되는 동안 다른 기능들에 대해서도 이야기해 보죠.
00:10:27AI 슬롭 안티패턴을 감지해 주는 감지(detect) 버튼이 있습니다.
00:10:28처음부터 만들고 있는 중이라면 생성 과정에서 이미 어느 정도 처리되었을 겁니다.
00:10:31이 버튼은 이미 생성한 웹사이트에 임펙커블 라이브를 적용할 때 주로 사용합니다.
00:10:32디자인 파일인 `design.md`가 있습니다.
00:10:35이걸 좀 옆으로 옮겨보겠습니다.
00:10:39이것이 전체 디자인 파일입니다.
00:10:47모든 색상, 컴포넌트, 버튼에 적용할 스타일이 담겨 있죠.
00:10:50구글 스티치(Stitch)나 요즘 클로드 디자인 내부에서 볼 수 있는 것과 매우 유사합니다.
00:10:56원한다면 실제 원본 파일도 확인할 수 있습니다.
00:10:59또한 무언가를 삽입할 수 있는 기능과 페이지를 직접 조율하는 프롬프트 창도 제공됩니다.
00:11:03따라서 특정 컴포넌트를 골라서 방금 보여드린 세 가지 변형을 만드는 방식 대신, 터미널을 띄우고 “X, Y, Z를 좀 다르게 해줘”라고 말하는 것과 거의 정확히 동일합니다.
00:11:06그리고 앞서 말한 그 세 가지 변형에 대해, 더 대담하게 만들라고 했을 때 결과물이 나왔습니다.
00:11:07이것이 변형 1이고, 변형 2는 빨간색 선이 살짝 추가되었으며, 이어서 변형 3이 있습니다.
00:11:09이런 요소들을 미세 조정하는 기능도 있어서 채우기(fill)도 조절할 수 있습니다.
00:11:13스탬프 테두리를 켤까요, 끌까요?
00:11:19즉 세 가지 변형만 있는 것이 아니라 각 변형에 대한 또 다른 세부 변형들이 존재하므로, 클로드 코드에 마이크로 트윅 섹션을 따로 만들라고 일일이 프롬프트를 넣는 것보다 솔직히 훨씬 마음에 듭니다.
00:11:23마음에 든다면 수락(accept)을 누르기만 하면 됩니다.
00:11:28이게 무슨 역할을 할까요?
00:11:38그 정보를 다시 터미널로 전송해 주는 것입니다.
00:11:42이 시점에서 남은 것은 오직 반복, 반복, 또 반복뿐입니다.
00:11:50지금까지 제가 시연해 드린 것처럼 모든 작업을 임펙커블 라이브 안에서만 할 필요는 없습니다.
00:11:56임펙커블 라이브의 유용한 사용 사례는 보시다시피 특정 컴포넌트의 미세 조정과 변형을 위한 것입니다.
00:11:58큰 그림을 그리고 싶거나, 거대한 레이아웃 변경을 원하거나, 완전히 다른 방향으로 가고 싶다면 그때는 터미널을 사용해야 합니다.
00:12:09만약 이 디자인이 전혀 마음에 들지 않는다면 어떻게 해야 할까요?
00:12:12“변형 작업을 해봤지만 결국 내 취향이 아니네”라는 생각이 들 수 있죠.
00:12:13그럴 때는 디자인 과정에서 평소 하듯 다른 레퍼런스들을 몇 개 피더링해 주면 됩니다.
00:12:15여기에 있는 것들은 웹상에서 마음에 들고 보아왔던 다양한 히어로 페이지와 디자인들을 모아둔 저만의 영감 라이브러리입니다.
00:12:19이런 느낌의 새로운 변형을 만들고 싶다면, 클로드 코드를 이 라이브러리를 향하게 하거나 스크린샷을 드롭하고 “이런 느낌의 새로운 변형을 시도해 보자”고 말하면 됩니다.
00:12:23가령 ASCII 아트 스타일의 웹 섹션, 우리가 추구하고자 하는 이런 분위기로 가고 싶다고 해봅시다.
00:12:30이 이미지를 복사해서 붙여넣은 뒤, 다음과 같은 프롬프트를 주겠습니다.
00:12:37제가 제공한 이 레퍼런스 이미지를 살펴보세요.
00:12:40이것은 제 취향 금고(taste vault) 안에 있는 이미지이기도 합니다.
00:12:44현재 4610번 로컬호스트 포트에서 실행 중입니다.
00:12:48우리가 만든 랜딩 페이지를 새로운 방향으로 이끌고 싶습니다.
00:12:57ASCII 아트 타입의 스타일을 도입하고 싶어요.
00:13:10기억하세요, 우리에게는 여전히 힉스필드 MCP에 대한 접근 권한이 있습니다.
00:13:17배경 히어로 페이지용 에셋을 만들어야 한다면 그것도 가능합니다.
00:13:23아무튼 그런 식으로 변형을 생성해 주세요.
00:13:26이것은 엄청난 규모의 전면적인 변경이며, 라이브 기능을 꼭 써야만 하는 것은 아닙니다.
00:13:28그리고 이것이 우리 웹사이트의 두 번째 버전입니다.
00:13:33앞서 보았던 것과는 엄청나게 달라졌죠.
00:13:38우리의 레퍼런스를 바탕으로 확실히 ASCII 테마가 반영되었지만, 여전히 임펙커블 기반의 산출물입니다.
00:13:42임펙커블 리뷰어가 실행되어 슬롭이 없는지 확인했으니까요.
00:13:44이런 경우 양쪽 세계의 장점을 모두 취할 수 있습니다.
00:13:48앞서 보신 것처럼 언제든 임펙커블 라이브를 다시 띄울 수도 있습니다.
00:13:51작업을 시작하면 됩니다.
00:13:56멋져 보일 만한 아이디어로는 이 각각의 섹션에 애니메이션 기능을 적용해서 약간의 움직임을 주는 것입니다. 너무 정적이지 않게요.
00:13:58이런 식으로 접근해 나가면 됩니다.
00:13:59큰 그림은 클로드 코드로, 세부적인 디테일은 임펙커블을 통해 확실하게 처리하는 식이죠.
00:14:05그리고 실제로 살펴보니, 자세히 보면 이 히어로 섹션의 일부 숫자들에 움직임과 모션이 들어가 있네요.
00:14:08오늘 제가 여러분께 준비한 내용은 여기까지입니다.
00:14:11임펙커블은 어떤 프론트엔드 디자인 작업에서든 도구 상자에 넣어둘 만한 훌륭한 툴입니다.
00:14:14보셨다시피 임펙커블 생태계 내부에 100% 머무르기만 해도 꽤 멀리 갈 수 있습니다.
00:14:16가장 좋은 사용 사례는 마지막에 보았던 것처럼 외부 소스(레퍼런스 등)를 가져오는 광범위한 디자인 접근법과 결합하는 것입니다.
00:14:23AI 슬롭을 물리치는 방법에 대해 지난 영상에서 단계별로 상세히 다루었던 전체 워크플로우가 바로 그것입니다.
00:14:27하지만 현재 게임 판에서 최고라고 생각하는 프론트엔드 디자인 스킬에 대해 깊이 있게 파고들어 보는 것도 좋은 시간이었다고 생각합니다.
00:14:33언제나 그렇듯 여러분의 생각도 알려주세요.
00:14:39제 클로드 코드 마스터클래스를 만나보고 싶다면 '체이스 AI 플러스(Chase AI Plus)'를 꼭 확인해 보세요.
00:14:41이번 주에 엄청난 업데이트가 예정되어 있어서 아주 흥미진진합니다.
00:14:46그럼 오늘 영상은 여기까지 하고 다음에 뵙겠습니다.
00:14:51가장 좋은 활용 사례는 영상 마지막에 보았던 것처럼 레퍼런스 같은 외부 소스를 가져오는 광범위한 디자인 접근법과 결합하는 것이라고 생각합니다.
00:15:00그리고 그 전체적인 워크플로우는 AI 슬롭을 물리치는 방법에 대해 지난 영상에서 단계별로 자세히 설명했던 내용입니다.
00:15:08하지만 현재 업계에서 최고라고 생각하는 프론트엔드 디자인 스킬에 대해 깊이 있게 다뤄본 것은 좋은 시간이었다고 봅니다.
00:15:13늘 그렇듯 여러분의 생각도 댓글로 알려주세요.
00:15:15제 클로드 코드 마스터클래스를 접하고 싶으시다면 '체이스 AI 플러스(Chase AI Plus)'를 꼭 확인해 보세요.
00:15:19이번 주에 엄청난 업데이트가 예정되어 있어서 정말 기대됩니다.
00:15:23그럼 오늘 영상은 여기서 마치고 다음에 뵙겠습니다.