NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

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

 

와이어프레임이나 프로토타입 등을 제작할 때, 프로필 이미지를 꽤 많이 사용하게 됩니다. 프로필 이미지 자체가 여러 화면에서 쓰이기도 하고, 어떤 스타일로 제공할지 미리 확인하는 과정이 필요하기 때문입니다. 최근에는 서비스 내 제공되는 기본 프로필 이미지로 브랜드 정체성을 드러내는 경우도 많습니다. 그래서 사용자가 설정하기 전 프로필을 어떤 모습으로 적용할지에 대한 고민을 상대적으로 더 많이 하게 됩니다. 오늘은 다섯 가지 스타일과 세 가지 모양에 따라 프로필 이미지를 쉽게 생성하고 확인할 수 있는 피그마 플러그인 서비스 ‘Avatarg’를 소개하고자 합니다.

 

다섯 가지 스타일과 세 가지 모양을 지원

피그마 플러그인 무료
<출처: Avatarg>

 

‘Avatarg’는 무료로 제공하는 피그마 플러그인 서비스입니다. 피그마를 활용해 화면을 설계할 경우 각 화면에 포함되는 다양한 프로필 이미지를 어떻게 제작하고 적용할 것인지 빠르고 쉽게 작업할 수 있도록 도와줍니다. 크게 다섯 가지 스타일을 제공하며, 각 스타일에 따라 세 가지 모양으로 프로필 이미지를 생성할 수 있습니다.

 

Avatarg 피그마 플러그인
<출처: Avatarg>

 

사용 방법은 어렵지 않습니다. 플러그인을 실행한 뒤, 피그마에 등록된 특정 대상을 선택하면 사용하거나 지정 가능한 옵션이 활성화됩니다. 이때 프로필(아바타) 타입 다섯 가지와 컬러(랜덤 생성 가능), 스타일마다 지원하는 세 가지 구체적인 모양 등을 자세히 확인할 수 있습니다.

 

Avatarg 메뉴
<출처: Avatarg>

 

우리가 사용할 수 있는 편집 도구를 조금 더 자세히 살펴보겠습니다. ① 먼저 타입입니다. 타입은 문자, 사람 모양의 일러스트, 실제 사람, 그리고 두 가지 패턴 등 다섯 가지 중 하나를 선택할 수 있습니다. 이전에는 초상권 등의 문제가 없는 사람의 이미지를 자동으로 채워주는 경우가 많았는데, ‘Avatarg’는 다섯 가지 스타일에 따라 프로필을 채울 수 있어 활용도가 높습니다.

 

② 선택한 타입(스타일)에 따라 원하는 컬러를 직접 지정할 수 있습니다. 실제 사람의 모습을 채우는 경우라면 상관없지만 다른 타입을 선택한 경우라면 컬러에 따라 분위기가 달라질 수 있습니다. 특히 만들고자 하는 서비스의 주요 컬러와 어울리는지 살펴볼 수 있는 중요한 도구 중 하나입니다.

 

③ 다음은 모양입니다. 외곽선을 어떻게 적용할지 선택할 수 있으며 사각, 라운드, 스쿼클(모서리가 둥근 정사각형) 등 세 가지 중 하나를 적용할 수 있습니다. 최근에는 스쿼클을 많이 활용하기에 해당 모양이 포함된 점이 눈에 띕니다. ④ 사이즈도 선택할 수 있습니다. 사이즈는 기본 제공되는 다섯 가지 중 하나를 선택할 수 있고, 커스텀을 선택한 뒤 원하는 크기를 입력할 수 있습니다. 조건 선택이 모두 끝났다면 ⑤ 생성 버튼을 클릭해 실제 모습을 확인하게 됩니다.

 

문자 프로필 이미지
<출처: Avatarg>

 

이어서 다섯 가지 타입(스타일)과 모양에 따라 생성된 프로필(아바타) 이미지가 어떤 모습인지 자세히 살펴보겠습니다. 플러그인 실행 시 기본 선택되는 타입은 ‘문자'입니다. 사용자 이메일 주소나 입력한 이름 또는 닉네임을 활용하는 상황에 해당됩니다. 사용자가 프로필 이미지를 지정하지 않을 경우, 기본적으로 제공하기 좋은 타입입니다. 플러그인에서 생성하는 ‘문자' 타입은 ‘A’ 하나로 통일되어 있어 컬러나 모양에 따라 어떻게 달라지는지 확인하기 좋습니다.

 

인물 일러스트 프로필 이미지
<출처: Avatarg>

 

두 번째 타입(스타일)은 사람 모양의 일러스트입니다. 프로필 이미지 영역을 명확하게 보여주는 게 장점입니다. 컬러는 일러스트에 반영되며, 배경이나 모양에 따라 추가 적용되거나 반영되는 곳은 없습니다. 위 이미지에서 왼쪽은 원형으로 사이즈를 60으로 지정한 내용이며, 오른쪽은 크기를 80(최대)으로 지정한 뒤 사각형 모양으로 지정한 내용입니다. 같은 타입이어도 이렇게 전혀 다른 모습으로 생성할 수 있어 만들거나 적용하고자 하는 화면에 적합한 모습을 빠르게 찾아갈 수 있습니다.

 

실제 인물 프로필 이미지
<출처: Avatarg>

 

세 번째는 ‘실제 인물 사진'입니다. 우리가 실제 서비스를 통해 가장 자주 접하게 되는 타입으로, 컬러는 따로 지정할 수 없습니다. 하지만 세 가지 모양에 따라 실제 인물이 담긴 프로필(아바타) 이미지를 확인할 수 있습니다. 개인적으로 문자나 일러스트 등이 포함된 프로필은 사용자가 설정하기 전 기본 내용으로, 실제 이미지가 적용된 프로필은 사용자가 임의의 대상을 등록한 후의 결과로 활용하고 있습니다.

 

패턴 프로필 이미지
<출처: Avatarg>

 

네 번째 타입(스타일)은 패턴입니다. 다섯 번째도 패턴에 가까운데 둘의 완성된 모습은 꽤 많은 차이를 갖고 있습니다. 이런 패턴은 조금 더 특별한 프로필을 제작하고 싶을 때 살펴보기 좋습니다. 정체성이 투영된 프로필을 제공하고 싶지만, 어떤 식으로 제작해 적용해야 할지 잘 모르는 경우에 특히 활용도가 높습니다. 네 번째 타입은 원형으로 구성했을 때 가장 매력적인 프로필을 만들어 준다고 생각합니다.

 

특정 패턴 프로필 이미지
<출처: Avatarg>

 

마지막 타입(스타일) 역시 특정 패턴에 따라 프로필(아바타) 이미지를 생성할 수 있습니다. 사실 가장 손이 가지 않는 타입이긴 한데, 서비스에 따라 필요한 경우가 존재할 수 있을 것 같습니다. 다섯 가지 타입은 모두 세 가지 모양과 개별 컬러에 따라 생성이 가능하니 꽤 많은 조합을 만들 수 있고, 생성 버튼 한 번으로 쉽게 제작할 수 있어 유용하게 느껴집니다.

 

 

한 번은 꼭 써봐야 하는 이유

피그마 플러그인의 장점은 작업 효율을 높여준다는 데 있습니다. 직접 만들지 않고, 더 많은 시간을 투자하지 않아도 일정 수준 이상의 결과물을 만들 수 있기 때문입니다. ‘Avatarg’ 역시 같은 맥락에서, 다채로운 스타일의 프로필(아바타) 이미지를 쉽게 만들어주는 장점을 갖고 있습니다. 무엇보다 다섯 가지 타입을 제공하는 것은 물론, 각각의 모양과 컬러까지 지정할 수 있어 현재 서비스의 목적이나 조건에 부합하는 결과를 빠르게 확인할 수 있습니다.

 

프로필 이미지를 어떤 식으로 제공할지 결정되었다면 실제 화면에 채워진 모습을 확인하는 목적으로, 혹은 아직 어떤 프로필 이미지를 활용해야 할지 정리되지 않았으면 어떤 타입이 잘 맞을지 확인하는 용도로 제 역할을 충분히 할 수 있는 서비스이니 한 번쯤 사용해보길 추천합니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

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

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

디자인

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

디자인

정적인 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

프로덕트

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

디자인

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

디자인

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

디자인

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

프로덕트

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

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

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

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

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

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