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

디자인

프로필 제작을 위한 매력적인 툴 ‘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

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 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'

디자인

핸드 스케치를 위한 만능 툴, ‘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 이야기를 전달해드려요.

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