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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<참고자료>

Boring Avatars

Avvvatars