쇼피파이가 역대급 클로드 코드 워크플로우를 출시했습니다
원제 · Shopify Just Released The Greatest Claude Code Workflow Ever
핵심 요약
Shopify는 복잡도가 점증하는 체크포인트 분할과 4단계 게이트 검증 시스템을 통해 300개 화면 규모의 앱을 환각 없이 자율 재구축하는 AI 코딩 워크플로를 구현했습니다.
하이라이트
Shopify는 300개 화면으로 구성된 거대한 모바일 앱을 에이전트 전용 AI 코딩 워크플로 Helix를 통해 재구축했습니다.
작업의 품질 저하를 막기 위해 전체 작업을 한 번에 처리하지 않고, 하위 에이전트에게 독립된 컨텍스트 윈도우를 부여하여 처리합니다.
에이전트가 중단하려 할 때 종료 코드 2를 반환하는 훅(Hook)을 실행하여, 네 가지 게이트 검사를 통과할 때까지 작업을 계속 진행시킵니다.
동작 게이트, UI 게이트, 적대적 코드 리뷰 게이트, 인간 참여형(Human-in-the-loop) 게이트의 4단계 검증 프로세스를 거칩니다.
단 하나의 오케스트레이터 스킬을 통해 전체 워크플로가 자율 실행되며, 개발자의 개입은 체크포인트 승인과 최종 검토 두 번만 요구됩니다.
타임라인
Shopify Helix 워크플로의 핵심 구조와 하위 에이전트 활용법
긴 작업을 단일 컨텍스트 윈도우에서 실행하면 에이전트가 이전 맥락을 잊고 품질이 떨어집니다. 이를 해결하기 위해 각 작업마다 신선한 컨텍스트 윈도우를 갖는 하위 에이전트를 할당합니다. 또한 작업이 반드시 통과해야 하는 네 가지 게이트 검사를 두어 기준을 충족할 때까지 다음 작업으로의 진행을 차단합니다.
- Shopify는 300개 화면 규모의 거대한 앱을 AI 에이전트로 전환하기 위해 Helix 워크플로를 구축했습니다.
- 작업 단위를 체크포인트로 분할하고 하위 에이전트를 배치하여 컨텍스트 윈도우 초과에 따른 환각 현상을 방지합니다.
오케스트레이터 및 체크포인트 플래너 시스템 설정
체크포인트 플래너가 생성한 JSON 구조는 인간이 직접 읽기 어렵기 때문에 전용 웹 페이지 뷰어로 시각화하여 검토합니다. 체크포인트를 가장 작은 단위부터 시작하여 복잡도를 높여가는 순서로 배치하면 초기에 발생한 오류를 저렴한 비용으로 수정할 수 있습니다. 개발자가 계획을 승인하면 하위 에이전트가 테스팅 및 구현을 시작합니다.
- 오케스트레이터 스킬은 개발자의 개입을 두 번으로 최소화하면서 전체 워크플로를 자동으로 자율 제어합니다.
- 체크포인트 플래너는 큰 기능을 복잡도가 점증하는 순서의 JSON 파일로 나누어 초기 오류 수정 비용을 줄입니다.
루프 차단 훅 및 동작 게이트(Gate 1) 테스팅 구현
단순한 지침 규칙은 에이전트가 쉽게 잊어버리므로 강제성을 갖춘 훅 시스템을 사용합니다. 종료 코드 2는 오류 신호가 아니라 에이전트에게 계속 작업을 수행하도록 지시하는 프롬프트 역할을 합니다. TDD 플래너 스킬을 활용하여 실제 구현 코드를 작성하기 전에 테스트 코드를 먼저 작성하고, 테스트가 모두 통과해야만 첫 번째 게이트를 통과시킵니다.
- 에이전트가 멈추려고 할 때 종료 코드 2를 발생하는 훅을 통해 검사를 통과할 때까지 작업을 계속하도록 강제합니다.
- 동작 게이트는 브라우저 없이 수행할 수 있는 코드 기반의 테스팅을 통해 기능의 정상 작동 여부를 검증합니다.
UI 게이트(Gate 2) 및 적대적 코드 리뷰 게이트(Gate 3) 실행
독립된 두 개의 Claude 하위 에이전트가 각각 화면 외관과 동작 방식을 평가하여 결합된 검토 결과를 반환합니다. 이어서 진행되는 적대적 검토 단계에서는 코드가 잘못되었다고 가정하는 에이전트와 수정을 담당하는 에이전트가 서로 주고받는 양방향 검증 과정을 거쳐, 문제점이 완벽히 해결될 때까지 승인을 유예합니다.
- UI 게이트는 HTML 프로토타입 및 design.md 파일과 앱의 실제 화면 상태를 비교하여 시각적 일치성을 검증합니다.
- 적대적 검토 게이트는 문제점을 찾는 적대적 에이전트와 이를 바로잡는 수정자 에이전트 간의 루프로 작동합니다.
인간 참여형 검토(Gate 4) 및 전체 피드백 수집 구조
모든 에이전트 검사가 끝나면 개발자가 직접 앱을 확인하고 피드백을 남깁니다. 피드백은 시스템 학습 파일에 누적되어 향후 모든 에이전트가 작업 전 읽어들이는 지침이 됩니다. 오케스트레이터는 계획 승인 시점과 최종 완성 시점 단 두 번만 멈추도록 설계되어 완성도 높은 코드가 나올 때까지 전체 루프를 유지합니다.
- 최종 게이트는 사람의 관점에서 직접 작동 방식과 시각 요소를 테스트하는 인간 참여형 단계입니다.
- 사람이 요청한 수정 사항은 새로운 게이트로 변환되고 피드백 학습 파일에 기록되어 에이전트에게 지속 학습됩니다.
설명
This Claude Code workflow is how Shopify rebuilt a 300-screen app with AI coding agents. We rebuilt it ourselves: a Claude Code setup where an orchestrator runs Claude Code agents through checkpoints and four gates using Claude Code skills and hooks, so Claude AI can't ship unfinished work. Thank you Hedra for sponsoring! Check them out at: https://hedra.link/ailabs Use code AILABS50 for 50% off your first month Community with All Resources: https://ailabspro.io/?v=bBMp5tLxShQ The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ Shopify rebuilt their main mobile app, all 300 screens, with AI coding agents and an internal tool called Helix. They shared the method but never showed how it's done, so we retraced it and built our own Claude Code custom workflow, then tested it by adding features to an internal HR system app we were building. In this Claude AI tutorial, we break down every step of the Claude Code agents workflow: - Checkpoints: a Checkpoint Planner agent splits a big feature into small tasks, ordered from simplest to most complex. A simple viewer lets you review the plan in plain language before any building starts. - Gate 1, Behavior: tests are planned and written before the code, and every test has to pass. - Gate 2, UI Review: the app is compared against an HTML prototype and your design.md file. Shopify used Gemini for this; we used Claude subagents instead, with no Gemini or OpenAI models needed. - Gate 3, Adversarial Review: one agent assumes the code is wrong and hunts for issues, a fixer agent fixes them, and they go back and forth until the code is approved. - Gate 4, Human in the Loop: you test the feature yourself, and your feedback becomes new checkpoints plus a learnings file every agent reads. A hook, borrowed from the Ralph loop idea, stops the agent from quitting before the gates pass. That's the difference between a rule the agent can forget and a gate it can't talk its way out of. The whole thing runs as a dynamic workflow in Claude Code. One orchestrator hands out jobs to AI agents, each subagent starts with a fresh context window, and it only stops for you twice. It's not a "Claude Code just replaced my entire workflow" story, since you still approve the plan and test the result, but the gates never let unfinished work through. If you're looking for Claude Code for beginners, this shows how to use Claude Code on big features without letting quality slip. Whether you want a React Native Claude Code agentic workflow for a mobile app or you're building for the web, the same loop applies to any AI coding project where you want AI coding agents held to your standards. It's an AI automation setup you can build yourself by prompting Claude, or you can grab the skills we built for this Claude Code workflow in AI Labs Pro. 00:00 Intro 00:55 Core Mechanism 03:01 Checkpoints 05:25 Gates 06:38 Sponsor 07:32 Gate 1: Behavior 09:18 Gate 2: UI 11:56 Gate 3: Code Review 13:11 Gate 4: Human Review 13:47 The Orchestrator Hashtags: #ai #claude #claudecode #aiautomation #openai #claudeai #aiagents #claudecodeworkflow