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