1f: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"] 20: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"] 21: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"] 25:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 1e:T626,{"@context":"https://schema.org","@type":"BlogPosting","headline":"디자인 시스템 피그마 아이콘 자동화 플러그인","description":"피그마 자동화 플러그인 개발기: 아이콘 반영 프로세스 🎨⚙️아이콘 반영은 단순해 보이지만, 디자인-개발 협업에서 생각보다 많은 시간을 차지하는 작업이었습니다. 특히 우리 팀은 \"작은 아이콘 하나 반영\"에도 여러 단계를 거쳐야 했습니다.기존 프로세스: 디자이너와 개발자의 반복...","image":["https://3d-blog.vercel.app/blog/category/회사/post/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2025-09-10T14:22:48.342Z","dateModified":"2026-08-17T10:33:50.907Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/회사/post/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8"},"url":"https://3d-blog.vercel.app/blog/category/회사/post/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8"}22:T1379,

피그마 자동화 플러그인 개발기: 아이콘 반영 프로세스 🎨⚙️

아이콘 반영은 단순해 보이지만, 디자인-개발 협업에서 생각보다 많은 시간을 차지하는 작업이었습니다. 특히 우리 팀은 "작은 아이콘 하나 반영"에도 여러 단계를 거쳐야 했습니다.

기존 프로세스: 디자이너와 개발자의 반복 의존

디자이너가 새로운 아이콘을 제작
개발자가 피그마에서 아이콘을 추출해 레포지토리에 반영
반영 후 "적용 완료" 코멘트를 남김
디자이너가 코멘트를 확인하고 Figma에서 new 표시를 제거

flowchart TB
    D1[디자이너: 아이콘 제작 🎨]
    D2[개발자: 새 브랜치 생성 🌿]
    D3[개발자: 아이콘 추가 ➕]
    D4[개발자: 커밋 & 푸시 ⬆️]
    D5[개발자: PR 생성 🔀]
    D6[개발자: main에 Merge ✅]
    D7[개발자: 반영 완료 코멘트 📝]
    D8[디자이너: new 표시 제거 ✔️]
    D1 --> D2 --> D3 --> D4 --> D5 --> D6 --> D7 --> D8
    style D1 fill:#ff9999
    style D8 fill:#ff9999
    style D2 fill:#99ccff
    style D3 fill:#99ccff
    style D4 fill:#99ccff
    style D5 fill:#99ccff
    style D6 fill:#99ccff
    style D7 fill:#99ccff

이 방식의 문제는 명확했습니다.

개발자는 단순 반복 작업에 시간을 소모해야 했고
디자이너는 반영 여부를 매번 확인해야 했으며
여러 사람이 손으로 처리하다 보니 실수 여지도 많았습니다.

해결: 자동화 플러그인

이 문제를 해결하기 위해 Figma 플러그인을 직접 개발했습니다.

디자이너가 아이콘을 선택하고 플러그인 실행
자동으로 아이콘이 추출되어 → 레포 반영 → 브랜치 생성 → 커밋 → PR 생성
개발자는 단순히 PR 리뷰 후 merge만 하면 됨

flowchart TB
    P1[디자이너: 아이콘 제작 🎨]
    P2[디자이너: 플러그인 실행 ⚙️]
    P3[자동화: 브랜치 생성 아이콘 반영 커밋 푸시 PR 생성 🤖]
    P4[개발자: PR 리뷰 👀]
    P5[개발자: Merge ✅]
    P1 --> P2
    P2 --> P3
    P3 --> P4
    P4 --> P5
    style P1 fill:#ff9999
    style P2 fill:#ff9999
    style P3 fill:#90EE90
    style P4 fill:#99ccff
    style P5 fill:#99ccff

결과: 협업 구조 자체가 바뀌다

디자이너는 이제 반영 여부를 궁금해할 필요가 없음 → 직접 올리면 끝
개발자는 불필요한 반복 업무에서 해방 → PR 리뷰만으로 품질 보장
실수 여지가 줄고, 협업 속도는 수 분 → 수 초로 단축
개발자는 본업(핵심 개발)에 집중 가능

배운 점

이 경험을 통해 알게 된 점은, 자동화는 단순히 시간을 줄이는 게 아니라 팀의 협업 방식을 바꾼다는 것이었습니다.

디자이너와 개발자 사이의 불필요한 의존 관계를 없애고
각자의 역할에 집중할 수 있는 구조로 전환하며
팀 전체의 생산성과 협업 경험을 크게 개선

작은 자동화 하나가 팀의 효율을 이렇게 바꿀 수 있다는 걸 체감한 의미 있는 경험이었습니다.

16:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$1e"}}],["$","$18",null,{"fallback":null,"children":["$","$L1f",null,{"postId":7,"slug":"디자인-시스템-피그마-아이콘-자동화-플러그인","categorySlug":"회사"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L20",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":"디자인 시스템 피그마 아이콘 자동화 플러그인"}],["$","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":"2025-09-10"}],[["$","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":["$","$18",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L21",null,{"post":{"id":7,"title":"디자인 시스템 피그마 아이콘 자동화 플러그인","content":"$22","updatedAt":"$D2026-08-17T10:33:50.907Z"}}]]}]}],"$L23"]}],"$L24"]}]] 19:null 1d:[["$","title","0",{"children":"디자인 시스템 피그마 아이콘 자동화 플러그인"}],["$","meta","1",{"name":"description","content":"피그마 자동화 플러그인 개발기: 아이콘 반영 프로세스 🎨⚙️아이콘 반영은 단순해 보이지만, 디자인-개발 협업에서 생각보다 많은 시간을 차지하는 작업이었습니다. 특히 우리 팀은 \"작은 아이콘 하나 반영\"에도 여러 단계를 거쳐야 했습니다.기존 프로세스: 디자이너와 개발자의 반복..."}],["$","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%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"디자인 시스템 피그마 아이콘 자동화 플러그인"}],["$","meta","10",{"property":"og:description","content":"피그마 자동화 플러그인 개발기: 아이콘 반영 프로세스 🎨⚙️아이콘 반영은 단순해 보이지만, 디자인-개발 협업에서 생각보다 많은 시간을 차지하는 작업이었습니다. 특히 우리 팀은 \"작은 아이콘 하나 반영\"에도 여러 단계를 거쳐야 했습니다.기존 프로세스: 디자이너와 개발자의 반복..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8"}],["$","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%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/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":"2025-09-10T14:22:48.342Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T10:33:50.907Z"}],["$","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":"디자인 시스템 피그마 아이콘 자동화 플러그인"}],["$","meta","26",{"name":"twitter:description","content":"피그마 자동화 플러그인 개발기: 아이콘 반영 프로세스 🎨⚙️아이콘 반영은 단순해 보이지만, 디자인-개발 협업에서 생각보다 많은 시간을 차지하는 작업이었습니다. 특히 우리 팀은 \"작은 아이콘 하나 반영\"에도 여러 단계를 거쳐야 했습니다.기존 프로세스: 디자이너와 개발자의 반복..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9E%90%EB%8F%99%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L25","33",{}]]

디자인 시스템 피그마 아이콘 자동화 플러그인

댓글