예쁜 랜덤 프로필 이미지 만들기 - Boring Avatars

이전에 소개했던 DiceBear Avatars는 예쁜 그림이 별로 없어서 호불호가 많이 갈렸을 것 같습니다.

하지만 이번에는 좀 더 귀엽고 예쁜 아바타를 만들 수 있는 라이브러리를 소개하겠습니다.

 

Boring Avatars

https://boringavatars.com/

Avatar generator playground - Boring Avatars

https://github.com/boringdesigners/boring-avatars

GitHub - boringdesigners/boring-avatars: Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avat

Boring Avatars generator playground

귀엽..

Boring Avatars 사용자 이름과 색상 팔레트에서 사용자 정의 SVG 기반 아바타를 생성하는 작은 라이브러리입니다.

이 라이브러리는 모든 타입이 귀엽고 예뻐 보입니다.

총 6가지 타입이 있고, 원하는 컬러 팔레트를 정해서 직접 제작하는 사이트의 디자인에 어울리게 사용할 수 있습니다.

 

아바타 타입 (Avatar Type)

아바타 타입은 총 6개이며,

• beam
• marble
• pixel
• sunset
• bauhaus
• ring

등이 있습니다.

 

beam

beam 타입의 아바타

beam 타입의 아바타는 귀엽게 도형에 눈과 입이 있어, 즐거움을 만들어 줍니다.

개인적으로 가장 마음에 드는 타입입니다.

 

marble

marble 타입의 아바타

동그란 색깔 구슬처럼 안쪽에 임의의 컬러들이 그라데이션으로 표현되는 타입입니다.

 

pixel

pixel 타입의 아바타

정말 랜덤으로 작은 픽셀들이 모여, 특정한 모양 없이 독립적인 아바타를 만들어주는 타입입니다.

 

 

sunset

sunset 타입의 아바타

이름 그대로 sunset이니 바다 지평선을 연상하는 그라데이션 패턴 타입입니다. 정말 무난하고 좋은 것 같습니다.

 

 

bauhaus

bauhaus 타입의 아바타

다양한 기하학적인 모양을 표현해서 또 다른 개성을 만들어주는 예쁜 아바타 타입입니다.

개인적으로 두번째로 마음에 들어 하는 아바타 타입입니다.

 

 

ring

ring 타입의 아바타

링 모양의 아바타 타입입니다. 동글동글한 원이 컨셉이라면 아주 좋은 선택이 될 수 있을 것 같습니다.

 

 

컬러 팔레트 (color palette)

원하는 컬러를 선택할 수 있고 랜덤으로 컬러를 만들어서 원하는 컬러 조합이 나올 때까지 둘러볼 수 있습니다.

 

왼쪽 상단의 컬러 팔레트를 직접 설정할 수 있다.

오른쪽 상단에 랜덤 팔레트를 선택해서 랜덤으로 팔레트를 얻을 수 있다.

 

 

사용법 (How to use)

Boring Avatars는 기본적으로 React 라이브러리입니다.

하지만 라이브러리를 설치하지 않아도, HTTP-API를 사용하여 SVG 이미지를 받을 수 있습니다.

아래의 링크를 통해 그 사용법을 자세히 알 수 있습니다.

 

https://github.com/hihayk/boring-avatars-service/blob/main/README.md

GitHub - hihayk/boring-avatars-service

 

Base URL

아래는 Base URL입니다. 이 URL을 기본으로 해서 Endpoint를 바꾸어 원하는 이미지를 얻을 수 있습니다.

https://source.boringavatars.com/

 

아바타 타입

Base URL에 다음과 같은 텍스트를 추가해 원하는 타입으로 아바타를 랜덤하게 얻을 수 있습니다.

(marble, beam, pixel, sunset, ring, bauhaus)

<!-- beam 타입 -->
https://source.boringavatars.com/beam

<!-- marble 타입 -->
https://source.boringavatars.com/marble

<!-- pixel 타입 -->
https://source.boringavatars.com/pixel

<!-- sunset 타입 -->
https://source.boringavatars.com/sunset

<!-- bauhaus 타입 -->
https://source.boringavatars.com/bauhaus

<!-- ring 타입 -->
https://source.boringavatars.com/ring

 

크기 변경

타입 뒤에 원하는 사이즈(px)를 추가하면 원하는 사이즈로 아바타를 랜덤 하게 얻을 수 있습니다.

참고로 사이즈는 크게 정해진 범위가 없습니다. (svg라서 사이즈에 자유로움)

https://source.boringavatars.com/beam/40
https://source.boringavatars.com/beam/80
https://source.boringavatars.com/beam/160
https://source.boringavatars.com/beam/1000

 

닉네임 설정

사용자 이름, 이메일 또는 임의의 텍스트를 사용하여 고유한 아바타를 생성할 수 있습니다.

타입과 크기 이후에 텍스트를 추가하면 그 텍스트가 Seed가 되어 그 Seed에 의한 임의의 고정 아바타가 생깁니다.

https://source.boringavatars.com/beam/120/wooncloud
https://source.boringavatars.com/beam/120/test
https://source.boringavatars.com/beam/120/helloworld
https://source.boringavatars.com/beam/120/wow

각각 wooncloud, test, helloworld, wow 로 만든 아바타

 

 

컬러 팔레트 설정

컬러 팔레트는 쿼리스트링으로 파라미터를 전달해야 합니다.

colors= 뒤에 HEX 코드로 된 컬러코드를 콤마(,) 구분으로 5개 입력해야 합니다.

https://source.boringavatars.com/beam/120/test?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

 

위의 url로 나온 이미지

 

네모 모양 아바타

마찬가지로 쿼리스트링으로 square라는 글자를 추가해 주세요.

https://source.boringavatars.com/beam/120/test?square

네모모양 test쨩

 

모든 옵션 조합 예시

https://source.boringavatars.com/beam/120/wooncloud?colors=264653,2a9d8f,e9c46a,f4a261,e76f51&square

결과