AI 에이전트와 Cowork audit만을 사용하여 12개 섹션의 Shopify 페이지를 구축한 방법

저는 ddsboston.com에서 Shopify Basic 스토어를 운영하는 1인 창업자입니다. 최근 저는 단 한 줄의 코드도 작성하지 않고, 파일 하나를 업로드하지도 않았으며, 테마 에디터에서 "저장" 버튼을 클릭하지도 않고 12개 섹션으로 구성된 허브 페이지인 'DDS Vibe Academy'를 출시했습니다.

파이프라인이 어떻게 작동하는지 소개합니다.

아키텍처 (The architecture)

Academy 허브는 /pages/dds-vibe-academy에 위치합니다. 이 페이지는 Shopify의 OS 2.0 JSON 템플릿 시스템을 사용합니다. 즉, 특정 순서로 13개의 섹션을 등록하는 하나의 page.dds-vibe-academy.json 파일로 구성됩니다.

이 페이지는 탭 네비게이션 (tab navigation) 패턴을 가지고 있습니다. 고정된 네비게이션 바 (sticky nav bar)가 8개의 콘텐츠 탭(What's New, Curriculum, Evolution, Archive, Blog Feed, Useful Links, Manifesto, FAQ)을 제어합니다. 각 탭은 고유한 CSS 범위 (CSS scope), 고유한 JavaScript, 그리고 고유한 구조화된 데이터 (structured data)를 가진 별도의 Liquid 섹션입니다.

빌드 체인 (The build chain)

Claude Opus 4.7 (Anthropic)이 모든 섹션 파일을 작성했습니다. 12개의 Liquid 섹션과 1개의 JSON 템플릿으로 구성됩니다. 약 500KB에 달하는 약 6,400줄의 코드입니다.

각 섹션은 엄격한 스코핑 (scoping) 패턴을 따릅니다:

CSS 네임스페이스 (CSS namespace): dva-[section-abbreviation]__ (예: 커리큘럼을 위한 dva-cm__, FAQ를 위한 dva-fq__)
모든 CSS는 Liquid의 섹션 ID를 사용하여 #{{ section_id }} 아래에 스코핑됩니다.
모든 색상은 2024년부터 브라우저 기본 지원이 시작된 지각적으로 균일한 색 공간 (perceptually uniform color space)인 oklch()를 사용합니다.
DDS 팔레트 토큰 (palette tokens)은 CSS 사용자 정의 속성 (CSS custom properties)으로 섹션마다 정의됩니다.

Google Antigravity는 Shopify MCP (Model Context Protocol)를 통해 모든 파일을 Shopify에 배포했습니다. Antigravity는 Google의 에이전트형 IDE (agentic IDE) 내부에서 Claude Opus 4.6을 에이전트 모델로 실행합니다. 배포 흐름은 다음과 같습니다:

로컬 .liquid 파일을 읽습니다.
MCP를 통해 Shopify의 테마 에셋 API (theme asset API)로 푸시합니다.
모든 14개 파일(12개 섹션 + 1개 템플릿 + 1개 OG 이미지)에 대해 이 과정을 반복합니다.

CLI도, Shopify 관리자 페이지도, 수동 단계도 없었습니다.

Cowork (Anthropic)는 초기 배포 후 자율 브라우저 감사 (autonomous browser audit)를 수행했습니다. 모든 탭을 탐색하고, 모든 링크를 확인하며, 뷰포트 (viewport) 크기를 조정하고, 결과 보고서를 생성했습니다. 결과: 30개의 깨진 URL 식별, 스티키 네비게이션 (sticky navigation)에서의 z-index 충돌, 그리고 3개의 스키마 (schema) 수정 필요 사항이 발견되었습니다. 모든 수정 사항은 두 번째 배포 사이클에서 적용되었으며, 이 역시 수동이 아닌 AI 에이전트 (AI agents)에 의해 이루어졌습니다.

페이지 기능

커리큘럼 (curriculum) 탭은 DVA Atlas Grid를 렌더링합니다. 이는 클라이언트 사이드 필터링 (client-side filtering) 기능이 포함된 확장 가능한 2축 반응형 CSS 그리드 (CSS Grid)입니다. 사용자는 49개의 노드 (nodes)를 링 (Ring: Foundation → Development → Application → Mastery) 또는 레인 (Lane: Claude, Gemini, Antigravity 등을 포함한 10개 레인 분류 체계)별로 그룹화할 수 있습니다.

FAQ 탭은 FAQPage JSON-LD 스키마를 포함한 14개의 항목, 부드러운 높이 애니메이션을 위한 interpolate-size: allow-keywords가 적용된 <details>/<summary> 네이티브 아코디언 (accordion), 그리고 디바운스 (debounced) 검색 필터를 갖추고 있습니다.

유용한 링크 (Useful Links) 탭은 12개 카테고리에 걸쳐 검증된 93개의 외부 도구를 다중 선택 필터 칩 (multi-select filter chips), 반응형 그리드를 위한 컨테이너 쿼리 (container queries), 그리고 필터 변경 시 View Transitions API를 사용하여 카탈로그화합니다.

히어로 (hero) 섹션과 탭 네비게이션 (tab nav) 사이에는 배포 영수증 역할을 하는 빌드 매니페스트 (Build Manifest) 섹션이 있습니다. 여기에는 모든 AI 에이전트의 이름과 각 에이전트가 수행한 작업이 명시되어 있으며, AI 검색 가시성을 위한 CreativeWork 구조화된 데이터 (structured data)가 포함되어 있습니다.

방법론

저는 이를 DDS 바이브 코딩 (DDS Vibe Coding)이라 부릅니다. 다섯 가지 핵심 원칙은 다음과 같습니다:

제약 조건 우선 설계 (Constraint-first design) — 시스템이 무엇을 해야 하는지 정의하면, 모델이 그 방법을 찾아냅니다.
점진적 공개 (Progressive disclosure) — 가장 단순한 버전을 출시하고, 가치가 증명될 때만 복잡성을 추가합니다.
결정론적 레일 (Deterministic rails) — 드리프트 (drift)를 방지하기 위한 CSS 스코핑 (scoping), 명명 규칙 (naming conventions), 그리고 스키마 규칙을 설정합니다.
컨텍스트 위생 (Context hygiene) — 모델의 컨텍스트 윈도우 (context window)를 깨끗하게 유지합니다. 대화당 하나의 섹션만 다룹니다.
주권적 폴백 (Sovereign fallback) — 모든 워크플로 (workflow)는 타인의 가동 시간 (uptime)에 의존하지 않는 경로를 반드시 가져야 합니다.

내가 배운 것

가장 큰 놀라움: 감사 (audit) 단계가 작성 (authoring) 단계보다 더 중요하다는 점입니다. Claude 4.7은 깨끗한 코드를 작성했습니다. 하지만 Cowork는 인간의 코드 리뷰로는 잡아낼 수 없는 것들을 찾아냈습니다. 예를 들어, 수개월 동안 여러 클래스에 걸쳐 쌓인 30개의 깨진 URL이나, 고정된 네비게이션 (sticky nav)과 앵커 위치가 지정된 팝오버 (anchor-positioned popovers) 사이의 z-index 충돌 같은 것들 말입니다.

두 번째 놀라움: 배포 파이프라인 (deploy pipeline)이 레버리지 포인트 (leverage point)라는 점입니다. 일단 Shopify MCP를 쓰기 채널 (write channel)로 확보하고 나면, 병목 현상 (bottleneck)은 완전히 디자인 결정으로 옮겨갑니다. 에이전트들은 제가 무엇을 배포할지 결정하는 속도보다 더 빠르게 결과물을 내놓을 수 있습니다.

이번 주의 새로운 12개 마스터클래스 (Masterclasses)

이를 기념하며, 이번 주에 다음 내용을 다루는 12개의 새로운 마스터클래스를 출시함으로써 아카데미를 49개 강의로 확장했습니다:

바이브 코딩 기초 (Vibe Coding Foundation) (강의 1-6)
소버린 RAG (Sovereign RAG) (강의 27)
홈페이지 업그레이드 마스터클래스 (Homepage Upgrade Masterclass) (강의 31)
MCP 서버 포지 (MCP Server Forge) (강의 38)
SEO 마그넷 V2 (SEO Magnet V2) (강의 39)
프런티어 모델 (Frontier Models) (강의 48 및 49: Gemini 3.5 Flash 및 Claude Opus 4.8)

7가지 원칙의 매니페스토 (manifesto) 또한 허브 (hub)에 완전히 업데이트되어 문서화되었습니다.

체험하기

아카데미는 가입 없이 무료로 이용 가능합니다: https://ddsboston.com/pages/dds-vibe-academy?utm_source=devto&utm_medium=crosspost&utm_campaign=may_blitz

49개 강의. 93개의 큐레이션된 도구 링크. 16개의 FAQ 항목. 자매 블로그를 통해 월요일부터 금요일까지 업데이트됩니다. 이 모든 것은 아키텍처 지침 (architectural direction) 하에 AI 에이전트들에 의해 구축되었습니다.