Lottie Inspector

Lottie Inspector 소개

디자이너가 건넨 모션 에셋을 출시 전에 빠르고 정확하게 검수하기 위해 만든 무료 도구입니다.

왜 만들었나

시작은 아주 사소한 불편이었습니다. iOS 앱을 개발하면서 디자이너에게 Lottie 파일을 받으면, 그 애니메이션이 어떻게 생겼는지 확인하려고 매번 Xcode에서 앱을 빌드해 돌려야 했습니다. 파일 하나 바뀔 때마다 빌드를 기다리는 건 말이 안 된다고 느꼈고, "그냥 브라우저에 끌어다 놓으면 바로 보이는 게 있으면 좋겠는데"라는 생각으로 주말에 만들기 시작한 것이 이 도구입니다.

기존 온라인 미리보기 서비스도 써 봤지만 두 가지가 걸렸습니다. 파일을 서버에 업로드해야 해서 출시 전 비공개 에셋을 올리기 부담스러웠고, 한 번에 한 파일씩만 볼 수 있어 폴더째 받은 수십 개의 에셋을 검수하기엔 비효율적이었습니다.

그래서 방향을 정했습니다 — 빌드 없이, 업로드 없이, 폴더째. 검수에서 정작 중요한 것들인 캔버스 규격이 스펙과 맞는지, 어두운 배경에서도 잘 보이는지, 파일이 비정상적으로 크지 않은지, 루프가 매끄러운지를 한 화면에서 확인할 수 있게 만들었고, 같은 불편을 겪는 개발자·디자이너를 위해 공개했습니다.

운영 원칙

1. 파일은 브라우저 밖으로 나가지 않습니다

모든 파싱과 렌더링은 이용자의 브라우저 안에서 끝납니다. 업로드 서버 자체가 없습니다. 비공개 에셋을 다루는 실무자가 안심하고 쓸 수 있어야 한다는 것이 첫 번째 원칙입니다.

2. 회원가입 없이, 무료로

검수는 수시로 일어나는 작업입니다. 로그인 장벽 없이 열자마자 바로 쓸 수 있어야 합니다. 운영비는 화면을 가리지 않는 광고로만 충당합니다.

3. 실무 워크플로 우선

폴더 단위 일괄 검수, 규격선, 배경 전환, 파일 크기 정렬 같은 기능은 전부 실제 디자이너–개발자 협업에서 반복적으로 필요했던 것들입니다. 화려한 기능보다 검수 흐름의 마찰을 줄이는 데 집중합니다.

만든 사람

모바일 앱을 만드는 iOS 개발자입니다. 디자인 시스템의 모션 에셋을 다루면서 겪은 불편을 해결하려고 이 도구를 만들었고, 같은 불편을 겪는 분들에게 도움이 되길 바라는 마음으로 공개했습니다. 함께 보면 좋은 실무 노하우는 블로그에 정리하고 있습니다.

연락처

버그 제보, 기능 제안, 제휴 문의 모두 환영합니다.

문제가 된 파일(공개 가능한 것에 한해)과 사용 환경(브라우저·OS)을 함께 알려주시면 훨씬 빠르게 확인할 수 있습니다.

크레딧

콘텐츠 페이지의 색상 팔레트는 당근의 오픈소스 디자인 시스템 SEED Design(Apache License 2.0)의 파운데이션 토큰을 참고했습니다. SEED Design은 Danggeun Market Inc.의 오픈소스이며, 본 서비스는 당근과 무관합니다.