Cursor AI로 만든 피그마 플러그인 개발기
반복 작업을 자동화하고, 문제 해결자로 거듭나다
AI 디자인, 그대로 써도 될까?
최근 나는 다양한 AI 디자인 툴을 실험하고 있다. 텍스트를 입력하면 이미지나 컴포넌트를 생성해 주는 툴들 덕분에 브레인스토밍 속도는 확실히 빨라졌다. 하지만 반복적으로 느낀 점은 '결국 이걸 그대로 쓸 순 없겠구나'였다. 디자인이라는 건 맥락과 목적, 시스템이 얽힌 복합적 창작물이기 때문이다.
플러그인 실험을 위해 Claude가 디자인해 준 Wellness AppAI가 만들어준 화면이 완전히 엉뚱한 것은 아니다. 하지만 실제 서비스에 쓰기엔 어딘가 정제되지 않은 느낌, 브랜드 톤에서 벗어난 요소들이 보였다. 예를 들어, 버튼의 그림자가 다르거나, 텍스트 스타일이 들쑥날쑥하거나, 컬러가 시스템 가이드와 전혀 맞지 않는 경우가 많았다. 그래서 결국 다시 피그마로 가져와 손을 많이 봐야 했다. 그런데 이 작업이 반복될수록 '왜 매번 힘들게 스타일 정리부터 다시 해야 하지?'라는 의문이 들었다.
문제 인식: 왜 '시스템화'가 어려운가?
AI가 생성한 디자인은 일관성이 부족하다. 의도한 게 아니더라도, 다르게 정의한 컬러값, 폰트, 그림자 효과들이 무분별하게 섞여 들어온다. 이건 비단 AI툴만의 문제가 아니다. 다른 디자이너가 만든 파일을 받을 때도 자주 겪는 상황이다. 스타일이 시스템화되지 않은 디자인을 받으면, 그걸 다시 하나하나 스타일을 등록하고 정리하는 데만도 꽤 많은 시간이 들어간다. 이런 상황이 반복되다 보니, 결국 생각이 하나로 귀결됐다.
"디자인을 시스템화하는 반복 작업을 최소화할 수 없을까?"
디자인 요소를 한 번에 추출하고, 시스템 스타일로 등록하고, 그것을 다시 선택된 컴포넌트에 일괄 적용해 주는 툴. 그게 있다면, 훨씬 빠르게 AI 디자인을 실무에 쓸 수 있을 것이다. 이게 바로 이번 플러그인 아이디어의 출발점이었다.
해결 아이디어: 내가 필요한 플러그인을 내가 만든다
사실 처음부터 만들 자신이 있었던 것은 아니다. 단지 워크플로우 상 반복되는 비효율을 줄이고 싶다는 의지뿐이었다. 그럼에도 MVP로 정의한 범위는 명확했다.
선택한 디자인에서 폰트/컬러/그림자 스타일 일괄 추출
추출한 스타일을 로컬 스타일로 등록
등록한 스타일을 다시 해당 컴포넌트에 일괄 적용
베리어블 등록 같은 고급 기능도 고민은 했었지만, 핵심 가치를 빠르게 검증하는 것이 우선이었다. 그리고 무엇보다도 로컬 스타일 등록만으로도 충분히 핵심 가치를 검증할 수 있다고 생각했다.
테스트 주기 상 실험과 수정을 반복함으로 유연한 시스템이 적절
로컬 스타일은 '일관성 유지'라는 목적에 충분히 부합
베리어블은 적용 범위와 복잡성이 크다
이와 같은 이유로 MVP도 확실해졌고, 다음 단계로 어떻게 만드느냐의 관문이 나를 기다리고 있었다.
개발 파트너: Cursor AI의 발견
이 플러그인을 단 하루 만에 만들 수 있었던 건 Cursor AI라는 툴 덕분이다. 마치 코드에 특화된 ChatGPT 같다고 할까. VS Code와 비슷한 인터페이스에 자연어를 입력하면 아주 빠르게 코드를 짜준다. 무엇보다 놀라웠던 건, 단순히 코드 생성에 그치지 않고, 내가 이해하지 못하는 부분을 물으면 상세히 설명해 준다는 점이다.
마치 시니어 개발자 옆에서 페어 프로그래밍을 하는 느낌이었다. 실제로 나는 개발자가 아니기 때문에 에러 로그나 타입 구조를 보는 데 익숙하지 않다. 그런데도 Cursor AI와 대화하듯이 개발을 이어갈 수 있었고, 덕분에 처음으로 피그마 플러그인을 직접 만들 수 있었다.
나의 멋진 개발자, Cursor플러그인 개발 과정
플러그인을 만들기 위한 전반적인 흐름은 피그마튜터님의 영상을 참고했다. 플러그인을 구현하기 위한 실제 피그마 플러그인 개발 프로세스를 다음과 같이 정리할 수 있다.
1. 피그마에서 플러그인 기본 설정하기
피그마 파일을 하나 열고, 좌측 상단 피그마 아이콘 클릭 후 Plugins > Development > New Plugin... 클릭
팝업에서 플러그인 이름 설정 후 Figma Design, Custom UI 선택 후 [Save as] 클릭하여 로컬 폴더 지정
Plugins > Development > New Plugin...2. Cursor AI에서 코드 작성하기
Cursor AI 실행 후 [Open Project] 클릭 후 방금 저장한 플러그인 폴더 열기
오른쪽 대화 입력창에 원하는 기능을 플러그인으로 만들어달라는 내용 입력
(이 부분은 피그마튜터님이 제안해 주신 프롬프트를 응용해서 작성했다.)
생성된 코드를 확인하고 필요한 부분 수정
Cursor AI에서 코드 작성하기3. 플러그인 테스트 및 디버깅하기
피그마로 돌아가 Plugins > Development > Import from manifest... 클릭
해당 플러그인 폴더의 [manifest.json] 파일 열면 플러그인 리스트에 등록됨
플러그인 실행 후 동작 확인
에러가 생기면 좌측 상단 피그마 아이콘 클릭 > Plugins > Development > Show/Hide Console을 통해 로그 확인 및 수정
Plugins > Development > Show/Hide Console시행착오: font-weight 등록 오류와의 싸움
폰트 스타일 등록에서 자꾸만 오류가 났다. font-weight 값은 제대로 추출되는데, 로컬 스타일 등록에서 계속 실패했다. Cursor AI는 코드에 문제가 없다고 했다.
코드에는 문제가 없다...하지만 나는 여전히 기능이 동작하지 않으니 답답할 뿐이었다. 그래서 콘솔 로그를 통해 데이터가 어떻게 찍히는지 보기로 했다.
listAvailableFontsAsync()로 family와 style 모두 일치하는 폰트만 사용
없으면 fallback 및 안내 메시지
콘솔에 실제 사용 가능한 스타일 목록 출력
이 로직을 코드에 반영해 달라고 했고, 그 결과 콘솔 로그에서 내용을 하나하나 확인할 수 있었다. 그 과정에서 Figma에서 createTextStyle()로 새 스타일을 만들 때, fontName을 지정하기 전에 반드시 해당 폰트를 loadFontAsync로 로드해야 한다는 것을 알게 되었다. 만약 fontName을 지정하기 전에 fontSize, lineHeight 등을 먼저 지정하면, Figma는 기본값(Regular 등)으로 노드를 생성하고, 아직 폰트가 로드되지 않아 속성 변경이 불가해진다는 것.
이를 통해 Cursor AI가 모든 걸 자동화하진 않지만, 우리가 정확한 문제를 파악하고, 그 맥락을 제공하면 더 나은 해결책을 제시해 준다는 걸 체감한 순간이었다. 이러한 경험을 토대로 나와 같은 디자이너를 위한 Cursor AI 잘 쓰기 위한 소소한 팁을 몇 가지 공유하자면,
1. '작동이 안돼' 대신 콘솔을 스크린샷해서 보여줘라
Cursor는 눈이 없기 때문에 작동이 안 된다는 말을 들으면 맥락에 따른 문제파악이 어렵다. 대신 에러 로그나 콘솔 출력 결과를 캡처해서 전달하면 문제를 빠르게 이해하고 해결책을 제시해 준다.
콘솔 스크린샷2. 의도를 명확히 설명하라
너무 추상적인 명령으로는 원하는 결과를 얻기가 어렵다. '선택된 노드에서 컬러를 HEX 코드로 추출해서 콘솔에 찍어줘'처럼 구체적인 결과물을 요구하면 정확도가 올라간다. 특히 '이 함수가 어떤 입력을 받고 어떤 출력을 내야 하는지'명시해 주는 게 핵심!
3. 일단 결과를 보고 수정하는 방식이 빠르다
정확히 원하는 기능이 있더라도 처음부터 완벽히 짜달라고 하기보단, 테스크를 쪼개서 대략적인 코드 결과를 보고 피드백하면서 수정해 나가는 것이 효율적이다. 페어 코딩처럼 커뮤니케이션을 계속 이어나가며 함께 디벨롭한다고 생각하면 좋다. 실제로 등록된 로컬 스타일을 디자인에 적용하는 단계에서 한 번에 해당 기능을 만들어달라고 하는 것보다 컬러 스타일부터 적용해서 결과를 보고 단계적으로 진행하는 것이 오류를 찾기에 훨씬 수월했다.
반복 작업을 자동화하고, 문제 해결자로 거듭나다
이 전 과정을 통해 디자인-코드의 경계가 점점 허물어진다는 걸 체감했다. 단순한 기술 도입이 아니라, 디자이너가 문제를 정의하고, 도구를 통해 그 문제를 직접 해결할 수 있는 힘이 생기는 과정이었다. 이 플러그인을 만든 건 단순히 새로운 걸 만들어보고 싶어서가 아니었다. 실무에서 반복되는 문제를 해결하고 싶었다. 실제로도 이제 AI툴에서 디자인을 불러오더라도, 이 플러그인으로 스타일을 빠르게 시스템화할 수 있어 훨씬 수월해졌다.
[Design to System] 피그마 플러그인 보러가기
나의 따끈따끈한 피그마 플러그인, Design to System한편, 이 경험은 또 하나의 확신을 줬다. 이제는 디자이너도 개발을 두려워하지 않고, 필요한 툴을 직접 만들 수 있는 시대가 되었다는 것. Cursor AI와 같은 도구를 통해 누구나 빠르게 실험하고, MVP를 구현해 볼 수 있다. 그런 의미에서 Cursor AI는 그야말로 내 개발 파트너였다. 어떤 요청에서 필요한 코드들을 척척 만들어줬다. 지금 생각해 보면, 단순한 코드 스니펫 생성기를 넘어, 개발의 두려움을 없애준 강력한 심리적 지원군이었던 것 같다.
그리고 무엇보다도, AI와 협업해서 최고의 디자인 결과물을 뽑아내기 위한 방법을 계속 고민하고 있다. 최근에 주목받는 MCP(Multimodal Co-Pilot) 개념에 흥미를 느끼고 있으며, 앞으로 이 개념을 디자인 워크플로우에 어떻게 적용할 수 있을지 공부하고 실험해 볼 계획이다.
함께 고민해보고 싶어요
여러분은 반복적인 디자인 정리에 얼마나 많은 시간을 쓰고 계신가요?
지금 당장 자동화하고 싶은 디자인 작업은 무엇인가요?
Cursor AI와 같은 툴로 직접 만들어볼 아이디어가 있다면, 지금 시작해 보세요!
