피그마 AI와 함께 디자인하기
이제 디자인도 AI와 함께하는 시대입니다. 복잡한 작업을 대신 해주고, 초안부터 수정까지 빠르게 도와주는 피그마의 AI 기능을 활용하면, 작업 속도는 빨라지고, 완성도는 자연스럽게 따라올 겁니다. 이번 장에서는 피그마에 탑재된 다양한 AI 기능들을 하나씩 살펴보며, 실무에서 어떻게 활용할 수 있는지 배워보겠습니다. 피그마의 AI 기능은 수시로 업데이트 되므로 변동 사항이 생길 수 있습니다.
피그마 디자인, 피그잼,피그마 슬라이드, 피그마 사이트, 피그마 버즈, 피그마 메이크에서 사용 가능하며, 각 제품에 맞춰 사용 가능한 AI도구가 조금씩 다릅니다.
저자의 피그마 활용법을 더 자세히 배우고 싶다면 다음 유튜브를 참고하세요!
https://www.youtube.com/@rddraw/videos
[AI] 원클릭 배경 제거하고 효과 넣기
배경 제거 기능은 피그마 디자인, 피그잼, 피그마 슬라이드, 피그마 사이트에서 사용할 수 있습니다. 하단 [ Action] 아이콘을 클릭하고 [
Remove background]를 클릭하여 배경을 제거합니다. ➋ 오른쪽 Fill 영역에 원본사진은 눈이 자동으로 꺼지고 배경이 제거된 이미지가 새롭게 생깁니다.
피그마 버즈에서는 이미지를 선택하면 생기는 상단 도구에서 [ AI tools ➝ Remove background]를 선택하거나, 디자인 모드로 변환하고 하단 툴바에서 배경을 제거 기능을 클릭할 수 있습니다.
배경제거 후 효과 넣는 방법
배경을 제거한 이미지에 효과를 적용할 때, 겉보기에는 배경이 완전히 사라진 것 같지만 실제로는 보이지 않는 사각형 프레임이 남아 있어서 효과가 그 프레임 전체에 적용됩니다. 이 때문에 이미지에 효과를 넣을 때 예상과 다른 결과가 나타날 수 있습니다. 이때 Color overlay 플러그인을 활용하면 원하는 대상에만 그림자를 넣을 수 있습니다.
01 그림자용 이미지를 복사하고 Color Overlay 플러그인을 실행합니다.
02 그림자용으로 복사한 레이어에 [Layer blur] 효과를 적용하고 투명도를 조절하면 프레임이 아닌 그림 뒤에 자연스럽게 그림자가 생깁니다.
<1분 꿀팁> 효과 적용시 투명 영역이 적용될 때
아래 이미지처럼 투명한 영역까지 그림자가 생겨 어색하게 보일 때에는 [Show behind transparent areas] 옵션을 체크하면 그림자가 투명 영역 뒤로 들어가 자연스러운 효과를 줄 수 있습니다.
<1분 꿀팁>
[AI] 프롬프트로 디자인 초안 만들기
디자인 초안 기능을 사용하면 프롬프트로 디자인 초안을 만들고 디자인 테마, 폰트, 구조,이미지 등을 수정할 수 있습니다. 01 [ Action] 아이콘을 클릭하고 [ First Draft]를 선택합니다.
02 프롬프트는 한글을 사용할 수 있습니다. 작성을 마치고 [Make it] 버튼을 누르거나 [tab] 키를 눌러 적용할 수 있습니다.
초안을 만들어 주는 기능이기 때문에 구체적으로 작성해도 원하는 만큼의 상세하고 긴 디자인을 만들어주지는 않습니다. 여러 번 생성해보면 비슷한 형태의 초안이 반복해서 나오는 경우도 많습니다.
다음과 같이 초안을 생성하고 다양한 스타일도 제안하기 때문에 클릭해서 적용해보세요.
03 [Prompt] 버튼을 누르고 프롬프트를 추가하여 디자인의 구조를 추가, 변경할 수 있습니다.
[AI] 이미지 생성하고 편집하기
[ Action] 아이콘을 클릭하고 [ Make an image]를 선택한 후 프롬프트를 입력하면 이미지를 생성할 수 있습니다. 이미지는 기본적으로 1024픽셀 x 1024픽셀 크기로 생성됩니다. 만약 원하는 특정 크기가 있다면 생성 전에 먼저 사각형 도형을 그려 사이즈를 지정한 후 해당 도형을 선택한 상태에서 이미지를 생성하면 됩니다.
특별한 내용이 없음에도 ‘Blocked—try different input’ 오류가 나타나면 프롬프트를 조금 변경하여 다시 생성해주세요.
이미지 생성에는 OpenAI의 3가지 모델 gpt-image-1, Google Imagen3, Titan v2을 사용할 수 있으며, 각각 특성에 맞게 생성되는 이미지 스타일이 모두 다릅니다. 다음 이미지는 순서대로 gpt-image-1, Google Imagen3, Titan v2로 생성한 이미지입니다. Google Imagen3 모델을 제외하면 한글 프롬프트도 무리 없이 인식합니다.
<프롬프트>
20대 한국 여성, 긴 갈색 머리, 밝게 웃는 표정. 왼손으로 뺨을 살짝 만지는 포즈. 피부 톤은 밝고 균일하며, 잡티나 색소침착 없이 맑고 투명한 느낌, 카메라를 바라보는 모습 가름한 얼굴, 성숙하면서도 청초한 인상, 배경에 스튜디오 카메라와 조명이 보임
A Korean woman in her 20s with long brown hair, smiling brightly. She gently touches her cheek with her left hand. Her skin tone is bright and even, with a clear and transparent look, free of blemishes or discoloration. She gazes at the camera with a slender face, giving a mature yet innocent impression. In the background, studio cameras and lighting equipment are visible.
다양한 프롬프트 작성 예시
다음 이미지를 보면 세 가지 모두 일러스트 스타일이지만 각각 조금씩 다른 느낌을 가지고 있습니다. 스타일, 연령, 성별, 표정 등 원하는 키워드를 명확하게 나열할수록 구체적으로 원하는 결과물을 얻을 수 있습니다.
<프롬프트>
3D 일러스트 비즈니스 스타일, 20대 남자, 친절하게 웃는 얼굴, 정면, 허리까지 보이는 구조, 심플하고 깔끔한 색상
다음과 같이 이벤트 배너 등에 사용할 이미지도 쉽게 만들 수 있습니다. 이미지의 스타일뿐만 아니라 ‘상단 영역이 많이 나오게’, ‘가운데가 비어있게’와 같이 형식적인 측면을 강조하는 프롬프트를 사용하면 디자인에 더 편하게 사용할 수 있을 겁니다.
<프롬프트 1>
여름 이벤트, 시원한 바다 배경, 일러스트, 탑 뷰
<프롬프트 2>
빨간색과 흰색 줄무늬 파라솔, 해변 타월, 밀짚모자, 튜브, 조각 과일, 과일볼, 조개껍데기 등이 정갈하게 놓여 있으며, 해변가 파도는 심플한 그래픽 스타일로 표현됨. 상단에서 내려다본 뷰, 그림자 포함, 따뜻하고 감성적인 무드. 상단 영역이 많이 나올 수 있게
<프롬프트>
과일을 활용한 깔끔하고 시원한 리뷰 이벤트 배너 디자인. 흰색 또는 밝은 톤 배경 위에 오렌지, 레몬, 키위 등 여름 과일이 상큼하게 잘려진 상태로 주변에 자연스럽게 배치되어 있음. 과일에는 물방울 표현이 더해져 신선한 느낌을 줌. 전체 분위기는 밝고 청량하며 미니멀한 구성. 글은 없고 파스텔 오렌지와 연두 계열의 컬러 포인트 사용
<1분 꿀팁> 간단한 한글 프롬프트를 써도 괜찮아요
길고 구체적인 프롬프트가 더 정확한 이미지를 만들어주는 것은 사실이지만, 이미지가 디자인에서 큰 비중을 차지하지 않는 경우라면 꼭 복잡하게 프롬프트를 작성할 필요는 없습니다. 어디에 사용할 이미지인지, 주제는 무엇인지, 색감은 어떤 느낌이면 좋을지 정도만 간단하게 입력해도 만족스러운 결과를 얻을 수 있습니다.
이미지 편집하기
이미 만들어진 이미지를 선택한 후 [ Edit image]를 선택하여 프롬프트를 작성하면 선택한 이미지를 기반으로 수정된 이미지가 만들어집니다. 같은 스타일을 유지하고 내용을 바꿀 때, 이미지의 일부분만 바꾸고 싶을 때 등 사용하면 좋습니다.
<프롬프트>
배경 오브젝트 삭제, 얼굴 변화 없이, 창문 그림자 비춰지는 배경
이미지 선명하게 만들기
완성도 높은 디자인을 위해서는 선명하고 해상도 높은 이미지를 사용해야 합니다. 하지만 항상 그런 이미지만 주어지지는 않죠. AI 기능 중 [ Boost resolution]를 사용하면 흐릿한 이미지를 선명하게 만들 수 있습니다.
원하는 이미지를 클릭하고 해당 메뉴를 실행해서 사용할 수도 있고, 해상도가 낮은 이미지를 프레임에 넣으면 기능을 제안하는 알림창이 자동으로 나타납니다. 이때 [Boost resolution] 버튼을 클릭하면 선명한 이미지로 변경됩니다.
[AI] AI로 콘텐츠 내용 구성하기
피그마 AI 기능으로 이미지 생성, 편집과 같은 디자인 영역에서만 도움을 받을 수 있을 뿐만 아니라 디자인에 들어가는 내용을 생성할 수도 있습니다. 상세 페이지나 광고 배너의 카피를 만들 때, 카드 뉴스의 내용을 채울 때 등 다양하게 활용해보세요.
콘텐츠 내용 수정하기
[ Rewrite this...] 기능을 사용하면 글의 말투나 스타일을 바꾸고 싶을 때 글을 더 친절하게 만들거나, 홍보 대상에게 잘 맞는 톤으로 변경할 수 있습니다.
다음과 같이 작성한 내용을 선택하고 프롬프트를 원하는 방향으로 작성한 후 [Rewrite] 버튼을 누르면 원하는 대상에 맞는 톤으로 내용이 다듬어졌습니다.
콘텐츠 내용 줄이기
[ Shorten] 기능은 긴 문장을 짧고 간단하게 바꿔줍니다. 문장이 너무 길 때, 글자 수에 제한이 있는 버튼이나 안내 문구를 작성해야 할 때 필요한 핵심 내용만 깔끔하게 남길 수 있습니다.
콘텐츠 내용 번역하기
[Translate to...] 기능을 사용하면 내용을 원하는 언어로 번역할 수 있습니다. 입력한 내용이 너무 길면 오류가 생길 수 있으니 변경한 후 꼭 크로스 체크를 해주세요.
더미 데이터 만들기
디자인을 선택하고 [ Replace content] 기능을 사용하면 디자인에 맞는 텍스트를 자동 생성하여 콘텐츠를 채우는데 드는 시간을 절약할 수 있습니다. 간단한 프롬프트 입력만으로도 쉽게 변경할 수 있습니다.
레이어 이름 변경하기
AI를 사용하면 복잡한 디자인 파일도 클릭 몇 번으로 쉽게 정리할 수 있습니다. 레이어에 어울리는 이름을 자동으로 붙여주기 때문에, 어떤 요소인지 한눈에 파악할 수 있고, 애니메이션이나 스크롤 효과 같은 인터랙션을 더 정확하게 설정하는 데도 도움이 됩니다.
레이어 이름이 변경되지 않는 경우
➊ 이미 이름을 바꾼 레이어
➋ 숨겨진 레이어, 잠긴 레이어
➌ 인스턴스 내에 중첩된 레이어
➍ 타원, 별, 삼각형등 개별 벡터 도형(사각형 제외)
이미 레이어의 이름이 변경된 경우 위와 같이 ‘레이어 이름을 변경할 필요가 없다’는 메시지가 표시됩니다. 다시 이름을 변경하고 싶다면 오른쪽 버튼을 클릭하여 변경해 줍니다.
[note] 레이어 이름은 주로 UI 디자인 작업에 적합하게 만들어집니다. 만약 텍스트 콘텐츠나 이미지 중심의 작업을 한다면, 스스로 더 이해하기 쉬운 이름으로 바꿔주는 것이 이후 작업이나 협업할 때 훨씬 편리합니다.
<1분 꿀팁> 유용하게 사용할 수 있는 AI 기능들
자주 사용할 것 같은 기능들 위주로 소개했습니다. 이 외에도 유용하게 사용할 수 있는 AI 기능들이 더 있습니다 간단하게만 소개할테니 직접 사용해보면서 어떤 기능인지 직접 이해해보길 권합니다.
인터렉션 추가하기 : 인터렉션을 추가할 프레임 전체를 선택 하고 [Add interactions] 기능을 실행하면 프레임이 자동으로 연결됩니다. 프로토타입을 훨씬 빠르고 쉽게 만들 수 있습니다.
비슷한 디자인 찾기 : 레이어를 선택한 후 [Find more like #레이어명]을 클릭하면, 현재 위치가 표시되는 탭에서 사용할 수 있는 구성 요소나 에셋들이 표시됩니다. 키워드를 입력하거나 이미지를 선택해 비슷한 디자인 요소를 빠르게 찾을 수 있습니다.
이미지 사용하여 검색하기 : 캔버스를 선택한 상태에서 [Search with image or selection]을 클릭하거나 검색박스 안의 이미지 아이콘을 클릭하면 내 컴퓨터에 있는 이미지를 업로드 하여 비슷한 레이어를 검색할 수 있습니다.
<1분 꿀팁>
작업에 따라 이 AI가 도움이 될 수도 되지 않을 수도 있습니다. 부담 갖지 말고 이것저것 눌러보고 만들어보면서 감을 잡아보세요. 매번 조금씩 더 익숙해지고, 어느새 멋진 결과물을 만들어내고 있을 거예요. 이 내용이 여러분의 첫 피그마 AI 여행에 작은 도움이 되길 바랍니다.
저자의 피그마 활용법을 더 자세히 배우고 싶다면 다음 유튜브를 참고하세요!
https://www.youtube.com/@rddraw/videos