디자이너의 GPT로 피그마 플러그인 5일만에 배포하기

뭔가 어색하네요. 하지만 빨랐죠?

3줄 요약

✅ 피그마를 쓰다가 내가 불편해서 그냥 만들어보자 하고 무작정 도전
✅ GPT, Claude, Galileo ai를 활용해서
기획, 디자인, 개발까지 3일, 플러그인 심사 2일만에 배포�
✅ 배포 20일차, 사용인원 115명. AI를 활용하면서 여러 가능성을 체험해보아서 좋은 스터디가 되었다

프로젝트의 시작••

사실 이 작업은 시안에 20여개의 섬네일 배경을 업로드하다가 아 이건 너무 비효율적이다.. 하는 생각으로 시작되었습니다.

디자인 시안을 만들다보면 귀찮아서 리스트나 섬네일을 복붙하고는 하는데, 똑같은 이미지가 반복되는게 보기 싫거나 프로토타입으로 만들어 테스트할때는 많은 이미지를 하나 하나 업로드해줘야 했는데요.

피그미 커뮤니티에는 랜덤으로 조합을 해주거나 색을 입혀주는 플러그인은 있었는데 제가 딱 원하는 기능(내가 가지고 있는 여러 더미 이미지를 여러 도형 배경으로 한 번에 올리기)을 찾을 수 없었습니다.

그러다 문득 GPT 같은 AI 기술을 활용하여 자동화할 수 있지 않을까 하는 아이디어가 떠올랐고, 이번 기회를 통해 직접 구현해보자! 하고 시도하게 되었습니다.

문제 정의 및 해결 방향 잡기

이미지.. 언제 다 바꿔요..?

제가 생각한 문제점은 ‘피그마에서 디자인 작업 시 여러 섬네일을 올리고 싶지만 이미지를 하나씩 단순 반복하여 올려야 하는 작업이 비효율적이다’는 점이었습니다.

같은 이미지를 한 번에 업로드하기 보다는, 좀 더 다양한 이미지를 넣어 디자인 시안의 퀄리티를 높이고 싶었고, 이런 반복 작업을 자동화할 수 있다면 화면 퀄리티도 높이고 생산성도 높아질 것이다, 라고 가정하여 플러그인 기획을 짜게 되었습니다.

기획은 주로 GPT에게 제 아이디어를 말해주고 구체적인 구현 방법과 구현 가능성에 대해 물어보는 방식으로 진행했습니다. 이전에 플러그인를 만들어본 적이 없고, 기술적으로 내가 원하는 기능이 어디까지 구현될 수 있는지 확인이 필요했기 때문입니다. 그이 부분은 GPT와 논의하면서 이 작업의 주요 포인트를 정할 수 있었습니다.

사용자가 로컬 폴더를 선택하면 해당 폴더 내 이미지 중 랜덤으로 선택하여 배경으로 등록하는 기능을 만든다.

UI 구성 및 디자인을 직관적이고 단순하게 설계한다.

빠른 MVP 출시를 위해 필수 기능 위주로 개발하고, 이후 업데이트를 통해 확장 가능성을 열어둔다.

처음에는 JSON 데이터를 활용하여 피그마 디자인 파일에 웹사이트에서 추출한 랜덤한 텍스트 및 이미지를 삽입하는 방식을 생각했지만, 검토 후 사용자가 직접 로컬 폴더에서 이미지를 선택하도록 수정하였습니다. 또한 Google Sheets API를 활용해서 텍스트 관리를 하려 했지만 Figma 내 REST API 문제 해결이 지연되다보니 빠른 배포 목적에 맞지 않아 해당 방식도 보류되었습니다.

기능 구현 및 디자인하기

구체적인 기획과 방향이 나오고 GPT에 코드를 짜달라고 요청했더니 플러그인에 들어가는 code.js와 ui.html에 들어가는 코드들을 바로 짜주었습니다. 코드 편집은 vscode로 했고, 피그마 플러그인 개발모드에서 적용했더니 바로 기능을 확인할 수 있었습니다.

처음엔 UI를 고려하지 않고 아이디어를 구현할 수 있는지만 체크했더니 이런 투박한 화면이 나왔습니다.

테스트를 하면서 필요하다고 생각되는 부분들은 추가적으로 GPT에 요청하면서 코드를 계속 수정해 나갔습니다. 예를 들어 한글과 영문을 스위칭하여 플러그인을 쓰게 하거나, 텍스트에는 배경 이미지를 입힐 수 없는데, 실수로 텍스트가 선택된 경우에는 배경을 넣을 수 없는 도형이라고 알려주는 토스트를 띄우거나 하는 케이스 등이 있었습니다.

GPT로 수정이 안되거나, 버그 처리가 안되는 경우엔 Claude에 코드를 올려 수정하기도 했습니다.

필요할때마다 그때 그때 좀 더 요구사항을 잘 알아듣고 처리해주는 ai를 바꿔가면서 적용해나갔습니다.

어느 정도 제가 원하는 기능들이 80% 이상 구현되었다고 보여졌을 때, 화면 디자인을 진행해보았는데요. 플러그인 디자인 초안은 갈릴레오ai로 잡아보았습니다.

사실 이 작업에서 갈릴레오는 적극적으로 활용하진 않았고, 기본적인 프레임과 레이아웃을 빨리 잡기 위해 활용했습니다. 갈릴레오ai에서 만든 디자인을 바로 피그마에 가져왔더니 frame과 auto layout이 이미 잡혀있어서 제가 원하는대로 수정만 하여 시안을 만들 수 있었습니다.

여기서 완성한 이미지는 GPT, 클로드에 이미지를 업로드하여 화면을 구현할 수 있는 html을 생성해달라고 요청하여 기본 소스를 얻고 피그마의 기본적인 개발자 모드 CSS를 활용하여 구현하였습니다. (이 과정에선 기본적인 css 지식이 필요한 것 같습니다)

UI까지 적용된 후 기본 기능들이 정상적으로 동작하는지, 콘솔 에러가 나오는지, 작업에 따른 피드백 UI가 잘 노출되는지를 계속 확인하며 버그 수정 및 최적화를 진행했습니다.

플러그인 배포하기

마지막으로 남은 작업은 플러그인의 이름을 정하고 설명, 사용 가이드를 만들어 정식 배포를 진행하는 것이었습니다.

이 과정에서도 GPT로 아이데이션을 하며 이름을 정했습니다. GPT가 추천해준 여러 이름 중 ‘랜덤으로 뿌린다’는 의미의 스프링클❣️이 맘에 들었고, 제가 좋아하는 간식인 도넛이 떠올라 간단하게 이름과 로고를 정할 수 있었습니다.

플러그인 사용 방법과 데모 이미지를 작성했구요, 데모에 들어가는 이미지들은 저작권 문제가 있을까봐 역시 DALL.E로 임의의 배경을 생성하여 추가했습니다. 상세한 설명과 사용 영상을 넣고 버그 리포트를 받을 수 있는 구글 폼까지 만들어 플러그인 리뷰 2일만에 정식 배포를 완료했습니다.

(사실 테스트 영상이 없어서 한번 빠꾸?먹었습니다 ㅎㅎ 화면 녹화를 해서 올렸더니 바로 통과! )

빠르게 승인해줘서 고마워요 알렉스..

배포 후•• 느낀점과 한계점

정말 생각보다도 빠르게 목표를 완수할 수 있었지만 아쉬운 점도 있었습니다.

첫번째로는 AI로 모든걸 개발 완료하기에는 기대했던것 보다 한계가 있다고 느꼈습니다.

제가 처음 GPT에서 사용한 엔진은 GPT-4o였는데요, 코드가 계속 길어지니까 어느 순간부터는 기존 코드를 빼먹거나 잘못 수정하는 오류가 자주 발생하곤 했습니다. 그래서 Claude를 함께 사용하면서 부분 부분 필요한 부분을 넣거나 제가 직접 하드 코딩으로 수정해야 하는 케이스들이 나오기도 했습니다.

다만 이 작업 중 1월 31일에 o3-mini-high 모델이 새로 나왔고, 이 모델을 이용하고 나서는 4o에서 수행하지 못한 오류 해결, 코드 효율화 결과값이 더욱 정확해져셔, 앞으로는 점점 더 나아질거라고 생각이 들었습니다.

두번째로는 GPT의 환각현상(hallucination)을 많이 체감했습니다. 특히 코드를 온전히 이해하지 못하는 상태에서는 분별하기 어려웠습니다. API 사용이 가능하다고 했다가 피그마 도움말을 보니 그대로 쓰지 못하는 경우, 유사한 플러그인이 있는지를 찾아봐달라고 했지만 근거가 없는 자료를 가져오는 경우 등이 있었는데요.

이렇게 맥락에서 벗어나거나 존재하지 않는 내용을 만들어내는 대답을 줄이기 위해 SNS에서 얻은 프롬프트를 메모리에 업데이트하였습니다. 답변에 대해 정확한 출처를 근거로 말하고, 확실하지 않은 정보는 ‘추측이다’라고 답변하는 원칙을 입력하여 보정하려고 했는데요, 이후 답변부터는 이런 현상이 일부 줄어들기는 했지만 아직 믿을 수 없어서(?) 의심하면서 대답을 검토하고 있습니다 ㅎㅎ

아직 배포한지 한 달이 되지 않았지만 100여명의 사용자가 플러그인을 사용하고 있습니다.

개인적으로 쓸려고 시작한 작업이었고 아직 부족한 부분이 많지만, 목표로 했던 ‘AI를 이용해서 원하는 기능 빠르게 오픈하기’를 달성하고 여러 시도를 할 수 있어서 유익하고 보람을 느껴서 좋았습니다. AI를 활용해서 다양한 시도를 해보시려는 분들께 도움이 되면 좋겠습니다.

이 피그마 플러그인은 아래 링크에서 확인하실 수 있습니다.

� https://www.figma.com/community/plugin/1466347265231707652/figma-sprinkle-random-image-text