Pixel Portraits: AI로 생성한 트레이딩 카드

Vercel 팀이 컨퍼런스에서 운영한 AI 포토부스의 전체 기술 스택과 구현 방법을 공개했다. flux-kontext-lora 모델로 트레이딩 카드 이미지를 생성하고, BRIA RMBG 2.0으로 배경을 제거하며, Canvas API로 카드를 합성하는 6초짜리 파이프라인이다. 스타일 레퍼런스 이미지를 모델 입력으로 추가해 카드 스타일 일관성을 유지한 방법이 핵심이다.

핵심 포인트

**6초 파이프라인**: flux-kontext-lora 생성 → BRIA RMBG 2.0 배경 제거 → Canvas API 합성 → sharp 후처리 전체 과정이 6초
**스타일 일관성**: 스타일 레퍼런스 이미지를 flux-kontext 모델에 추가로 전달해 트레이딩 카드 특유의 일관된 스타일 유지
**브라우저 Canvas 합성**: 이미지 합성을 서버가 아닌 브라우저 Canvas API로 처리해 서버 부하 최소화

상세 정리

파이프라인 4단계

1. **flux-kontext-lora 이미지 생성**: Fal.ai에서 호스팅한 flux-kontext-lora 모델로 기본 이미지를 생성한다. 이 단계에서 스타일 레퍼런스 이미지를 추가로 전달해 트레이딩 카드 특유의 빈티지 스타일을 일관되게 유지한다. 단순 텍스트 프롬프트만으로는 실행마다 스타일 편차가 생기기 때문에 레퍼런스 이미지를 모델 입력으로 추가한 점이 핵심이다.

2. **BRIA RMBG 2.0 배경 제거**: 생성된 이미지에서 피사체만 분리한다. BRIA RMBG 2.0은 배경 제거에 특화된 모델로, 머리카락 같은 디테일도 비교적 깔끔하게 처리한다. Vercel AI Gateway를 통해 Fal.ai API를 호출한다.

3. **Canvas API 합성**: 배경이 제거된 피사체를 브라우저 Canvas API로 트레이딩 카드 템플릿 위에 합성한다. 서버에서 처리하지 않고 브라우저에서 직접 합성해 서버 부하를 줄였다.

4. **sharp 후처리**: 최종 합성 이미지를 Node.js sharp 라이브러리로 리사이징하고 포맷을 최적화한다.

GPT Image 1.5 Edit 활용피사체 이미지에서 특정 영역을 수정해야 할 경우 GPT Image 1.5 Edit API를 활용한다. 인페인팅 방식으로 이미 생성된 이미지의 일부를 자연스럽게 교체할 수 있다.

v0 템플릿 공개전체 파이프라인을 v0 템플릿으로 공개했다. 브라우저에서 바로 포크해 커스터마이징 가능하다.

왜 읽나AI 이미지 생성 파이프라인을 실제 이벤트 레벨에서 운영한 사례로, 모델 선택 이유(flux-kontext-lora의 스타일 레퍼런스 지원), 배경 제거 모델 선택(BRIA RMBG 2.0), 클라이언트 사이드 합성(Canvas API) 등 각 단계의 기술적 선택 이유가 명확하다. AI 이미지 생성과 후처리를 조합하는 파이프라인 구현 시 참고할 수 있는 실전 패턴이다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Pixel Portraits: AI로 생성한 트레이딩 카드

이 글과 비슷한

DS와 MLE가 함께 일하는 법

AI와 개발하기: 숨은 결정을 드러내기

Grafana에서 자연어로 장애 원인을 분석하기: LLM 에이전트 기반 SRELens 개발기