AI 튜토리얼

Bloub로 변형 SVG 봇 아바타 만들기 및 사용자 지정

이 튜토리얼에서는 Bloub 설정, 14가지 변형 상태 탐색, 아바타 사용자 지정, 타임라인 생성, 정지 이미지와 애니메이션 내보내기, 결정적 재생 및 고정 프레임을 지원하는 Vue 컴포넌트 사용 방법을 설명합니다.

2026년 8월 20일약 9분 소요

Bloub란 무엇인가요?

Bloub는 x.ai 봇 아바타를 SVG로 재현한 것입니다. 하나의 검은색 채움 본체 도형이 14가지 상태 사이에서 변형되고, 서로 독립적인 두 개의 흰색 눈 도형이 일반 배경 위에 표시됩니다. 애니메이션은 애니메이션 라이브러리 없이 구현되었습니다.

이 프로젝트는 프레임워크 없이 동작하는 애니메이션 엔진과 Vue 3 인터페이스를 결합합니다. 엔진은 시계에도 의존하지 않습니다. engine.sample(t)을 호출하면 제공된 시간만으로 프레임을 생성합니다. 따라서 일시 정지, 탐색, 정지된 미리보기, DOM 없는 테스트를 결정론적으로 처리할 수 있습니다.

주요 기능

측정된 14가지 상태: 아바타에는 유휴, 윙크, 궤도, 버스트와 같은 상태가 포함됩니다.
아바타 사용자 지정: 본체 모양 8개, 색상 12개, 기본 표정 16개 중에서 선택할 수 있습니다. 선택 사항은 방문할 때마다 유지됩니다.
타임라인 편집기: 상태를 배치하고 각 상태가 유지되는 시간을 설정한 다음 결과 애니메이션을 저장할 수 있습니다.
다양한 내보내기 형식: 아바타를 SVG, PNG 또는 애니메이션 GIF로 내보내거나, 전체 타임라인을 GIF 또는 MP4로 내보낼 수 있습니다.
필요할 때만 동영상 인코딩: 동영상 인코더는 처음 필요할 때만 가져옵니다.
세 가지 언어: 인터페이스는 프랑스어, 영어, 중국어를 지원합니다.
결정론적 렌더링: 특정 시간에는 항상 동일한 이미지가 생성되므로 정확히 고정된 프레임과 반복 가능한 테스트를 지원합니다.

사전 요구 사항

Bloub는 Vue 3, Vite, TypeScript, Tailwind CSS 4, pnpm을 사용합니다. 계속하기 전에 Node.js 환경과 pnpm을 설치하세요.

Bloub 설치 및 실행

저장소를 복제하거나 다운로드한 뒤 터미널에서 해당 디렉터리를 엽니다.
종속 항목을 설치합니다:
```
pnpm install
```
Vite 개발 서버를 시작합니다:
```
pnpm dev
```
브라우저에서 http://localhost:5190을 엽니다.

테스트 실행 및 프로덕션 빌드 생성

다음 명령으로 Vitest 테스트 모음을 실행합니다:

pnpm test

TypeScript 코드를 확인하고 다음 명령으로 애플리케이션을 빌드합니다:

pnpm build

빌드 명령은 vite build 전에 vue-tsc --noEmit을 실행합니다. 저장소에는 의도적으로 ESLint 또는 Prettier 설정이 없으므로 vue-tsc가 기본 코드 품질 검사 역할을 합니다. 변경을 완료했다고 판단하기 전에 pnpm build를 실행하세요.

애플리케이션 살펴보기

왼쪽의 레일에서 세 가지 주요 뷰 사이를 전환할 수 있습니다.

아바타 사용자 지정

Customise를 열어 본체 모양 8개, 색상 12개, 기본 표정 16개 중 하나를 선택합니다. 애플리케이션은 방문할 때마다 이 선택 사항을 유지합니다.

애니메이션 타임라인 만들기

Animations를 열어 아바타 상태를 타임라인에 배치합니다. 각 상태가 유지되는 시간을 설정하고 시퀀스를 미리 본 다음 저장하세요. 재생 커서는 상태 이름만이 아니라 타임라인 위치를 추적하므로 동일한 상태가 몽타주에 두 번 이상 나타날 수 있습니다.

언어 변경 및 크레딧 보기

Settings를 열어 프랑스어, 영어 또는 중국어를 선택하고 프로젝트 크레딧을 확인합니다.

14가지 상태 모두 확인

로컬 URL에 #planche를 추가하면 14가지 상태를 정지된 프레임으로 나란히 표시할 수 있습니다:

http://localhost:5190/#planche

이 뷰를 사용하면 변경으로 인해 상태가 예기치 않게 바뀌었는지 빠르게 확인할 수 있습니다.

재생을 일시 정지한 상태로 특정 상태를 열려면 etat 및 stop 해시 매개변수를 사용합니다. 예:

http://localhost:5190/#etat=orbit&stop

BloubBot Vue 컴포넌트 사용

BloubBot 컴포넌트는 제어되는 재생과 정확히 고정된 프레임을 모두 지원합니다. 다음과 같이 현재 타임라인 블록, 상태, 재생 상태를 바인딩하여 기본 제어 인스턴스를 만들 수 있습니다:

<BloubBot
  v-model:block="block"
  v-model:state="state"
  v-model:playing="playing"
/>

block 모델은 재생 커서입니다. 타임라인에 동일한 상태가 여러 번 포함될 수 있으므로 이 구분이 중요합니다. 블록 인덱스는 정확한 타임라인 위치를 식별하고, state는 출력으로 해당 커서를 따릅니다.

정지된 프레임 렌더링

상태, 크기, frozen-at 값을 전달하면 애니메이션 루프를 시작하지 않고 정확한 단일 프레임을 렌더링할 수 있습니다:

<BloubBot state="orbit" :size="120" :frozen-at="1.2" />

Bloub는 정지 렌더링을 사용하여 썸네일과 전체 상태 보드를 만듭니다. 안정적인 미리보기나 정확한 시점의 프레임이 필요할 때도 유용합니다.

사용 가능한 컴포넌트 입력

컴포넌트는 다음 props를 제공합니다:

size
shape
color
expression
paper
frozenAt
cycle
follow
gaze

컴포넌트 모델은 block, state, playing, elapsed입니다. 정확한 타입과 컴포넌트 세부 정보는 BloubBot.vue를 참조하세요.

아바타와 타임라인 내보내기

화면에 표시되는 모든 항목을 내보낼 수 있습니다. 단일 아바타의 경우 SVG, PNG 또는 애니메이션 GIF를 선택합니다. 전체 타임라인의 경우 GIF 또는 MP4를 선택합니다.

SVG와 PNG 내보내기에는 추가 라이브러리가 필요하지 않습니다. 애니메이션 출력을 위해 필요한 비디오 인코더는 처음 요청될 때만 로드되므로, 일반적인 편집 중에는 가져올 필요가 없습니다. 자세한 구현 내용은 내보내기 문서에서 확인할 수 있습니다.

고급 팁

결정론적 프레임에는 Pure Engine 사용

src/bot/ 아래의 코드는 프레임워크와 시계에 의존하지 않습니다. 특정 시점의 이미지가 필요할 때는 engine.sample(t)를 사용하세요. 결과가 실시간 시계가 아니라 제공된 시간에 따라 결정되므로 일시 정지, 재개, 탐색, 테스트, 썸네일 생성이 일관되게 유지됩니다.

측정된 상수를 단순화하지 말 것

많은 값이 임의로 정해진 것처럼 보일 수 있지만, 이 값들은 초당 10프레임으로 편집된 참조 영상에서 측정되었습니다. 실루엣은 서브픽셀 광선 캐스팅으로 추출했고, 눈은 캡슐 형태로 맞췄으며, 색상과 선 너비는 직접 샘플링했습니다.

상수를 더 다루기 쉬운 값으로 반올림하면 프로젝트가 유지하려는 시각적 유사성이 떨어질 수 있습니다.

애니메이션을 수정할 때는 다음 측정 특성을 염두에 두세요.

눈은 수직선에서 약 26도 기울어진 역슬래시 방향으로 기울어져 있습니다.
몸체는 스퀘어클이 아니라 사실상 완벽한 원이며, 반지름 편차는 0.7% 미만입니다.
전환에는 지수적 이즈 아웃이 사용되며 몸체가 오버슈트하지 않습니다.
혜성 효과가 나타나는 동안 점은 가만히 있고 궤적이 점 주위를 공전합니다.
대기 중인 아바타는 떠 있지 않습니다. 생동감은 시선의 미세한 움직임과 눈 깜박임에서 비롯됩니다.

프로필을 변경하거나 profiles.ts를 다시 생성하기 전에 측정 문서를 확인하세요.

엔진을 확장하기 전에 아키텍처 검토

프로젝트 문서에는 엔진, 방사형 프로필 변형, 그리고 눈 모양을 마스크 구멍으로 사용하는 방식이 설명되어 있습니다. 상태를 추가하거나 변형 동작을 변경하기 전에 아키텍처 가이드를 읽어보세요. 인터페이스, 등장 시퀀스, 국제화 계층은 각각 인터페이스 가이드, 소개 가이드, 국제화 가이드에 별도로 설명되어 있습니다.

디버깅 전에 릴리스 이력 확인

변경 로그에는 릴리스마다 하나의 항목이 있습니다. 이를 확인하면 현재 로컬 사본에 특정 수정 사항이 포함되어 있는지 파악할 수 있습니다.

결론

Bloub는 애니메이션 라이브러리에 의존하지 않고, 세심하게 측정된 SVG 아바타, 시각적 사용자 지정 인터페이스, 타임라인 편집기, 결정론적 프레임 샘플링, 여러 내보내기 형식을 제공합니다. 내장 상태 보드와 컴포넌트 예제로 시작하고, 변경 후 테스트와 프로덕션 빌드를 실행하며, 애니메이션을 확장할 때 측정된 상수를 유지하세요.

코드는 MIT 라이선스로 제공됩니다. 이 프로젝트는 x.ai와 제휴하거나, 공식적으로 승인받거나, 연결되어 있지 않습니다. 라이선스는 저장소의 코드에 적용되며, 재현된 디자인에는 적용되지 않습니다.