Claude Code가 모든 쇼핑파이 에이전시를 끝장낸 이유
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Shopify 스토어 구축이 그 어느 때보다 쉬워졌습니다. 이제
00:00:04코딩에 사용하는 AI 에이전트와 결합하여 모든 것을 처리하게 할 수 있기 때문이죠. 하지만 Claude 코드를
00:00:09스토어에 단순히 연결하는 것만으로는 충분하지 않습니다. 흔해 빠진
00:00:14다른 Shopify 스토어와 똑같아 보이지 않는 쇼핑몰을 만들려면 몇 가지 핵심 요소를 함께 조합해야 합니다.
00:00:19이 영상이 끝날 때쯤이면, 여러분만의
00:00:23Shopify 파이프라인을 엔드 투 엔드로 구축하여 바로 제품 판매를 시작할 수 있는 전체 워크플로우를 알게 되실 겁니다.
00:00:28스토어 구축을 준비하려면 몇 가지 단계를 따라야 합니다. 첫 번째로
00:00:32필요한 것은 Shopify 파트너 계정입니다. 브라우저로 이동해 가입하세요. 파트너
00:00:37계정이 중요한 이유는 플랫폼을 실험할 수 있는 개발 도구에 액세스할 수 있게 해주기 때문입니다.
00:00:41기본적으로 스토어를 위한 샌드박스 환경으로, 평소처럼 앱을 빌드할 수 있으며
00:00:46가상 결제나 테스트 사용자 같은 개발 도구를 제공하여 앱을 출시하기 전에 미리 테스트해 볼 수 있습니다.
00:00:51나중에 앱이 판매를 시작할 준비가 되었다고 판단되면
00:00:56결제 통합을 추가하기만 하면 개발 계정을 상점 계정으로 쉽게 옮겨
00:01:01실제 사람들에게 실제 제품을 판매하기 시작할 수 있습니다.
00:01:05자, 이제 프로젝트 내에 앱을 생성했다면 Shopify CLI를 설치할 차례입니다. CLI 문서에서
00:01:10설치 명령어를 복사하여 터미널에서 실행하면 됩니다. 명령어를 실행하면
00:01:15React 앱과 확장 앱 중 하나를 선택하라는 메시지가 뜹니다. 저희는 주로 React로 개발하고
00:01:20그 방식이 커스터마이징하기 더 쉽기 때문에 React 앱을 선택했습니다. 그 후에는
00:01:26사용할 언어를 선택할 수 있는데, JavaScript에 비해 타입 안정성과 보안 기능이 뛰어나 TypeScript를 선택했습니다.
00:01:31이 설정 과정을 마치면 앱 실행에 필요한 모든 종속성이 설치됩니다.
00:01:37종속성 설치가 완료되면 프로젝트가 준비되며, 실행했을 때
00:01:41기본 앱 템플릿이 보일 텐데, 여기서부터 추가적인 변경 작업을 시작하면 됩니다. 자, CLI 설치가
00:01:46끝났으면 설치해야 할 것들이 더 있습니다. 빌드 과정을 보완해 줄 Shopify AI 툴킷부터 시작하죠.
00:01:51가장 중요한 부분은 MCP이며, 이를 설치하는 명령어는
00:01:56모든 AI 코딩 에이전트를 위한 MCP 문서에서 찾을 수 있습니다. 저희는 Claude 코드를 사용 중이었기에 Claude용
00:02:03명령어를 복사하여 MCP를 설치했습니다. 여러분도 선택한 코딩 도구로 똑같이 하시면 됩니다. MCP가
00:02:08설치되면 Claude에게 도구를 노출하지만, MCP만으로는 충분하지 않습니다. MCP에 포함된 모든 도구는
00:02:14기본적으로 Claude가 더 잘 빌드하도록 돕는 용도일 뿐이기 때문입니다. MCP는 클라우드에서 실행되는
00:02:19여러분의 스토어에 변경 사항을 푸시할 방법이 없습니다. 그저 Shopify API에 대한 문서와 지식, 그리고 기타 검증 기능만 포함하고 있죠. 그래서
00:02:25이 설정만으로는 빌드하기에 부족합니다. 바로 그 때문에 CLI가 중요한 것입니다. CLI가
00:02:30Shopify 앱과 로컬 환경 사이의 가교 역할을 하기 때문이죠. MCP 외에도
00:02:35플러그인도 설치해야 합니다. 플러그인이 중요한 이유는 여러 에이전트와 기술이 하나로 묶여 있기 때문입니다.
00:02:40설치 명령어를 따라 설치할 수 있습니다. 설치 명령어를 실행한 후,
00:02:44플러그인 다시 로드 명령어를 실행하면 모든 에이전트와 기술을 사용할 준비가 됩니다.
00:02:49이제 메인 설정은 끝났지만, 본격적으로 빌드를 시작하기 전에 프로젝트
00:02:53자체를 준비해야 합니다. 가장 먼저 설정할 것은 Claude.md 파일인데, 이는 기본적으로
00:02:59에이전트가 따라야 할 관행을 안내하는 파일입니다. 저희가 추가한 Claude.md에는 저희가
00:03:05항상 강조하는 모든 모범 사례가 담겨 있습니다. 이에 대해서는 채널에 Claude.md 파일의 모범 사례를
00:03:10다룬 전용 전체 영상이 있으니 확인해 보세요. Claude.md 외에도 몇 가지
00:03:15준비해야 할 것들이 더 있습니다. 기본적으로 Claude는 이미지를 자리 표시자로 사용하기 위해 SVG를 생성합니다. 하지만
00:03:21이런 SVG는 우리 샵의 비주얼을 만족시키지 못하기 때문에 이를 보완할 기술을 만들었습니다. 저희는
00:03:26Gemini 이미지 생성 기술을 만들었는데, 이를 설치하면 어떤 에이전트든 Gemini CLI를 호출하고
00:03:32웹사이트용 이미지를 생성하라는 프롬프트를 보낼 수 있습니다. 이 기술에는 Gemini CLI 호출 방법과
00:03:38생성된 이미지를 저장할 위치에 대한 지침이 포함되어 있습니다. Gemini CLI는 이미지 생성이 통합되어 있어서
00:03:44별도의 API 키가 필요 없으므로 Gemini CLI 인증에만 의존하여 이 기술을 직접 사용할 수 있습니다.
00:03:50이미지 생성 외에도 저희 편의를 위해 또 다른 기술을 구축했습니다. 프로토타입
00:03:55기술은 에이전트에게 디자인 변경을 요청할 때마다 먼저 미리 볼 수 있는 HTML 파일을
00:04:01생성한 다음, 확인을 거치면 그 변경 사항을 앱 디자인에 적용하는 방식으로 작동합니다. 이
00:04:05skill.md 파일에는 두 단계로 나뉜 전체 워크플로우에 대한 세부 정보가 들어 있습니다. 이런 기술들을
00:04:11준비한 다음에는 .claud 폴더 내 settings.json에서 구성하고 연결해야 할 몇 가지 후크가 있습니다.
00:04:17이 후크들은 기본적으로 Claude를 위한 가드레일 역할을 합니다. 예를 들어, 사전 도구 사용 스크립트는
00:04:22승인 없이 Claude가 변경 사항을 앱에 직접 푸시하는 것을 막아줍니다. 원하는 만큼
00:04:28많은 후크를 구성할 수 있습니다. 자, 이 설정까지 마쳤으니 이제 실제로 앱을 빌드할 준비가 되었습니다. 하지만 계속하기
00:04:33전에 저희 스폰서인 Willow Voice의 말씀을 전합니다. 하루 대부분을 이메일,
00:04:37슬랙 메시지, 문서, 프롬프트를 타이핑하며 보낸다면, 여러분은 필요한 것보다 훨씬 느리게 일하고 있는 겁니다. Willow Voice는
00:04:42컴퓨터 어디에서나 타이핑 대신 말하게 해주며, 텍스트가 즉시 나타납니다. 내장된
00:04:47받아쓰기 기능이 단어를 자꾸 틀리는 것과는 다릅니다. Willow는 3배 더 정확하고,
00:04:52문단과 구조를 갖춰 적절하게 포맷팅까지 해줍니다. 가장 좋은 점은 여러분이 하는 작업에 맞춰 적응한다는 것입니다.
00:04:57이메일을 쓸 땐 격식을 갖추고, 슬랙에서는 캐주얼하게, 코딩할 때는 기술적으로 바뀝니다.
00:05:02시간이 지날수록 여러분의 작성 방식을 학습해서 결과물이 로봇이 아닌 여러분처럼 들리게 됩니다. 10만 명이 넘는 전문가들이
00:05:07매일 사용하고 있으며, SOC2 인증과 HIPAA 준수, 제로 데이터 보존 정책을 따르니 여러분의 단어는
00:05:13안전하게 유지됩니다. 저는 지난주부터 사용 중인데, 다시 타이핑으로 돌아가려니 너무 느려서 답답하더군요.
00:05:18설명란의 링크를 통해 Willow Voice를 무료로 다운로드하세요. 자, 이제 이 준비가 끝났으니
00:05:23Claude에게 무엇을 만들고 싶은지 프롬프트로 요청하기만 하면 됩니다. 원하는 랜딩 페이지를 설명하세요.
00:05:27저희가 랜딩 페이지에 원하는 스타일을 말했던 것처럼 말이죠. 기술을
00:05:31구성해 두었기 때문에 프로토타입 기술이 먼저 로드되었습니다. 그래서 실제 앱에
00:05:36변경 사항을 바로 적용하는 대신, 디자인을 확정할 HTML 코드를 작성하고 저희의 승인을 기다렸습니다.
00:05:41또한 새 탭으로 디자인을 열어 저희가 미리 볼 수 있게 했습니다. 첫 번째 빌드된 버전은
00:05:46깔끔하고 시각적으로도 잘 작동했지만, 랜딩 페이지의 이미지 위치에는
00:05:51자리 표시자 섹션을 사용했습니다. 저희가 이미지 생성 기술을 설치했으니, 바로 그것을 로드해서
00:05:55애초에 이미지 생성을 사용했어야 합니다. 그래서 이미지 생성 기술을 사용해서
00:06:00자리 표시자 섹션을 위한 이미지를 실제로 생성하라고 다시 프롬프트를 보냈습니다. 프롬프트를 보낸 후,
00:06:05bash 도구를 통해 여러 Gemini CLI를 실행했고, Gemini CLI가 권한 프롬프트에 의해
00:06:12차단되지 않도록 YOLO 모드로 열었습니다. Claude가 여러 터미널을 열었고 모두가
00:06:17병렬로 이미지를 생성하기 시작했습니다. 이미지 생성은 시간이 더 걸리니 끝날 때까지 기다려야 합니다.
00:06:22이미지가 준비되면 웹사이트를 확인하세요. 훨씬 더 세련되어 보일 겁니다. 그리고
00:06:27이미지 생성 프롬프트 또한 Claude가 제어했기에 이미지들이 UI 스타일과 아주 잘 어울립니다.
00:06:33이제 비주얼이 추가되었으니 웹사이트가 완성되었습니다. 이 시점에서 디자인을
00:06:38반복 개선할 수 있습니다. 더 이상 변경할 사항이 없었기에 Claude에게 진행하여 스토어에 앱을 구현하라고 요청했습니다.
00:06:43라이브 스토어와 동기화할지 여부 등 앱 구현 방식에 관해 몇 가지 질문을 할 텐데,
00:06:48저희는 동기화를 원했기에 해당 옵션을 선택했습니다. 질문에 답을 하고 나면,
00:06:53HTML 디자인을 앱 자체로 변환하는 작업을 진행합니다. 메인 앱에 바로 적용하는 것이 아니라
00:06:58저희가 생성해 둔 개발용 앱에 적용하죠. 디자인을 일대일로 구현했으니 앱을 직접 미리
00:07:03보며 디자인이 완벽하게 재현되었는지 확인할 수 있습니다. 자, HTML
00:07:08미리 보기를 먼저 사용한 것은 다행이었습니다. 실제 앱에 구현하는 과정은 시간이 많이 걸리기 때문이죠. 그리고
00:07:13이 과정에서 디자인을 반복 개선했더라면 시간과 토큰을 많이 낭비했을 겁니다. HTML
00:07:18프로토타이핑은 훨씬 빠르고 개선하기 쉬웠습니다. 또한, 저희 콘텐츠를 즐기고 계신다면,
00:07:23저희가 이런 콘텐츠를 더 많이 만들고 더 많은 사람에게 다가갈 수 있도록 좋아요 버튼을 눌러주세요.
00:07:28여기까지 하면 앱은 실제 스토어 URL과 동기화됩니다. 방금 빌드한 디자인은 로컬
00:07:34서버의 로컬 머신에서 미리 볼 수 있고, 테마 미리 보기 안에도 들어가 있습니다. 그곳에서
00:07:39기본적으로 개발용 앱으로 테마를 배포했기 때문에 실시간으로 미리 볼 수 있죠. 최종 버전은 아니고,
00:07:44단지 초안일 뿐입니다. 그래서 저희는 단순히 라이브와 동기화하라고 했고, Shopify CLI와 MCP
00:07:50도구를 사용하여 Shopify 스토어에 구성된 메인 URL로 디자인을 동기화했습니다. 그 후,
00:07:55Claude가 앱의 디자인을 라이브로 업데이트하게 될 겁니다. 마찬가지로,
00:08:00웹사이트의 다른 모든 페이지도 업데이트하도록 요청할 수 있으며, 같은 과정을 따르게 됩니다. 먼저 섹션을 프로토타이핑하고,
00:08:05그다음 실제 앱에서 업데이트한 뒤 호스팅된 스토어로 동기화하죠. 하지만 스토어를
00:08:10완성하기 위해 아직 해야 할 일들이 몇 가지 남아 있습니다. 이 시점에서는 제품을 추가할
00:08:14수 없는데, 제품을 업데이트하고 구현 준비를 하려면 Shopify 관리자
00:08:20API가 필요하기 때문입니다. 관리자 API 없이는 제품을 추가할 수 없는데, 이것이
00:08:25소개 페이지, 제품, 기타 관리 기능처럼 스토어의 핵심 부분에 액세스 권한을 주기 때문입니다. 지금까지 저희는
00:08:30그저 테마를 변경하고 비주얼을 위해 스토어 자체에 테마를 적용하고 있었을 뿐입니다. 관리자 API를
00:08:35연결하려면 Shopify CLI를 사용하여 스토어와 인증해야 합니다. 인증 링크와 함께
00:08:41인증 명령어를 입력하면 브라우저가 열리고, 그곳에서 인증할 수 있습니다. 그 후
00:08:46스토어 관련 페이지를 생성할 수 있게 되며, Shopify MCP와 CLI 도구를
00:08:52함께 사용하여 페이지의 다른 섹션을 업데이트하게 됩니다. 이제 스토어에
00:08:56제품을 추가하여 판매를 시작하라고 요청할 수 있습니다. 하지만 제품을 추가하려면 관리자 API를 통해
00:09:01도구에 액세스할 수 있도록 Shopify 스토어에 대한 권한을 구성해야 합니다. 제품 추가에는 이전에 부여한 것보다
00:09:06더 많은 권한이 필요합니다. 콘텐츠 쓰기 권한만 추가했었지만, 제품을 추가하려면
00:09:11제품 쓰기, 출판 읽기 및 쓰기와 같은 추가 권한이 필요합니다.
00:09:16그러니 인증 명령어를 다시 실행하되, 추가 권한을 포함해야 합니다. 그 작업이 완료되면,
00:09:20Claude에게 사이트에 제품을 추가하라고 요청할 수 있습니다. 완료되면 앱을 확인하고
00:09:25거기에 나열된 제품들과 함께 제품 상세 정보와 장바구니 기능이 준비된 스토어를 볼 수 있으며,
00:09:30관리자 패널에서도 제품을 확인할 수 있습니다. 하지만 이 시점에서는 방문자가
00:09:35구매를 할 수는 없습니다. 스토어가 실제로 제품을 판매할 준비가 되려면 결제
00:09:40정보를 추가해야 합니다. 또한 요금제를 선택해야 하는데, 그렇지 않으면
00:09:45스토어 방문자가 보려면 비밀번호를 입력해야 하기 때문이죠. 이건 분명 현실적이지 않습니다. 그래서,
00:09:51요금제를 선택하고 나면 제품 판매를 시작할 수 있게 됩니다. 자, 전체 설정
00:09:55가이드와 여기서 만들어진 모든 기술은 이번 영상과 이전의 모든
00:10:02영상들을 위한 AI Labs Pro에서 찾을 수 있으며, 거기서 다운로드하여 여러분의 프로젝트에 사용할 수 있습니다. 저희가 하는 일에서
00:10:07가치를 느끼고 채널을 후원하고 싶다면, 이것이 가장 좋은 방법입니다. 링크는 설명란에 있습니다.
00:10:11이것으로 영상의 끝에 다다랐습니다. 채널을 후원하고 저희가 계속 이런 영상을
00:10:16만들 수 있게 돕고 싶으시다면, 아래의 'Super Thanks' 버튼을 이용해 주시면 됩니다. 언제나 그렇듯,
00:10:20시청해 주셔서 감사합니다. 다음 영상에서 뵙겠습니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video