델봉하우

최근에 Chat GPT가 관심을 가지면서 글쓰기 분야에서 많이 사용되고 있습니다. 디자인 분야에서도 최근에 Adobe 에서 제공하는 AI Tool 부터, Canva 에서 활용할 수 있는 AI 까지 다양한 Tool들이 제공되고 있어 UX 업무 효율을 향상해 줍니다. 피그마 에서도 GPT 플러그인을 다양하게 제공 하고 있어 반복 작업은 좀 더 빠르게 해줍니다. 그 결과 디자인과 서비스의 품질 향상에 시간을 더 들일 수 있게 됐습니다. 피그마 GPT 플러그인과 이를 활용하는 방법을 알아보겠습니다.

피그마에서 제공하는 AI 툴의 종류

피그마를 사용하다 보면 반복적으로 하는 디자인 업무, 새로 아이디어를 내야하는 업무 등이 있습니다.

반복적인 업무 중엔 디자인 작업물을 내보내기 위해 텍스트를 이미지로 변환 하는 경우, UI 상태에 따른 master-하위 컴포넌트 생성 등 반복적으로 하는 업무를 자동화 해주는 툴이 있습니다. 또한 새로 아이디어를 내는 경우는 친숙하게 아는 것처럼 Dall-E와 같이 아이디어를 내는데 도움을 주는 툴들이 있습니다.

1. Automator 플러그인 (유료):

키보드 숏컷등을 활용해 반복적인 작업을 자동화 해주는 툴 입니다. 텍스트 입력, 디자인 컴포넌트 등 배치 하는 작업을 자동화 해줍니다. Automator Coummunity에서도 다양한 방법등을 참고해 볼 수도 있습니다.

Automator로 사용할 수 있는 기능

• 추가할 항목(Frame, text) 등을 선택하면, 자동으로 생성해 줌
• 문서 내에 있는 text 스타일 가이드를 자동으로 정리 (Community의 자동화 기능 활용)

다만, 월에 9달러 정도 사용료가 있기 때문에 충분히 고민하신 후 활용하셔야할 것 같습니다.

장점 :

• 업무 시간이 줄어듭니다. 텍스트 입력, 디자인 컴포넌트 배치, 색상 변경, 스타일 가이드 작성 등 반복 업무를 자동화 해줍니다.
• Automator를 사용해 텍스트를 추가할 때 자동으로 맞춤법 검사를 해줍니다 (영문 한정). 이 때 오류를 줄일 수 있습니다.
• Community가 있어 Automator 유저들이 다양한 플러그인을 제공합니다. 플러그인을 활용하면 더 쉽게 사용할 수 있습니다.

단점:

• 입문자가 사용하기에 난이도가 높습니다. 플러그인 지식을 요구한다고 하네요.

• 2. Builder.io 플러그인(유료) :

builder.io는 Chat-GPT의 프롬프트처럼 단순히 텍스트를 입력해 UI를 생성해 주는 것 부터, 피그마로 디자인 된 UI를 코드로 변환해주는 것 까지 다양한 기능을 제공하는 AI Co-pilot Tool 입니다.

하지만, 아직 개발 초기 단계이기 때문에 기능이 한정적입니다. 현재는 아직 상태 관리, 애니메이션, 리액티브 코드 등을 아직 지원하지 않습니다. 해당 플러그인은 유료(월 19달러) 이며, 무료로는 일부 기능만 사용 가능 합니다.

무료 버전으로는 Visual Copilot 기능(디자인을 코드로 변경하는 기능)을 사용해볼 수 있습니다.

• 3. Wireframe Designer (영어사용 가능해야함) – 무료

처음 와이어프레임을 그릴 때 막막하다면, ‘Wireframe Designer’를 사용해봐도 좋습니다. Chat-GPT 기반으로 구동되는 AI 입니다. 원하는 제품 유형, desktop/mobile 여부, 그리고 원하는 디자인 스타일을 상세하게 작성한다면 그에 따라 wireframe 디자인을 생성해 줍니다.

다만, 아직 완성도가 떨어지기 때문에 어려운 제품이라면 생성이 안될 수 있으니 여러 번 도전해봐야 합니다.

그 외 피그마에서 활용 가능한 간단한 AI 도구들

UI 디자인을 사용할 때, 자동으로 텍스트생성, Color에 대한 아이디어도 얻을 수 있습니다. 이런 업무를 도와주는 플러그인은 아래와 같습니다.

• ColorAI (영문 사용)
  • ColorAI는 내가 디자인한 제품에 원하는 디자인 컨셉으로 변경하고 싶을 경우 해당 컨셉에 맞게 디자인을 추천해 줍니다.
    단순시 프롬프트를 입력해 원하는 브랜드와 유사한 컬러코드를 보여줍니다.
• Figaro (영문 사용)
  • UI의 일부 텍스트에 시각적인 디자인을 변경하고 싶다면, 원하는 스타일을 프롬프트에 입력 합니다. 프롬프트에 입력하면 자동으로 디자인을 제안해 줍니다.
  • 제안해준 디자인이 완벽하진 않지만, 완성도 높이기 위한 아이디어를 얻을 수 있습니다.
• Dall-E Bro
  • UI 디자인을 하다보면, 이미지 영역이 생기곤 합니다. 예시 무료 이미지를 생성하고 싶을때, Dall-E를 활용해 원하는 이미지를 prompt를 선택새 생성할 수 있습니다.

피그마 AI 플러그인을 잘 활용하려면?

AI 플러그인은 완벽한 디자인을 해주지 않습니다. 하지만 그동안 Dribble, Behance, Pinterest 등을 통해 UI 구성, 색감등의 아이디어를 얻었다면, 플러그인을 활용하면 좀 더 빠르게 내가 원하는 결과를 도와줄 수 있습니다.

피그마에서 제공하고 있는 AI 도구들은 Open-AI의 Dall-E 등의 서비스를 활용하고 있습니다. Chat-gpt 프롬프트등을 좀 더 이해할 수 있다면 더 나은 결과물들을 빠르게 탐색할 수 있습니다.

마지막으로, 대부분의 Tool 등이 아직 영문으로 제공되고 있습니다. 영어에 친숙하지 않다면 Papago, Google 번역, DeepL AI 혹은 웹브라우저에서 제공하는 Chat-GPT의 번역 툴(bing, Bard 등) 을 활용해 보세요.

마무리

여기까지 피그마에서 제공하는 AI 플러그인들을 알아보았습니다. 생각보다 다양한 AI 플러그인들이 나오고 있어 깜짝 놀랐습니다. 피그마에서 제공하는 플러그인 외에도 UI UX 디자인/기획에 활용 할 수 있는 AI 기반 다양한 솔루션 들이 있습니다. 다음에는 이러한 솔루션들을 가지고 소개해 드리겠습니다.