AI 튜토리얼

파이파이거 여성 의류 튜토리얼: 이중 언어 AI 의류 이미지 갤러리와 가상 피팅 서비스 구축

이 튜토리얼에서는 파이파이거 여성 의류 이미지 갤러리를 실행하고, 분류, 이중 언어 검색, 코디 보드, 이미지 다운로드 기능을 사용하는 방법을 소개합니다. 또한 Docker, 클라우드 모델 또는 로컬 ComfyUI를 통해 선택형 AI 가상 의상 변경 백엔드에 연결하는 방법도 설명합니다.

2026년 10월 30일약 13분 소요

파이파이거 여성 의류 튜토리얼: 이중 언어 AI 의류 갤러리 및 가상 피팅 구축

프로젝트 소개

拍片哥 여성 의류（COSTUME-DB-01）는 어두운 테마의 오픈 소스 AI 의류 참고 이미지 갤러리로, 인물이 등장하지 않고 2:3 비율로 생성된 AI 의류 이미지 1407장을 수록하고 있습니다. 프런트엔드는 빌드가 필요 없는 순수 정적 웹사이트로, 바로 탐색하고 검색하고 필터링할 수 있습니다. 가상 착용 기능이 필요하다면 backend/에 있는 GoFrame v2 백엔드도 배포할 수 있습니다.

먼저 온라인 버전을 열어 무료 이미지 갤러리 기능을 체험하거나, GitHub 저장소에서 소스 코드를 받아 로컬에서 실행하고 추가 개발을 진행할 수 있습니다.

주요 기능

의류 1407벌: 봄, 여름, 가을, 겨울, 속옷, 파티, 수영복, 섹시 의류의 8개 카테고리로 나뉩니다.
중국어·영어 지원: 기본 언어는 중국어이며, 페이지 오른쪽 상단에서 English로 전환할 수 있습니다.
양방향 키워드 검색: “白”, “蕾丝”, “连衣裙”과 같은 중국어 단어와 white, lace, dress 같은 영어 단어를 모두 지원합니다.
이미지 탐색: 무한 스크롤, 큰 이미지 보기, 좌우 방향키 전환, Esc 닫기 및 원본 크기 PNG 다운로드를 제공합니다.
가상 착용 코디 도구: 인물 사진을 업로드하고 의류를 선택한 뒤 미리 보기, 드래그, 확대·축소 및 배경 제거 합성을 진행할 수 있습니다.
AI 가상 의상 교체: 선택 가능한 백엔드를 통해 Gemini, 豆包, GPT Image, OpenAI Images 호환 모델 또는 로컬 ComfyUI를 호출할 수 있습니다.
로컬 개인정보 저장: 모델 설정은 현재 브라우저에 저장되며, 생성에 성공한 기록은 IndexedDB에 저장되고 기기 간 동기화되지 않습니다.
이미지로 유사 상품 검색: 큰 이미지 상세 화면과 가상 착용 작업 영역에서 타오바오 이미지 검색을 호출할 수 있습니다.

1단계: 정적 프런트엔드 실행

프런트엔드는 주로 index.html, data.js 및 assets/로 구성되며, 의존성을 설치하거나 빌드를 실행할 필요가 없습니다. 저장소를 받은 후 프로젝트 루트 디렉터리에서 임의의 정적 파일 서버를 시작합니다.

Python 사용

python3 -m http.server 3000

Node.js 사용

npx serve -l 3000 .

그다음 http://localhost:3000에 접속합니다. 최신 브라우저에서 index.html을 직접 열 수도 있지만, 일반적으로 전체 상호작용을 테스트하려면 로컬 HTTP 서비스로 실행하는 편이 적합합니다.

이미지 갤러리 탐색, 카테고리 필터링, 이중 언어 검색, 큰 이미지 보기 및 기본 코디 도구는 API Key가 필요하지 않으며 백엔드를 배포할 필요도 없습니다. 원본 크기 PNG의 총 용량이 약 1GB 이상이므로 저장소에는 포함하지 않았으며, 다운로드 버튼은 원본 사이트 리소스를 가리킵니다.

2단계: 의류 탐색 및 검색

카테고리 선택: 봄, 여름, 가을, 겨울 등의 카테고리로 탐색 범위를 좁힙니다.
키워드 입력: 검색창에 중국어 또는 영어 의류 속성을 입력하면 결과가 실시간으로 업데이트됩니다.
언어 전환: 오른쪽 상단의 언어 버튼으로 중국어와 영어 인터페이스를 전환합니다.
큰 이미지 보기: 의류 상세 화면을 연 뒤 키보드의 좌우 방향키로 인접 이미지를 탐색하고 Esc로 닫을 수 있습니다.
다운로드 또는 유사 상품 검색: 필요에 따라 원본 크기 다운로드를 사용하거나 타오바오 이미지 검색을 엽니다.

URL 매개변수를 사용해 특정 언어와 검색 상태를 공유할 수도 있습니다.

?lang=en
?q=lace
?lang=en&q=white

lang은 zh 또는 en으로 설정할 수 있으며, q는 초기 검색어를 지정합니다.

영어 모드

3단계: 기본 가상 착용 코디 도구 사용

프런트엔드에서 가상 착용 기능을 연 뒤 먼저 이미지 갤러리에서 참고 의류를 선택하고 인물 사진을 업로드합니다. 기본 코디 도구는 온라인 미리 보기, 드래그, 확대·축소 및 배경 제거 합성을 지원하며 대형 모델을 호출하지 않습니다. 의류가 인체 형태에 더 자연스럽게 맞도록 하려면 AI 의상 교체 백엔드를 추가로 배포해야 합니다.

사진을 업로드하면 프런트엔드가 긴 변을 2048픽셀로 자동 조정하고 WebP로 우선 변환하며, 0.90에서 0.75까지 품질 단계에 따라 압축합니다.

4단계: Docker로 AI 의상 교체 백엔드 배포

백엔드는 backend/에 있으며, 호스트에 Go 컴파일 환경을 설치하지 않아도 되도록 Docker Compose 사용을 권장합니다.

cp backend/.env.example backend/.env
docker compose up -d

backend/.env를 편집하고 사용할 모델의 키를 입력합니다. 서비스가 시작되면 기본적으로 http://localhost:8000에서 수신 대기합니다. 프런트엔드도 localhost 또는 127.0.0.1을 통해 열었다면 자동으로 http://127.0.0.1:8000 연결을 시도합니다.

Docker Run 사용

cd backend
docker build -f manifest/docker/Dockerfile -t costume-tryon .
docker run -d --name costume-tryon -p 8000:8000 -e ARK_API_KEY="사용자의 豆包ArkKey" -e OPENAI_API_KEY="sk-사용자의 OpenAIKey" costume-tryon

Docker를 사용하지 않는 경우

Windows 사용자는 backend/restart.bat을 실행할 수 있습니다. Go가 이미 설치된 사용자도 직접 시작할 수 있습니다.

cd backend
export ARK_API_KEY="사용자의 Key"
go run main.go

Windows PowerShell에서는 환경 변수를 $env:ARK_API_KEY="사용자의 Key"와 같이 작성합니다.

5단계: 의상 교체 모델 설정

모델 설정 파일은 backend/manifest/config/config.yaml에 있으며, 템플릿은 config.example.yaml입니다. 각 모델에 프로토콜, API Key, 환경 변수 이름, Base URL 및 실제 모델 이름을 개별적으로 지정할 수 있습니다.

llm:
  models:
    gpt-image:
      provider: openai
      envKey: "OPENAI_API_KEY"
      baseURL: "https://api.openai.com/v1"
      model: "gpt-image-2"

    doubao:
      provider: doubao
      envKey: "ARK_API_KEY"
      baseURL: "https://ark.cn-beijing.volces.com/api/v3"
      model: "doubao-seedream-3-0-t2i-250415"

    gemini:
      provider: gemini
      envKey: "GEMINI_API_KEY"
      baseURL: "https://generativelanguage.googleapis.com/v1beta"
      model: "gemini-3.1-flash-image"

환경 변수의 우선순위가 설정의 apiKey보다 높습니다. 통이완샹, 智谱 CogView, 硅基流动 등 OpenAI Images 프로토콜과 호환되는 서비스를 연결하려면 provider: openai 모델 섹션을 추가하고 해당 Base URL과 모델 이름을 입력하면 됩니다. 어댑터 코드를 수정할 필요는 없습니다.

6단계: 프런트엔드를 백엔드에 연결

프런트엔드는 다음 우선순위에 따라 AI 의상 교체 서비스를 찾습니다.

설정 센터에 저장된 “백엔드 API 주소”.
페이지 로드 전에 설정된 전역 변수 window.AI_API_URL.
URL의 tryon 매개변수.
프런트엔드에 로컬로 접속할 때 http://127.0.0.1:8000으로 대체.

가장 간단한 방법은 페이지 오른쪽 상단에서 설정 센터를 열고 http://localhost:8000을 입력하는 것입니다. 다음 공유 주소를 사용할 수도 있습니다.

https://사용자의 프런트엔드 주소/?tryon=http://localhost:8000

설정 센터에서는 프로토콜, 모델 이름, Base URL, API Key 및 별도의 백엔드 액세스 Token도 저장할 수 있습니다. 개인 모델 설정은 현재 브라우저에만 저장되며, 생성할 때 단일 요청과 함께 임시로 백엔드에 전달됩니다. 백엔드 데이터베이스, 설정 파일 또는 비즈니스 로그에는 기록되지 않습니다. 공유 기기 사용을 마친 후에는 로컬 설정을 직접 삭제해야 합니다.

로컬 ComfyUI 오프라인 의상 교체

컴퓨터에 독립 그래픽 카드가 있거나 로컬 네트워크에 ComfyUI 호스트가 있다면 API Key가 필요 없는 로컬 방식을 사용할 수 있습니다. 프로젝트는 Qwen-Image-Edit-2511 Int8, 4단계 Lightning LoRA 및 MiniMax H3 워크플로를 지원하며, 기본 워크플로가 준비되지 않은 경우 H3로 대체할 수 있습니다.

ComfyUI를 시작합니다. 기본 주소는 http://127.0.0.1:8188입니다.
backend/README.MD에 따라 Qwen-Image-Edit-2511 모델과 Lightning LoRA를 배치합니다.
ComfyUI 모델 섹션과 워크플로 파일을 설정합니다.
웹 설정 센터에서 “ComfyUI 로컬”을 선택하고 연결 테스트가 성공한 후 저장합니다.

comfyui:
  provider: comfyui
  baseURL: "http://127.0.0.1:8188"
  model: "qwen-image-edit-2511"
  workflowPath: "workflows/comfyui_qwen_image_edit_2511_api.json"

고급 팁 및 프로덕션 배포 권장 사항

적합한 모델 방식 선택

ComfyUI: 로컬 그래픽 카드를 보유하고 개인정보 보호를 중시하며 API 비용을 피하고 싶은 사용자에게 적합합니다.
Gemini: README에서는 Nano Banana 2, 즉 gemini-3.1-flash-image를 클라우드 권장 기본 방식으로 소개합니다.
豆包 Seedream: 중국 내 네트워크에서 사용 가능한 방식을 필요로 하는 사용자에게 적합합니다.
GPT Image 2: OpenAI Images 프로토콜을 사용하며, 호환되는 타사 중계 주소도 설정할 수 있습니다.

공용 인터넷 보안 제한 활성화

백엔드를 공용 인터넷에 공개할 때는 기본 서비스만 노출해서는 안 됩니다. 프로젝트는 Bearer Token 인증, 정확한 CORS 허용 목록, 토큰 버킷 속도 제한, 일일 할당량 및 전체와 단일 주체에 대한 동시성 제어를 제공합니다. README에 명시된 기본값은 분당 10회, 하루 100회, 전체 동시성 2개 및 단일 주체 동시성 1개입니다. 구체적인 프로덕션 설정은 backend/DEPLOY.md를 참고하세요.

백엔드는 JPEG, PNG 및 WebP의 실제 이미지 콘텐츠만 허용합니다. 단일 이미지의 최대 용량은 8 MiB, 두 이미지의 합계 최대 용량은 16 MiB입니다. 이미지의 각 변 길이는 256~8192픽셀이어야 하며, 총 픽셀 수는 2,000만을 초과할 수 없습니다. 이러한 제한은 위조 파일, 코드 주입 및 압축 해제 시 픽셀 폭탄 공격의 위험을 줄이기 위한 것입니다.

로컬 데이터 및 개인정보 보호 경계 이해하기

성공한 AI 의상 변환 결과는 현재 브라우저의 IndexedDB에 저장되며, 확인, 다운로드, 개별 삭제 또는 전체 삭제가 가능합니다. 기록은 업로드되지 않으며 다른 기기와 자동으로 동기화되지도 않습니다. 개인 Base URL은 공개된 백엔드가 내부 네트워크 요청 프록시로 악용되는 것을 방지하기 위해 기본적으로 localhost, 내부 네트워크 및 예약된 주소를 가리킬 수 없습니다.

의상 데이터 확장

갤러리 데이터는 data.js에 저장됩니다. 각 레코드에는 id, カテゴリ, キーワード, サムネ, 画像 및 原寸이 포함됩니다. 이러한 일본어 필드명은 원본 데이터와의 호환성을 위해 유지되며, 프런트엔드는 분류와 키워드를 중국어 또는 영어로 자동 현지화합니다. 데이터를 확장할 때는 기존 필드 구조와 이미지 경로 규칙을 계속 따라야 합니다.

맺음말

拍片哥 여성복은 바로 사용할 수 있는 이중 언어 AI 의상 참고 갤러리로 활용할 수 있으며, 다중 모델 가상 착용 프로젝트의 프런트엔드 및 백엔드 기반으로도 사용할 수 있습니다. 처음 사용할 때는 정적 프런트엔드만 시작하면 됩니다. 실제 AI 의상 변환이 필요할 때는 필요에 따라 Docker 클라우드 모델 또는 ComfyUI 로컬 방식을 선택하면 됩니다. 이 프로젝트는 MIT License를 적용하므로 상업적 사용, 수정, 통합 및 배포가 허용되지만, 필요한 라이선스 고지를 유지해야 합니다. 또한 갤러리의 모든 이미지는 AI로 생성된 콘셉트 의상 디자인이며 실제 브랜드 상품 사진이 아니라는 점에 유의해야 합니다.