feat: 배경/카라비너 Lottie 애니메이션 지원#88
Merged
Conversation
- Background: backgroundLottie(String?), isLottie computed property 추가 - Carabiner: carabinerLottie([String]?), isLottie/backLottieURL/frontLottieURL 추가 카라비너는 햄버거 타입도 있어서 배열. - Optional 필드로 기존 Firestore 데이터 하위 호환 유지
- EffectManager와 동일한 다운로드/캐싱 패턴이지만, 배경/카라비너 도메인 전용 - LottieItemManager: Firebase Storage에서 Lottie JSON 다운로드/캐싱, URL 기반 캐시 무효화 - LottieItemView: UIViewRepresentable 기반 범용 Lottie 뷰 컴포넌트
- isLottie 체크 후 LottieItemView 또는 기존 LazyImage 분기
- MultiKeyringScene: Lottie→SKTexture 프리렌더링, SKAction.animate 반복 재생 - 비디오 모드에서는 프레임 인덱스 기반 수동 텍스처 교체 - MultiKeyringSceneView: carabinerLottieId 파라미터 전달
- generateVideo()에 backgroundLottieId, carabinerLottieId 파라미터 추가 - 배경 Lottie 프리렌더링 및 프레임별 텍스처 교체 - preRenderAllFrames() 접근제어를 internal로 변경하여 공용화
- BundleEditView/CreateView/DetailView: backgroundLottieId, carabinerLottieId 전달 - VideoGen 확장: generateVideo() 호출에 Lottie ID 전달 - BundleViewModel+Fetch: 배경/카라비너 fetch 시 Lottie JSON 프리다운로드
jini-coding
approved these changes
Feb 11, 2026
Member
jini-coding
left a comment
jini-coding
left a comment
There was a problem hiding this comment.
정말 대대적인 작업이었네요. 배경이랑 카라비너의 존재감이..ㄷㄷ
그래도 녹화 화면 보니까 예쁜 배경 넣으면 더 좋아보일 것 같아서 나중이 기대가 되는군요
고생하셨습니다...
실시간 뷰에서 Lottie 카라비너 SKTexture 프리렌더링을 제거하고 SwiftUI LottieItemView 오버레이로 대체하여 ~250MB 메모리 절감 및 즉시 로딩. 비디오/캡처 모드는 첫 프레임만 정적 렌더링하여 메모리 크래시 해결. 불필요한 데드코드(preRenderLottieFrames, TextureCacheEntry 등) 제거.
scene.update(0)으로 물리 타이밍 리셋 후 시뮬레이션 시간(frameIndex/fps)으로 일정한 delta 보장. 프레임 간 Task.sleep(0.0167)으로 물리 엔진 계산 시간 확보. 배경 Lottie도 첫 프레임만 정적 렌더링하여 메모리 사용량 대폭 감소.
빈 keyringDataList로 생성된 씬의 handleAllKeyringsReady Task가 실제 키링 씬보다 먼저 isSceneReady=true를 설정하는 레이스 컨디션 해결. sceneReadyTask를 저장하고 새 로딩 시작 시 이전 Task를 취소하도록 변경.
- loadMainBundle의 모든 guard 실패 경로에 isSceneReady = true 복구 - 카라비너 resolve 실패 시 carabiners.first fallback 적용 - HomeView body에서 resolveCarabiner 재호출 대신 selectedCarabiner 직접 사용 - handleKeyringDataChange에서 sceneGeneration 증가 제거 (onChange 타이밍 불일치) - handleKeyringDataChange에 키링 URL 시그니처 비교 추가 (같은 데이터 리로드 시 무한로딩 방지) - onSetupComplete = nil 복원 (비로티 카라비너의 이전 씬 콜백 누출 차단) - loadMainBundle 배치 업데이트 적용 (뭉치 전환 시 이전 키링 위치 혼입 방지) - switchBundle에 Task 취소 로직 추가 (빠른 연속 전환 시 데이터 꼬임 방지) 아오 힘들어
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 PR 내용
로티를 이용한 카라비너/배경이 가능하게하는 기능을 구현했습니다.
기존에는 정적인 이미지를 기반으로 배경과 카라비너가 구성되었습니다.
그렇기에, 로티를 사용한 카라비너/배경을 동작하게 하려면 꽤나 다양한 곳에서의 구조 변경이 동반되었습니다.
로티 아이템을 파이어베이스 넣지 않아도 기존 로직이 동작하도록 호환성 100%를 갖게 구현했습니다.
1. 모델 변경
Background:backgroundLottie: String?,isLottiecomputed property 추가Carabiner:carabinerLottie: [String]?,isLottie,backLottieURL,frontLottieURL추가2. 신규 파일
LottieItemManager.swift: Firebase Storage에서 Lottie JSON 다운로드/캐싱 매니저 (URL 기반 캐시 무효화)LottieItemView.swift: UIViewRepresentable 기반 범용 Lottie 뷰 컴포넌트3. 셀 렌더링
BackgroundCell,CarabinerCell:isLottie분기 →LottieItemView또는 기존LazyImageWorkshopItemCard,WorkshopItemDetailView: 공방 탭 Lottie 지원 추가4. SpriteKit 씬 (핵심 of 핵심)
SpriteKit은 Lottie를 네이티브 지원하지 않아서, 이거 어케함 ㄱ- 이 시작이었는데,
기존 파티클 이펙트의
preRenderAllFrames()패턴을 재활용했습니다.원리: Lottie JSON → 모든 프레임을 UIImage로 렌더링 → SKTexture 배열 변환 → SpriteKit에서 재생
5. 비디오 생성
BundleVideoGenerator:backgroundLottieId,carabinerLottieId파라미터 추가6. Lottie ID 전달
MultiKeyringSceneView에 Lottie ID 전달BundleViewModel+Fetch,WorkshopViewModel,CollectionViewModel→ fetch 시 Lottie JSON 프리다운로드참고
현재 보관함과 뭉치만들기에서 이름선정뷰 에서는 "정적인 이미지"가 필요해서
기본 백그라운드가 나옵니다.
로티 배경/카라비너가 나오면 모든 동작을 재테스트하고 영상 추출 등도 테스트 예정
📱 스크린샷 (UI 변경 시)
ScreenRecording_02-11-2026.22-30-36_1.MP4
🔗 관련 이슈
✅ 체크리스트