로티가 새로운 기능과 함께 한국에 왔습니다
로티 홈페이지가 한국어로...?! (로티 밋업 + 컬러파레트 기능)
예전에 움직이는 애니메이션을 모바일/웹에 넣기 위해 Lottie로 Json 파일 추출하는 법에 대해서 기록했던 적이 있습니다. 당시에는 한국어 지원을 하지 않아 문제가 생겼을 경우 QnA, 관련된 이용 방법을 찾기가 어려웠습니다. 이용 방법이 궁금하거나, 문제가 생겼을 경우 로티를 사용해 본 디자이너나 기존 한국인이 올려준 로티 이용법 검색을 하면서 해결책을 찾아야만 했습니다. 그래도 답이 나오지 않으면 영문 검색을 해야 했습니다. 하지만 이제! 로티가 한국에 상륙해 한국어 지원을 하고 있습니다. 번거롭고 어려웠던 이용이나 문제 해결 방법 검색이 간편해질 거라 예상됩니다
Lottie(로티)?
Lottie는 JSON 기반의 애니메이션 파일입니다. 화질이 좋지만 정지된 PNG, 움직이지만 용량이 크고 이미지가 깨지기도 하는 GIF와는 전혀 다릅니다. PNG의 화질과 GIF의 애니메이션 기능 같은 장점만 합친 새로운 파일 형식, 바로 Lottie입니다. 게다가 해상도에 영향을 주지 않고 축소, 확대에 자유롭고 iOS, 안드로이드와 웹, 리액트 네이티브 같은 다양한 환경에서도 사용할 수 있기 때문에 큰 디자인과 개발 상에서 큰 제약은 없습니다.
파일 용량도 적고 이미지가 깨지지 않는 lottie는 마이크로소프트, 틱톡, 넷플릭스와 같이 해외 기업뿐만 아니라 삼성, 카카오, 토스 등 다양한 국내 기업에서도 사용하고 있습니다.
한국에 온 로티파일즈
공식 홈페이지 주소 : https://lottiefiles.com/kr
기존 로티 홈페이지 주소에 'kr'이 붙으면서 번역이 되어있습니다! 이제 주변에 로티를 설명할 때, 번역된 한국 사이트를 공유해서 직접 확인할 수 있고, 로티를 사용한 국내 기업들도 확인할 수 있습니다.
아쉬운 점은 모든 페이지가 번역된 게 아니라 첫 접속 홈페이지(메인)가 우선 번역되어있기 때문에 로티가 무엇이고 어떤 기능과 자료가 있는지 정도만 편하게 볼 수 있습니다. 그 외에 실사용을 위한 테스트, 자료 탐색에서는 기존 영문 사이트로 이동됩니다.
한국 Meet-up & 새로운 기능들
6월 15일, 한복을 입은 로티 캐릭터가 밋업 참가자들을 함께 맞이하며 국내 로티 사용자와 로티 파일즈의 관계자분들이 직접 만나 새로운 기능과 함께 로티를 소개하는 자리를 가졌습니다.
관계자에게 직접 듣는 로티의 역사, 새로운 기능과 질의응답 시간으로 이뤄진 밋업 시간은 로티 파일즈가 앞으로 어떤 기능을 업데이트하고, 어떤 곳에 가치를 두고 있는지를 알 수 있는 뜻깊은 시간이었습니다. 로티를 사용해본 디자이너와 개발자들이 모여서 서로의 경험을 나누고 다양한 이야기를 나눌 수 있는 시간도 마련되어서 다양한 이야기를 공유할 수 있었습니다. 어느 기업에서는 로티를 어떻게 사용하고, 디자이너와 개발자가 사용하는 로티의 중점 기능은 무엇인지 비교하거나, 다양한 로티 사용 경험을 들으면서 향후에 로티를 사용할 때 참고하면 좋겠다는 생각이 들었습니다. 밋업에는 삼성, 토스 등 유명한 기업에 다니는 분도 참석하면서 해당 기업에서는 어떤 식으로 로티를 사용하는지 직접 물어볼 기회가 되기도 했습니다.
로티 소개 시간에는 단순히 에프터이펙트에서 애니메이션 파일을 추출하는 기능에서 발전해, 다른 유저의 파일과 기존 업로드했던 로티 파일을 에프터이펙트 없이 손쉽게 수정해서 사용할 수 있는 신규 기능(컬러 팔레트)도 확인할 수 있었습니다.
새로운 기능 1 : 컬러 팔레트
에프터이펙트에서 로티를 통해 바로 json 파일로 뽑은 뒤 개발자에게 전달하고 작업이 끝날 수도 있지만, 사정상 그래픽 색상을 변경해야 하거나 기존에 로티 홈페이지에 등록된 그래픽을 사용하고 싶지만 컬러 스타일이 달라서 아쉬운 경우가 있습니다. 이런 경우를 해결할 수 있도록, 컬러를 간편하게 수정할 수 있는 기능인 컬러 팔레트가 로티에 업데이트되었습니다.
에프터이펙트를 직접 켜지 않아도 되고, 다른 유저가 공유한 기존 로티 파일에 원하는 색상 or 원하는 테마의 컬러로 자동으로 변경해주는 컬러 팔레트는 사용 방법도 무척 간단합니다.
컬러 팔레트를 보다 효율적이고 제대로 사용하기 위한 모션 디자인을 위한 가이드도 로티 블로그에 올라와있습니다. 컬러 팔레트 색상을 어떻게 구성하고 이용할지 고민될 때 읽어보면 도움이 되는 글입니다.
https://lottiefiles.com/blog/tips-and-tutorials/color-theory-for-motion-design
컬러 팔레트 사용해보기
1. 파일 열기 - Color Palette - Show more
다른 유저가 등록한 파일, 혹은 직접 로티 홈페이지에 업로드한 파일을 클릭하면 해당 파일을 고유하거나 상세 정보를 확인할 수 있습니다. 이때, 오른쪽에 새로 생긴 컬러 팔레트는 현재 등록된 이미지 색상을 다른 테마 색상으로 바로 변경해줍니다.
2. Color Palette
Show more 버튼을 누르면 3개 이상의 다양한 컬러 팔레트 예시가 나타납니다. 원하는 컬러 팔레트 색으로 클릭하면 바로 해당 컬러의 컬러로 변경되는 걸 확인할 수 있습니다.
2-1. 다른 컬러가 필요한 경우 : New Palette - Save Color Palette
제시된 컬러 팔레트에 원하는 색상이 없을 경우! 직접 컬러 팔레트를 조합할 수 있습니다. BETA로 지원하는 + New Palette 버튼을 클릭하면 직접 색상을 선택하거나 코드를 입력해서 팔레트를 만들 수 있습니다. 미리보기도 동시에 지원하기 때문에 정해진 컬러 값 없이 톤 앤 매너만 있는 경우에도 편하게 계속 컬러를 수정하면서 확인할 수 있습니다. 컬러를 선택한 뒤, Save Color Palette 버튼을 누르면 해당 팔레트가 저장됩니다.
3. Upload to My private Animations
테마를 선택했다면 하단의 Upload to My private Animations 버튼이 활성화되는 걸 확인할 수 있습니다. 바로 Lottie Json, GIF, Customize Gif 등 기존 파일을 바로 다운로드하는 것과 달리, 해당 색상을 변경한 파일을 개인 파일로 저장해서 기록, 보관할 수 있습니다.
+ 피그마에서도 사용 가능한 Color Palette + 피그마에만 있는 Genenrate palette
대세 디자인 툴이 된 피그마에서 플러그인 설치를 통해 바로 로티 파일을 불러오거나, GIF로 디자인할 때 위치, 크기, 색상을 확인할 수 있습니다. 플러그인을 통해서 위에 컬러 팔레트를 동일하게 이용할 수 있으면서 추가로 Genenrate palette라는 기능이 지원됩니다.
사용된 아트보드를 클릭하고 'Genenrate palette'을 누르면 자동으로 아트보드의 배경색과 같은 컬러 팔레트 색상을 추가해줍니다. 색상 커스텀화를 할 때 메인 화면 색상을 참고할 수 있는 기능으로 로티 홈페이지와 차별되는 기능이기도 합니다.
새로운 기능 2 : 로티 에디터
컬러 팔레트는 컬러 조합을 자동으로 선택해주는 자동화 기능이라면, 로티 에디터는 수동으로 직접 컬러별 선택과 사용된 레이어를 나눠 본 뒤 색상, 텍스트, 프레임과 재생 기간 등 다양한 정보를 수정할 수 있습니다. 특정 레이어의 색만 변경하거나, 색상을 한 가지만 변경할 경우뿐만 아니라 파일 크기, 재생 시간과 프레임, 심지어 사용된 텍스트 수정도 가능하기 때문에 짧은 시간 내 자세한 수정이 필요한 경우, 컬러 팔레트나 에프터 이펙트를 켜서 수정 - 파일 추출을 하는 것보다 로티 에디터를 사용하는 게 더 편리합니다.
로티 에디터 사용해보기
1. 로티 에디터 열기
에디터를 여는 방법은 2가지입니다. 상황과 파일에 맞춰서 에디터로 접속하거나, 바로 에디터 페이지에 파일을 업로드해서 컬러를 수정하거나 저장할 수 있습니다.
(좌측 이미지) 다른 이용자가 전체 공개한 로티 파일일 경우 : 오른쪽 하단의 Edit Layer Colors 클릭
(우측 이미지) 기존 등록한 로티 파일일 경우 : 마이 대시보드 - 해당 파일을 클릭, 하단에 있는 Edit Layer Colors 클릭
로티 에디터 바로 열기 : https://lottiefiles.com/editor 접속 - 파일(링크) 업로드
2. 파일 정보 수정 + 텍스트 수정
전체 레이어가 선택된 상태 : 파일 크기, 프레임, 재생 시간을 설정한 뒤 Update 클릭하면 자동으로 수치에 맞춰서 파일이 수정됩니다. 파일 크기 같은 경우 개발자에게 별도로 축소, 확대 비율을 알려주어서 해결할 수도 있지만 파일 용량과 기본 관리를 위해서 직접 파일 자체의 크기를 수정할 경우 유용하게 사용할 수 있습니다.
텍스트 레이어가 선택된 상태 : 간편하게 텍스트도 수정할 수 있기 때문에, 메시지가 들어가는 기본 파일을 만들고 다양한 메시지 버전으로 쉽게 추출, 저장할 수 있습니다. 아쉬운 점은 텍스트를 작성할 때, 한글은 정상적으로 지원되지 않아 한글로 수정 할 경우 수정된 텍스트가 나타나지 않을 수 있습니다.
3. 컬러별 수정과 저장
테마가 아니라 개별 색상, 레이어별 수정을 할 수 있기 때문에 현재 파일에서 사용된 색상 리스트가 개별로 보입니다. 해당 컬러를 클릭하면 RGB 코드, Hex 코드 등 수치를 직접 입력하거나 색상을 직접 선택할 수도 있습니다. 로티 파일(1개의 파일)로 사용된 색상을 개별로 수정할 수도 있고, 파일에 사용된 레이어를 직접 선택해 레이어별 사용된 이미지의 컬러를 바꿀 수도 있습니다.
파일 수정이 끝났다면 오른쪽 하단에 있는, UPLOAD TO LOTTFIES 버튼을 클릭해서 수정한 파일은 별도로 개인 파일로 저장할 수 있습니다.
컬러 업데이트가 안 되는 것 같다면?
컬러를 선택하면 자동으로 반영이 되지만 종종 반영이 되지 않을 때가 있습니다. 그럴 경우 UPDATE 버튼을 눌러주면 색상이 적용되는 걸 확인할 수 있습니다.
밋업에서 느낀 로티 파일즈의 고민
밋업 자리에서 신규 출시된 기능인 컬러 팔레트와 에디터 기능 설명 외에도 업데이트 예정인 기능을 설명해주었습니다. 협업과 파일 관리를 위한 기능 등 다양한 기능을 보면서 단순히 파일 용량을 줄여서 앱/웹 서비스 개발에 도움을 주는 서비스로 끝나는 게 아니라, 그 이상으로 디자인 작업에 도움을 주고 모션 효과 자체에 많은 고민하고 있다는 느낌이 들었습니다. 더불어 모션과 로티 사용에 대한 국내 사용자 커뮤니티를 만들어 지식과 다양한 사례를 공유하고자하는 열망도 느껴져서 단순히 수익을 내기 위해 서비스를 개발하는 게 아니라, 실제 사용자의 피드백을 귀 기울여 듣고 다 같이 발전하려고 노력하는 곳이라는 걸 알 수 있었습니다.
언어의 장벽으로 에프터이펙트 - 로티 파일 추출을 하는 과정도 어렵게 느껴지던 로티였지만 한국 홈페이지 오픈과, 앞으로도 지속적인 로티 및 모션 관련 행사 개최, 홈페이지의 한글 번역 페이지가 늘어날 예정이라는 이야기를 들으면서 정말 신경을 많이 쓰고 있다는 감상을 받았습니다. 함께 앞으로도 로티가 어떤 발전을 보여줄지 무척 기대됩니다.
