바이브 코딩으로 피그마 플러그인 만들기

요즘은 ‘AI를 어떻게 쓰는가’보다 ‘AI와 어떻게 일하는가’가 더 중요해진 시대입니다.
AI는 더 이상 결과물을 대신 만들어주는 도구가 아니라, 내 옆자리에서 함께 문제를 풀어가는 동료이자 협업 파트너가 되었습니다.

저에게 AI는 실무 생산성을 높여주는 가장 확실한 파트너입니다.
PRD문서를 작성하거나, 아이데이이션을 하거나, 반복적인 작업을 자동화할 때 등
이제는 대부분의 과정을 AI와 함께 해결하고 있습니다.

오늘은 제가 최근 진행한 프로젝트 중 하나인 ‘AI와 함께 Figma 플러그인을 만든 경험’을 공유해 보려 합니다.
AI를 단순한 도구로 사용하는 단계를 넘어, 함께 문제를 해결하는 협업 파트너로 경험한 사례입니다.

슬랙봇에서 피그마 플러그인으로

이 프로젝트는 예전 DevOps 팀이 만들어준 UX Writing 슬랙봇에서 시작되었습니다.
디자이너가 문장을 입력하면 리멤버의 UX Writing 원칙에 맞게 교정해주는 유용한 봇이었지만, 피그마에서 직접 문장을 다루는 입장에서는 매번 슬랙을 열고 복사·붙여넣기를 반복해야 했습니다.
그래서 “이 기능을 피그마 안에서 바로 쓸 수 있다면 얼마나 편할까?”라는 생각으로 플러그인을 만들어 보기로 했습니다.

AI와 함께 코딩하기 - 바이브 코딩

이번 프로젝트는 AI를 활용해서 바이브 코딩으로 진행했습니다.
(바이브 코딩이란? 최근 디자이너와 비개발자 사이에서도 주목받고 있는 방식으로, AI에게 목적과 맥락을 설명하며 함께 코드를 만들어 가는 협업 형태)

저는 VS Code에서 Cline을 통해 ChatGPT에게 이렇게 요청했습니다.

“피그마 플러그인으로 UX Writing 교정 기능을 만들고 싶어.
리멤버의 UX Writing 원칙을 반영하고, 실시간으로 미리보기도 가능하면 좋겠어.”

Figma 플러그인은 기본적으로 manifest.json, code.ts, ui.html 같은 구조를 제공합니다.
AI는 이 구조를 바탕으로 기능별 코드를 제안했고, 저는 대화를 이어가며 필요한 부분을 수정했습니다.
코드가 동작하지 않으면 “이 부분이 작동하지 않아”라고 말했고, AI는 원인과 해결 방법을 제시했습니다.

이 과정을 통해 완성된 플러그인이 바로 ‘리멤버 UX 라이팅 봇’입니다.
디자이너가 선택한 텍스트를 AI가 실시간으로 분석해, 리멤버 UX Writing 가이드에 맞게 문장을 교정해 주는 플러그인입니다.

AI를 분석 엔진으로 통합하기까지

초기 버전은 순수 TypeScript 로직만으로 텍스트를 분석했습니다.
단어 패턴이나 문장 구조는 감지했지만, 문맥까지 이해하진 못했습니다.

그래서 분석 엔진에 OpenAI compatible를 도입했습니다.

AI가 통합되면서 플러그인은 완전히 새로운 도구가 되었습니다.
이제는 사용자가 입력한 문장을 리멤버 UX Writing 가이드의 8가지 원칙에 따라 분석하고,
더 자연스럽고 브랜드 톤에 맞는 문장으로 제안합니다.

예를 들어 저는 AI에게 이런 요청을 보냈습니다.

“다음 텍스트를 리멤버 UX Writing 가이드에 따라 분석해줘.
문체는 ‘정중하지만 친근하게’, 감정은 ‘공감보다는 명료하게’ 유지해줘.”

AI는 요청에 따라

• 문장별 톤 평가

• 단어 선택 개선 제안

• 브랜드 가이드라인 적합도 분석을
  모두 구조화된 JSON 데이터로 반환합니다.

이 데이터는 플러그인 내에서 시각화되어, 수정을 제안하는 텍스트의 원문과 수정 버전 문장을 나란히 보여주며 항목을 선택하면 바로 피그마에서 변경되도록 했습니다.

AI와의 협업에서 마주친 문제들

물론 모든 과정이 매끄럽진 않았습니다.
AI가 반환하는 JSON 형식이 불완전하거나, 특수문자 때문에 오류가 발생하는 경우가 종종 있었습니다.

예를 들어,

“AI 응답이 깨졌어. 문제를 파악하고 해결 방법을 제시해줘”

라고 말하면,

AI는 “JSON 블록만 추출한 뒤 단계별로 파싱해보라”는 방법을 제안했습니다.
(물론 저는 JSON이나 파싱에 대한 어떠한 지식도 없기 때문에 AI에게 알아서 해결해 달라고 했습니다.)
그렇게 여러 차례의 시행착오를 거치며 다단계 파싱 로직을 AI가 구현하여 문제를 해결 했습니다.

이 과정에서 배운 점은 명확했습니다.

AI는 완벽하지 않지만, 문제를 함께 해결할 수 있는 파트너라는 것.

UX Writing을 위한 도구의 UX

플러그인을 만들면서 ‘UX Writing’이라는 개념을 도와주는 플러그인의 UX를 고민하게 되었습니다.

분석 중일 때의 로딩 피드백, AI 응답 실패 시의 안내 문구,
버튼 활성화/비활성화 상태 같은 작은 요소들까지 신경 썼습니다.
이러한 마이크로 UX는 AI가 알아서 구현해주기도 하지만 말그대로 '알아서' 만들기 때문에
구체적인 요구 사항은 다시 한 번 요청하여 디테일을 수정할 필요가 있었습니다.

결국 플러그인의 완성도는 코드보다 ‘경험의 자연스러움’에 달려 있었고,
디자인 도구로서의 완결성을 유지하기 위해 여러 번 인터랙션을 다듬었습니다.

현재 플러그인은

• AI 기반 톤 분석 정확도 약 90%

• 70여 개의 규칙 자동 적용

• 실시간 미리보기 및 선택적 적용 기능을 제공합니다.

마치며

이번 프로젝트를 통해 가장 크게 느낀 점은 AI와 함께 일한다는 건 결국 대화의 기술이라는 것이었습니다.
AI에게 무엇을 만들지 설명하기보다, 왜 만들어야 하는지를 충분히 이야기하면 그 이후의 코드는 자연스럽게 따라왔습니다. 개발자가 아니더라도, 맥락을 설계하고 문제를 언어로 풀어낼 수 있다면 이제 누구나 AI와 함께 도구를 만들 수 있는 시대입니다.

AI가 코드를 대신 써주는 시대, 디자이너는 여전히 ‘맥락을 디자인하는 사람’이라고 믿습니다.