BoringAvatar

BoringAvatar

 

작성 일자 : 2024년 8월 4일

---

 

BoringAvatar

 

 

개요

 

최근 NextJS에서 Auth.js와 Lucia를 이용해서 로그인 기능을 구현하면서, 로그인 시에 사용자의 프로필 이미지를 보여주는 기능을 추가하고 싶었습니다.

 

OAuth를 이용한 로그인과는 다르게, 아이디와 비밀번호를 이용한 로그인 기능은 기본적으로 프로필 이미지를 제공하지 않습니다. 따라서, 사용자의 프로필 이미지를 보여주기 위해서는 사용자가 직접 이미지를 업로드하거나, 서비스 자체적으로 기본 프로필 이미지를 제공해야합니다.

 

이번 글에서는, BoringAvatar 라는 JS 라이브러리를 이용하여, 랜덤하게 사용자의 프로필 이미지를 제공하는 방법에 대해 알아보겠습니다.

 

---

 

 

Installation

 

BoringAvatar는 NPM을 통해 설치할 수 있습니다.

npm install boring-avatars

 

---

 

 

Quick Start

 

import Avatar from "boring-avatars";

<Avatar name="Gerrymandering"/>

 

 

 

---

 

 

Props

 

Name

 

name props는 아바타를 생성하는데 사용될 값을 의미합니다. 사용자 명, 이메일, 랜덤한 문자열 등을 사용할 수 있습니다.

<Avatar name="Sam Altman"/>

 

 

 

---

 

Variant

 

variant props는 아바타의 테마를 결정합니다.

 

---

 

marble

<Avatar name="Gerrymandering" variant="marble"/>

 

 

 

---

 

beam

<Avatar name="Gerrymandering" variant="beam"/>

 

 

 

---

 

pixel

<Avatar name="Gerrymandering" variant="pixel"/>

 

 

 

---

 

sunset

<Avatar name="Gerrymandering" variant="sunset"/>

 

 

 

---

 

ring

<Avatar name="Gerrymandering" variant="ring"/>

 

 

 

---

 

bauhaus

<Avatar name="Gerrymandering" variant="bauhaus"/>

 

 

 

---

 

 

Size

size props는 아바타의 크기를 결정합니다.

<Avatar name="Gerrymandering" size={88}/>

 

 

 

---

 

 

Colors

colors props에 배열을 전달하여 아바타의 색상을 지정할 수 있습니다.

<Avatar name="Gerrymandering" colors={["#CC3000", "#FF8E00", "#C06F48", "#090705"]} />

 

 

 

---

 

 

Square

square props를 true로 설정하면, 아바타가 정사각형으로 렌더링됩니다.

<Avatar name="Gerrymandering" square/>

 

 

 

---

References

• BoringAvatar Github
• BoringAvatar

Boring avatars - Open source SVG avatar generator

 

GitHub - boringdesigners/boring-avatars: Boring avatars is an open source React library that generates custom, SVG-based avatars