🤖 피그마 AI, 텍스트로 만드는 디자인

이번 뉴스레터 하단에는 '업무 효율을 높일 수 있는, AI 툴을 함께 공부하는 PH 클럽 1기에 대한 소개와 신청 링크가 포함되어 있어요! 

📝 이번 주제는 'Figma AI'에요.

피그마(Figma)는 지난 6월 Config 2024에서 AI 기능 업데이트를 발표했어요. 디자인 생성부터 이미지 처리, 텍스트 수정까지 자동화하여 디자인 프로세스를 간소화 할 다양한 기능을 소개했는데요.

아쉽게도 그중, ‘메이크 디자인(Make Design)’서비스를 7월 초 일시 중단했어요. 간단한 문장만 입력하면 애플리케이션 초안을 만들어주는 기능을 공개해 크게 주목받았고, 베타 서비스로 제한된 인원에게 공개되었는데 특정 앱 모방 논란으로 서비스를 중단한 것이죠.

그리고 3개월이 조금 지난 지금, 피그마는 '메이크 디자인(Make Design)' 기능을 'First Draft' 기능으로 이름을 바꿔 다시 공개했어요. 오늘은 해당 기능을 포함, 피그마 AI에 포함된 몇 가지 기능을 소개할게요.

👀 오늘 소개할 기능

First Draft : AI로 빠르게 시작하기
Prototype with AI : 클릭 한 번으로 만드는 프로토타입
Translate & Replace Content : 반복적인 요소에 콘텐츠를 자동채우기

✦ First Draft : 텍스트로 만드는 디자인

1️⃣ 기능소개

‘First Draft’는 텍스트를 활용해 디자인을 생성할 수 있는 기능이에요. 어떤 앱(서비스)을 만들어야겠다-라는 아이디어가 있다면 첫 번째 초안 작업을 통해 빠른 시안을 확인할 수 있죠. AI 기능이 다시 적용된 후, 가장 먼저 활용한 기능이기도 하며 앞으로도 손이 많이 갈 것 같은 기능이에요.

‘First Draft’는 네 가지 네 가지 라이브러리 중 하나를 선택한 뒤 프롬프트를 입력해 결과를 확인할 수 있어요. 피그마 AI의 경우, 현재 제한된 베타 버전으로 제공되고 있으며 몇 달에 걸쳐 출시될 예정이라고 해요.

(덧붙임 🐳) 피그마는 ‘Make Designs’이라는 이름으로 해당 기능을 먼저 출시했어요. 하지만, 애플 날씨앱 등 기존 서비스와 너무 유사한 결과가 생성된다는 것을 알고는 중단한 적 있는데요. 이후 다시 한번 기능을 만져 이번에 ‘First Draft’ 베타 버전으로 공개되었어요. 이와 관련된 이야기는 피그마 공식 블로그*에 등록된 글을 참고해주세요!

*디자이너를 위한 더 나은 초안 작성

2️⃣ 실무 활용 방법

일단 빠르게 결과를 보고 싶어서, ‘Basic app’을 선택한 뒤 피그마에서 샘플로 제공하는 프롬프트를 그대로 입력해봤어요.

A to-do list app, with tasks for the day

툴바에서 AI 기능 - First Draft를 선택하면 바로 프롬프트 입력이 가능해요. 입력 후 ‘Make It’ 버튼을 클릭하면 몇 초 뒤 바로 화면을 확인할 수 있어요. 완성된 ‘오늘의 할 일’ 화면에는 완료된 목록과 그렇지 않은 목록으로 구분되어 있으며, 할 일 추가 버튼이 담겨있어요. 사이드 메뉴와 알림, 검색창과 타이틀까지 잘 담겨있고요.

놀랐던 건, 상황에 대한 이해였어요. 아래에서 갈릴레오와 Uizard 서비스로 같은 프롬프트를 활용한 결과를 살펴볼 예정인데요. 이 둘과 달리 피그마 AI는 할 일을 완료한 것과 그렇지 않은 것으로 구분해 보여줬어요. 같은 ‘할 일’이지만 현재 상태가 달라 디자인 작업 시에도 충분한 고려가 필요하기에 더 의미 있게 다가온 것 같아요.

완성된 화면을 본 뒤, 우리가 할 수 있는 행동은 크게 세 가지인데요. 현재 화면을 기준으로 제안된 내용에 따라 스타일을 변경하는게 첫 번째에요. 클릭만 하면 컬러, 폰트, 컴포넌트 모양 등을 변경할 수 있어 여러가지 시안을 빠르게 훑어보는 과정처럼 활용하기 좋아요.

두 번째와 세 번째 방법은 ‘직접 수정 및 변경’에 조금 더 가까운데요. 스타일 변경에서는 다크/라이트 모드나 컬러 등을 선택할 수 있고, 포함된 컴포넌트의 둥글기나 여백, 폰트를 직접 선택해 적용해 볼 수 있어요. 마지막으로 프롬프트의 경우 수정하고 싶은 내용을 직접 텍스트로 입력해 요청할 수 있도록 구성된 모습이에요.

왼쪽부터 차례로, 최초 생성된 화면 / 스타일을 변경한 화면 / 프롬프트를 통해 수정한 화면

마지막은 제가 직접 프롬프트를 추가로 입력해 수정한 모습인데요. 완료된 목록과 완료되지 않은 목록을 배경 컬러로 구분해달라고 했고, 실제 반영된 모습이에요.

Apply different background colors to checked and unchecked items

이렇게 세 가지 버전의 화면을 확인하는 데 걸린 시간은.. 30초가 채 되지 않아요. 제 피그마 실력으로 진행했다면 아마 훨씬 많은 시간을 필요로 했겠죠?

👍 좋은 점

피그마에서 쓸 수 있다는 점이 가장 커요. 갈릴레오 AI 등도 생성된 화면을 피그마로 복사할 수 있지만, 생성과 편집을 각기 다른 서비스에서 이용해야 하는 불편이 있어요.
최초 생성부터 이후 수정까지 모두 AI의 도움을 받을 수 있어요.

👎 아쉬운 점

생성된 화면에서 특정 영역이나 아이콘 등을 변경하기 위한 프롬프트 입력은 종종 다르게 반영되거나 아예 반영되지 않는 등의 버그가 발생해요. 베타 버전이라 아직은 개선이 필요한 부분이기도 해요.

'텍스트로 디자인하기' 가능한 다른 서비스에게 요청한다면?

A to-do list app, with tasks for the day

피그마 AI에게 요청한 프롬프트를, 갈릴레오AI, Uizard, Visily에게도 요청했어요.

① 갈릴레오 AI

갈릴레오AI 특징 중 하나는, 왜 이렇게 디자인했는지에 대한 설명을 덧붙여준다는 점인데요. 이는 동일하게 적용되었지만 완성된 화면은 피그마와 달리 완료되지 않은 할 일만 적용되었고, 전체 서비스를 고려하지 않고 특정 화면의 관점에서 만들어졌다는 점이 아쉬웠어요.

*갈릴레오AI의 자세한 사용방법은 여기를 참고해주세요!

② Uizard

Uizard는 서비스 전체에 대한 화면을 제작해 주는 역할에 더 초점이 맞춰져 있는데요. 그리고 무료로는 일부 화면과 2.0 버전이 아닌 1.5 버전을 쓸 수 있고요. 그래서 다른 서비스와 달리 서비스의 흐름에 맞는 화면을 보여주는데 초점을 맞추고 있어요. 이미지에는 빠져있지만 온보딩으로 시작하는 프로토타입 버전도 확인할 수 있고요.

🔥 업무 생산성이 높아지는 생성형 AI 그래픽/UI 편

③ Visily

Visily에서도 얼마 전 텍스트로 디자인하기 기능이 베타로 공개되었어요. 여러 프롬프트를 실험해 본 것은 아니지만, 같은 프롬프트를 기준으로 했을 때, 여백을 포함한 구성에 아쉬움이 많다는 생각이 들어요. 이렇게 세 가지 다른 서비스의 결과를 보니 피그마 AI가 확실히 완성도가 높은 것 같네요!

*Visily의 또 다른 활용방법은 링크를 참고해주세요!

✦ Prototype with AI : 클릭 한 번으로 만드는 프로토타입

1️⃣ 기능소개

두 번째로는 AI 프로토타입 기능을 소개하려고 해요. 만드는 방법은 매우 간단한데요! 연결하려는 프레임을 선택하고 우측 패널이나, 아래쪽의 AI 아이콘을 클릭하면 끝이에요.

패널의 'Preview' 버튼을 클릭하면 즉시 결과를 확인할 수 있고, 마음에 들면 'keep it' 버튼으로 해당 결과를 저장할 수 있어요.

현재 제공되는 프로토타입의 기능은 다음과 같아요.

선택한 최상위 프레임 간 간단한 플로우 연결
뒤로가기 또는 다음 버튼을 사용한 프레임 간 연결
네비게이션 메뉴에서 개별 프레임 연결

2️⃣ 작동 방식 & 실무 활용 방법

실제로 사용해본 결과, 기본적인 플로우는 빠르고 정확하게 구축할 수 있었습니다. 그런데 사용하면서 이 시스템이 어떻게 연결되는지 궁금해졌어요. 그래서 여러개의 옵션을 만들고, 각 레이어의 이름을 다르게 설정해 실제로 프로토타입이 잘 연결되는지 확인해 보았는데요!

A. 선택된 옵션의 레이어 이름을 'active', 선택되지 않은 옵션은 'inactive'으로 지정 (상태에 따라 동작하는가?)

B. 레이어 이름을 '옵션 이름'으로 지정 (텍스트 내용에 따라 동작하는가?)

C. 두 가지 방식을 혼합하여 지정

세 가지 타입으로 실행한 결과, 놀랍게도 모두 동일한 결과가 나왔습니다. 각 옵션이 원하는 대로 정확하게 연결되었죠.

이번엔 복잡한 화면 단위의 프레임에서도 실험해 봤습니다. 결과적으로 AI가 프레임 이름을 포함한 여러 요소를 힌트로 사용한다는 것을 확인했어요. 특히, 프레임명이 중요한 역할을 한다는 걸 알게 됐습니다. 프레임 이름을 잘 설정하면 작업의 정확도를 높이는 데 도움이 될 것 같아요.

프로토타입을 만들 때 유의할 점은 모든 작업이 반드시 프레임 안에서 진행되어야 한다는 것입니다. 큰 프레임 안에 동일한 구조의 레이어가 있고, 탭, 내비게이션, 라디오 버튼 같은 active 요소가 명확히 설정돼 있으면 더 정확하게 연결되더라고요!

👍 좋은 점

기본적인 프로토타입 연결은 시간이 많이 걸리는 작업(일명 노가다)인데, 이 부분의 효율성을 크게 올려줄 수 있다는 것!

👎 아쉬운 점

아직까지 복잡한 레이어의 연결은 정확하게 되지 않아요.
왜 그런지는 모르겠지만, 자꾸 Open overlay 스타일이 적용되어서 Preview로 확인하는데 어려움이 있었어요. AI가 착각해서 오버레이를 제안하는 것 같았습니다.

✦ 번외. Replace Content & Translate

이 기능은 목록, 게시물, 카드, 표 등 반복적인 요소에 콘텐츠를 자동으로 채워주는 기능이에요. 첫 번째 요소의 텍스트를 기준으로 나머지 요소에도 내용을 자동으로 입력해주죠.

이 기능을 제대로 활용하려면

모든 요소가 동일한 구조여야 해요. 예를 들어 카드라면, 두 카드가 같은 구조를 가져야 해요.
반복되는 요소는 auto layout 프레임 안에 있어야 해요. 두 카드가 오토 레이아웃으로 묶여 있어야 제대로 작동하죠.

auto layout 프레임을 클릭하면, 아래에 핸들이 표시되고 Replace Content 옵션이 나타나요.

이 Replace Content 기능으로 리뷰 목록에 리뷰를 추가해 보았는데요.

먼저 위에 소개한 Draft 기능으로 생성한 리뷰를 Translate 기능으로 한글로 번역한 후, Replace Content를 활성화해 하단 핸들을 아래로 잡아끌었더니 순식간에 리뷰가 추가됐어요. 정말 놀라울 정도로 간편하게 작업을 끝낼 수 있었어요.

지금까지 다양한 플러그인들이 생산성과 효율에 초점을 맞춰 발전해왔는데요, 피그마가 지원하는 생산성 향상의 범위가 늘어나면서 앞으로 플러그인 생태계의 방향도 많이 변화할 것 같아요.

(덧붙임 🌵) 피그마의 설문 조사에 따르면, 응답자의 1/3이 11가지 과제 중 ‘AI 기능을 기존 제품에 일관되게 통합하는 것’을 가장 큰 관심사로 꼽았대요. 이는 단순히 새로운 기능을 추가하는 것만으로는 충분하지 않다는 걸 의미해요. 실제로 사용자 경험을 개선할 수 있도록 AI를 기존 시스템에 잘 통합하는 것이 더 중요하다는 의미이죠.

이번 업데이트는 많은 사람들에게 놀라움을 주었는데요. 프로덕트를 운영해 나가는 디자이너의 입장에서는 현실과의 괴리를 느끼는 부분도 있었어요. 기술은 빠르게 발전하지만, 실제 업무 환경에서는 레거시, 기존 시스템, 복잡한 커뮤니케이션 등에 치여 원래 일하던대로 일하기 쉽기 때문이에요. 결국, 기존 시스템과의 조화를 어떻게 이끌어내느냐가 큰 과제가 될 것 같아요.

피그마 역시 이런 디자이너들의 고민을 알고 있을거에요. 앞으로 이러한 괴리를 줄여주고, 더 많은 디자이너들이 AI를 효율적으로 활용할 수 있도록 중요한 역할을 해주었으면 하는 바람이에요.

AI 툴, 실무 활용 방법을 함께 스터디해요! (PH 클럽)

AI 좋은데, 그래서 실무에서 어떻게 쓰지?에 대한 답을 함께 고민하고 찾아가요!

PH 클럽은 ‘업무 효율을 높일 수 있는 AI 툴을 함께 스터디하는 모임’입니다. 업무에 도움을 받을 수 있는 AI 툴(생성형 AI, LLM 등)을 다양한 관점에서 비교 분석해요. AI를 활용해 업무 생산성을 높이는 방법을 함께 고민하고 탐구하는 데 중점을 두고 있어요.

‘PH’는 ‘프로덕티비티 해킹(Productivity Hacking)’의 약자예요. ’프로덕티비티 해킹’은 업무 효율을 극대화하는 전략을 말하는데요. 불필요한 작업을 줄이고, 중요한 일에 집중하기 위해 다양한 도구와 기술을 활용하는 것이 핵심이죠.