Transcript
00:00:00"AI는 취향이 없으며, 그건 당신의 잘못입니다."
00:00:03당신의 시각적 결과물이 평범한 이유는
00:00:05당신의 프롬프트가 평범하기 때문입니다.
00:00:08당신은 실제 디자이너가 사용하는
00:00:10용어나 언어, 명명법을
00:00:11사용하고 있지 않습니다.
00:00:13하지만 운 좋게도, 해결책을 찾았습니다.
00:00:16바로 '임페커블(Impeccable)'입니다.
00:00:17이것은 오픈 소스 깃허브 저장소로,
00:00:20사실상 하나의 기술(Skill)이라 할 수 있으며
00:00:23오늘 저는 이 기술이 어떻게 작동하는지 보여드릴 뿐만 아니라,
00:00:25이걸 사용해서 새로운 웹사이트를 직접 만들고
00:00:27기존에 제가 운영하던 웹사이트 하나를 수정해 볼 겁니다.
00:00:29좋은 디자인이 무엇인지 가르쳐주고,
00:00:32피해야 할 나쁜 디자인도 알려줍니다.
00:00:36오늘은 이 기술이 어떻게 작동하는지 보여줄 뿐만 아니라,
00:00:39이를 사용해 새로운 웹사이트를 구축하고
00:00:42기존에 제가 운영하던 웹사이트를 수정해 볼 것입니다.
00:00:45영상 끝날 때쯤이면 여러분은 더 이상
00:00:48평범한 프론트엔드 디자인을 핑계 댈 수 없을 겁니다.
00:00:51임페커블은 오픈 소스 깃허브 저장소로,
00:00:54우리가 수준 높은
00:00:55프론트엔드 디자인을 만들 수 있게 해주는
00:00:58단일 기술을 제공합니다.
00:01:00자, 단일 기술이라고 했지만,
00:01:01사실 그 이상입니다.
00:01:03이 하나의 기술 안에 23가지의 서로 다른 명령어가 포함되어 있거든요.
00:01:077개의 도메인별 참조 파일도 있죠.
00:01:10피해야 할 안티 패턴을 알려줄 뿐만 아니라
00:01:13브라우저 안에서 직접 수정까지 가능하게 합니다.
00:01:17정말 강력한 도구죠.
00:01:20단순히 몇 문단 정도의
00:01:22프론트엔드 디자인 지침을 담은
00:01:24레포 안에서 이 모든 내용을 다 설명해주지만,
00:01:26사실 이 모든 것을 다 기억할 수는 없을 겁니다.
00:01:28하지만 여기서 도움이 되는 두 가지가 있습니다.
00:01:31첫째, Cloud Code가 어떤 것을 사용해야 할지
00:01:34꽤 잘 파악해준다는 점입니다.
00:01:35그리고 둘째로는, 이 23가지 기술이
00:01:37각각 어떤 역할을 하는지 보여주는 웹사이트가 따로 있다는 것입니다.
00:01:40그래서 GitHub에서 해당 웹사이트로 연결되는데,
00:01:42바로 impeccable.style입니다.
00:01:44정말 멋진 점은 적용 가능한 모든 기술에 대해
00:01:46적용 전의 모습과
00:01:49순수 Cloud Code만 사용했을 때,
00:01:53그리고 해당 impeccable 명령어를 사용한 후의 모습을
00:01:54각각 확인할 수 있다는 것입니다.
00:01:56정말 괜찮죠.
00:01:59Impeccable에는 디자인의 7대 요소가 있는데,
00:02:02타이포그래피, 색상, 공간 디자인, 반응형 디자인 등이 있습니다.
00:02:03해당 임페커블 명령어를 사용한 후의
00:02:05모습을 확인할 수 있다는 겁니다.
00:02:07정말 괜찮죠.
00:02:09임페커블은 디자인의 7가지 요소를 다룹니다.
00:02:12타이포그래피, 색상, 공간 디자인, 반응형,
00:02:15인터랙션, 모션, 그리고 UX 라이팅까지요.
00:02:17단순히 색상 같은 것만 다루는 게 아닙니다.
00:02:21상당히 포괄적이죠.
00:02:22여기서 스크롤을 내리며
00:02:25이 모든 명령어들을 살펴볼 수 있습니다.
00:02:27말씀드린 것처럼, 해당 기술을 사용했을 때와
00:02:29사용하지 않았을 때를 직접 눈으로 볼 수 있죠.
00:02:31만약 '이게 정확히 뭘 하는 거지?' 싶을 때
00:02:34실제 작동하는 걸 보고 싶다면,
00:02:35이곳이 바로 확인하기 좋은 장소입니다.
00:02:37웹사이트에는 임페커블과 단 하나의 이미지만으로
00:02:39어떻게 이 웹사이트를 만들었는지
00:02:40보여주는 사례 연구도 포함되어 있습니다.
00:02:42꽤 멋져 보입니다.
00:02:43마지막으로, 지금은 알파 버전이지만
00:02:45우리가 조금 가지고 놀아볼 '라이브 모드'를 보여주는데,
00:02:47알파 버전임에도
00:02:48앞서 말했듯이 웹사이트를
00:02:51브라우저를 통해 직접 수정할 수 있게 해줍니다.
00:02:53크롬 확장 프로그램과 CLI도 있지만,
00:02:56솔직히 말씀드리면,
00:02:56기술 하나만으로 99%의 가치를 얻을 수 있습니다.
00:02:59그래서 오늘은 그 기술에 집중할 예정입니다.
00:03:01설치하려면 코드 한 줄만 있으면 됩니다.
00:03:04그냥 복사해서
00:03:06터미널에 붙여넣기만 하면 됩니다.
00:03:07자, 임페커블을 사용할 때는
00:03:09크게 두 가지 방식이 있습니다.
00:03:11하나는 '그린필드(Greenfield)'로,
00:03:12웹사이트를 처음부터 새로 만드는 것이고,
00:03:14다른 하나는 기존 사이트를 수정하는 것입니다.
00:03:17오늘은 이 두 가지를 모두 해볼 예정입니다.
00:03:20처음부터 빌드하는 방법을 보여드릴 뿐만 아니라,
00:03:22처음부터 만들 때
00:03:23레퍼런스 이미지나
00:03:25일종의 무드 보드 같은 것을 사용하면
00:03:27결과물이 어떻게 나오는지도 보여드릴 거거든요.
00:03:30그게 끝나면 제 실제 웹사이트로 이동해서
00:03:33임페커블이 제 작업물을 어떻게 평가하는지,
00:03:36그리고 제 작업물에서 어떤 '슬롭(슬러지 같은 저퀄리티)'을 걷어낼 수 있는지 볼 겁니다.
00:03:41마지막으로 알파 버전인
00:03:43임페커블 라이브를 살펴보고,
00:03:44지금 시점에서 얼마나 뛰어난지 확인해 보겠습니다.
00:03:48하지만 실제 빌드에 들어가기 전에,
00:03:50모두가 가장 좋아하는 스폰서, 제 소개가 있겠습니다.
00:03:54지난달에 클로드 코드 마스터클래스를 출시했는데,
00:03:560에서 AI 개발자가 되는 가장 확실한 방법입니다.
00:03:59기술적 배경이 전혀 없다면 더욱 추천하죠.
00:04:02매주 강의를 업데이트하고 있어서,
00:04:05이 놀라운 도구를 제대로 사용하는 방법을
00:04:07터득하기에 가장 좋은 곳입니다.
00:04:10우리는 실제 활용 사례에 집중합니다.
00:04:12방금 막 '클로드 코드 에이전트 OS' 수업 계획을
00:04:13공개했습니다.
00:04:16관심 있으신 분들은,
00:04:18제 '체이스 AI 플러스(Chase AI Plus)'에서 확인하실 수 있습니다.
00:04:20고정 댓글에 링크를 달아두었으니 참고하세요.
00:04:23그럼 시작해 볼까요,
00:04:24먼저 그린필드 프로젝트부터 진행하겠습니다.
00:04:27웹사이트를 처음부터 새로 만들 겁니다.
00:04:29다시 말하지만, 명령어가 워낙 많아서
00:04:31조금 헷갈릴 수 있습니다.
00:04:32처음부터 무언가를 시작한다면,
00:04:35저는 '임페커블 크래프트(impeccable craft)'로 시작하는 걸 추천합니다.
00:04:39왜냐하면 '임페커블 티치(impeccable teach)' 같은
00:04:41보조 명령어들이 포함되어 있기 때문이죠.
00:04:44자, 이게 다 무슨 의미일까요?
00:04:45임페커블 크래프트는 사실상
00:04:48자체적인 '플랜 모드(plan mode)'를 실행하여
00:04:50웹사이트와 제품, 그리고
00:04:53실제로 무엇을 만들려고 하는지에 대해 물어볼 겁니다.
00:04:55그 과정에서 두 개의 파일을 만들게 됩니다.
00:04:59바로 product.markdown과
00:05:01design.markdown입니다.
00:05:02이 design.md 파일은 우리가
00:05:07구글 스티치(Google Stitch)에서 봤던 것과 거의 같습니다.
00:05:09다들 구글 스티치 기억하시죠?
00:05:11구글의 무료 디자인 도구 말입니다.
00:05:13디자인 시스템이라는 게 있고,
00:05:14이 design.md 파일이 있는데,
00:05:16AI에게 무언가를 어떻게 만들어야 할지 알려주는
00:05:20상당히 깊이 있는 마크다운 파일이죠.
00:05:21이 디자인.md 구조가
00:05:24어느 정도 업계 표준이 되어가고 있습니다.
00:05:27요즘 어디서나 볼 수 있죠.
00:05:29임페커블도 그 방식을 따릅니다.
00:05:31즉, 우리에게 인터뷰를 통해
00:05:32무엇을 만들려고 하는지,
00:05:34어떤 디자인을 원하는지 파악합니다.
00:05:36인터뷰가 끝나면
00:05:37랜딩 페이지를 바로 만들어줍니다.
00:05:391인 창업가나 소규모 팀을 위한 분석 플랫폼이죠.
00:05:41저는 'impeccable-test'라는 새 디렉토리에 있습니다.
00:05:44명령어는 'impeccable-spacecraft'입니다.
00:05:47프롬프트는 '내 가상 SaaS 제품인 라이트하우스(Lighthouse)를 위한
00:05:49랜딩 페이지를 만들어줘.'입니다.
00:05:51솔로 창업자나 소규모 팀을 위한 분석 플랫폼이죠.
00:05:54원하는 질문은 뭐든 다 해도 돼.
00:05:56이건 지난 영상에서 화슈 디자인(Huashu Design)에게
00:05:58주었던 것과 거의 같은 프롬프트입니다.
00:06:01혹시 못 보신 분들은 꼭 확인해 보세요.
00:06:03사실상 클로드 디자인 클론과 같거든요.
00:06:06임페커블이 그 디자인 시스템에 비해
00:06:08어떻게 비교될지 흥미롭네요.
00:06:11아직 그 영상을 안 보셨다면
00:06:13위에 링크를 걸어두겠습니다.
00:06:14자, 13개의 질문을 되돌려줬네요.
00:06:16첫 4개는 제품에 관한 것입니다.
00:06:18실제 고객이 누구인지,
00:06:19라이트하우스를 어떻게 정의하는지,
00:06:21방문자의 마음가짐은 어떤지,
00:06:22주요 행동 유도 버튼(CTA)은 무엇인지,
00:06:23이 랜딩 페이지의 진짜 목적은 무엇인지 같은 것들이죠.
00:06:25그다음 질문들은 톤앤매너와 디자인,
00:06:28그리고 스코프에 관한 내용입니다.
00:06:29히어로 섹션만 만드는 건지,
00:06:30전체 스크롤이나 실제 스크린샷이 필요한지,
00:06:32혹시 다른 에셋이 있는지 묻네요.
00:06:34여기서 마음에 드는 점은 질문의 깊이입니다.
00:06:36그래서 저는 이걸 그냥 작성해보려고 합니다.
00:06:40클로드 디자인에서 얻을 수 있는
00:06:41질문의 수준과도 상당히 비슷합니다.
00:06:43상당히 심도 있고, 이런 점은 아주 좋습니다.
00:06:44자, 이제 이 질문들에 답변해 보겠습니다.
00:06:46평범하게 작성할 겁니다.
00:06:49특별히 대단한 답변은 필요 없습니다.
00:06:50전체 스크롤을 요청할 거거든요.
00:06:52자, 최소한의 정보만으로 첫 번째 시도에서
00:06:53임페커블이 우리에게 준 결과입니다.
00:06:56질문에 답한 것밖에 없는데 말이죠.
00:06:57에셋이나 예시를 전혀 주지 않았습니다.
00:06:59지금 바로 봤을 때,
00:07:01AI가 만든 슬롭이라는 생각은 전혀 들지 않습니다.
00:07:02물론 요즘 클로드 디자인 같은
00:07:05모던한 프론트엔드 디자인에서
00:07:08흔히 보이는 크림색이나
00:07:11세리프 폰트가 눈에 띄긴 하지만요.
00:07:13이 대시보드 디자인은 꽤 마음에 듭니다.
00:07:16분명 괜찮아요.
00:07:18모든 AI 디자인 웹사이트에서 보이는
00:07:20뻔한 4개의 벤토 박스(칸 나뉜 상자)가 아니라는 점이
00:07:23정말 좋습니다.
00:07:25이 부분은 꽤 좋아 보입니다.
00:07:26인용구와 전체 가격,
00:07:30그리고 이메일을 입력하라는 유도 문구까지 있네요.
00:07:32첫 번째 시도로는 꽤 괜찮네요.
00:07:35하지만 최근 들어 제가 웹 디자인을 할 때
00:07:37Claude 코드를 사용할 때면
00:07:40이런 식으로 결과물을 하나만 내놓게 하지는 않아요.
00:07:44그래서 제가 Impeccable(Claude 코드)에 요구한 것은
00:07:47웹사이트 레이아웃 하나만 원한 게 아니라는 거예요.
00:07:50여기 보이는 것처럼, 이건 첫 번째 결과물이었죠.
00:07:52제가 고를 수 있도록 세 가지 다른 변형을 보고 싶었어요.
00:07:56그리고 그 세 가지가 모두 꽤나 차별화되길 원했죠.
00:07:59게다가 그 모든 것을 클릭해서 넘겨보고 싶었고
00:08:01나란히 놓고 한꺼번에 확인하고 싶었습니다.
00:08:03그래서 일종의 매크로 레이아웃 같은 걸 보고 싶었던 거죠.
00:08:05세부적인 부분이나 컴포넌트를 건드리기 전에
00:08:08전체적인 틀을 먼저 확인하고 싶어서요.
00:08:09그래서 Impeccable이 이런 결과물을 보여줬습니다.
00:08:11방금 살펴본 에디토리얼 스타일의 레이아웃이죠.
00:08:15또 'drenched'라고 부르는 스타일도 하나 만들었고요.
00:08:17확실히 색감이 훨씬 많이 들어간 다른 스타일이죠.
00:08:20그리고 브루탈리스트 스타일도 있었습니다.
00:08:22이게 'drenched' 스타일을 살펴본 모습인데,
00:08:24확실히 분위기가 훨씬 다르죠.
00:08:26전면부에는 좀 겹치는 부분이 있다고 하더라도,
00:08:29대부분의 AI 생성물과는 꽤나 달라 보입니다.
00:08:34계속 보다 보면, 이 웹사이트가 가진 과감함이
00:08:39나름 괜찮아 보이긴 합니다. 색상은 잘 모르겠지만요.
00:08:43하지만 이 브루탈리스트 스타일은 정말 마음에 들어요.
00:08:44상당히 무채색 느낌이지만,
00:08:46숫자 배치 방식이 마음에 드네요.
00:08:48박스들이 살짝 어긋나게 배치된 것도 좋고요.
00:08:52선들이 딱 맞지 않는 느낌이죠.
00:08:54전 이게 정말 마음에 듭니다.
00:08:56정말 멋지고 기존과는 매우 다른 느낌이라 생각해요.
00:08:58그래서 이번에는
00:09:02이걸로 가기로 결정했습니다.
00:09:04알아두셔야 할 건, 이 세 가지 디자인을 보여주고
00:09:07한눈에 비교하는 이 방식이
00:09:08Impeccable 자체의 고유 기능은 아니라는 점이에요.
00:09:12이건 제가 하는 방식입니다.
00:09:13그저 간단한 프롬프트 하나일 뿐이죠.
00:09:14어떤 디자인을 하든, 어떤 기술을 쓰든 간에
00:09:17이런 방식을 꼭 써보시길 강력히 권합니다.
00:09:19아마 'Stitch'에서 배운 방식인 것 같은데,
00:09:23어떤 방향으로 나아가야 할지 감을 잡으려면 이런 시각적인 자료들을 직접 봐야 하거든요.
00:09:25다양한 변형들을 같은 페이지에서 쉽게 확인하고
00:09:26서로 비교하고 대조해 볼 수 있거든요.
00:09:29저 개인적으로는 이런 시각적인 결과물들을 봐야
00:09:30어떤 방향으로 나아갈지 감을 잡을 수 있어서
00:09:33정말 큰 도움이 됩니다.
00:09:37그래서 여러분도 꼭 해보시길 추천드려요.
00:09:38꼭 세 개일 필요는 없습니다.
00:09:39여섯 개든, 백만 개든 해도 되죠.
00:09:41그리고 Claude 코드에
00:09:42이런 요청을 할 때는 그냥 이렇게 말하세요.
00:09:44세 가지를 모두 같은 페이지에서 보고 싶다고요.
00:09:47하나씩 전체 화면으로 열어볼 수 있게 해달라고도 하고요.
00:09:50그리고 다양한 매크로 옵션들을
00:09:53여러 개 제시해 달라고 요청할 수도 있습니다.
00:09:55그럼 그중에서 골라가지고
00:09:57이런 결과물들을 만들어내면 되죠.
00:09:57물론 이걸 생성하는 데는 시간이 조금 걸리긴 합니다.
00:09:59자, 마음에 드는 랜딩 페이지를 골랐으니,
00:10:01이제 내용을 좀 수정해 볼 시간입니다.
00:10:03거기서 바로 새로운 'Impeccable Live'가 등장하는 거죠.
00:10:06간단하게 이렇게 말하면 됩니다.
00:10:07이 브루탈리스트 페이지에서 Impeccable Live를 실행해줘.
00:10:10그 명령을 내리면,
00:10:12Claude 코드가 라이브 모드가 켜졌다고 알려줄 겁니다.
00:10:14로컬 호스트 주소 링크를 줄 테니
00:10:18거기로 들어가거나 브라우저를 새로고침하면 돼요.
00:10:20자, 이제 여기 들어가서
00:10:22스크롤을 움직이면 요소들이 하이라이트되는 걸 볼 수 있죠.
00:10:26아래쪽을 보면 몇 가지 기능도 있습니다.
00:10:29우선, design.md가 있죠.
00:10:32누르면 오른쪽에 사이드바가 팝업됩니다.
00:10:35그리고 'raw'를 누르면 생성된 모든 소스를 볼 수 있어요.
00:10:39이제 특정 컴포넌트를 클릭하면
00:10:41예를 들어 이 기본 문구 같은 거요, 옵션이 뜹니다.
00:10:45첫 번째로 'free form'이 있는데,
00:10:47텍스트 프롬프트를 직접 입력하거나
00:10:50기본적으로 제공되는
00:10:52모든 Impeccable 명령어를 사용할 수 있죠.
00:10:54Bolder, Quieter, Distill, Polish, Adapt 등등요.
00:10:56이게 모두 앞서 말씀드린 23가지 Impeccable 명령어에
00:11:00포함된 것들입니다.
00:11:02그럼 'bolder'를 실행해 볼까요?
00:11:04bolder는 기본적으로 미리 설계된 프롬프트입니다.
00:11:09Impeccable 문서에서 보면,
00:11:12bolder는 글자 그대로 더 굵고 강하게 만들어주죠.
00:11:15이게 수정 전이고, 이건 수정 후입니다.
00:11:18훨씬 더 눈에 띄게 만드는 거죠.
00:11:21정확한 정의는, 안전한 디자인을
00:11:26혼란스러워지지 않게 하면서 임팩트 있게 만드는 겁니다.
00:11:28사용 시기나 작동 방식 등이 다 설명되어 있죠.
00:11:31여기에 bolder를 적용해 보면, 솔직히 말해서
00:11:32이미 충분히 대담한 디자인인 것 같기도 해요.
00:11:34최고의 선택인지는 잘 모르겠네요.
00:11:35더 다듬어볼 수도 있습니다.
00:11:37bolder와 함께 원하는 프롬프트를 추가할 수도 있죠.
00:11:40예를 들어 '색상을 추가해줘'라고 적는 거죠.
00:11:43그러고 나면 이렇게
00:11:463개, 4개, 2개처럼 숫자가 뜨죠.
00:11:47몇 가지 버전을 보여줄지 선택하는 겁니다.
00:11:50선택 후 고를 누르면 실행되죠.
00:11:51이건 아까 우리가 했던 전체 레이아웃 작업의
00:11:56미세 버전이라고 할 수 있습니다.
00:11:58특정 부분을 정해서
00:12:00수정하고 변형을 보는 거죠.
00:12:03이제는 더 미세한 단위에서
00:12:06더 구체적으로
00:12:08우리가 원하는 것을 요구할 수 있는 거죠.
00:12:09이번 경우에는 bolder를 선택했고요.
00:12:1012가지 옵션 중 아무거나 골랐어도 됐을 겁니다.
00:12:13결과물은 이렇게 나왔네요.
00:12:14네, 다른 옵션에 비해 확실히 아주 대담합니다.
00:12:17이게 첫 번째 변형, 이게 두 번째,
00:12:21조금 더 차분한 스타일이고,
00:12:22마지막 세 번째는 상당히 파격적이죠.
00:12:25이 변형을 조정하는 기능도 있습니다.
00:12:27Tune을 누르면 말이죠,
00:12:30상쇄 값 같은 걸 바꿀 수 있어요.
00:12:31예를 들어 얼마나 파격적으로 보일지 말이죠.
00:12:36색상이 어떻게 보이길 원하는지도요.
00:12:39지난 영상을 떠올려보거나
00:12:42Claude 디자인의 조정을 생각해 보면,
00:12:44이건 말 그대로 아주 세세한 미세 조정이고
00:12:47모든 변형에 적용됩니다.
00:12:50키를 숨기거나 보여주는 등 할 수 있는 게 많죠.
00:12:53자, 이걸로 가기로 했다면
00:12:54어떻게 해야 할까요?
00:12:56Accept(수락)를 누르기만 하면 바로 적용됩니다.
00:13:00누르다가 이렇게 오류가 나면,
00:13:02Claude 코드를 확인해 보세요.
00:13:03기본적으로 변경 사항을 적용하고 다시 불러오는 중이니까요.
00:13:06수정 사항이 반영된 결과물은 이렇습니다.
00:13:09아직 언급하지 않은 기능으로 Detect가 있습니다.
00:13:10이걸 누르면 무엇을 찾아내느냐,
00:13:13기본적으로 AI 특유의 어색한 흔적이 있는지 보는 거죠.
00:13:17아까 말했던 '안티 패턴'이 있는지
00:13:19탐지하는 기능입니다.
00:13:20이건 Impeccable로 완벽하게 생성된 것이라
00:13:24문제가 발견될 가능성은 거의 없다고 봐서
00:13:26아무것도 뜨지 않는 겁니다.
00:13:28나중에 제 웹사이트를 볼 때
00:13:31결과가 어떻게 나올지 확인해 보죠.
00:13:32어쨌든 라이브 시스템은 이렇게 작동합니다.
00:13:34이 부분이 정말 멋지고 다른 프론트엔드 디자인 툴이나
00:13:37이전에 봤던 레포지토리와 차별화되는 점이라고 봅니다.
00:13:41특히 추가적인 변형을 무한대로
00:13:42만들 수 있다는 게 아주 좋죠.
00:13:45다양한 변형을 한꺼번에 보고
00:13:47서로 비교해 볼 수 있다는 점에
00:13:49정말 큰 기대를 걸고 있습니다.
00:13:52아주 미세한 부분까지 수정할 수 있으니까요. 다만 알파 버전이라
00:13:54오류가 좀 발생할 수도 있습니다.
00:13:57아까 본 새로고침처럼
00:13:59다소 거친 부분이 있긴 하지만,
00:14:01그래도 정말 멋진 기능이에요.
00:14:03정말 쿨합니다.
00:14:04Impeccable을 쓰신다면 꼭 확인해 보세요.
00:14:07생성하고 끝내지 말고,
00:14:09Live 모드에 들어가서 이것저것 만져보세요.
00:14:11웹페이지를 마음에 드는 상태로 만들고 나면,
00:14:13실행할 수 있는 명령어들이 더 있습니다.
00:14:16Polish(다듬기) 같은 걸 실행해서
00:14:18최종 디자인 시스템을 적용할 수도 있고요.
00:14:20Harden(강화) 같은 걸 실행하면
00:14:22엣지 케이스와 에러를 확인해서
00:14:24모든 게 제대로 작동하는지 확인합니다.
00:14:25말씀드렸다시피 정말 정교하고
00:14:28사용 가능한 명령어가 정말 방대합니다.
00:14:30시간 관계상 이제부터는
00:14:33처음부터 빌드하는 법을 보여드릴 텐데요,
00:14:35이번에는 무드 보드나
00:14:38우리가 Impeccable에 반영하고 싶은 디자인의
00:14:40목업을 활용해 보려 합니다.
00:14:43이게 어떤 모습일지 궁금하거든요.
00:14:45그들의 사례 연구를 똑같이 따라 해 보고 싶어서요.
00:14:48그들은 이미지를 가져와서
00:14:50Claude 코드와 Impeccable에 넣고
00:14:52웹사이트를 만들어냈는데,
00:14:53정말 멋진 결과물을 얻었더라고요.
00:14:54그래서 저도
00:14:55사례 연구에 사용된 것과 비슷한 미학을 가진
00:14:58이미지들을 만들었습니다.
00:15:02이번엔 대신 Lighthouse를 사용해서
00:15:04일종의 일대일 비교가 가능한
00:15:07테스트를 해보려 합니다.
00:15:09이 이미지가 마음에 드네요. 이걸 사용하죠.
00:15:11전과 마찬가지로 Impeccable 'craft' 기술을 사용합니다.
00:15:15아까와 비슷한 질문들을 던질 텐데요,
00:15:18그냥 이미지에서 받은
00:15:21분위기와 느낌을 유지하라고
00:15:22요청했습니다.
00:15:24이게 결과물인데,
00:15:26솔직히 기대에는 조금 못 미치네요.
00:15:29무드 보드 하나만 던져주면서
00:15:33"이걸로 웹사이트를 만들어줘"라고 했더니
00:15:35좀 헤매는 것 같네요.
00:15:37최선을 다한 것 같긴 합니다.
00:15:38대시보드도 있고 색감도 있지만,
00:15:41하지만 그들이 만든 것만큼 좋지는 않아요.
00:15:43왜냐하면 제가 에셋을 하나만 주고
00:15:46추가적인 에셋은 포함하지 않았기 때문에
00:15:48Impeccable이 사례 연구에서 했던 것처럼
00:15:51그것을 제대로 분류해내지 못한 것 같아요.
00:15:52하지만 프롬프트 문제일 수도 있겠죠.
00:15:55그럼에도 불구하고 여기서 작동할 만한
00:15:57뼈대는 어느 정도 볼 수 있습니다.
00:15:59대시보드를 만드는 방식은 마음에 드네요.
00:16:01그래서 맨 처음에 우리가 했던 초기 버전만큼
00:16:05인상적이지는 않다고 생각하지만,
00:16:09뭐, 한번 시도해본 거죠.
00:16:11이제 기존 사이트를 편집할 때는 어떻게 되는지 보죠.
00:16:14제 웹사이트, 즉 실제 AI 에이전시 웹사이트를 사용해서
00:16:18몇 가지 명령어를 실행해 볼 겁니다.
00:16:21Impeccable 문서를 사용해서
00:16:23코드에서 design.md 파일을 역설계할 수 있게 하고,
00:16:26그다음 감사(audit) 실행이나 비평 같은 작업을 할 겁니다.
00:16:29실제로 제 웹사이트에서 다시 한번 라이브로 진행하면서
00:16:32어떤 광고를 만들 수 있을지
00:16:36살펴보도록 하죠.
00:16:37참고로 이건 제 AI 에이전시 웹사이트입니다.
00:16:41일반적인 히어로 섹션이 있고요.
00:16:43서비스 페이지로 들어가서 AI 구현을
00:16:47어떻게 하는지에 대한 제 철학을 이야기하고
00:16:49콜 투 액션(CTA)을 배치해 두었습니다.
00:16:51저와 함께 일하고 싶은 분들이
00:16:54정보를 입력할 수 있는 곳이죠.
00:16:55블로그 같은 추가 페이지도 몇 개 있지만,
00:16:57일단은 홈페이지 위주로만 살펴볼 겁니다.
00:17:00그래서 제가 가장 먼저 한 일은
00:17:02이 코드베이스에 Impeccable 문서를 실행해서
00:17:05제 웹사이트에 대해 Impeccable이 뭐라고 하는지 확인하는 것이었습니다.
00:17:08이제 전체 코드베이스를 훑으면서
00:17:11우리가 이미 가지고 있는 것에 대한 design.md를 만들 겁니다.
00:17:16그리고 그 기반 위에서
00:17:18수정을 시작할 수 있는 거죠.
00:17:19Impeccable이 코드베이스를 검토한 후에,
00:17:21기본적으로 전략적 맥락을 담은
00:17:23세 개의 파일을 작성했습니다.
00:17:26윈(win)이나 노스스타(North Star)에 대해서도 이야기하지만,
00:17:29그것이 찾아낸 일곱 가지 위반 사항에 대해서도 언급하네요.
00:17:33블루 스피어(blue sphere) 관련해서, 서비스 카드 목업이
00:17:37거의 클립아트 모음집 같다고 하네요,
00:17:40의도적인 카드 그리드인데 말이죠.
00:17:43글래스모피즘(glass morphism)을 싫어해서 그것도 별로라고 하네요.
00:17:47특정 폰트를 로드했는데 사용하지 않았다거나
00:17:50기타 여러 가지 사항을 지적했습니다.
00:17:53코드에는 분명히 기능이
00:17:54존재하는데,
00:17:55실제 UI에서는 나타나지 않는 것들이 있더군요.
00:17:58그리고 색상과 관련된 몇 가지 문제도 있고요.
00:18:02또한 전략적 격차에 대해서도 이야기하는데,
00:18:04저, 즉 '체이스'라는 사람을
00:18:07웹사이트 자체에 거의 드러내지 않았다는 지적인데, 맞는 말입니다.
00:18:10이제 비평 명령어를 실행하면
00:18:12더 깊이 있는 비평을 받을 수 있습니다.
00:18:15그러니 지금 바로 실행해보죠.
00:18:16네, 비평 명령어를 실행하라고 지시하고 있습니다.
00:18:18심지어 'critique' 철자도 틀렸네요.
00:18:20랜딩 페이지에 비평 명령어를 실행하라고 했습니다.
00:18:23그래서 비평을 실행했고 결론은,
00:18:25네, 경계선상의 AI 슬롭(AI slob)이네요.
00:18:2710가지 항목에 걸쳐 디자인 건강 점수를 매겼는데
00:18:33각 항목은 4점 만점이고
00:18:34그 어떤 항목도 3점을 넘지 못했습니다.
00:18:37그래도 1점은 하나도 없었으니 다행이죠.
00:18:39총점은 40점 만점에 25점으로, '허용 가능' 수준입니다.
00:18:43인지 부하 항목에서는 8점 만점에 5점으로 실패했습니다.
00:18:46배경 움직임이 콘텐츠와 경쟁하고 있다고 하네요.
00:18:51네, 어느 정도 절제되어 있다고 생각했는데
00:18:54어떤 지적인지 알 것 같네요.
00:18:56여기 CTA가 우선순위가 모호하게 두 개나 들어있네요.
00:19:00서비스 섹션에는 4가지의 시각적 스키마가 있고
00:19:03기타 다른 문제들도 있고요.
00:19:05전반적인 인상은 뼈대는 좋지만,
00:19:08조금 더 보완할 수 있다는 것이네요.
00:19:10그리고 마지막에는 이 문제를
00:19:11세 가지 다른 영역으로 나누어 분석해 줍니다.
00:19:14솔직히 이 비평은 마음에 듭니다.
00:19:16매우 심층적이고 우리가 작업할 수 있는 많은 정보를 주며
00:19:19무엇이 잘못되었는지 아주 구체적으로 알려주니까요.
00:19:22내용에 동의하느냐 아니냐는
00:19:24둘째 문제라고 생각하지만,
00:19:26생각해 볼 거리를 던져주네요.
00:19:29아시겠지만, 저는 맹목적으로
00:19:31AI가 말하는 모든 것을 옳다고 가정하진 않을 겁니다.
00:19:32하지만 이런 내용들을 하나씩 살펴볼 수 있죠.
00:19:35원한다면 이것들을 모두 검토해 볼 수도 있고요.
00:19:36저는 '좋아, 이것저것 수정해 보자'라고 생각하죠.
00:19:37그럼 B를 수행하면 어떤 일이 일어나는지 보죠.
00:19:40소위 '데코레이션 지침(decoration discipline)'이라 부르는 것을
00:19:42활용해 보고
00:19:44어떤 변화가 생기는지 확인해 보죠.
00:19:46그 변화를 확인한 다음에는
00:19:48라이브 세션으로 넘어가겠습니다.
00:19:51처음 만들었던 랜딩 페이지와 똑같이
00:19:54이것저것 만져볼 겁니다.
00:19:55그럼 적용된 몇 가지 변화를 살펴봅시다.
00:19:57변화는 매우 미묘했습니다.
00:19:59여기 서비스 섹션에서 확인할 수 있듯이
00:20:03이게 업데이트된 버전입니다.
00:20:04색감을 톤다운했고
00:20:07테라코타 오렌지와 흰색 위주로 유지했죠.
00:20:09왼쪽 하단에 있던 푸른빛이
00:20:13더 이상 없다는 걸 눈치채셨을 겁니다.
00:20:14참고로, 이게 이전 버전인데
00:20:17왼쪽 하단에 파란색이 있었고
00:20:18파란색과 초록색도 있었죠.
00:20:20이제는 두 가지 색상으로 유지하는 거죠, 맞나요?
00:20:23흰색, 그러니까 사실 세 가지 색상이네요.
00:20:25흰색, 회색, 그리고 오렌지색이라고 할 수 있겠네요.
00:20:28여기 어프로치 섹션에서도 확인하실 수 있습니다.
00:20:32카드 위로 마우스를 올리면 여전히 오렌지색 빛이 나지만
00:20:36원본에는 하단에 오렌지색이 좀 있었죠.
00:20:41상단에 카드 업라인이 있었는데
00:20:43AI 슬롯 같은 기능으로 생각하는 것 같아요.
00:20:47데코레이션 지침에 따른 변화는 여기까지입니다.
00:20:51그 외에도 시도해 볼 만한 다른 지침들이
00:20:53몇 가지 더 있습니다.
00:20:54신뢰도나 전환율과 관련된 부분이나
00:20:56프로필 사진 같은 요소를 추가하는 것들이죠.
00:20:58하지만 이제 넘어가서
00:21:00라이브 모드를 살펴보겠습니다.
00:21:02자, 이제 라이브 모드에서 웹사이트를 살펴봅시다.
00:21:05만약 카드들을 조금 수정하고 싶다면
00:21:08이전과 마찬가지로 어떻게 해야 할까요?
00:21:10자유롭게 작성하거나
00:21:13미리 준비된 명령어 중 하나를 선택하면 됩니다.
00:21:17이번에는 '기쁨(delight)'을 선택해 보죠.
00:21:19그리고 세 가지 변형을 시도해 보겠습니다.
00:21:22'기쁨'은 해당 구성 요소에
00:21:26실제 개성을 더해주는 기능입니다.
00:21:27결과물로 나온 변형 몇 가지를 보여드릴게요.
00:21:30이건 약간 더 크고
00:21:32오른쪽 하단에 이런 요소가 들어갔네요.
00:21:35실제 텍스트도 변경되었고요.
00:21:37이런 작은 요소들도 추가되었습니다.
00:21:40물론 이것들도
00:21:43원하는 대로 수정할 수 있습니다.
00:21:45이건 숫자여야 하는데, 조금 어긋났네요.
00:21:49네, 첫 번째 웹사이트를 만들 때와
00:21:53거의 동일한 시나리오입니다.
00:21:55저는 Impeccable의 라이브 모드가
00:21:57단연코 가장 강력한 도구라고 생각합니다.
00:22:00명령줄에서 모든 걸 다 할 필요 없이
00:22:02그래픽 인터페이스를 통해
00:22:04이런 미세 조정을 할 수 있다는 점이 놀랍죠.
00:22:06기존 코드베이스를 사용할 때도
00:22:08거의 동일한 설정으로 작동해서 기쁩니다.
00:22:09그래서 Impeccable이 정말 마음에 듭니다.
00:22:12분명 여러분의 기술 스택에 100% 추가할 만한 가치가 있고
00:22:13다음 프론트엔드 디자인 작업을 할 때
00:22:17꼭 한번 테스트해 보시길 추천합니다.
00:22:20처음부터 웹사이트를 새로 만들든
00:22:21이미 존재하는 사이트를 작업하든 상관없이요.
00:22:23그리고 라이브 도구는 꼭 사용해 보세요.
00:22:26이런 미세 조정 기능을 결합하면
00:22:29일주일 정도 된 것 같습니다.
00:22:31다른 서비스들과 차별화되는 아주 큰 강점이라 생각해요.
00:22:32처음에 알려드린 프롬프트를 통한
00:22:34매크로 레이아웃 작업에
00:22:35이런 미세 조정 기능까지 결합하면
00:22:38정말 강력한 워크플로우를 갖추게 되는 셈이죠.
00:22:41늘 그렇듯, 여러분의 생각도 알려주세요.
00:22:43저장소 링크는 설명란에 남겨두었습니다.
00:22:45제 'Cloud Code 마스터클래스'를 확인하고 싶으시다면
00:22:47고정 댓글의 'Chase AI+' 링크를 확인해 주세요.
00:22:49그럼, 다음에 또 뵙겠습니다.
00:22:52...
00:22:55...