UGC 비디오 자동 — Playwright 기반 전체 파이프라인은(는) 무엇을 하나요?
이 스킬은 Higgsfield에서 UGC 광고 비디오 전체 파이프라인을 오케스트레이션합니다: 캐릭터 이미지 생성 → 비디오용 이미지 선택 → UGC 비디오 프롬프트 추가 → Seedance 2.0 비디오 생성. 모든 과정이 Playwright로 자동화됩니다.
파이프라인 개요
1단계: 캐릭터 이미지 생성 → /image/soul-v2
2단계: 비디오 페이지로 이동 → /create/video?model=seedance_2_0
3단계: 갤러리에서 이미지 선택 → 업로드 대화상자 → "Image Generations" 탭
4단계: UGC 비디오 프롬프트 작성 → Lexical 편집기 (contenteditable)
5단계: 설정 및 생성 → 생성 버튼 클릭
사전 요구 사항
- Playwright 브라우저 세션에서 higgsfield.ai에 로그인되어 있어야 함
- Playwright MCP 플러그인이 활성화되어 있어야 함
- 각 Playwright 도구를 처음 사용하기 전에
ToolSearch로 로드
입력 요구 사항
사용자는 다음을 제공합니다:
- 캐릭터 설명 또는 미리 작성된 이미지 프롬프트 (
/ugc-hot-girl호출하여 생성 가능) - 제품/브랜드 맥락 — UGC 비디오가 광고하는 대상
- 비디오 스타일 — 증언형, 제품 소개, 언박싱, 반응형 등
선택적 재정의:
- 이미지 모델: Soul 2.0 (기본값, 초상화에 최적)
- 비디오 모델: Seedance 2.0 (기본값)
- 지속 시간: 5초, 8초 (기본값), 10초
- 화면비: 자동, 16:9, 9:16 (TikTok/Reels), 1:1
- 해상도: 720p (기본값), 1080p
전체 자동화 흐름
1단계: 캐릭터 이미지 생성
1.1단계: 이미지 생성 페이지로 이동
browser_navigate → url: "https://higgsfield.ai/image/soul-v2"
페이지 로드 대기, 스냅샷 촬영.
1.2단계: 이미지 프롬프트 입력
텍스트 상자 찾기 (Playwright ID: hf:tour-image-prompt, 플레이스홀더: "Describe the scene you imagine"):
browser_click → ref: <textbox_ref>, element: "이미지 프롬프트 텍스트 상자"
browser_type → ref: <textbox_ref>, text: "<캐릭터 이미지 프롬프트>"
사용자가 이미지 프롬프트를 제공하지 않은 경우, 먼저 /ugc-hot-girl을 사용하여 하나를 생성합니다.
1.3단계: 이미지 생성
생성 버튼 찾기 ("Generate XXXX free gens left" 표시):
사용자 확인 요청 — 이 작업은 크레딧/무료 생성 횟수를 사용합니다.
browser_click → ref: <generate_button_ref>, element: "생성 버튼"
1.4단계: 생성 대기
browser_wait_for → time: 20
스크린샷 촬영. 새 이미지가 History 그리드의 첫 번째 항목으로 나타나는지 확인. 첫 번째 그리드 요소의 innerHTML에 새 자산 URL이 포함된 <img> 태그가 있는지 확인.
2단계: 생성된 이미지로 비디오 만들기
2.1단계: Seedance 2.0 비디오 페이지로 이동
browser_navigate → url: "https://higgsfield.ai/create/video?model=seedance_2_0"
페이지 로드 대기, 스냅샷 촬영. "Seedance 2.0"이 모델 버튼에 표시되는지 확인.
2.2단계: 업로드 미디어 대화상자 열기
업로드 영역 찾기 — generic [cursor=pointer]에서 다음 포함:
paragraph: Upload mediaparagraph: Image, Video or Audio
browser_click → ref: <upload_area_ref>, element: "업로드 미디어 영역"
업로드, Image Generations, Video Generations, Elements, Liked 탭이 있는 대화상자가 열립니다.
2.3단계: Image Generations 탭으로 전환
browser_click → ref: <image_gen_tab_ref>, element: "Image Generations 탭"
대화상자의 탭 표시줄에서 button "Image Generations" 찾기.
2.4단계: 생성된 이미지 선택
가장 최근에 생성된 이미지가 그리드의 첫 번째 항목입니다.
처음에는 button "Check eligibility"로 나타납니다. 클릭:
browser_click → ref: <first_image_ref>, element: "첫 번째 이미지 (가장 최근 생성)"
클릭 후 버튼이 이미지 미리보기와 녹색 체크 표시가 있는 generic [cursor=pointer]로 변환됩니다. 즉, 선택되었고 자격이 있음을 의미합니다.
중요: 목록의 첫 번째 "Check eligibility" 버튼은 항상 가장 최근 이미지입니다. 클릭 후 해당 ref는 스냅샷에서 사라지고 새 generic 요소로 대체됩니다.
2.5단계: 대화상자 닫기
browser_press_key → key: "Escape"
스냅샷 촬영. 확인:
- 업로드 영역에 더 이상 "Upload media" 텍스트가 표시되지 않음
- 대신 중첩된 이미지 요소(48px 썸네일)가 있는
generic [cursor=pointer]가 표시됨 - 기존
paragraph: Upload media및paragraph: Image, Video or Audio가 사라짐
2.6단계: 기존 프롬프트 지우기
비디오 페이지는 Lexical 리치 텍스트 편집기(contenteditable div)를 사용하며, 일반 텍스트 상자가 아닙니다. 지우려면:
browser_evaluate → function: "() => { const el = document.querySelector('[data-lexical-editor]'); el.focus(); el.click(); }"
browser_press_key → key: "Control+a"
browser_press_key → key: "Backspace"
스냅샷 촬영. 텍스트 상자에 플레이스홀더가 표시되어야 함: "Describe your scene in detail. Use @ to reference assets"
2.7단계: UGC 비디오 프롬프트 입력
지운 후 스냅샷을 찍어 새 텍스트 상자 ref를 가져옵니다. 그런 다음 천천히 입력 (Lexical 편집기에 필요):
browser_type → ref: <textbox_ref>, text: "<UGC 비디오 프롬프트>", slowly: true
UGC 비디오 프롬프트 템플릿 (스타일에 따라 선택):
증언형 / 토킹 헤드:
The woman from @image1 is talking directly to camera with natural hand gestures, warm golden hour lighting, casual authentic vibe. She speaks enthusiastically, leaning in slightly for emphasis. Soft bokeh background, shallow depth of field. Natural skin texture, realistic lip movement, TikTok UGC testimonial style. Smooth handheld camera, 24fps.
제품 소개:
The woman from @image1 holds up a product toward the camera, turning it to show different angles. Excited genuine expression, eyes wide. Ring light illumination, clean background. She points at the product features, nodding enthusiastically. Close-up selfie framing, iPhone-quality video, authentic UGC feel.
반응형 / 언박싱:
The woman from @image1 opens a package with excited anticipation, pulling out a product and reacting with genuine delight. Surprised expression, mouth open, then breaking into a wide smile. Natural bedroom lighting, casual setting. Handheld camera feel, authentic unboxing energy, TikTok style.
전후 비교:
The woman from @image1 starts looking skeptical, touching her face doubtfully. Then she applies a product, and her expression transforms to amazement, touching her skin in disbelief. Soft ring light, bathroom mirror setting. Split-feel transformation moment, genuine reaction, UGC testimonial.
라이프스타일 / 일상:
The woman from @image1 walks through a bright modern space, casually interacting with a product as part of her routine. Natural morning light, relaxed movement, authentic candid energy. Camera follows with gentle tracking, shallow depth of field. Aspirational but relatable lifestyle content.
2.8단계: 비디오 설정 구성 (선택 사항)
대부분의 UGC에 기본 설정이 잘 작동:
- 지속 시간: 8초 (숏폼에 적합)
- 화면비: 자동 (또는 TikTok/Reels용 9:16)
- 해상도: 720p
TikTok 세로용 화면비 변경:
browser_click → ref: <ratio_button_ref>, element: "화면비 선택기"
그런 다음 드롭다운에서 "9:16" 선택.
2.9단계: 비디오 생성
최종 양식 상태를 보여주는 스크린샷 촬영.
사용자 확인 요청 — 비디오 생성은 이미지보다 더 많은 크레딧이 소모됩니다.
생성 버튼은 크레딧 비용을 표시합니다 (예: "Generate 30 20"):
browser_click → ref: <generate_button_ref>, element: "비디오 생성 버튼"
2.10단계: 생성 모니터링
생성 버튼 클릭 후:
- 비디오가 생성 큐에 들어갑니다
- History 탭에서 진행 상황 확인
- 주기적으로 스크린샷을 찍어 상태 표시
- Seedance 2.0 비디오는 일반적으로 1-3분 소요
주요 요소 패턴 참조
이미지 생성 페이지 (/image/soul-v2)
| 요소 | 패턴 |
|---|---|
| 프롬프트 텍스트 상자 | textbox with ID hf:tour-image-prompt |
| 모델 선택기 | group > button containing "Soul 2.0" |
| 화면비 | button showing "3:4" |
| 해상도 | button showing "2k" |
| 생성 버튼 | button "Generate XXXX free gens left" |
| 첫 번째 결과 | History 그리드의 첫 번째 generic 자식 |
비디오 생성 페이지 (/create/video)
| 요소 | 패턴 |
|---|---|
| 업로드 영역 (비어 있음) | generic [cursor=pointer]에 paragraph: Upload media 포함 |
| 업로드 영역 (채워짐) | generic [cursor=pointer]에 이미지 썸네일 중첩, "Upload media" 텍스트 없음 |
| 업로드 대화상자 | dialog에 탭 표시줄: Uploads, Image Generations 등 |
| Image Generations 탭 | 대화상자의 button "Image Generations" |
| 갤러리의 첫 번째 이미지 | 대화상자 그리드의 첫 번째 button "Check eligibility" |
| 선택된 이미지 | generic [cursor=pointer]에 중첩 img (Check eligibility 버튼 대체) |
| 프롬프트 편집기 | [data-lexical-editor] contenteditable div |
| 프롬프트 텍스트 상자 (스냅샷에서) | Lexical 편집기 포커스 후 textbox [active] |
| 모델 버튼 | button "Model" containing "Seedance 2.0" |
| 지속 시간 버튼 | button "Duration" |
| 화면비 버튼 | button "Auto Ratio" |
| 해상도 버튼 | button "720p Resolution" |
| 생성 버튼 | button "Generate XX XX" with credit cost |
오류 처리
- 로그인되지 않음: 사용자에게 로그인 요청 (
! open https://higgsfield.ai) - 이미지 프롬프트 표시줄 없음: 페이지 새로고침 — 간헐적인 플랫폼 버그입니다
- "Check eligibility"가 변환되지 않음: 이미지가 Seedance 2.0과 호환되지 않을 수 있습니다. 다른 이미지를 시도하거나 다시 생성
- Lexical 편집기가 지워지지 않음: 세 번 클릭하여 모두 선택한 후 Backspace 시도. 또는
browser_evaluate로 innerHTML 지우기 - Escape로 대화상자가 닫히지 않음: 대화상자 영역 외부 클릭
- 크레딧 부족: 생성 전에 사용자에게 경고. 비디오는 이미지보다 비용이 더 많이 듦
- 오래된 ref: 각 상호작용 전에 항상 새 스냅샷 촬영. 페이지 상태 변경 후 ref가 변경됨
엔드투엔드 예제 워크플로
사용자: "내 새 스킨케어 세럼을 홍보하는 UGC 광고 비디오를 만들어 줘"
1. /ugc-hot-girl 호출 → 뷰티/스킨케어 이미지 프롬프트 생성:
"Attractive young woman, early 20s, clear dewy skin, dark brown hair in
messy bun... ring light illumination... photorealistic, 4K..."
2. 1단계 — 이미지 생성:
→ /image/soul-v2로 이동
→ 이미지 프롬프트 입력
→ 사용자 확인 → 생성 클릭
→ 15-20초 대기 → 그리드에 이미지 표시 ✓
3. 2단계 — 비디오 생성:
→ /create/video?model=seedance_2_0으로 이동
→ 업로드 영역 클릭 → Image Generations 탭
→ 첫 번째 이미지 클릭 (Check eligibility) → Escape
→ 양식에 이미지 로드됨 ✓
→ 기존 프롬프트 지우기 → UGC 증언형 프롬프트 입력:
"The woman from @image1 holds up a small serum bottle, examining it
with genuine curiosity. She applies a drop to her fingertip, touches
her cheek, and her expression lights up with delight..."
→ 화면비 9:16으로 설정 (TikTok용)
→ 사용자 확인 → 생성 클릭
→ 비디오 생성 중... 완료 ✓
4. 보고: "UGC 비디오가 준비되었습니다! History 탭을 확인하세요."
파이프라인 스킬 참조
| 단계 | 스킬 | 기능 |
|---|---|---|
| 1 | /ugc-hot-girl | 캐릭터 이미지 프롬프트 생성 |
| 2 | /higgsfield-image-auto | 이미지 생성 단계만 자동화 |
| 3 | /seedance-auto-generate | 비디오 생성 단계만 자동화 (로컬 파일에서) |
| 전체 | /ugc-video-auto | 이 스킬 — 전체 파이프라인을 처음부터 끝까지 실행 |
개별 스킬을 별도로 사용하거나 /ugc-video-auto를 호출하여 모든 것을 한 번에 실행할 수 있습니다.