로티파일즈 밋업 후기

배경 지식

이 업계에 익숙하지 않은 분들을 위해 모션그래픽 디자인에 대해 부연설명 드려 볼게요. 현대 사회에서 디자이너들은 다양한 방식으로 고객에게 전달되는 화면을 디자인하게 되는데요. 웹을 비롯한 IT업계에서는 모션 디자인 산출물을 Lottie 라는 기술을 이용해, GIF나 MP4보다 낮은 용량, 높은 품질로 전달하고 있어요. 예전보다 훨씬 빠르게 고객들에게 디자이너가 만든 모션 그래픽의 퀄리티를 보존한 채로 전달할 수 있게 되었습니다.

다만 로티는 mp4같이 디자인 산출물에 대한 기술이라, 자체 디자인 편집 기능 기반으로 운영되지 않고 디자인 업계 표준 툴인 애프터이펙트(이하 애펙)나 피그마, 웹플로우 등에 연동해서 사용할 수 있는 형태였어요. 그런데 이번에 로티 크리에이터라는 툴을 출시함에 따라 다른 디자인 툴 없이도 로티 기반 모션 디자인을 적용할 수 있게 되었습니다.

밋업 후기

행사는 모두의연구소 2층에서 진행되었고, 찾기에 어렵지 않았습니다. 간단한 빵과 간식, 스티커, 코스터 등 여러 굿즈를 주셨어요. 행사 분위기는 조용했으나, 전반적으로 즐겁게 진행되었던 것 같습니다.

밋업에서 공개된&말씀하신 여러 배포 예정 기능들이 실제 적용된다면 경쟁력이 많이 올라갈 듯 합니다. 지켜볼 가치가 있을 듯해요. 아래는 당시 발견한 이슈들이나, 조만간 해소될 것으로 기대합니다.

• 키프레임 편집 사용성 증대,
• 마스킹 프리뷰 미구현 이슈,
• 렌더링뷰와 타임라인 뷰포트 재생결과값 다른 이슈,
• Easing값 커스텀 피쳐,
• 그라데이션 미구현 이슈 등

네트워킹 시간에 CTO분이 따로 시연해주셨던 로티 앱도 재밌었어요. 로티파일즈 앱을 깔아서 굿즈를 카메라로 찍으면 이미지를 인식해서 애니메이션이 나오는 것을 보여주셨는데, 회사의 브랜딩과도 잘 맞아서 재밌었습니다. (로티파일즈 직원분들의 명함 뒤에 있는 그래픽도 카메라를 가져다 대면 움직입니다)

한국에도 직원 분들이 상당 수 체류 중이라, 앞으로 매달 캐주얼 밋업을 열어본다고 하시니 관심 가져 보셔도 좋을거같네요.

로티 크리에이터 Demo 세션

CTO 나투가 직접 세션/데모 소개해 주셨습니다. 로티크리에이터를 제작할 때 고려한 1순위는 클라우드(웹) 베이스였다고 하네요.

러프한 데모세션 메모

lottie.new → 로그인

장점

• 앵커포인트 설정 가능, in/highlight/out 모션 프리셋 적용 가능.
• SVG드래그앤드롭으로 바로 외부 애셋을 불러올 수 있음.
• 레이어 투명도, scale, 좌표 등 기본적인 프로퍼티 확인이 쉽고, 바로 키프레임 먹일 수 있음.

단점

• 키프레임에 대해 bulk edit & 상세 설정하기 아직 어려움 ㅜ expressions.. detailed easing.. → 곧 해결될 전망이라고 함

신기한 점: 로티 플레이어의 엔지니어 두명이 다 한국사람들임. HR도 한국사람, CTO는 현재 한국에서 살고있음

릴리즈노트에 향후 업데이트 예정: https://releases.lottiefiles.com/creator-releases

로티파일즈에 case-studies 에 사용사례 추가하는 것 논의할 수 있음

Questions

1. 기존 모션 유저가 로티 크리에이터로 넘어갈 만한 가장 큰 이유가 이유가 무엇이라고 생각하시나요??

• 처한 상황: 유저들은 이미 애펙, Jitter, Figma Lottie로 모션디자인 하고있음
• Jitter등 다양한 플러그인에서 이미 Lottie 기반 JSON을 지원하기때문에 초간단 애니메이션은 피그마 플러그인으로 해결 가능

1. ⭐Easing 값을 커스터마이즈할 수 있게 할 예정인가요?
2. 곧 됨 (1달 내로)
3. 현재 이걸 할 수 없는 건 꽤 뼈아픈 것 같음.. 이러면 애펙 쓰는 모션 디자이너들을 설득할 수 없음 ㅜ
4. ⭐Figma → Lottie Creator → Figma 가능?? →
5. 혹시.. 생성형 AI motion 기능도 생각중인지? → 고려중. but 먼저 AI vector create 하고 생각해볼듯.

1. 생성형 AI vector create 피쳐 언제쯤 나오는지?
2. Raster → Vector 로 변환하는걸 계획중.
3. 출시일? 아마 1달 이내에 나올예정.
4. 그라데이션 언제 되나요?
5. 아직 안됨 ㅜ 스트로크 애니메이션 등과 함께 준비중.

버그리포트

• 로티크리에이터 커맨드+ - 단축키 제대로 안돼요 ㅠ
• 마스킹된 SVG애셋에 대해 프리뷰에서 이상하게 뜨는 버그 있는듯? 고칠예정이라함
• cmd+R to Renaming layer is a natural gesture, but now its refreshing the browser. so maybe consider later?

로티 크리에이터 첫 인상 & 기능 비교

로티 크리에이터는 본격적인 모션 디자인 툴인 만큼, 모션 관점의 기존 워크플로우와 툴 위주로 비교해 보았습니다 (애펙 vs 피그마 vs 로티크리에이터)

피그마 to 로티 로 모션을 만들 경우 모션그래픽 기술이 피그마 프로토타입 기능에 종속되어, 좀 더 고급 기능을 사용해 디자인하고 싶을 경우 한계가 있었어요. (프레임 + 스마트 애니메이트를 사용하면 키프레임 사이에 키프레임을 놓기 매우 어려운 등) 로티크리에이터 는 애펙처럼 타임라인이나 키프레임, 앵커포인트(중심축) 기반으로 모션을 세부적으로 디자인할 수 있게 되어있기 때문에, 피그마 프로토타입보다 높은 수준으로 모션디자인 하고 싶었던 디자이너라면 매력 포인트가 있는 것 같습니다.

다만 모션디자인 업계 표준 툴인 애펙에 비해서는 아직 기능적으로 아쉬운 부분이 많은 것 같아요. 이 수준을 기대하고 오면 실망할 만 합니다. 다만 이를 상쇄할 만큼의 장점도 있어요. 웹 기반으로 개발된 툴이라 lottie.new 로 들어가기만 하면 별도 툴 설치 없이도 빠르게 모션디자인을 시작할 수 있고, 이미 만든 SVG를 곧바로 디자인 애셋으로 활용할 수 있거든요. 게다가 애펙은 너무 전문 툴이라 입문자가 배우기 어렵습니다. 기능이 많고 익혀야 할 개념도 다양하거든요. 로티크리에이터는 애펙보다는 쉽게 시작할 수 있으니, 장점과 단점이 공존하는 상태라고 볼 수 있겠습니다.

Outro

정리하면, 로티크리에이터는 애펙과 피그마 프로토타입 사이 어딘가 에 있다고 생각합니다. 모션 퀄리티 업 니즈가 있지만 애펙은 부담스러웠던 디자이너에게는 어필할 수 있을 것 같지만, 애펙을 기대하면 안될 것 같아요. 사용성 측면에서도 아쉬운 부분들이 좀 보였지만, 이번 밋업을 통해 소통한 바로는 빠르게 개선될 것으로 기대해볼 수 있을 것 같습니다. 모션 디자인에 입문했지만 모션 퀄리티를 높이고 싶은 UX디자이너라면 로티파일즈가 하나의 대안이 될 수 있을 듯 합니다.

새로운 디자인 툴을 탐구해볼 수 있어서 즐거웠습니다. 무료로 이런 행사를 만들어 주신 로티파일즈에 감사 인사를 드려요.

ⓒ 2024. SangHyo Yee, All Rights Reserved.