00:00:00새로운 도구 출시와 모델 업데이트가 거듭될수록 AI 디자인은 점점 더 발전하고 있지만,
00:00:04단순히 도구 하나에만 의존해서 앱이 멋지게 나오길 바라는 것만으로는 좋은 디자인이 탄생하지 않습니다.
00:00:09디자인을 개선하는 것은 항상 여러 도구와 리소스의 조합이며,
00:00:12더 중요한 것은 용도에 맞는 적절한 도구를 사용하는 것입니다.
00:00:16구글의 AI 디자인 도구인 Stitch가 최근 아주 멋진 업그레이드를 통해 UI 디자인을 훨씬 수월하게 만들었습니다.
00:00:21또한 Vercel에서도 최근 Claude의 크롬 확장 프로그램을 능가하는 무언가를 출시했는데요,
00:00:26이제 그것은 저의 브라우저 테스트 필수 도구가 되었습니다.
00:00:29오늘 이야기할 내용이 아주 많습니다. 저도 이 도구들의 조합이
00:00:32이토록 탄탄한 디자인을 결과물로 낼 줄은 예상하지 못했거든요.
00:00:34Google Stitch는 이제 AI 에이전트를 연결하기 위한 MCP로 제공되어,
00:00:39에이전트를 통해 프로젝트를 생성 및 관리하고 디자인까지 만들 수 있게 되었습니다.
00:00:43이번 업데이트 덕분에 제가 직접 Stitch에 맞춤형 프롬프트를 줄 필요 없이 Claude가
00:00:48대신 해주게 되었습니다. 프로젝트 관리, 신규 프로젝트 생성,
00:00:53그리고 모든 활성 프로젝트를 불러오는 등 다양한 기능을 제공합니다. 리스트 화면을 사용하거나
00:00:57프로젝트와 화면 정보를 가져와 프로젝트를 관리할 수 있죠. 또한 에이전트가 텍스트 프롬프트로 새 디자인을 만들 수도 있습니다.
00:01:02설치 과정은 문서에 단계별로 잘 설명되어 있습니다.
00:01:06curl을 사용하여 Google Cloud SDK를 설치해야 하는데, 저는 맥을 사용하기 때문에
00:01:11brew를 통해 Google Cloud CLI를 다운로드하고 설치했습니다.
00:01:14사용자 계정과 애플리케이션 계정으로 각각 한 번씩, 총 두 번 로그인해야 합니다.
00:01:19Google Cloud 내부 프로젝트에 연결하여 Stitch API를 활성화해야 하기 때문이죠.
00:01:24디자인 생성에 해당 프로젝트의 리소스를 사용하기 때문입니다.
00:01:27전체 과정을 마치면 Stitch를 어떤 에디터에든 연결할 수 있습니다.
00:01:31저는 Claude Code를 사용했기에 그 안에 설정했고, 모든 도구를 바로 사용할 수 있었습니다.
00:01:35그런데 누군가가 이 길고 복잡한 설정 과정을 단순화한 Stitch MCP를 만들어 주었습니다.
00:01:41Google Cloud 설치부터 프로젝트 설정까지 모든 과정을 알아서 처리해 줍니다.
00:01:45다만 이것은 공식적인 것은 아닙니다. 독립적인 실험적 도구이지만,
00:01:50현재로서는 공식 도구만큼이나 아주 잘 작동합니다. 무엇을 만들든 간에
00:01:54구현 전의 계획 단계는 필수적입니다. 저는 모의 기술 면접 앱을 만들고 있었는데,
00:01:59기술 면접뿐만 아니라 테크 산업의 취업을 목표로 하는
00:02:03다양한 유형의 면접을 아우르는 앱입니다. 작업을 진행하면서
00:02:08Stitch MCP의 작동 방식과 제 디자인 프로세스에 더 잘 활용하는 방법에 대해 여러 문제점을 발견했습니다.
00:02:13저는 그 모든 규칙을 앱 소스 코드와 함께 Claude.md 파일에 담아
00:02:18AI Labs Pro에 올려두었습니다. 모르시는 분들을 위해 말씀드리자면, 이곳은 저희가 최근 런칭한 커뮤니티로
00:02:23이번 영상과 이전의 모든 영상에서 사용된 프롬프트, 재사용 가능한 커맨드,
00:02:28프로젝트용 스킬 등 모든 리소스를 한곳에 모아둔 곳입니다. 저희 작업이 가치 있다고 생각하시고
00:02:33채널을 후원하고 싶으시다면 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:02:38저는 Claude Code의 플랜 모드를 사용하여 앱 기획을 하는 것을 선호합니다. 제가 던진 아이디어를 바탕으로
00:02:43모든 측면을 반복 검토하며 상세 문서를 작성해주기 때문이죠. 물론 여러분은 각자 선호하는 IDE로 계획을 세우셔도 됩니다.
00:02:48저는 Claude Code 플랜 모드에 앱 아이디어를 넣고 UI 가이드를 만들어 달라고 요청했습니다.
00:02:53흔한 AI 디자인처럼 보이지 않도록 특별히 신경 써달라고 했죠.
00:02:58시간이 꽤 걸리는 작업이었음에도 전체 기획 과정을 꼼꼼히 거쳤습니다. 기획안을 철저히 읽는 것은 매우 중요합니다.
00:03:03제 입맛에 맞게 기획안을 수정하고 많은 변경 사항을 반영해야 했기 때문입니다.
00:03:09제가 완전히 만족할 때까지 계속해서 기획안을 다듬었고,
00:03:14마침내 제가 딱 원하던 형태의 플랜을 얻었습니다. 디자인 기획이 확정되었으니
00:03:19이제 실제로 구현할 차례입니다. 솔직히 저는 디자인 역량만큼은
00:03:24Claude 모델보다 Gemini가 더 뛰어나다고 생각합니다. 그래서 Claude에게 방금 생성한 기획안을 토대로
00:03:29Stitch MCP를 사용하여 새 프로젝트를 시작하고 정확한 디자인을 만들라고 시켰습니다. Claude는 MCP 도구를 사용해
00:03:35새 프로젝트를 생성하고 섹션들을 만들기 시작했습니다. 프로젝트 ID로 프로젝트를 식별하고
00:03:40Stitch에 상세 프롬프트를 보냈습니다. Stitch는 이를 받아 화면 생성을 시작했죠.
00:03:45첫 번째 섹션 생성에는 Gemini 3 Flash 모델이 사용되었습니다. 한 가지 아쉬웠던 점은
00:03:50웹 디자인의 일반적인 방식인 하나의 긴 디자인을 만드는 대신, 랜딩 페이지의 각 섹션을
00:03:55개별적으로 프롬프트를 보내 생성했다는 것입니다. 이렇게 되면 나중에 하나의 앱으로 합칠 때
00:04:00문제가 생길 수 있습니다. 그래서 Claude에게 개별 컴포넌트가 아닌 하나의 긴 페이지 디자인으로 만들어 달라고 요청했습니다.
00:04:05그러자 Claude는 아주 상세한 프롬프트를 생성했고, Stitch가 이를 전달받아
00:04:10섹션별 접근 방식의 아이디어를 그대로 유지하면서 전체 랜딩 페이지를 생성해 냈습니다.
00:04:15디자인에서 특히 마음에 들었던 부분은 주석이나 터미널 명령 같은 요소를 활용해
00:04:20개발자들에게 친숙한 느낌을 주었다는 점입니다.
00:04:25Stitch의 프리뷰 기능을 사용해 여러 플랫폼에서 UI가 어떻게 보이는지 확인해 보았는데,
00:04:30매끄러운 호버 효과까지 구현되어 있었습니다. 디자인은
00:04:34반응형으로 제작되어 모바일과 데스크톱 모두에서 잘 작동했습니다. Stitch가 생성한 디자인에
00:04:40만족한 뒤, Claude Code로 작업 중이던 저의 Next.js 프로젝트로 옮기고 싶었습니다.
00:04:45Claude에게 Stitch MCP를 사용하여 전체 랜딩 페이지 디자인 코드를 가져와서
00:04:51새로 생성한 Next.js 프로젝트에 구현해 달라고 요청했습니다.
00:04:56Claude는 get screen 도구를 사용하여 화면 정보를 가져왔습니다. 이 도구는 코드 다운로드 링크를 반환하므로,
00:05:01Claude는 해당 링크에 curl 명령을 사용하여 코드를 추출했습니다. HTML을 확보하고 나니
00:05:06기존 Next.js 프로젝트에 통합하는 것은 간단했습니다. 디자인을 통합하기 시작했는데,
00:05:11처음에는 main page .tsx 파일 하나에 모든 코드를 쏟아붓는 방식으로 작업하더군요.
00:05:17이는 React 기반 애플리케이션의 권장 표준인 적절한 컴포넌트 구조를 따르지 않는 방식입니다.
00:05:22일단은 구현된 UI가 어떻게 보이는지 확인하기 위해 개발 서버를 실행했습니다. 구현된 디자인은
00:05:26히어로 섹션의 텍스트 배치를 제외하고는 Stitch가 생성한 것과 거의 똑같았습니다.
00:05:31모든 호버 효과와 벤토 그리드 애니메이션, 배경의 패럴랙스 스크롤까지 잘 구현되어 있었습니다.
00:05:36파일 하나에 뭉쳐진 코드를 해결하기 위해, Claude에게 모듈화를 위해
00:05:41적절한 컴포넌트 구조를 사용해 달라고 요청했습니다. 그러자 코드를 리팩토링하여 깔끔하고
00:05:46잘 구조화된 UI 컴포넌트와 페이지 세트로 재구성해주어 관리하기 훨씬 편해졌습니다.
00:05:51Claude Code와 Stitch의 도움으로 터미널 감성의 개발자 분위기가 물씬 풍기는
00:05:57완성도 높은 앱을 만들 수 있었습니다. 하지만 여전히 몇 가지 UI 문제가 남아있었습니다.
00:06:02예를 들어, 기술 면접 세션 중에 사용자가 코드를 직접 입력해야 하므로 코드 패널은 편집 가능해야 합니다.
00:06:08또한 질문이 상단에 표시되어야 하는데, 현재 위치는 사용자 경험(UX) 측면에서 좋지 않았습니다.
00:06:14애플리케이션 테스트를 위해 Vercel의 Agent Browser를 사용했습니다. 이것은 Rust와 Node.js 기반의
00:06:19AI 에이전트 전용 CLI 도구로, 기존의 브라우저 자동화 도구보다 훨씬 빠릅니다.
00:06:24설치는 간단합니다. 설치 명령어를 실행하면 시스템 전체에 글로벌하게 설치됩니다.
00:06:29현재는 크로미움 기반 브라우저로 제한되어 있으며 파이어폭스나 사파리에서는 사용할 수 없습니다.
00:06:34Agent Browser는 Claude의 크롬 확장 프로그램이나 Playwright, Puppeteer 같은 도구보다 뛰어난 기능을 제공합니다.
00:06:40크롬 확장 프로그램은 브라우저를 전체 실행하고 스크린샷을 찍은 뒤,
00:06:44시각적으로 픽셀을 매핑하며 UI를 탐색하는 방식이기 때문입니다. 반면,
00:06:50Agent Browser는 bash 명령어로 실행되는 CLI 도구이며 스크린샷이 아닌 스냅샷을 사용합니다.
00:06:55스냅샷은 기본적으로 각 컴포넌트를 식별할 수 있는 셀렉터 태그가 붙은
00:07:00페이지 전체의 접근성 트리입니다. 에이전트는 이 셀렉터를 사용하여 페이지를 효율적으로 탐색합니다.
00:07:05기존 브라우저와 세션을 공유하지 않고 별도의 브라우저에서 실행되므로,
00:07:10사용자의 활성 세션이 필요한 작업은 수행할 수 없습니다. 이는 사용자의 브라우저 내부에서
00:07:14대신 작업을 수행할 수 있는 Claude 확장 프로그램과는 다른 점입니다.
00:07:19사용 가능한 명령어를 보려면 핵심 명령어 목록이 자세히 나와 있는 GitHub 저장소를 확인해 보세요.
00:07:24UI 탐색, 셀렉터 사용, 마우스 제어 시뮬레이션, 쿠키 및 스토리지 관리,
00:07:30네트워크 활동 모니터링 방법 등이 설명되어 있습니다. 제 앱을 위해 Claude.md 파일을 추가하고
00:07:35모든 종류의 테스트에 Agent Browser 도구를 사용하도록 지시했습니다. 또한 명령어를 모를 때는
00:07:40help 명령어를 사용하라고 일러두었죠. 이러한 규칙과 전체 워크플로우 가이드라인은
00:07:45AI Labs Pro에서도 확인하실 수 있습니다. 이 도구는 기본적으로 헤드리스 브라우저 자동화 도구이지만,
00:07:50headed 옵션을 활성화하면 브라우저 창이 뜨도록 실행하여 작동 과정을 직접 볼 수도 있습니다.
00:07:55저는 Claude에게 헤디드 모드로 브라우저를 사용하여 앱 UI를 테스트해 달라고 했습니다.
00:07:59Claude는 먼저 help 명령어로 사용 가능한 명령어를 확인한 뒤 브라우저를 열었습니다.
00:08:05Claude의 'browser use' 기능과 유사한 방식을 사용했는데,
00:08:09Claude 크롬 확장 프로그램처럼 섹션별로 스크린샷을 찍는 것이 아니라 전체 페이지 스냅샷을 찍는 방식입니다.” 덕분에
00:08:14정확도를 유지하면서도 테스트 속도를 획기적으로 높일 수 있었습니다.
00:08:19에이전트는 앱 전체를 탐색하고 여러 UI를 이동하며 시각적 레이아웃을 확인하는 등
00:08:24다양한 기능을 테스트하는 작업을 수행했습니다. 전체 테스트 과정을 단 4분 만에 마쳤는데,
00:08:29스크린샷 방식이 아닌 접근성 트리에 의존하기 때문에 다른 자동화 도구보다 훨씬 빨랐던 것이죠.
00:08:34또한 에이전트는 코드 에디터가 편집 가능해야 한다는 점을 스스로 파악하고
00:08:39즉시 수정 사항을 구현했습니다.
00:08:43그러고는 스냅샷을 찍어 에디터 셀렉터를 찾고, Agent Browser의 클릭 및 타이핑 기능을 사용해
00:08:48코드의 일부를 수정해 봄으로써 수정이 제대로 되었는지 브라우저에서 직접 테스트했습니다.
00:08:53준비한 내용은 여기까지입니다. 저희 채널을 응원하고
00:08:57이런 영상이 계속 제작될 수 있도록 돕고 싶으시다면 AI Labs Pro에 가입해 주세요.
00:09:02시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.