요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

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

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

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

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인

 

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

 

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

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

 

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

 

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

 

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

 

Avatarg 메뉴
<출처: Avatarg>

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

한 번은 꼭 써봐야 하는 이유

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

 

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

 

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

좋아요

댓글

공유

공유

댓글 0
작가
515
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

요즘IT가 PICK한 뉴스레터를 매주 목요일에 만나보세요

요즘IT가 PICK한 뉴스레터를
매주 목요일에 만나보세요

뉴스레터를 구독하려면 동의가 필요합니다.
https://auth.wishket.com/login