다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

피그마 작업 시 유용한 플러그인 Top3

저는 와이어프레임과 프로토타입 제작을 위해 여러 프로그램을 사용해왔어요. 처음에는 국내에서 만들어진 '오븐'을 사용하다가 조금 더 구체적인 화면을 제작하고, 동작을 살펴보기 위해 어도비 XD 출시와 함께 XD를 사용하게 되었습니다. 지금은 다시 XD에서 피그마로 넘어와 3년 넘게 사용하고 있어요.

 

피그마의 장점은 많지만 저는 크게 두 가지로 생각하고 있는데요. 하나는 프로그램을 설치하지 않아도 웹 브라우저만 있다면 언제, 어디서든 함께 작업을 할 수 있다는 점입니다. 어도비도 클라우드 환경을 제공하지만, 프로그램 자체는 설치가 필요해 불편한 경우가 많았는데요. 피그마는 프로그램 설치 및 저장된 파일을 별도로 불러오지 않아도 활용할 수 있어 편리합니다. 그리고 플러그인도 빼놓을 수 없어요. 개인적으로 커뮤니티를 통해 제공되는 다채로운 플러그인으로 작업 시 많은 도움을 받고 있습니다. 오늘은, 제가 피그마를 활용하며 가장 큰 도움을 받고 있는 플러그인 3개를 살펴보려 합니다.

 

1.원하는 영역 내 프로필 이미지를 자동으로 생성해주는 : UI Faces

UI Faces

서비스 성격에 따라 다르지만, 많은 서비스에 적용된 공통 기능 중 하나가 '프로필' 영역이라고 생각해요. 프로필 영역에는 서비스가 설정한 기본 이미지가 저장되기도 하지만, 사용자가 직접 설정하거나 소셜 상 저장한 이미지를 가져오는 경우도 있는데요. 화면을 설계하는 과정에 이런 프로필 이미지가 여러 군데 필요합니다. 'UI Faces'는 피그마 상에서 만든 여러 도형에 원하는 조건의 프로필 이미지를 자동으로 채워주는 플러그인입니다.

 

UI Faces

사용방법도 어렵지 않아요. 피그마 플러그인을 지금까지 여럿 사용해왔는데, 종종 쉽게 사용할 수 있을법한 기능을 어렵게 풀어낸 경우가 많아 저는 ‘핵심 기능을 얼마나 쉽게 이용할 수 있는지’를 플러그인 선택 기준 중 하나로 활용하고 있어요. 'UI Faces'는 총 5가지 선택 조건을 제공합니다. 첫 번째는 프로필 이미지를 가져올 소스 선택하는 과정입니다. 이 플러그인은 스톡 이미지 제공 서비스 등에서 제공하는 API를 활용하고 있으며, 각각의 스타일이 달라 4가지 중 하나를 선택할 수 있도록 제공하고 있어요. 첫 번째와 두 번째는 서양, 세 번째와 네 번째는 동양의 인물이 주로 담겨 있습니다.

 

두 번째는 나이대를 선택하는 과정입니다. 시작~끝 범위를 각각 숫자로 지정할 수 있어요. 예를 들어 20~30 이렇게 입력할 수 있습니다. 나이대를 선택했다면, 세 번째는 성별을 입력하는 단계인데요. 남성과 여성 중 선택할 수 있습니다. 네 번째는 감정입니다. 자연스럽거나 행복한 감정 중 하나를 선택할 수 있어요. 마지막으로 헤어 컬러를 지정할 수 있습니다. 검정, 갈색, 금발 등 세 가지 중 하나를 선택할 수 있습니다.

 

UI Faces

이렇게 다섯 가지 조건을 모두 선택했다면, 이제 원하는 영역을 선택하면 됩니다. 저는 프로필 이미지에 가장 많이 쓰이는 동그라미를 몇 개 생성하고 원하는 조건에 따라 프로필 이미지를 적용했어요. 1개씩 적용하는 것도 가능하며, 여러 개를 선택한 뒤 적용하는 것도 가능합니다.

 

UI Faces

동그란 영역 10개에 원하는 조건에 따라 프로필 이미지를 채워 넣은 모습이에요. 피그마만 활용한다면 각각의 인물사진을 캡처해 적용해야 하는데, 그런 과정을 건너뛰고 원하는 조건에 맞춰 빠르게 이미지를 적용할 수 있어 더욱 편리하게 사용할 수 있습니다.

 

UI Faces

이번에는 영역 디자인을 조금 변경해 프로필 이미지를 채워본 모습이에요. 정방형 비율이라면 무리 없이 대부분의 프로필 이미지를 손쉽게 적용할 수 있습니다. 10개 정도는 무리 없이 조건에 맞는 이미지를 넣을 수 있어요. 그 이상의 경우 API 환경 등에 따라 일부만 채워지는 경우도 종종 발생하지만, 직접 채우는 것보다 속도가 훨씬 빠르며, 다양한 조건에 따라 프로필 이미지를 생성할 수 있다는 점에서 활용가치가 충분하다고 생각합니다.

 

 

2.검색을 통해 브랜드 로고, 컬러, 폰트 정보를 제공해주는 : Brandfetch

Brandfetch

두 번째 소개 플러그인은 'Brandfetch'입니다. 브랜드 이름이나 URL을 입력, 로고, 컬러, 폰트, 관련 이미지 등을 검색하는 플러그인이에요. 저는 주로 경쟁 서비스의 로고 구성이나 컬러 정보를 얻거나 서비스에 적용할 컬러 구성을 찾고자 할 때 주로 활용하고 있어요. 플러그인을 위해 태어난 서비스가 아니라, 원래 브랜드 이름을 기반으로 전 세계 다양한 브랜드를 검색할 수 있도록 시작된 서비스라 검색 범위나 대상이 정말 넓다는 점이 가장 큰 장점입니다.

 

Brandfetch

플러그인을 설치, 실행하면 가장 먼저 '검색'을 할 수 있는 화면을 만날 수 있어요. 이곳에 원하는 브랜드 이름이나 URL을 입력하면 원하는 결과를 확인할 수 있습니다. 저는 소개를 위해 국내 대표 서비스 중 하나인 토스(toss)를 검색했는데요. 토스 공식 로고 2개와 로고에 사용된 컬러 그리고 폰트 정보를 확인할 수 있었어요. 이처럼 원하는 브랜드만 검색하면 로고와 컬러 등을 빠르게 찾아줘 활용도가 높습니다.

 

Brandfetch

로고를 클릭하면 피그마 파일 내 자동으로 이미지가 복사됩니다. 로고 제작 시, 참고할 로고를 찾는데 많은 도움을 받을 수 있어요. 컬러 정보까지 함께 제공, 특정 컬러를 클릭하면 컬러 스타일에 자동으로 저장되어 컬러 값을 모으기 편리합니다. 폰트 역시 피그마에서 사용 가능할 경우, 복사해 활용할 수 있어요.

 

Brandfetch

꼭 플러그인이 아니더라도 'Brandfetch' 웹사이트에서 브랜드 이름 등을 검색하는 것도 가능합니다. 위 이미지는 'Brandfetch' 웹사이트 내 'Toss(토스)'를 검색한 결과로 플러그인에서와 같이 로고, 컬러, 폰트 정보를 한눈에 볼 수 있습니다. 브랜드 검색 엔진이라는 컨셉답게 정말 다양한 브랜드가 검색 대상에 포함되어 있으며, 부가 정보 역시 보기 좋게 정리되어 있어 디자인 작업 시 많은 도움을 받을 수 있습니다.

 

 

3.피그마 속 화면 내 흐름을 쉽게 잡아주는 : Autoflow

Autoflow

세 번째로 소개할 플러그인은 'Autoflow'입니다. 피그마는 프로토타입을 제작해 공유할 수 있는 기능을 제공하지만, 화면과 별개로 피그마를 플로우 차트 등의 제작 목적으로 사용하긴 어려웠어요. 물론 피그잼의 등장으로 미로 등의 툴을 함께 사용하지 않아도 되는 환경이 되었지만, 화면을 기준으로 간단한 흐름을 표현하거나 하는 등의 작업은 여전히 플러그인을 활용하는 것이 더 편리하게 느껴집니다. 'Autoflow'는 피그마 내 작업한 화면 간 경로를 쉽게 생성해 시각적으로 표현하는 역할을 해주기에 자주 활용하고 있어요.

 

Autoflow

플러그인을 설치, 실행하면 위와 같이 선 모양과 컬러, 화살표 시작과 끝을 어떤 모양으로 할지 선택할 수 있어요. 저는 기본 컬러와 두께, 모양 등으로 4가지 도형을 각각 연결했어요. 위 이미지에는 간단한 도형으로 표현되어 있지만, 모바일앱 기준 각각의 화면이라면 화면을 제작한 후 페이지를 별도로 만들어 몇 가지 시나리오에 따라 주요 플로우를 쉽게 표현할 수 있습니다. 그 화면을 공유해 함께 보며 어색한 흐름이 있는지 확인하기 좋아요. 

 

Autoflow

같은 도형을 두고 이번에는 선의 컬러와 두께 등을 변경해 연결한 모습이에요. 컬러나 두께 등 연결할 '선'에 집중, 꼭 필요한 조건만 제공하기에 원하는 조건을 쉽게 선택해 적용할 수 있습니다. 선을 직접 생성해 연결하는 등의 귀찮은 작업 과정을 거치지 않고 원하는 흐름을 표현할 수 있다는 점이 'Autoflow' 플러그인의 가장 큰 장점이라고 할 수 있어요. 피그마에서 작업한 화면을 불러와 주요 흐름을 'Overflow'라는 툴로 가져와 다시 플로우를 생성하는 과정을 반복해왔는데요. 'Autoflow'를 알고 난 뒤에는 피그마 상에서 더 많은 작업을 할 수 있게 되어 작업 시간을 단축할 수 있었습니다. 


참고자료

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.