자동 프로필 이미지 생성 API - DiceBear Avatars

회원 시스템이 있는 서비스를 만들면, 보통 회원의 프로필 이미지를 설정할 수 있는 기능이 있습니다.

프로필 이미지 기능을 만들면, 프로필 사진이 없을 때, 보통 아래와 같은 이미지로 보여주도록 만들죠.

프로필사진 없음

 

해외에서는 이것을 아바타라고 합니다.

 

그런데 혹시 Github 계정을 만들면 처음에 설정되는 아바타를 보신 적 있으신가요?

Github는 이 초기 아바타를 계정 ID를 Seed로 랜덤한 이미지를 등록해 놓습니다.

깃허브 초기 아바타 이미지

이런 아바타는 Github에서 직접 만들어서 등록해주는 것일까요?

 

아닙니다. 이러한 랜덤 아바타를 만들어주는 API가 따로 있고 Github는 이것을 이용했습니다.

이렇게 ID를 넣고 랜덤 아바타를 만들어주는 API를 다양하게 소개해 드리겠습니다.

 

 

DiceBear Avatars

https://avatars.dicebear.com/

DiceBear Avatars

Dicebear Avatars

 

DiceBear Avatars는 많은 사람들이 만들어둔 아바타 생성 API를 한 군데에 모아둔 유용한 사이트입니다.

각 API에 따라 호출해주는 HTTP API가 다른데, 이 사이트에서는 그 방법을 통일해줍니다.

 

 

 

아바타 스타일

DiceBear Avatars에서 지원해주는 아바타 스타일은 아래와 같이 총 17개 입니다. (2022. 05. 22. 기준)

https://avatars.dicebear.com/styles

Overview | DiceBear Avatars

DiceBear Avatars에서 지원해주는 아바타 타입들

 

사실 여기 아바타 스타일들이 툭툭 튀고 너무 개성적이고 이국적인 느낌이 많이 듭니다.

그래도 그 중 제가 마음에 들어 하고, 평범하다고 생각하는 타입은 아래와 같습니다.

개인적으로 무난하다고 생각하는 타입들.

 

 

사용 방법

https://avatars.dicebear.com/docs/http-api

HTTP-API | DiceBear Avatars

위의 링크를 통해 들어가면 HTTP-API를 사용하는 방법을 알 수 있습니다.

 

https://avatars.dicebear.com/api/:sprites/:seed.svg

위의 기본 베이스 URL에 :seed에는 사용자 id나 닉네임 또는 고유 값, 랜덤 값 등 문자를 넣어주시면 됩니다.

:sprites에 아래와 같은 아바타 스타일 중 마음에 드는 스타일의 이름으로 변경하면 됩니다.

• adventurer
• adventurer-neutral
• avataaars
• big-ears
• big-ears-neutral
• big-smile
• bottts
• croodles
• croodles-neutral
• identicon
• initials
• micah
• miniavs
• open-peeps
• personas
• pixel-art
• pixel-art-neutral

예시

https://avatars.dicebear.com/api/identicon/wooncloud.svg

wooncloud 시드로 만든 identicon 아바타

그러면 svg 파일로 반환받을 수 있습니다.

아시다시피 svg는 벡터 이미지이고, <img> 태그의 src에 그대로 넣어 사용할 수 있습니다.

 

옵션

https://avatars.dicebear.com/docs/options

Options | DiceBear Avatars

옵션은 쿼리스트링을 이용해서 설정할 수 있습니다.

옵션은 총 8가지가 있습니다.

이름	타입	기본 값	Alias	Example
flip	boolean	false
rotate	integer	0
scale	integer	100
radius	integer	0	r
size	integer
backgroundColor	String (HEX Color Code)		b	background=%230000ff
translateX	integer	0
translateY	integer	0

예시

https://avatars.dicebear.com/api/male/john.svg?background=%230000ff

​

 

설치

설치형으로 사용하고 싶으면 npm을 이용하여 설치할 수 있습니다.

npm install --save @dicebear/avatars

그리고 사용하길 원하는 아바타도 함께 설치해줘야 합니다.

npm install --save @dicebear/avatars-male-sprites

 

이제 nodejs에서 아래와 같이 코드를 사용하여 아바타 라이브러리를 import 하면 사용할 수 있습니다.

import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-identicon-sprites';

let svg = createAvatar(style, {
  seed: 'custom-seed',
  // ... and other options
});