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

프로필 이미지는 서비스 내 많은 곳에서 사용됩니다. 다만 사용자가 가입 후 직접 설정하기 전까지는 임의의 이미지를 활용해야 하는데요. 넷플릭스, 디즈니 플러스 등의 OTT 서비스는 오리지널 콘텐츠 속 캐릭터를 프로필로 제공하는 등 재치 있게 활용하는 서비스가 있는 반면 영역만 보여준 채 비어있는 서비스도 존재합니다. 오늘은 디자인 과정은 물론, 실제 사용자에게 서비스 입장에서 프로필 이미지를 더 다채롭게 활용할 수 있도록 도와주는 서비스를 소개하고자 합니다.

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

다음

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

확인

디자인

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

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

프로필 이미지는 서비스 내 많은 곳에서 사용됩니다. 다만 사용자가 가입 후 직접 설정하기 전까지는 임의의 이미지를 활용해야 하는데요. 넷플릭스, 디즈니 플러스 등의 OTT 서비스는 오리지널 콘텐츠 속 캐릭터를 프로필로 제공하는 등 재치 있게 활용하는 서비스가 있는 반면 영역만 보여준 채 비어있는 서비스도 존재합니다. 오늘은 디자인 과정은 물론, 실제 사용자에게 서비스 입장에서 프로필 이미지를 더 다채롭게 활용할 수 있도록 도와주는 서비스를 소개하고자 합니다.

 

여섯 가지 테마가 매력적인, Boring Avatars

프로필 이미지 생성
(출처: Boring Avatars 홈페이지)

 

‘Boring Avatars’는 여섯 가지 테마에 따라 매력적인 ‘프로필 이미지’를 생성할 수 있는 서비스입니다. 자바스크립트 기반이며 원하는 프로필을 SVG 형태로 복사해 활용할 수 있습니다. 개인적으로 사이드 프로젝트를 진행하며 초기에 필요한 사용자 프로필(아바타)을 제공하고자 더 자세히 살펴보게 되었습니다. 하나의 프로필을 기본으로 제공하면 너무 밋밋하고, 직접 여러 개의 기본 프로필을 작업하는 건 시간이 오래 소요될 수밖에 없기 때문입니다.

 

프로필 아바타 생성

 

‘Boring Avatars’에서 느낄 수 있는 가장 큰 매력은 한 가지가 아니라 무려 여섯 가지 콘셉트의 프로필, 아바타를 생성할 수 있다는 점입니다. ① ‘BEAM’을 기본으로 MARBLE, PIXEL, SUNSET, BAUHAUS, RING 등 각기 다른 스타일을 선택해 구성 모습을 확인할 수 있습니다. ② 선택한 스타일에 따라 다섯 가지 컬러를 선택해 전반적인 룩을 변경할 수 있습니다. 컬러 선택이 어렵다면 ③ 랜덤 팔레트 버튼을 클릭해 자동으로 컬러를 바꿔 적용하는 것도 가능합니다.

 

④ 프로필(아바타)은 기본적으로 원형으로 이뤄져 있는데, 사각으로 변경할 수 있습니다. 버튼 한 번으로 원하는 모양으로 옮겨갈 수 있어 편리합니다. ⑤ 또 세 가지 크기로 변경이 가능합니다. 사이즈 역시 특정 서비스에 적용 시 중요한 기준 중 하나라 유용하게 사용할 수 있는 기능입니다. ⑥ 마지막으로 편집 모드를 라이트, 다크 모드 중 선택할 수 있습니다.

 

프로필 설정

 

같은 컬러로 구성된 프로필(아바타)이라 하더라도 이렇게 세 가지 크기로 설정할 수 있어 적용하고자 하는 서비스 또는 프로젝트에 맞게 구성할 수 있습니다. 또 프로필이 99개까지 제공되기 때문에 6가지 스타일을 적절히 조합할 경우 수백 개의 개성 있는 아바타를 생성해 손쉽게 프로젝트 내 적용할 수 있다는 장점이 있습니다.

 

픽셀 콘셉트 제공

 

여섯 가지 스타일 중 ‘픽셀’ 콘셉트를 제공하는 점도 눈에 띕니다. 하나씩 직접 제작하기가 꽤 까다롭기 때문입니다. ‘Boring Avatars’의 가장 큰 장점은 우리가 직접 해야 할 작업이 많지 않다는 점입니다. 스타일, 컬러, 모양, 크기 등의 기능만 적절히 사용하면 직접 만드는 것 이상의 퀄리티로 다양한 프로필(아바타)을 생성할 수 있습니다.

 

svg 포맷 복사

 

원하는 프로필(아바타)은 클릭 한 번으로 SVG 포맷 복사가 가능합니다. SVG로 복사할 경우, 피그마는 물론 스케치와 같은 디자인 툴 또는 웹 프로젝트에서 직접 사용할 수 있습니다. 무엇보다 개인은 물론 상업적 목적으로도 사용할 수 있어 활용도가 높은 서비스입니다. 서비스 내 기본 제공되는 프로필을 조금 더 다채롭게 활용하고 싶은 상황, 직접 프로필을 제작하기엔 시간이나 물리적 여유가 없는 상황에서 유용하게 사용할 수 있는 서비스라고 생각합니다.

 

 

세부 커스터마이징에 유용한, Avvvatars

커스터마이징 avvvatars
(출처: Avvvatars 홈페이지)

 

두 번째 소개할 서비스는 ‘Avvvatars’입니다. 앞서 살펴본 ‘Boring Avatars’가 다양한 스타일에 초점을 맞추고 있다면, ‘Avvvatars’는 스타일은 적지만(두 가지) 피그마 파일을 제공해 더 쉽고 세부적인 커스터마이징이 가능하다는 특징을 갖고 있습니다. 또 접근성을 고려한 컬러 세트를 제공해 관련 상황을 고려해야 하는 경우 적합한 환경을 제공해 줍니다.

 

Avvvatars 스타일

 

‘Avvvatars’에서 제공하는 두 가지 스타일입니다. 하나는 문자로 구성되어 있으며, 다른 하나는 다양한 모양으로 구성된 모습입니다. 60개 이상의 독특한 모양을 담고 있어 개별 단위로 피그마 내 편집 후 사용할 수 있으며, 컬러 등만 변경해 60개를 하나의 세트로 프로필에 적용하는 것도 가능합니다.

 

Avvvatars 컬러 지정

 

위 이미지는 검은색으로 기본 제공되는 모양에 컬러를 입힌 모습입니다. 피그마 파일 내 40여 개 이상의 컬러가 기본 지정되어 있어, 컬러를 직접 지정하지 않고도 쉽게 변경할 수 있습니다. 변경된 모습 역시 쉽게 확인할 수 있습니다. 동일한 모양을 컬러를 각기 다르게 지정하는 것으로도 사용자 간 구분을 쉽게 만들어 줄 수 있다는 장점이 존재합니다.

 

피그마 파일 컬러 적용

 

피그마 파일에 적용되어 있는 컬러입니다. 컬러 조합을 만들 수 있는 서비스도 여럿 소개했는데, 이런 서비스의 사용 목적은 직접 찾는 것이 어렵다는 데 있기에 미리 제공되며 어울릴만한 컬러가 있다는 건 작업 시간을 줄여주는 중요한 요소라고 생각합니다.

 

기본 프로필 랜덤 적용

 

제공되는 ‘문자'와 ‘모양'은 위와 같이 적용할 수 있습니다. 사용자가 입력한 이름에서 문자를 추출해 적용하거나 제공하는 모양을 랜덤 하게 적용해 주는 방법을 고려할 수 있습니다. 몇 가지 기본 프로필을 제공해 사용자의 선택에 맡기는 것도 방법이 될 수 있습니다.

 

Avvvatars 프로필

 

‘Avvvatars’는 ‘Boring Avatars’에 비하면 스타일은 부족하게 느껴질 수 있지만, 동일한 스타일을 더 다양하게 표현할 수 있다는 장점이 있습니다. 일관성 있는 프로필(아바타)을 제공해야 하는 경우 더 적합한 서비스라고 생각합니다. 무엇보다 피그마 내 직접 편집이 가능하다는 점에서 높은 점수를 주고 싶습니다.

 

<참고자료>

Boring Avatars

Avvvatars 

 

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

좋아요

댓글

공유

공유

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

작가 홈

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

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
요즘IT의 멤버가 되어주세요! 요즘IT의 멤버가 되어주세요!
요즘IT의 멤버가 되어주세요!
모든 콘텐츠를 편하게 보고 스크랩해요.
모든 콘텐츠를 편하게 보고 스크랩 하기
매주 PICK한 콘텐츠를 뉴스레터로 받아요.
매주 PICK한 콘텐츠를 뉴스레터로 받기
로그인하고 무료로 사용하기