디자이너 혼자 AI로 플러그인 디자인을 개발까지 할 수 있을까?

이전 포스트 AI로 플러그인을 만드는 방법 [기능편]

지난 [기능 편]에서는 코딩을 모르는 디자이너가 AI와 함께 플러그인의 로직을 구축하는 과정을 다루었습니다. 기능이 정상적으로 작동하도록 만들었다면, 이번에는 플러그인의 시각적인 UI를 구성할 차례입니다.

직접 플러그인을 개발하며 느낀 점은, AI를 활용할 때 일반적인 디자인 작업 방식과 다르게 접근해야 훨씬 효율적이라는 것입니다. 그 이유와 구체적인 실무 적용 과정을 공유합니다.

작업에 들어가기 앞서, 플러그인의 파일 구조를 다시 설명드리겠습니다.

code.ts: 피그마 캔버스의 데이터를 처리하고 작동하는 기능과 로직을 담당합니다.

ui.html: 사용자가 조작하는 시각적인 화면을 담당합니다.

이번 [디자인 편]에서 다룰 영역은 ui.html입니다. 피그마에서 작업한 UI 디자인이 최종적으로 적용되는 파일입니다.

일반적으로 디자이너는 피그마에서 완성도 높은 UI를 먼저 디자인한 후 개발을 시작하는 방식에 익숙합니다. 하지만 제가 AI와 협업하여 플러그인을 개발하며 깨달은 것은, '기능' 구현이 우선되어야 한다는 점입니다.

만약 완성된 HTML/CSS 디자인 코드를 먼저 작성해 두고, AI에게 "이 코드 사이에 기능 로직을 연결해 줘"라고 지시하면 오류가 발생할 확률이 매우 높았습니다. AI가 디자인과 기능의 연결 맥락을 모르기 때문입니다.

따라서 초기 단계에서는 디자인적 요소를 배제하고, 기능이 제대로 작동하는지 확인하는 데 집중했습니다.

기본적인 <button>과 <input> 태그만을 사용하여 단순한 형태의 UI를 구성했습니다. 이 단계의 핵심 목표는 앞서 작성한 code.ts와 ui.html 간에 데이터가 문제없이 통신 되는지 검증하는 것이었습니다.

단순한 UI에서 기능이 정상적으로 작동하는 것을 확인한 후, 사용자 경험(UX)을 고려하여 인터랙션을 설계했습니다.

기능을 사용할때, 사용자가 데이터를 어떻게 입력하는게 가장 편할지, 입력된 데이터는 어떻게 보여지는지 고민하였습니다. 이 과정을 거치니 실제 플러그인의 작동방식에 최적화된 UI 구조를 만들 수 있었습니다.

기능과 인터랙션 구조가 확립된 후, 피그마에서 최종 UI를 디자인하고 AI(Figma MCP)를 통해 코드에 반영했습니다. 실제 '차트빌더 플러그인'을 개발하며 UI를 개선했던 과정을 단계별로 설명하겠습니다.

Step 1. 기능 검증용 기본 UI 유지

초기에 기능 테스트만을 위해 만들었던 템플릿 UI입니다. 텍스트와 기본 색상 스와치 정도만 배치되어 있으나, "템플릿을 저장하고 불러온다"는 핵심 기능은 데이터와 연결되어 완벽하게 작동하는 상태였습니다.

Step 2. 새로운 기능 추가 전, AI를 통한 기술 검증

템플릿에 미리보기 썸네일이 필요하다는 사용자 의견이 있어, 기능 업데이트 과정을 거쳤습니다. 간단하게 러프 스케치 후 예상되는 기능들을 정의해서 AI에게 구현 가능성을 검토하였습니다.

Step 3. 피그마에서 최종 디자인 후, Figma MCP로 전달

기술적 구현이 가능하다는 것을 확인한 후, 피그마에서 썸네일이 포함된 카드 레이아웃을 디자인했습니다. 그리고 Figma MCP(Model Context Protocol)를 활용해 AI에게 피그마 디자인 링크를 전달하며 적용을 요청했습니다.

레이어 이름을 기능에 맞게 정의하고 개발된 기능과 연결하도록 명령하였습니다. 이렇게하니까 AI가 연결 맥락을 알게돼서 더 수월하게 작업했던 것 같습니다.

Step 4. 최종 결과물 확인

최종 결과물입니다. 단순했던 기능 코드 위에 피그마에서 의도한 UI 디자인이 성공적으로, 그리고 오류 없이 반영되었습니다.

직접 디자인하는 것은 조금 시간이 걸리지만, 기존 AI를 이용한 디자인 작업을 진행했을때, 수정요청(의도한 디자인이 나올때까지)과 반복작업을 줄이게 됩니다.

처음부터 복잡한 디자인을 AI에게 전달했다면 코드 적용 과정에서 문제가 발생하기 쉬웠을 것입니다. 하지만 [기능 구현 및 검증 → 기술적 검토 → Figma MCP를 통한 디자인 적용]이라는 순서로 제작함으로써,별 문제없이 플러그인을 완성할 수 있었습니다.

이러한 작업방식은 플러그인 뿐만 아니라 다른 디자인 업무에서도 유효합니다. 만약 처음부터 AI를 이용해 개발 + 디자인을 진행한다면, 기능 제작 → UI 디자인의 순서로 작업해보시기 바랍니다.

어떤 플러그인을 개발했는지 보고싶다면?

악순환을 제거하는 차트빌더 플러그인