아래 내용은 2024년 10월 22일 발행된 팁스터 뉴스레터에 포함된 글입니다.
👉 피그마 AI 관련 내용 자세히보기

📝 이번 주제는 '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의 경우, 현재 제한된 베타 버전으로 제공되고 있으며 몇 달에 걸쳐 출시될 예정이라고 해요.

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

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 : 클릭 한 번으로 만드는 프로토타입

• Translate & Replace Content : 반복적인 요소에 콘텐츠를 자동채우기

위 내용을 포함한 상세는 '뉴스레터 원문'을 확인해주세요!

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

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

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

🍒 무엇을 얻을 수 있나요?

• 업무에 도움을 받을 수 있는 AI 툴(생성형 AI, LLM 등)을 다양한 관점에서 살펴봐요.

• 각 LLM의 특징을 이해하고, 적합한 툴을 찾는 감각을 기를 수 있어요.

• 매니저들이 단계별 업무 방식, 역량, 커리어, 툴 활용 방법 등에 대한 아티클을 공유해요.

• 스터디 결과물을 나만의 아티클, 포트폴리오로 만들어 발행해 보세요.

• 기수와 주제에 따른 실무 활용 방법을 확인할 수 있는 노션 권한을 제공해요.

• 기수별 참여자가 모두 모여있는 오픈 채팅방에 초대 드려요.

😎 이런 분들이 오시면 좋아요

• AI를 실무에 적용하는 방법이 고민이신 프로덕트 매니저, 디자이너 그리고 마케터

• AI 툴에 관심은 있는데 혼자서 찾아보고 학습하기 어려운 분들

• 나와 유사한 업무를 하는 다른 참여자들의 툴 활용 사례가 궁금하신 분들

• 여러 AI 툴을 활용하고 결과를 비교 분석해 최적의 툴을 찾고 싶으신 분

PH 클럽 1기에 대해 더 궁금하시다면! 아래 링크를 통해 상세 내용을 확인 후, 신청해주세요. 신청은 10월 31일 목요일까지 진행됩니다. 

PH 클럽 1기 자세히보기

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

• 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커의 레시피'

• 디자인 업무 효율을 높이는 '인공지능 툴에 대한 이야기'

• 우리의 일상 속 소소한 재미와 그 이유를 찾아보는 '블랭크인'

• 그리고 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십 콘텐츠’

• 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'