앱 빌드 없이 Lottie 미리보기 — iOS 개발자의 워크플로
디자이너가 Slack으로 success_check.json을 보내줍니다. 어떻게 생긴 애니메이션인지 확인하려면? 얼마 전까지 제 답은 "Xcode에서 앱을 빌드해서 해당 화면까지 이동한다"였습니다. 파일이 수정될 때마다 이 과정을 반복하다가, 이건 아니다 싶어 워크플로를 갈아엎었습니다. 사실 이 사이트(Lottie Inspector)가 그 결과물입니다.
빌드가 필요한 확인 vs 필요 없는 확인
먼저 구분부터. Lottie 관련 확인 작업의 90%는 빌드가 필요 없습니다.
| 확인 항목 | 빌드 필요? | 이유 |
|---|---|---|
| 어떤 모션인지 (내용 확인) | 불필요 | 브라우저 렌더링으로 충분 |
| 캔버스 규격·비율 | 불필요 | 메타데이터 확인 |
| 파일 크기·레이어 수 | 불필요 | 정적 분석 |
| 루프 이음새·재생 속도감 | 불필요 | 브라우저 재생으로 충분 |
| 다크모드 배경 위 시인성 | 불필요 | 배경 전환으로 확인 |
| Core Animation 엔진 호환성 | 필요 | 런타임별 지원 경계가 다름 |
| 저사양 기기 프레임률 | 필요 | 실기기 성능은 실기기에서만 |
| ValueProvider 색상 교체 동작 | 필요 | 앱 코드와의 통합 확인 |
권장 워크플로
1단계 — 받자마자 브라우저에서 (10초)
파일(또는 폴더)을 Lottie Inspector에 끌어다 놓습니다. 내용·규격·용량·루프를 즉시 확인합니다. 여기서 걸러지는 문제 — 규격 불일치, 비정상 용량, 어색한 루프 — 는 바로 디자이너에게 피드백합니다. 빌드 0회로 왕복 1회를 끝내는 것이 핵심입니다.
2단계 — 통합 시점에 시뮬레이터 (필요 시)
에셋을 프로젝트에 넣고 나서는 SwiftUI 프리뷰나 시뮬레이터로 확인합니다. 이때는 모션 자체가 아니라 레이아웃 통합과 색상 교체 코드를 보는 것입니다.
3단계 — 머지 전 실기기 (1회)
Core Animation 엔진 폴백 경고가 없는지, 60fps가 나오는지 실기기에서 마지막으로 확인합니다. 1·2단계에서 문제를 다 걸렀다면 이 단계는 거의 통과 의례입니다.
SwiftUI 프리뷰로도 안 되나?
됩니다 — 에셋이 이미 프로젝트에 들어있고, 프리뷰용 뷰를 만들어 뒀다면. 하지만 "받은 파일이 뭔지 보는" 첫 확인 단계에서는 여전히 느립니다. 프리뷰도 결국 빌드를 돌고, 파일 교체마다 다시 돕니다. 받은 즉시 확인은 브라우저가 빠르고, 통합 확인은 프리뷰가 맞습니다. 도구를 단계별로 나눠 쓰는 것이 답이었습니다.