디자이너가 직접 만들어 본 Figma 플러그인

넷마블 디자인팀은 반복 작업을 줄이기 위해 Figma 플러그인을 직접 만들었다. 공통 디자인 요소를 컴포넌트 해제 없이 동기화하고, 다국어·다중 이미지 사이즈 변형 같은 번거로운 작업을 보조하는 것이 목표였다.

첫 MVP는 ChatGPT를 활용해 빠르게 시작했지만, 생성된 코드가 Figma API 최신 문서와 맞지 않아 시행착오를 겪었다. 특히 존재하지 않는 getStyleById를 쓰는 등 오류가 나면서, 생성 코드는 참고용으로만 두고 문서와 직접 대조해 구현하는 방식으로 전환했다.

이후 Figma Plugin DS를 적용해 Figma와 유사한 UI를 만들고, 플러그인 구조에 맞춰 기능을 확장했다. 다만 ui.html 내부 스크립트 분리, loadFontAsync의 동작 방식, FontName.style과 StyledTextSegment.fontweight의 타입 차이 같은 난관은 완전히 깔끔하게 풀지 못한 부분도 있었다.

핵심 기능은 다음과 같다.

• 선택한 객체와 같은 이름을 가진 요소들의 스타일 동기화
• 입력 폼 검증과 버튼 활성화 조건을 통한 오작동 방지
• WAI-ARIA 적용으로 기능 전환과 토글의 접근성 강화
• 마지막 메뉴 상태와 입력값을 기억하는 간단하지만 유용한 UX
• clientStorage와 날짜 차이를 활용한 입력값 보관 기간 제어

실사용 후에는 특정 기능 위주로 활용되면서도, 기존 대비 약 50% 이상 작업 속도와 효율이 개선됐다. 결국 이 경험은 비전공자라도 ChatGPT + 공식 문서 + 직접 구현 조합으로 업무 자동화를 현실화할 수 있다는 점을 보여준다.