20:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 21:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 22:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 1f:T6c9,{"@context":"https://schema.org","@type":"BlogPosting","headline":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화","description":"React 기반 디자인 시스템 모노레포에서는 컴포넌트 변경이 잦습니다. 그만큼 구현보다 검수·머지·버전·npm 배포까지의 핸드오프가 배포 리드타임을 좌우했습니다. 그래서 여러 도구를 엮어 \"디자이너 승인 = 배포\"가 성립하는 파이프라인으로 전체 흐름을 재설계했습니다.기존 흐름의...","image":["https://3d-blog.vercel.app/blog/category/회사/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2026-07-27T00:28:14.482Z","dateModified":"2026-08-17T12:40:36.572Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/회사/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94"},"url":"https://3d-blog.vercel.app/blog/category/회사/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94"}23:T34a4,

React 기반 디자인 시스템 모노레포에서는 컴포넌트 변경이 잦습니다. 그만큼 구현보다 검수·머지·버전·npm 배포까지의 핸드오프가 배포 리드타임을 좌우했습니다. 그래서 여러 도구를 엮어 "디자이너 승인 = 배포"가 성립하는 파이프라인으로 전체 흐름을 재설계했습니다.

기존 흐름의 병목

기능 브랜치를 main에 머지해도 배포가 끝나지 않았습니다. Changeset이 있으면 Actions가 Version Packages PR을 한 번 더 만들고, 그 PR까지 머지해야 버전 범프와 npm 배포가 완료됩니다.

flowchart TD
    A[Figma 기준으로 컴포넌트 구현] --> B[PR 생성 및 코드 디자인 검수]
    B --> C[Storybook 미리보기 URL을 Slack에 수동 공유]
    C --> D[디자이너 검수, 피드백 왕복]
    D --> E[기능 PR을 main에 머지]
    E --> F[Changeset 감지, Version Packages PR 자동 생성]
    F --> G[Version Packages PR을 또 머지]
    G --> H[npm publish 완료]

검수 승인 후에도 개발자가 머지를 두 번 해야 했고, "기능 머지 = 배포 완료"가 아니어서 핸드오프가 끊기지 않고 계속 이어졌습니다. 디자이너는 검수만 했을 뿐, 자신이 승인한 컴포넌트가 실제로 배포됐는지는 알 방법이 없었습니다. 배포 여부를 확인하려면 다시 개발자에게 물어봐야 했고, 배포 트리거가 검수 완료 시점과 떨어져 있었던 셈입니다.

목표

개발자: 구현·커밋까지
디자이너: Chromatic 검수 + Slack에서 승인/배포
시스템: version · merge · npm publish · 결과 알림

특히 Version Packages PR 2차 머지를 없애고, 배포를 개발자의 후속 작업이 아니라 검수 완료의 다음 동작으로 만드는 것이 목표였습니다.

재설계한 5단계

단계	담당	내용
1	개발자	Figma 링크 Agent에게 전달
2	개발자/에이전트	feature 브랜치에서 Figma MCP로 구현, Changeset 추가, 커밋·푸시
3	개발자/에이전트	Chromatic 실행 → Storybook URL → Slack 검수 요청(Block Kit)
4	디자이너	Chromatic 검수 후 Slack 배포 버튼
5	자동화	Worker → GitHub Actions → feature에서 version → main 머지 → npm 배포 → Slack 알림

3~5단계가 핵심입니다. 미리보기 공유와 승인·배포가 Slack 메시지 하나로 묶이고, version은 main 머지 전에 feature에서 처리됩니다.

flowchart TD
    A[개발자 Figma 링크 전달] --> B[개발자 에이전트 Figma MCP 구현, Changeset, 커밋 푸시]
    B --> C[개발자 에이전트 Chromatic 실행, Slack 검수 요청]
    C --> D{디자이너 Chromatic 검수}
    D -->|승인| E[Slack 배포 버튼 클릭]
    E --> F[Worker, GitHub Actions 실행]
    F --> G[feature에서 version 처리]
    G --> H[main 머지]
    H --> I[npm publish]
    I --> J[Slack 결과 알림]

기술 구성

1) Agent Skill로 절차 표준화 배포 Skill이 브랜치 생성, Figma MCP 구현, Changeset, Chromatic, Slack 전송 순서를 고정합니다. 배포 지식을 개인 메모나 특정 개발자의 머릿속이 아니라, 팀원 누구나 실행할 수 있는 워크플로로 만든 이유가 여기 있습니다. Skill로 만들어 두면 담당자가 바뀌거나 새로 합류한 사람도 같은 절차로 배포를 진행할 수 있고, 에이전트가 반복 실행할 수 있는 형태로 문서화되어 개인 경험에 의존하지 않습니다. Slack 전송 전 개발자 확인을 두어, 미완성 미리보기가 채널에 올라가는 실수도 막았습니다.

2) Chromatic을 검수 표면으로 빌드 대시보드가 아니라 실제 Storybook URL을 공유합니다. 디자이너는 GitHub/로컬 없이 스토리북에서 확인합니다.

3) Slack Block Kit = 검수·배포 컨트롤 플레인

디자인 검수 완료: 검수 기록(배포 없음)
배포: 확인 모달 후 배포 트리거

승인 UX를 GitHub이 아니라 디자이너가 이미 쓰는 Slack에 두었습니다.

4) Cloudflare Worker = Slack ↔ GitHub 브릿지 Slack Interactivity를 받아 서명 검증 후, GitHub workflow_dispatch로 Changesets 워크플로를 실행합니다. 버튼에 담긴 feature 브랜치명을 넘깁니다. Worker는 배포 로직 없이 이벤트 중계만 담당합니다.

5) Changesets로 version → merge → publish 일원화 승인 시점에 feature 브랜치에서 version을 먼저 수행한 뒤 main에 머지합니다. 이후 main push가 Release 잡을 트리거해 npm publish까지 이어지고, 결과는 같은 Slack 채널로 알립니다.

이로써 기존에 필요했던 Version Packages PR 2차 머지가 사라집니다. PR 연동 CI가 빠질 수 있어 승인 머지 잡에 빌드 검증을 넣었습니다.

무엇이 줄었는가

영역	Before	After
배포 완료 조건	main 머지 + Version Packages PR 재머지	Slack 배포 버튼 1회
버전 범프 시점	main 머지 이후 별도 PR	승인 시 feature에서 version 후 main 머지
미리보기 공유	URL 수동 복붙	Chromatic → Slack 메시지
배포 승인	"머지해줘" + 개발자 작업	디자이너 Slack 버튼
개발자 역할 종료	Version Packages PR 머지·배포 확인 후	검수 요청 전송 후
디자이너 도구	Figma + Slack + (간접) GitHub	Figma + Chromatic + Slack

설계에서 신경 쓴 점

검수·배포 트리거는 디자이너, git/npm 권한은 CI·시크릿에만
Slack 전송 전 확인, 배포 confirm 모달, Worker 서명 검증
Changeset 없이는 버전/배포가 성립하지 않으므로 Skill 단계에서 강제
version을 feature에서 먼저 처리해 Version Packages PR 왕복을 제거
요청 → 승인 → 결과를 Slack 한 채널에서 추적

요약

디자인 시스템 배포에서 가장 길었던 구간은 구현이 아니라, main 머지 후 Version Packages PR을 한 번 더 머지해야 배포가 끝나는 구조였습니다. Slack 승인 시점에 version을 앞당기고 merge·publish를 자동화해, 검수 완료를 배포 트리거로 직결했습니다.

개발자는 구현까지, 디자이너는 Slack에서 끝, 배포는 시스템이 한다.

17:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$1f"}}],["$","$19",null,{"fallback":null,"children":["$","$L20",null,{"postId":24,"slug":"배포를-skill로-만들기-agent-skill로-완성한-디자인-시스템-배포-자동화","categorySlug":"회사"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L21",null,{"href":"/blog/category/회사"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2026-07-27"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"회사"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$19",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L22",null,{"post":{"id":24,"title":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화","content":"$23","updatedAt":"$D2026-08-17T12:40:36.572Z"}}]]}]}],"$L24"]}],"$L25"]}]] 1a:null 1e:[["$","title","0",{"children":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화"}],["$","meta","1",{"name":"description","content":"React 기반 디자인 시스템 모노레포에서는 컴포넌트 변경이 잦습니다. 그만큼 구현보다 검수·머지·버전·npm 배포까지의 핸드오프가 배포 리드타임을 좌우했습니다. 그래서 여러 도구를 엮어 \"디자이너 승인 = 배포\"가 성립하는 파이프라인으로 전체 흐름을 재설계했습니다.기존 흐름의..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화"}],["$","meta","10",{"property":"og:description","content":"React 기반 디자인 시스템 모노레포에서는 컴포넌트 변경이 잦습니다. 그만큼 구현보다 검수·머지·버전·npm 배포까지의 핸드오프가 배포 리드타임을 좌우했습니다. 그래서 여러 도구를 엮어 \"디자이너 승인 = 배포\"가 성립하는 파이프라인으로 전체 흐름을 재설계했습니다.기존 흐름의..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2026-07-27T00:28:14.482Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T12:40:36.572Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화"}],["$","meta","26",{"name":"twitter:description","content":"React 기반 디자인 시스템 모노레포에서는 컴포넌트 변경이 잦습니다. 그만큼 구현보다 검수·머지·버전·npm 배포까지의 핸드오프가 배포 리드타임을 좌우했습니다. 그래서 여러 도구를 엮어 \"디자이너 승인 = 배포\"가 성립하는 파이프라인으로 전체 흐름을 재설계했습니다.기존 흐름의..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%B0%B0%ED%8F%AC%EB%A5%BC-skill%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-agent-skill%EB%A1%9C-%EC%99%84%EC%84%B1%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],"$L26","$L27","$L28","$L29"]

배포를 Skill로 만들기: Agent Skill로 완성한 디자인 시스템 배포 자동화

댓글