반나절만에 바이브 코딩으로 피그마 플러그인 제작하기

디자이너가 직접 문제를 해결하는 제품을 개발할 수 있을까요?

듀오톤에서 일하는 정초롱 선임 디자이너는 최근 바이브 코딩으로 피그마 플러그인을 직접 만들었어요. 코드를 배운 것도, 개발자의 도움을 받은 것도 아니었어요.

코드를 다루지 않던 디자이너가 반나절만에 팀의 문제를 해결할 플러그인을 만들어낸 사례를 공유합니다.

<Auto Pagination>
레이어 명과 시작 번호를 입력하면 프레임 순서대로 페이지 넘버를 자동으로 입력해주는 플러그인

나만 뒤쳐지는 건 아닐까, 왠지 초조해졌어요

사내에서 바이브 코딩 입문 세미나가 열렸어요. 강사님이 실시간으로 AI와 대화하며 작동하는 코드를 만들어내는 장면을 보고 나서, 정초롱 선임에게 묘한 감정이 생겼어요. 당장 실무에 쓸 수 있는 수준은 아닌 것 같은데, 그렇다고 아무것도 안 하기엔 왠지 초조한 느낌이었어요.

그래서 뭘 해볼까 고민하다가 자연스럽게 업무에서 불편했던 점이 떠올랐어요. 매주 20장 이상의 제안서 장표가 나가는데, 오랫동안 페이지 넘버 작업을 도와주던 플러그인이 어느 날 사라졌거든요. 대안을 계속 찾아봤지만 쓰던 것만큼 맞아떨어지는 게 없었어요. 그 불편함을 AI로 직접 해결해보기로 했어요.

시작은 먼저 Gemini한테 물어봤어요

개발을 해본 적이 없기 때문에 뭐부터 해야 하는지 Gemini한테 물어봤어요. 피그마 플러그인을 어떻게 만드는지 물어보니 필요한 파일과 코드를 바로 알려줬지만, 알려준 대로 따라 했더니 에러가 쏟아졌어요. 

에러 메시지를 다시 붙여넣으면 또 코드를 고쳐주고, 그 코드를 복사해서 다시 붙이고... 이 과정을 한참 반복하며 포기하려던 찰나, 개발 블로그를 뒤지다가 피그마가 플러그인 개발 키트를 직접 제공한다는 것을 발견했어요.

참고 블로그 : 초간단 피그마(Figma) 플러그인 만들기

바이브 코딩 세미나에서 알게 된 Antigravity와 함께 다시 시작했어요. 에디터에 AI 기능이 통합되어 있어서 코드를 복붙하지 않아도 되고, 에러가 나도 바로 그 자리에서 물어볼 수 있었어요. 무료라서 시작하는 허들도 낮았어요.

피그마 플러그인, 이렇게 시작하면 돼요

정초롱 선임이 겪은 시행착오를 바탕으로, 처음 해보는 분들도 따라할 수 있게 실제 세팅 방법을 알려드릴게요.

1.기초세팅_피그마에서 작업 폴더 만들기

피그마 상단 메뉴 → Plugins → Development → New Plugin 으로 들어가요. Figma Design을 선택하고, 플러그인 이름(= 폴더 이름)을 입력한 뒤 사용자 정의 UI를 선택해 저장하면 폴더가 자동으로 생성돼요.

그 이후 코드를 직접 작성할 필요 없이, AI가 핵심 파일들을 채워주는 방식으로 진행하면 돼요.

2. 기초세팅_내 컴퓨터에도 준비가 필요해요

먼저 Antigravity를 설치해 주세요.

👉 https://antigravity.google 에서 본인 OS에 맞는 버전을 다운받아 설치하면 돼요.

설치 후 Antigravity를 열고, 상단 메뉴 File → Open Folder로 방금 피그마에서 만든 플러그인 폴더를 열어요.

그 다음 Node.js를 설치해요. (https://nodejs.org/en/download/)

폴더가 열렸다면 상단의 Terminal을 클릭해 아래 명령어 두 개를 순서대로 실행하면 세팅이 끝나요.

npm install -g typescript

만약 에러가 뜨면 앞에 sudo를 붙이고 맥북 비밀번호를 입력해요.

npm install --save-dev @figma/plugin-typings

에러 없이 완료됐다면 준비 완료예요.

3. 기능 구체화하기 _ AI에게 이렇게 설명해요

세팅이 끝나면 AI에게 원하는 기능을 설명해요. 개발 용어를 몰라도 괜찮아요. 정초롱 선임이 실제로 보낸 첫 번째 요청은 이랬어요.

아래와 같은 피그마 플러그인을 만들고 싶어.


[동작 방식]

1. 피그마에서 플러그인을 적용하고 싶은 프레임을 선택한다

2. 플러그인 창에서 페이지 넘버에 해당하는 레이어 명을 입력한다

3. 몇 번부터 시작할지 숫자를 정한다

4. 실행을 누르면 해당 프레임의 페이지 넘버가 나열 순서대로 변경된다

4. 피그마에 연결해서 바로 테스트하기

코드가 생성되면 피그마에서 바로 테스트할 수 있어요.

피그마 상단 메뉴 → Plugins → Development → 매니페스트에서 플러그인 가져오기 → 폴더 안의 manifest.json 파일을 클릭하면 끝이에요.

이후 플러그인을 실행해보면서 기능과 UI를 조정해요. HTML, CSS를 조금 볼 줄 안다면 UI 색상 같은 건 직접 수정할 수 있고, 모르는 부분은 AI에게 자연어로 요청하면 돼요. 에러가 나면 메시지를 그대로 복사해서 AI에게 보내면 원인과 해결 방법을 알려줘요.

5. 커뮤니티에 게시하기

혼자만 쓰는 게 아니라 다른 사람들도 쓸 수 있게 커뮤니티에 게시할 수 있어요.

피그마 → Plugins → Development → 개발 중인 플러그인 관리(Manage Plugins in Development) → 플러그인 오른쪽 ... → 게시(publish)

게시할 때 아이콘(128×128px)과 썸네일(1920×1080px)이 필요해요. 피그마에서 바로 만들어 등록하면 되고, 심사는 보통 1~3일이 걸려요.

결과물은 꼭 사람의 검수가 필요했어요

과정이 순탄하기만 했던 건 아니에요.

요청하지 않은 것들이 따라오는 경우가 있었어요. 쓸데없는 안내 문구나 이모지가 잔뜩 붙어 오기도 했고, 불필요한 창이 만들어지기도 했어요. 

기능적인 문제도 있었어요. 프레임이 많을 때 플러그인이 실행 중인데 창에 아무 변화가 없어서 작동 여부를 알 수 없었어요. AI가 사람이 필요로 하는 상태 피드백을 먼저 챙겨주지 않는다는 걸 알게 됐어요. 이런 부분은 직접 요청해서 프로세스 화면을 추가했어요.

만드는데는 반나절이면 충분해요

완성된 플러그인 이름은 <Auto Pagination>이에요.

Sorter로 프레임 순서를 정렬하고, 번호를 매길 프레임을 전부 선택한 뒤 레이어 이름과 시작 번호를 입력하고 실행하면 끝이에요. 중간에 장표가 추가되면 그 위치부터 다시 잡아 번호만 바꿔서 실행하면 돼요.

팀에서 제안서 작업에 처음 써봤을 때, 옆자리 동료분이 잘 된다며 좋아해 줬어요. 그 반응을 보고 용기를 내서 사내 전체에도 공유해 볼 계획이에요.

👉 Auto Pagination 플러그인 바로 써보기 https://www.figma.com/community/plugin/1609193591595242149/auto-pagination

지금은 두 번째 플러그인을 만들고 있어요

첫 플러그인 이후 한국어 줄바꿈 플러그인도 만들었어요. 피그마에서 한국어 텍스트가 단어나 어절 기준으로 자동 줄바꿈 되도록 해주는 기능으로, Antigravity만으로 만들었어요. 지금은 Claude Code로도 다양한 시도를 해보고 있어요.

문제를 발견하고 직접 해결하는 디자이너로

이번 경험을 통해 초롱 선임은 더 다양한 시도를 해볼 수 있게 되었어요.

디자인 자체가 문제를 해결하는 일이라는 걸 늘 알고 있었지만, 직접 만들어 볼 생각까지는 하지 못했거든요. 하지만 바이브 코딩을 시도해 보고는 달랐어요 여러 가지 불편함을 그냥 참는 게 아니라, 직접 고칠 수 있다는 자신감과 능력이 생긴 거예요. 그리고 한 번 만들고 나니 다음 아이디어가 자연스럽게 따라왔어요.

거창하게 시작할 필요는 없어요. 오늘 작업하다가 '이게 왜 없지?' 싶은 것을 찾는 것부터 시도해보면 누구나 할 수 있어요. 

바이브 코딩을 경험하면 여러분도 할 수 있어요.

‘바이브 코딩’ 어렵게만 느껴지지만 막상 시작하고 나면 나만의 아이디어를 자유롭게 실현할 수 있어요. 

어디서 부터 시작해야할지 막막하다면, 이번 오픈패스의 세미나와 함께 바이브코딩을 시작해 보세요!

오픈패스는 디자이너들이 시도하고, 배우고, 함께 성장하는 이야기를 계속 전합니다.