누구나 피그마(Figma) 플러그인을 만들 수 있다! 한 달 만에 Autoflow 대체 플러그인을 만든 이야기

피그마(Figma)에서 자신만의 플러그인을 만들고 싶은 분들을 위해 이 글을 준비했습니다. 인공지능(AI)을 활용해 플러그인을 개발하는 가장 효과적인 무료 방법을 소개하며, 여러분이 고생하지 않도록 제 경험을 공유하겠습니다.

저는 매일 아침 컴퓨터 앞에 앉아 플러그인의 구조와 디자인을 구상하며 AI 도구를 활용해 코드를 작성했습니다. 때로는 한 가지 기능에 하루 8시간을 모두 쏟아붓기도 했습니다. AI 모델을 바꿔가며 제대로 된 결과를 얻으려고 노력했지만, 그 과정은 정말 힘들고 고통스러웠습니다. 그래도 결국 피그마 커뮤니티에 무료로 배포할 수 있는 안정적인 플러그인을 완성했습니다.

이 플러그인은 객체를 화살표로 연결하는 기능을 제공합니다. 화살표는 사용자가 원하는 대로 모양을 바꾸거나 텍스트를 추가할 수 있고, 복잡한 다이어그램에서도 연결된 객체를 강조해 쉽게 파악할 수 있도록 돕습니다. 처음에는 ComfyUI라는 AI 모델 실행 웹 인터페이스의 노드 시스템에서 영감을 받았지만, 나중에는 거의 백만 명의 사용자를 보유한 Autoflow처럼 편리한 화살표 기능을 구현하는 데 집중했습니다.

결과적으로 Autoflow보다 더 나은 기능을 만들어냈다고 자부합니다. 플러그인을 실행하면 화살표가 자동으로 재배치되고, 커스터마이징 옵션도 더 다양하며, 객체를 드래그할 때 선이 부드럽게 다시 그려지는 느낌이 좋습니다. 게다가 다른 플러그인에서는 유료로 제공되는 추가 기능들도 포함되어 있습니다. 예를 들어, 프로토타이핑에 유용하도록 캔버스에 바로 추가할 수 있는 커서 탭을 별도로 마련했고, FigJam에서 제공하는 기본 도형들도 쉽게 복사해 사용할 수 있도록 했습니다. 만약 제가 만든 화살표 디자인이 마음에 들지 않는다면, FigJam의 기본 화살표를 바로 옆에서 선택해 사용할 수도 있습니다.

이제 플러그인 개발에 사용한 도구와 팁을 소개하겠습니다. 무료로 사용할 수 있는 최고의 서비스로는 Gemini CLI를 추천합니다. 이 도구는 하루 1,000번의 요청을 처리할 수 있는 강력한 모델을 제공합니다. 다만, 최신 버전으로 주기적으로 업데이트해야 더 나은 성능을 경험할 수 있다는 점을 기억하세요. 유료 서비스 중에서는 Claude Code가 훌륭하지만, 특정 모델은 제한이 많아 사용에 제약이 있을 수 있습니다. 초보자라면 Visual Studio Code의 Copilot 확장 프로그램도 좋은 선택입니다. 할당량이 넉넉해서 오래 사용할 수 있지만, 모델이 다소 오래된 편이라 최신 AI 성능을 원한다면 Gemini CLI가 더 나을 수 있습니다.

개발 초반에는 어떤 도구를 선택해야 할지 몰라 여러 가지를 시도하며 시간을 낭비하기도 했습니다. AI 모델의 한계도 느꼈는데, 특히 메모리 제한 때문에 매번 파일 구조나 플러그인 설계를 처음부터 설명해야 했습니다. 이 과정에서 모델이 기존 코드를 수정하며 문제를 일으키는 경우도 많았습니다. 예를 들어, 선 그리기 속도를 개선하려고 했더니 캐시 기능이 망가져 플러그인이 느려지는 문제가 생기기도 했죠. 하지만 버전 기록을 꼼꼼히 남겨두었기 때문에 이전 코드와 새로운 코드를 결합해 더 나은 결과를 얻을 수 있었습니다.

또한 코드 변경 사항과 최적화 내용을 텍스트 파일로 정리해두는 것도 큰 도움이 되었습니다. AI 모델이 모든 맥락을 이해하기 어려울 때가 많았기 때문에, 이런 기록이 문제를 해결하는 데 유용했습니다. 때로는 제가 문제를 잘못 이해하고 몇 시간 동안 같은 부분만 고치려다 코드를 망치기도 했습니다. 그럴 때는 잠시 쉬고 나서 다시 생각해보니 해결책이 보이더군요. 몇 날 며칠 최신 버전을 다듬으려 애썼지만, 문득 이전 버전을 실행해보니 더 안정적으로 작동하는 경우도 있었습니다. 결국 오래된 버전에서 버그를 고치는 게 더 쉬웠던 적도 많았습니다.

플러그인 개발을 하며 얻은 교훈을 몇 가지 정리해보겠습니다. 첫째, 규칙적으로 휴식을 취하세요. 15분 정도 컴퓨터에서 떨어져 있거나, 하루 작업 시간을 제한하고 밖에 나가 산책을 하면 문제를 더 빨리 해결할 수 있는 아이디어가 떠오릅니다. 둘째, 작업을 시작하기 전에 구체적인 시나리오와 경쟁 제품의 기능을 조사하고, 사용자 인터페이스(UI)를 미리 구상해보세요. 최종 결과물을 명확히 이해하고 있으면 AI와의 소통도 훨씬 수월해집니다. 셋째, 비슷한 솔루션을 분석하고 적합한 기술과 구조를 미리 설계하도록 AI에 요청하면 코드가 처음부터 효율적으로 작성됩니다. 넷째, 코드가 불필요하게 길어지지 않도록 주의하세요. 마지막으로, 정말 이 작업이 필요한지 잘 생각해보세요. 목표가 불분명하면 AI도 혼란스러워할 가능성이 큽니다.

첫 번째 버전의 플러그인은 버그투성이에 디자인이 엉성하고 시나리오도 제대로 구상되지 않은 상태였습니다. 하지만 작은 것부터 시작해 점진적으로 개선해나가니 결국 괜찮은 결과물을 만들 수 있었습니다. 약 40개의 버전을 거치며 한 달 만에 제대로 작동하는 플러그인을 완성했죠. 이 여정을 통해 작은 단계로 나아가면 무엇이든 해낼 수 있다는 자신감을 얻었습니다. 혹시 여러분도 이런 도전을 시작하고 싶다면, 진심으로 행운을 빕니다!