brunch

매거진 신입에게 알려주는 피그마

라이킷 60 댓글 9

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이선주 Oct 14. 2024

피그마의 인공지능 UI 생성

First Draft로 돌아온 Figma AI

돌아온 Figma AI

Config 2024에서 피그마는 인공지능으로 UI를 생성하는 새로운 기능을 선보였습니다. 당시는 Make Designs로 소개되었고, 시연을 본 상당수의 디자이너들에게 큰 충격을 주었습니다.

하지만 곧 애플의 날씨앱과 너무 유사한 디자인을 만들어냈기 때문에 잠시 기능을 사용할 수 없었고, 지난 몇 개월간 기다렸어야 했습니다.

UI3

지난 10월 10일을 기준으로 대부분의 사용자에게 UI3가 업데이트되었습니다. UI3의 가장 큰 특징 중 하나는 왼쪽 상단에 있던 주요 기능이 중앙 하단으로 옮겨진 것입니다.

새로운 툴바의 오른쪽에 Action이라는 기능이 생겼는데, 이 액션에는 기존의 플러그인과 위젯 기능이 들어있습니다. 그리고 UI3 만 배포된 계정에서는 피그마에서 쉽게 접근할 수 없는 기능과 함께 몇 가지 설정 항목을 손쉽게 변경할 수 있습니다.

그렇게 유용하지는 않지만, 생각해 보면, 또 편리할 수도 있는 기능이었습니다.

First Draft

그런데 오늘 아침부터 갑자기 이 Action 기능의 아이콘이 AI를 상징하는 반짝이는 모양의 아이콘으로 변경되었습니다. 이 변경은 일부 계정에만 제공되는 것으로 제가 가지고 있는 개인 계정에 적용되었지만, 사이드 프로젝트 계정과 회사 계정에는 업데이트되지 않았습니다.

돌아온(?), 새로운 Action 항목에는 AI beta라는 항목이 붙어 있고, 예전의 Make Designs가 First Draft로 바뀌었습니다.

AI 업데이트 이후 변경된 Action

기능은 이전에 Config 2024에서 소개된 대부분의 기능이 돌아왔습니다. 이번 글에서는 가장 핵심적인 기능인 First Draft만 소개합니다.

추후 보강하겠지만, 이 메뉴는 APP과 WEB의 Wireframe과 Hi-Fi 디자인을 각각 만들어줍니다. 만들기 위해서는 프롬프트가 필요하지만, Wireframe의 경우는 손으로 쓴 것 같은 느낌으로 디자인을 해줍니다.

Basic site와 Basic app이 우리가 보통 생각하는 웹과 앱의 Hi-Fi 디자인입니다. 이 부분의 사용은 텍스트를 입력하거나, 제시된 키워드를 사용하면, 프롬프트까지 만들어줍니다.

한글도 가능하며, 결과물은 엇비슷합니다. 영문으로 세부적인 내용을 작성한다고 해도, 큰 차이는 없습니다.

아마도 디테일 수준이나 변수의 차이가 아직까지는 적은 듯 합니다.

프롬프트 입력 후 확인을 누르면 디자인이 진행됩니다. 디자인이 순서대로 진행되어 완성되면, 하나의 디자인결과물을 6가지 스타일로 변경할 수 있습니다.

몇 가지 디자인을 시험해 봤는데, 평이한 디자인이 나오도록 약간의 제한이 있다는 것을 발견했습니다. 그래서 기능의 이름도 기존에 Make Design에서 First Draft로 변경된 것으로 보입니다.

현재 상태에서는 처음부터 디자인을 하는 것보다는 몇 가지 초기 시안을 빠르게 제작할 수 있는 상태입니다.

프롬프트는 조금 더 연구를 해봐야겠지만, 비슷한 수준의 다른 AI 툴에 비해서 결과물의 기본 수준이 약간 더 높습니다. 하지만 보편적인 작업물을 요구할 때 가장 잘 디자인된 결과물을 주는 것으로 보입니다.

특정 기능에 특화된 UI를 요구하는 경우는 참조하는 라이브러리에 없을 수 있어서 애매하게 나오지만, 로그인, 상품 목록 등 자주 쓰는 부분이라면, 잘 조직된 결과물을 초안을 내놓습니다. 초기 작업에 필요한 작업량의 상당 부분을 처리해줄 것으로 예상됩니다.

Figma로 생성한
디자인이 훌륭한 이유

신입 디자이너를 고용해서 리서치, 벤치마킹, 설계, 디자인을 맡긴다고 했을 때 3개월 정도 교육을 시킨다고 했을 때 결과보다는 좋습니다. 무엇보다 빠릅니다.

다른 AI 디자인 툴에 비해 피그마로 생성하는 UI가 매우 강력합니다. 디자인 완성 후, 바로 작업할 수 있고, 수정도 쉽습니다. 변형과 응용이 쉽고, AI를 사용하지 않는 작업에 적용하기 쉽습니다.

피그마로 진행되는 작업은 수많은 레이어를 쌓고 정리하는 작업이라고 할 수 있습니다. 피그마가 생성한 디자인을 보면, 각각의 레이어가 기능과 콘텐츠에 맞게 이름이 지어져 있습니다. 다른 AI 툴과 달리 명확한 목적성이 있고, 레이어만 봐도 구조를 쉽게 이해할 수 있습니다.

그래서 Creatie, Uizard, Galileo를 비교해 봤을 데, 피그마가 가지는 장점은 월등합니다.

가장 우수한 부분은 갑자기 디자인이 나타나는 게 아니라 만들어가는 과정을 사용자에게 노출한다는 점이고, 그 과정이 러프한 스케치에서 세부적인 표현으로 진행되는 전통적인 디자인 프로세스 그대로 입니다.

하지만 디자인 과정 중에서 UI는 독특한 요소가 하나 더 있습니다. 바로 이름 짓기입니다. 대부분의 UI 디자인은 개발과 밀접하고, 기능과 출력되는 데이터에 대응해야 하는 부분이 있습니다. 기능과 출력에 대해 이야기하려면, 그 부분이 어디인지를 알아야 합니다.

그래서 협업에서 포토샵 시절부터 아주 오랫동안 격언처럼 이야기되는 '레이어에 이름을 제대로 쓰기'가 좋은 UI 디자인, 프로덕트 디자인을 하는데 꼭 필요한 스킬이 됩니다. 또 맥락 있는 작업을 위해서 구조화가 매우 중요하고, 구조화의 유무를 판단할 수 있는 기준됩니다.

Galileo의 경우는 디자인 품질은 현재 피그마의 결과와 유사하지만, 피그마에서 디자인을 계속할 경우, 작업의 맥락을 이어가기 힘듭니다. 또 구조가 단순합니다.

레이어 정리, 레이아웃의 구조, 적절한 아이콘, 일관성 있는 폰트의 사용과 스타일 적용하기는 디자이너의 실력과 협업 정도를 볼 수 있는 가장 좋은 지표입니다.

그런데 피그마 AI가 인간 디자이너가 수년간 익혀야 하는 스킬을 단번에 작성해 줍니다. 이 정도면 신뢰할 수 있는 수준의 디자이너라고 봐야 합니다.

피그마 디자인이 이루어지는 과정(추정)

피그마 디자인이 생성되는 과정에서 놀라운 점은 디자인이 제작되는 과정이 눈앞에서 이루어지기 때문입니다. 그 과정을 순차적으로 보면, 피그마는 사용자의 프롬프트를 해석한 후, 괜찮은 디자인 키트를 활용하여 디자인을 합니다. 디자인은 순차적으로 완료되며, 사용자가 완료했다고 판단하면 디자인에 사용된 자원을 회수하고 사용자가 계속해서 작업을 이어갈 수 있게 합니다.