Bolt로 Figma 플러그인 만들기, UX 디자이너가 직접 해본 후기
Figma 플러그인, 디자이너도 만들 수 있을까?
'Figma 플러그인, 디자이너도 만들 수 있을까?' 이런 고민, 한 번쯤 해보셨죠? 저도 그랬어요. 개발은 복잡하고 어려운 일처럼 느껴졌었죠. 그런데, 이번에 'Bolt'를 이용해 직접 Figma 플러그인을 만들면서 생각이 완전히 바뀌었습니다.
오늘은 'Bolt로 피그마 플러그인 만들기' 과정에 대해 이야기 해보려고 해요!
✤ 페이지 맨 마지막엔 UX 라이팅 피그마 플러그인 파일도 다운 받을 수 있습니다!
플러그인을 만든 Bolt란 무엇인가요?
Bolt는 '프롬프트만 입력하면 개발에 필요한 파일을 자동으로 만들어주는 AI 도구'입니다. 개발 지식이 없어도 Figma 플러그인, 웹사이트, 간단한 앱 등을 빠르게 프로토타입으로 구현할 수 있도록 돕는 서비스죠.
특히 저처럼 디자이너 입장에서 '아이디어는 있는데, 코딩을 어떻게 시작해야 할지 모르는' 분들에게 Bolt는 정말 유용합니다. (참고: https://bolt.new/)
Bolt의 장점은 프롬프트를 중심으로 작동하기 때문에 개발 언어를 깊이 이해하지 않아도 내가 원하는 기능을 구현하는 데 필요한 구조를 자동으로 만들어준다는 점입니다. 특히 Figma 플러그인 개발 시 필요한 manifest.json, code.ts, ui.html 파일을 정확한 형식으로 세팅해주기 때문에 디자이너 입장에서 진입장벽을 크게 낮춰줍니다.
내가 만들고 싶었던 플러그인: UX Writing 점검 도구
저는 일단 기획부터 하기 시작했어요. 문제 정의를 먼저 한거죠!
Figma에서 디자인 작업을 하다 보면, 문구 하나하나가 브랜드 톤을 지키고 있는지, 맞춤법은 틀리지 않았는지 항상 신경 써야 하는 상황이 있었어요. 그런데 그걸 매번 직접 확인하기는 번거롭고, 회사마다 정의한 UX Writing 룰도 다 다르죠.
그래서 저는 '디자인 팀에서 정의한 룰을 기준으로 문장을 점검하고, 맞춤법까지 체크해주는 플러그인'을 만들고 싶었어요. 특히 플러그인 사용자가 회사의 UX Writing 룰셋을 손쉽게 적용할 수 있도록, 룰을 직접 입력하고 검사할 수 있는 형태를 생각했어요.
이 과정에서 핵심은 당연히 Bolt 라는 AI 툴이 제가 생각한 기능을 구현해줄거라는 믿음이 있었어요. 그리고 기획은 당연히 꼼꼼히 해야 하는 부분이 있었죠.
Bolt에 입력한 프롬프트는 이렇게!
Bolt 는 코드를 만들때 토큰을 사용하기 때문에 처음부터 프롬프트를 잘 입력해야겠다고 생각했어요. 그래서 Bolt 에서 바로 시작하기보단. ChatGPT 를 이용해 제가 생각한 기획의 의도를 잘 담은 프롬프트를 작성해야 겠다고 생각했죠.
제가 생각한 기획의도를 ChatGPT에 작성했고, 그 기획을 프롬프트로 만들어달라고 요청했어요. 그리고 나온 프롬프트는 아래와 같아요!
이제 이렇게 프롬프트를 작성해서 Bolt에 입력하면, 플러그인에 필요한 파일 구조와 코드 샘플이 자동으로 생성될꺼에요.
Bolt가 만들어준 파일 구조
제가 입력한 프롬프트를 Bolt 에 입력했고. Bolt AI가 알아서 개발자처럼 파일을 세팅해주는 과정이 꽤나 인상적이었어요. 특히 반복적인 세팅 작업에서 오는 스트레스를 확 줄여주기 때문에 빠르게 테스트해볼 수 있었습니다.
- manifest.json
- code.js
- ui.html
딱 피그마 플러그인 가이드라인에 맞게 만들어지죠. Bolt는 특히 Figma 플러그인 개발에 필요한 파일 구조를 정확히 인식하고, 코드도 TypeScript로 잘 정리해줬어요(Bolt 의 경우 ts 파일로 만들어주는데. 피그마 파일은 js 로 만들어야해요! 그래서 js 파일까지 만들어 달라고 해야 합니다).
manifest.json 파일에는 플러그인의 이름, ID, API 버전 등이 세팅되고, code.js에서는 실제 API 호출 및 텍스트 노드 처리 로직이 포함되어 있었어요. UI.html 파일은 사이드바 형태로 사용자 인터페이스를 구성할 수 있게 기본 템플릿이 들어갑니다.
플러그인 시행착오, 그리고 개선 포인트
처음에는 UX Writing 룰 검사는 OpenAI API로, 맞춤법 검사는 나랏말싸미 API를 사용하도록 설정했는데요. 막상 개발해보니 두 개의 API를 따로 연동하는 게 번거롭더라고요. 결과적으로 OpenAI API 하나로 룰 점검과 맞춤법 검사를 모두 처리하는 방향으로 수정했습니다.
Bolt가 만들어준 파일을 Figma 플러그인 개발자 모드에서 불러와 직접 테스트했을 때, 처음엔 API 호출 방식이나 파싱 로직에서 예상치 못한 오류도 있었습니다. 하지만 Bolt에서 제공해주는 기본 코드와 Figma 플러그인 공식 가이드(https://www.figma.com/plugin-docs/)를 참고하며 빠르게 수정할 수 있었죠.(사실 이것도 Bolt 에서 물어보면서 할 수 있어요!)
플러그인을 만들면서 느낀 건, 처음부터 완벽한 플러그인을 만들려고 하지 말고 '돌려보고, 개선하고, 다시 돌려보기'를 반복하는 게 핵심이라는 점입니다. Bolt를 쓰면 이 과정이 정말 빠릅니다.
저는 앞으로 디자인 팀 내에서 사용하는 UX Writing 규칙을 Json으로 관리하고, 이를 플러그인에 불러오는 방식으로 확장성을 고려하고 있어요. 초기에는 단순히 텍스트 기반 룰 점검이었지만, 향후에는 규칙을 카테고리별로 나누고, 위반 시 시각적으로 피드백을 주는 방향으로 발전시킬 계획입니다.(많관부!!)
앞으로의 계획: 계속 개선합니다
지금 만든 플러그인은 일단 기본적인 룰 점검과 맞춤법 수정은 가능하지만, 향후에는 사용자 정의 룰셋을 쉽게 업로드할 수 있는 기능도 넣을 예정입니다. 룰셋 관리 기능이 들어가면 팀 내에서 정의한 가이드를 디자이너들이 더 직관적으로 사용할 수 있겠죠.
그리고 OpenAI API의 피드백을 더 세분화해서, '톤앤매너 가이드에 맞춘 수정 제안'까지 해주는 방향으로 업데이트할 계획이에요. 예를 들어, '우리 브랜드는 반말을 쓰지 않는다'는 룰을 넣어두면, 그 룰에 맞춰 문장을 제안하는 식입니다(사실 이부분은 되긴 하는데, 쉽게 규칙을 적용해주지 않더라고요!)
Bolt의 AI 생성을 활용하면 이런 기능 확장도 매우 빠르게 시도해볼 수 있기 때문에, 계속해서 피드백을 반영하고 고도화하는 것이 목표입니다.
디자이너도 플러그인을 만들 수 있습니다
'Bolt 피그마 플러그인 만들기'는 생각보다 어렵지 않았어요. 중요한 건 '내가 어떤 플러그인을 만들고 싶은지 명확하게 정의하는 것'과 '완벽하지 않아도 실행해보는 것'이었죠. 모든 과정을 시작할 때 기획을 얼마나 꼼꼼하게 하느냐가 결과물의 완성도를 좌우하더라고요. 실행하면서 끊임없이 개선하는 것도 물론 중요하지만, 그 출발점인 '기획'이 제대로 서 있어야 방향을 잃지 않습니다.
결국 어떤 도구를 쓰든 중요한 건 '기획력'과 '실행력'입니다. 아이디어를 구체화하고, 빠르게 시도해보며, 얻어진 피드백을 바탕으로 개선하는 힘이야말로 진짜 실력을 만드는 과정이지 않을까요?
UX 라이팅 검사기 다운로드
참고자료
- Bolt 공식 사이트: https://bolt.new
- Figma Plugin API Guide: https://www.figma.com/plugin-docs/intro/
- OpenAI API Reference: https://platform.openai.com/docs