스크립트
00:00:00AI로 웹사이트를 만들어 보셨다면, 모델이 생성하는 디자인이
00:00:04얼마나 진부해 보일 수 있는지 잘 아실 겁니다. 이를 해결하려는 툴과 스킬은 시중에 수없이 많고,
00:00:09그중 일부는 제법 훌륭한 디자인을 뽑아냅니다. 하지만 단 하나도 빠짐없이 공유하는 한 가지 한계가 있고,
00:00:14그 때문에 여전히 AI가 찍어낸 듯한 느낌을 줍니다. 이 한계를 메우기 위해 'Inspo'라는 툴이 나왔는데,
00:00:19오랫동안 GitHub에서 가장 인기 있는 디자인 스킬 중 하나였던
00:00:23Hallmark의 개발자가 만들었습니다. Inspo는 에이전트의 디자인 성능을
00:00:28높여줄 뿐만 아니라, 디자인 감각 자체를 키워주는 방식으로 문제를 해결합니다. 게다가
00:00:33유료인 다른 에이전트용 디자인 툴들과 달리 이 툴은 완전 무료입니다. 채널에 처음 오셨다면,
00:00:38저희는 소프트웨어 회사이고 이 채널은 AI Labs입니다. 오늘 영상에서는 Inspo가 에이전트의
00:00:43디자인 문제를 어떻게 해결하는지 정확히 보여드리겠습니다. 하지만 툴의 기능을 알아보기 전에,
00:00:48모델이 왜 뻔하고 흔한 사이트를 만들어내는지부터 이해해야 합니다. 모델은 엄청난 양의 데이터를 학습하며,
00:00:54학습 과정에서 자신이 접한 디자인에 가장 자주 등장하는 패턴을 익히게 됩니다.
00:00:59이러한 패턴이 자주 등장하다 보니, 모델은 그 디자인이 가장 안전하다고 판단합니다.
00:01:05그래서 프롬프트에 명확한 디자인 방향을 제시하지 않으면 가장 흔히 본 패턴을 선택하는 것이죠.
00:01:10그것이 모델 기준에서는 안전하기 때문입니다. 그런 요소들이 처음에는 괜찮아 보일지 몰라도,
00:01:14수많은 사이트에서 반복되다 보면 특정 모델 특유의 스타일로 인지되기 시작합니다.
00:01:19모델마다 자신이 만드는 모든 사이트에 드러나는 고유의 패턴이 있습니다. 어떤 모델은
00:01:25흰 배경에 보라색이나 파란색을 쓰는 것이었고, 다른 모델은 따뜻한 오렌지색과
00:01:30크림색 조합이었습니다. 따라서 다른 사이트들과 차별화되는 사이트를 만들려면,
00:01:35모델이 이러한 뻔한 스타일에서 벗어나도록 유도할 장치가 필요합니다. 이미 이 문제를 해결하는
00:01:40디자인 스킬은 많이 나와 있고, 저희 채널에서도 수차례 다룬 바 있습니다. 이 스킬들은 모두
00:01:45훌륭하게 작동하며, 모델에게 디자인 방향을 제시해 더 나은 디자인을 생성하도록 저마다의 방식으로 돕습니다.
00:01:50앞서 언급했듯이 이미 영상으로 다룬 바 있는 Hallmark가 대표적입니다. 모델에게 디자인 방향을 제공하고
00:01:55모델이 상투적인 패턴에 빠지지 않았는지 결과물을 검토해 주기 때문에 저희도 자주 사용하는 스킬 중 하나입니다.
00:02:00저희는 다른 디자인 스킬들도 활용하며, 실제로 작업 흐름에 쓰는 것들은
00:02:06커뮤니티에 공유해 드린 AI Labs Pro 디자인 시스템에 들어있습니다. 이러한 모든 스킬은
00:02:11모델에게 수행할 작업 지침을 주고 피해야 할 흔한 패턴을 알려줍니다. Hallmark 같은 일부 스킬은
00:02:16성공적인 인기 사이트들의 레퍼런스도 포함하고 있어, 모델이 디자인 작업 중
00:02:21검증된 디자인으로부터 영감을 얻을 수도 있습니다. 그러나 대부분의 레퍼런스와
00:02:26지침은 마크다운 파일로 작성되어 있어, 에이전트는 이 텍스트만 보고
00:02:30완성된 페이지의 모습을 추론해내야 합니다. 어떤 폰트를 쓰고 페이지를 어떻게 배치할지 글로는 읽을 수 있지만,
00:02:36텍스트 설명만으로는 모든 요소가 어우러졌을 때 사이트가 어떤 모습일지 모델이 파악하기 어렵습니다.
00:02:41또한 모델은 사이트에 필요한 디자인의 느낌을 제대로 이해하지 못한 채,
00:02:46그저 지침에 적힌 항목들을 기계적으로 디자인할 뿐입니다. 이것이 바로 단순한 디자인 지침을 넘어선
00:02:51더 많은 것을 제공하는 Inspo가 필요했던 이유입니다. 본격적으로 툴을 살펴보기에 앞서,
00:02:56채널 구독과 좋아요를 눌러주시면 감사하겠습니다. 이러한 작은 응원이 저희에게는 큰 힘이 됩니다.
00:03:01Inspo는 단순한 디자인 지침 대신 실제 웹사이트 데이터를 코딩 에이전트에 제공함으로써
00:03:07앞서 언급한 문제를 해결하는 MCP 서버입니다. 이제 이 툴을 통해 에이전트는
00:03:13제작하려는 사이트 유형에 어떤 디자인이 효과적이었는지 파악하고, 실제 디자인을 깊이 있게
00:03:18분석할 수 있게 됩니다. 그리고 이를 바탕으로 새로운 디자인을 만들어냅니다. Inspo에는 832개 사이트의
00:03:232,320개 페이지가 이미지 형태로 캡처되어 포함되어 있습니다. 또한 데스크톱과 모바일 화면이
00:03:29모두 캡처되어 있어, 작은 화면에 맞게 디자인이 어떻게 변하는지 확인하며
00:03:36모든 기기 규격에 맞춘 디자인을 설계할 수 있습니다. 네비게이션 메뉴나 가격 정책 섹션처럼
00:03:42페이지 내 개별 요소에 대한 레퍼런스도 갖추고 있습니다. 덕분에 에이전트는 특정 부분을 작업할 때
00:03:47해당 구성 요소의 다양한 예시를 찾아볼 수 있으며, 사용하고자 하는 요소의 코드도 직접 가져올 수 있습니다.
00:03:53무엇보다 중요한 점은, 포함된 모든 사이트에 design.md 파일이 제공되어
00:03:58에이전트가 한눈에 이해하기 쉽도록 디자인을 구조화하여 설명해 준다는 것입니다. 정확한 색상값의 컬러 팔레트와
00:04:04사용된 폰트, 텍스트 크기 및 간격 같은 추출 데이터가 상세히 담겨 있습니다.
00:04:09에이전트는 단순히 이미지나 눈대중에 의존해 폰트와 스타일을 짐작하는 대신,
00:04:15이 파일을 활용해 디자인 구성 요소를 명확히 파악할 수 있습니다. 메인 랜딩 페이지에서
00:04:20다양한 스타일의 디자인을 가진 수많은 사이트들을 직접 확인해 보실 수 있습니다.
00:04:25원본 사이트에 방문할 수도 있으며, 완전 무료이므로 계정 생성이나 API 키 입력 없이도
00:04:30에이전트와 바로 연결하여 사용할 수 있습니다. 그럼 Inspo를 설치하기 전에,
00:04:35내부적으로 어떻게 작동하는지 원리를 알아볼 필요가 있습니다. 사용자 프롬프트를 받으면
00:04:40에이전트는 recommend라는 툴을 통해 만들고자 하는 웹사이트에 대한 설명을 Inspo로 전달합니다.
00:04:46그러면 Inspo는 수집된 페이지에서 일치하는 검색 항목을 찾고, 가장 연관성이 높은 결과물들의
00:04:51레이아웃 구조를 분석합니다. 그중 상위 결과에서 가장 자주 쓰인 레이아웃을 선택하고
00:04:56해당 레이아웃이 적용된 예시를 최대 5개까지 반환합니다. 따라서 에이전트는 유사한 구조를 가진
00:05:01여러 레퍼런스를 비교한 뒤, 페이지 디자인 방식을 최종 결정하게 됩니다.
00:05:06이러한 예시와 함께 Inspo는 연관된 구성 요소 레퍼런스와 추천 컬러 팔레트도 함께 전달합니다.
00:05:12응답 데이터에는 최대 3장의 스크린샷이 포함되므로, 에이전트가 실제로 페이지를 보면서
00:05:17디자인 요소들이 어떻게 조화를 이루는지 확인할 수 있습니다. 취합된 모든 정보는 에이전트에 전달되고,
00:05:22에이전트는 이를 기반으로 요청된 결과물을 구현합니다. Inspo는 산업군별,
00:05:27페이지 레이아웃별 검색 필터와 함께 라이트/다크 테마 설정 옵션도 제공합니다.
00:05:33따라서 프롬프트에 원하는 구체적인 방향을 지정하면, 에이전트가 이 필터들을 활용해
00:05:37결과 범위를 좁히고 한층 더 적합한 레퍼런스를 찾아냅니다. 적절한 레퍼런스를 찾은 에이전트는
00:05:43본격적인 개발에 앞서 해당 페이지들과 design.md 파일의 상세 정보를 요청합니다.
00:05:49이때 Inspo는 그중 단 몇 개만 집중적으로 연구하도록 지시하는데, 검색을 추가할 때마다
00:05:54대화 맥락에 더 많은 결과가 쌓여 정보가 과도해지면, 모델이 어떤 스타일을 선택해야 할지 혼란을 느낄 수 있기 때문입니다.
00:06:00따라서 참고할 레퍼런스가 충분히 확보되면 더 이상 추가 검색을 진행하지 않습니다.
00:06:04설치에 들어가기에 앞서, 후원사인 Manid의 짧은 광고를 전해드립니다.
00:06:09실제 프로젝트를 진행하다 보면 결국 보유하지 않은 데이터가 필요해지기 마련입니다.
00:06:13그리고 이를 얻으려면 또 다른 API에 가입하고 키를 직접 연결해야 하는 번거로움이 있죠. Manid는 에이전트 툴을 위한 오픈 라우터입니다.
00:06:19하나의 키로 모든 API에 접근할 수 있어 복잡한 설정 과정을 건너뛸 수 있습니다. 스킬을 Claude Code에 추가한 뒤
00:06:25키워드 검색량이나 프로필 뒤의 연락처 정보 등 개발에 필요한 데이터를 정확히 요청하기만 하면 됩니다.
00:06:30그러면 적절한 엔드포인트를 찾아 호출을 실행하고, 불과 몇 초 만에 세션으로 데이터를 불러옵니다.
00:06:36서버 구축이나 환경 설정도 필요 없습니다. 동일한 단 하나의 키로 1,900개 이상의 추가 툴을 이용할 수 있습니다.
00:06:43웹 스크래핑, 연락처 조회, 검색 데이터 분석, 동영상 생성 등 이후 어떤 작업이든 가능합니다.
00:06:48Stripe이 OpenRouter를 70억 달러에 인수했듯이, Manid는 에이전트 툴 분야에서 동일한 개념을 제공합니다.
00:06:54하나의 키로 모든 API를 아우르며, 구독 요금제도 없습니다. 호출 건당 비용이 발생하므로
00:06:59사용량에 맞춰 비용이 조정되며, 가입 즉시 무료 크레딧이 제공됩니다. 설명란의 링크를 통해 키를 발급받고
00:07:04오늘 바로 첫 호출을 시작해 보세요. 이제 Inspo를 설치하려면,
00:07:09영상 설명란의 공식 웹사이트에 안내된 설치 명령어를 복사하여 터미널에 붙여넣기만 하면 됩니다.
00:07:14명령어를 실행하면 인스톨러가 이미 설치된 코딩 에이전트를 자동으로 감지하고
00:07:19모든 에이전트에 Inspo를 추가할지 물어봅니다. 원한다면 전체에 설치할 수도 있습니다.
00:07:24하지만 특정 에이전트에만 설치하고 싶다면, 현재 버전의 기본 설치 경로로는 선택이 불가능합니다.
00:07:29'no'를 입력하면 설치가 즉시 취소되어 버립니다. 따라서 특정 코딩 에이전트에만 설치하려면
00:07:34client 플래그와 함께 해당 코딩 에이전트의 이름을 지정하여 설치 명령어를 실행해야 합니다.
00:07:39Inspo는 사용자 영역(user scope)에 설치되므로, 어떤 폴더에서든 에이전트를 열 때마다 사용할 수 있으며
00:07:44특정 프로젝트에만 제한되지 않습니다. 설치가 완료되면
00:07:49사용 중인 에이전트를 재실행하고 mcp 명령어를 실행하세요. 그러면 기존에 설치했던
00:07:54다른 MCP 서버들과 함께 Inspo가 목록에 표시되며, 에이전트가 활용할 수 있는 15개의 툴이 모두 제공됩니다.
00:08:00따라서 Inspo를 사용하려면 만들고자 하는 사이트에 대한 프롬프트를 에이전트에 전달하기만 하면 됩니다.
00:08:05저희는 패션 브랜드 데모 랜딩 페이지로 테스트를 진행했습니다. 프롬프트에는 본격적인 작업 전에
00:08:11선택할 수 있는 몇 가지 스타일 시안을 먼저 제안해 달라고 요청했습니다. 대안을 요청하는 것이 필수 사항은 아니지만,
00:08:15디자인 착수 전에 먼저 물어보도록 설정하면, 전체 사이트가 다 완성되기 전에 작업을 멈추고
00:08:20다른 방향을 요구할 수 있습니다. 프롬프트를 입력했을 때, Inspo를 쓰라고 명시적으로 요청하지 않았음에도
00:08:25에이전트는 미리 연결해 둔 Inspo MCP를 알아서 호출했습니다. 에이전트는 전달받은 프롬프트를 그대로 보내는 대신,
00:08:31요청된 스타일과 관련된 주요 키워드들을 사전에 추가로 덧붙입니다.
00:08:36이는 구현하고자 하는 사이트에 대한 설명이 다소 모호하거나 부족할 때 특히 유용하며,
00:08:40검색 범위를 원하는 방향으로 정교하게 좁혀 MCP가 정확히 알맞은 레퍼런스를 찾을 수 있도록 돕습니다.
00:08:46요청에 맞는 정확한 참고 자료를 찾아낼 수 있습니다. 그런 다음 반환된 참고 자료를 분석하고
00:08:50공통적인 패턴을 비교하여 해당 스타일에 어떤 디자인 요소가 필요한지 파악합니다.
00:08:55저희의 경우, 에이전트는 약 24개 사이트를 분석하고 해당 레퍼런스를 바탕으로 디자인 결정을 내렸습니다.
00:09:01에이전트는 세 가지 디자인 방향을 제시하고 선택할 수 있도록 각 안을 설명해 주었습니다.
00:09:06방향을 선택하자 페이지 제작에 들어갔고, 제작이 완료된 후
00:09:11결과물은 디자인 스킬을 썼을 때조차 모델 단독으로는 만들어내지 못했던 느낌을 보여주었습니다.
00:09:16페이지의 첫 섹션은 모델들이 흔히 하듯 전체 너비에 거대한 텍스트를 넣는 대신 이미지를 활용했습니다.
00:09:23에이전트는 저희가 요청한 테마에 맞춰 볼드한 폰트와 뉴트럴 컬러를 사용했죠.
00:09:27에이전트에게 참고용 사이트를 준 적이 있다면, 영감을 얻는 게 아니라 대부분 그 디자인을 그대로 복사해 버린다는 걸 아실 겁니다.
00:09:37그래서 저희 페이지도 그대로 복사했는지, 아니면 여러 레퍼런스의 스타일을 진짜 반영했는지 확인해보고 싶었습니다.
00:09:43이를 위해 어떤 사이트를 참고했는지 물어보았고, 에이전트는 사용한 모든 사이트의 링크를 제공했습니다.
00:09:49그 사이트들을 확인해보니 서로 완전히 다른 모습이었고, 저희 페이지도 어느 한 곳을 똑같이 베끼지 않았습니다.
00:09:54히어로 섹션 스타일은 한 사이트에서, 버튼은 다른 사이트에서, 상품 배치 방식은 또 다른 곳에서 빌려왔더군요.
00:10:00결국 에이전트는 여러 레퍼런스의 요소를 조합해 어디와도 똑가지 않은 독자적인 디자인을 만들어냈습니다.
00:10:05또한 모바일 레이아웃도 참고하여, 작은 화면에서 컨텐츠를 배치하는 예시까지 파악했습니다.
00:10:12덕분에 모바일 화면으로 확인했을 때도 디자인이 아주 훌륭하게 잘 작동했습니다.
00:10:16하지만 디자인이 원하던 것에 가까워졌음에도 페이지는 여전히 정적이었고 애니메이션이 없었습니다.
00:10:22완성도 높은 사이트를 만드는 요소 중 하나가 애니메이션인데, Inspo는 이 부분을 처리하지 못합니다.
00:10:26이를 해결하기 위해 저희는 UISkills MCP 서버를 사용했습니다.
00:10:29이 MCP는 다양한 제작자들의 디자인 스킬 라이브러리에 에이전트가 접근할 수 있게 해주므로,
00:10:34작업 중인 사이트에 맞는 스킬을 찾아달라고 에이전트에 요청하면,
00:10:38라이브러리를 탐색해 요청에 딱 맞는 스킬로 범위를 좁혀줍니다.
00:10:42이 MCP는 이전 영상에서도 다룬 적이 있습니다.
00:10:46그래서 해당 MCP를 사용해 사이트에 애니메이션을 추가하라고 에이전트에 프롬프트를 입력했습니다.
00:10:51프롬프트를 입력하자 Emil Kowalski의 애니메이션 스킬과 Meng To의 스크롤 애니메이션 스킬을 불러왔습니다.
00:10:57그리고 에이전트가 애니메이션을 추가했는데, 타이밍도 서로 딱 맞게 적용되었습니다.
00:11:01다른 여러 사이트에서도 Inspo를 테스트해 보았는데, 대부분 훌륭한 결과를 보여주었습니다.
00:11:07이 툴이 사이트를 꽤 잘 디자인해주긴 했지만, 신규 툴이다 보니 몇 가지 문제도 있었습니다.
00:11:12테스트 중에 두 번 정도, 우리가 원하는 사이트 종류를 명확히 밝혔음에도 엉뚱한 레퍼런스를 가져왔습니다.
00:11:19Inspo가 가져온 레퍼런스는 관련이 전혀 없는 엉뚱한 유형의 사이트들이었습니다.
00:11:24한 테스트에서는 커피 구독 사이트를 요청했지만, 건강이나 비즈니스 사이트 레퍼런스가 들어왔죠.
00:11:30식음료 산업 필터를 선택하고 다시 검색했을 때야 비로소 커피 사이트 레퍼런스를 얻을 수 있었습니다.
00:11:36또한 제공하는 스크린샷에도 일부 문제가 있습니다.
00:11:38일부 스크린샷은 사이트를 열었을 때 뜨는 팝업 창에 디자인 일부가 가려져 있었습니다.
00:11:43이전 테스트 중 한 스크린샷은 페이지 중앙에 개인정보 팝업이 떠 있어서 에이전트가 그 뒤의 디자인을 볼 수 없었고,
00:11:50결국 에이전트 자체 생각만으로 그 부분 디자인을 만들어버렸는데, 이건 이 툴을 설치한 목적에 어긋나는 일이죠.
00:11:57그렇기 때문에 앞서 말씀드린 것처럼, 저희가 테스트할 때 했던 방식대로 먼저 디자인 방향을 요청해야 합니다.
00:12:03그래야 잘못된 방향으로 나아갈 때 이를 포착하고 프롬프트를 다시 입력해 문제를 수정할 수 있으니까요.
00:12:09오늘 보여드린 디자인 시스템과 기타 자료는 저희 커뮤니티인 AI Labs Pro에서 이용하실 수 있습니다.
00:12:16저희 활동이 유익했거나 채널을 후원하고 싶으시다면 이 방법이 가장 좋습니다.
00:12:20링크는 더보기란에 있습니다.
00:12:22이것으로 이번 영상을 마치겠습니다.
00:12:24채널을 후원하고 계속해서 이런 영상을 만들 수 있게 도와주고 싶으시다면 아래 Super Thanks 버튼을 활용해 주세요.
00:12:30시청해 주셔서 감사드리며, 다음 영상에서 인사드리겠습니다.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기