고전적인 글쓰기 기법은 소설가에게만 해당되는 것이 아닙니다. 디자인에도 관련이 있습니다. 디자인 과정의 어느 시점에서는 하이파이 프로토타입, 즉 최종 제품과 최대한 비슷하게 보이고 작동하는 프로토타입을 작업해야 합니다. 이를 통해 개발자와 클라이언트에게 제품이 어떤 모습과 느낌일지 말로만 설명하는 대신 직접 보여 줄 수 있으므로, 추측에 의존할 필요가 없습니다.
이상적으로는 사용자가 최종 제품을 사용하는 것처럼 하이파이 프로토타입과 상호 작용할 수 있어야 합니다. 이는 사용자가 클릭, 호버하거나 특정 동작을 유발할 수 있음을 의미합니다. 다시 말해, 하이파이 프로토타입은 상호작용이 가능해야 합니다.
하지만 정적인 에셋만으로는 상호작용성을 전달하기 어렵습니다. 이럴 때 애니메이션, 특히 Lottie 애니메이션이 유용합니다.
Lottie 애니메이션이란?
Lottie 애니메이션은 웹과 모바일 플랫폼을 포함해 거의 어디에서나 사용할 수 있는 JSON 기반 파일 형식입니다. Lottie 애니메이션은 상호작용이 가능하고 가벼우며, 품질 손실 없이 크기를 확대하거나 축소할 수 있습니다.
그리고 가장 좋은 점은? 처음부터 직접 만들 필요가 없다는 것입니다. LottieFiles에는 프로토타입과 최종 제품 모두에서 사용할 수 있는 수천 개의 무료 맞춤형 애니메이션이 있습니다.
왜 프로토타입에서 Lottie 애니메이션을 사용해야 할까요?
웹이나 모바일용으로 디자인한다면, 제품에는 아마도 사용자 상호작용에 반응하거나 사용자의 관심을 유지하기 위한 애니메이션이 포함될 것입니다. 프로토타입에 애니메이션을 포함하면 개발자와 클라이언트가 최종 제품에서 이를 어떻게 구상했는지 정확히 알 수 있습니다. 또한 개발자들은 서면이나 구두 설명을 해석하려고 애쓰는 대신 프로토타입만 참고하면 되므로 구현 방법을 더 쉽게 이해할 수 있습니다.
그리고 Lottie 애니메이션을 사용하면 두 가지 큰 이점을 얻을 수 있습니다:
맞춤 설정 가능 – Lottie 애니메이션은 모션 디자인에 대해 전혀 몰라도, 마치 브랜드나 시각적 미학에 맞게 제작된 것처럼 보이도록 맞춤 설정할 수 있습니다. 색상을 쉽게 조정하려면 LottieFiles의 Color Palette 기능을 사용하고, 색상, 속도, 프레임 속도, 크기 등을 더 세밀하게 제어해야 한다면 무료 Lottie Editor를 사용하세요.
더 쉬운 인수인계 – Lottie를 사용하면 애니메이션을 전달하는 일이 정적 에셋을 전달하는 것만큼 쉽습니다. Lottie 애니메이션은 JSON 기반 형식이므로, 각 애니메이션마다 하나의 에셋 파일만 전달하면 됩니다. 웹, iOS, Android용으로 제공되는 Lottie 라이브러리를 사용해 구현할 수 있습니다. 개발자가 처음부터 코딩할 필요는 없습니다.
ProtoPie에서 Lottie 애니메이션을 추가하는 방법
좋은 소식은 ProtoPie가 Lottie 애니메이션을 기본적으로 지원한다는 점입니다. Lottie 애니메이션을 가져오려면 파일을 ProtoPie로 드래그 앤 드롭하기만 하면 됩니다. 또는 Insert > Layers > Lottie를 클릭할 수도 있습니다.
자세히 알아보려면
시청하세요.
Lottie 애니메이션을 추가하고 사용하는 방법을 더 알아보세요.
Lottie 애니메이션 추가에 익숙해지면 프로토타입에서 이를 사용할 수 있는 다섯 가지 방법을 살펴보세요.
1. 로딩 애니메이션
느린 로딩 시간은 수익에 직접적인 영향을 미칠 수 있습니다. Google에 따르면 모바일 사이트 로딩이 1초만 지연되어도 전환율에 영향을 미칠 수 있으며, 그 폭은 최대 20%에 이릅니다.
해결책은 무엇일까요? 사이트를 더 빠르게 로드하도록 최적화하는 것 외에도, 로딩 스피너나 스켈레톤 화면과 같은 로딩 애니메이션을 표시해 사용자의 대기 시간을 채울 수 있습니다. 페이지가 로드되기 전이나 사용자가 어떤 작업을 시작해 피드백을 기대할 때 이를 표시하세요. 이런 애니메이션은 실제로 사이트 성능을 개선하지 않더라도 사이트가 더 빠르거나 더 반응성이 좋은 것처럼 느끼게 해 줍니다.
Lottie 파일 형식은 매우 가볍기 때문에 로딩 애니메이션에 이상적입니다. 이는 프로토타입과 실제 사이트 또는 앱 모두에서 빠르게 로드된다는 뜻이며, 로딩 시간을 늘리지 않습니다.
ProtoPie에서는 프로토타입에 로딩 애니메이션을 쉽게 설정할 수 있습니다. 일정 시간 지연 후 다음 장면으로 이동하도록 Jump Response를 설정하기만 하면 됩니다. 그 지연 시간 동안 Lottie를 재생해 로딩 애니메이션을 시뮬레이션하세요.
2. 브랜드 애니메이션
디자이너에게 애니메이션은 브랜드를 더 기억하기 쉽게 만들 수 있는 기회입니다. 결국 움직이는 이미지는 정적인 이미지보다 더 쉽게 기억되기 때문입니다.
이를 구현하는 쉬운 방법은 일반적인 로딩 애니메이션을 브랜드 애니메이션으로 바꾸는 것입니다. 로고의 애니메이션 버전을 보여 주거나, 로딩 애니메이션에 브랜드 색상을 사용하거나, 브랜드 마스코트를 돋보이게 하세요. 예를 들어 인기 있는 언어 학습 앱 Duolingo를 사용해 본 적이 있다면, 상징적인 초록색 올빼미를 기억하실 겁니다. Duolingo는 로딩 및 완료 화면에서 마스코트를 표시하기 위해 Lottie 애니메이션을 사용합니다.
맞춤 브랜드 애니메이션을 제작할 모션 디자인 팀이 없나요? 걱정하지 마세요. 무료 Lottie 애니메이션을 브랜드 색상에 맞게 쉽게 조정할 수 있습니다. 브랜드 로고의 SVG 버전을 가져와 SVG to Lottie 도구를 사용하면 즉시 애니메이션으로 만들 수도 있습니다.
3. 호버 애니메이션
버튼과 아이콘 같은 일부 요소는 마우스를 올리면 애니메이션이 적용됩니다. 이는 두 가지 목적을 가질 수 있습니다:
상호작용성 신호 – 이러한 요소 위에 마우스를 올렸을 때 반응으로 애니메이션이 나타나면, 클릭할 수 있다는 것을 알 수 있습니다. 이는 사용자가 디자인을 클릭하거나 상호 작용하도록 유도할 때 유용합니다.
사용자 참여도 향상 – 버튼이나 아이콘 위에 마우스를 올려, 반응하는 모습을 보는 재미 때문에 해 본 적이 있나요? 애니메이션이 재생되면 클릭하고 싶어졌을지도 모릅니다! 이러한 호버 애니메이션은 특히 행동 유도 버튼에서 유용할 수 있는데, 참여도가 높을수록 수익도 늘어나기 때문입니다.
Lottie 형식을 호버 시 애니메이션되도록 설정하는 것은 쉽습니다. ProtoPie에서 설정하려면 Mouse Over 및 Mouse Out 트리거를 사용하세요. 개발 단계에서도 구현이 쉽기 때문에 팀도 만족할 것입니다. HTML 코드에 ‘hover’ 값을 추가하기만 하면 되기 때문입니다.
4. 마이크로 인터랙션에서의 시각적 피드백
애니메이션은 상호작용이 성공적으로 이루어졌는지(또는 그렇지 않은지) 사용자에게 알려 줍니다. 예를 들어 Twitter 트윗에 ‘좋아요’를 누르면 하트 아이콘이 빨간색으로 바뀌고, 그와 함께 색종이 조각이 폭발하듯 흩어집니다. 또는 이커머스 앱의 예를 들면, 장바구니에 무언가를 추가할 때 빈 장바구니 아이콘이 채워진 장바구니로 변할 수 있습니다.
어떤 동작이 발생했음을 알려 줄 뿐 아니라, 이러한 애니메이션은 사용자가 사이트와 상호작용할 때 작은 즐거움을 더해 줍니다.
프로토타입에서 이를 설정하려면 ProtoPie의 Tap 트리거를 사용해 Lottie 애니메이션 재생을 트리거하세요.
5. 스크롤 애니메이션
Apple 제품을 어떻게 생각하든, 랜딩 페이지가 훌륭하다는 점은 부인하기 어렵습니다. 강렬한 카피, 아름다운 비주얼, 뛰어난 제품 스토리텔링 활용이 돋보입니다.
하지만 특히 눈에 띄는 것은 스크롤 애니메이션의 사용입니다. 아래로 스크롤할 때 애니메이션과 제품 이미지가 화면 안팎으로 슬라이드되는 iPad Pro 랜딩 페이지를 한번 보세요.
디자인에 스크롤 애니메이션을 활용하고 싶으신가요? 이는 사이트나 앱을 더 상호작용적이고, 매력적이며, 무엇보다도 기억에 남게 만들 수 있습니다. 이를 적용해 디자인할 때는 프로토타입에 포함하는 것이 유용합니다. 그렇지 않으면 개발자나 클라이언트가 어떤 모습이어야 하는지 상상하기 어려울 수 있기 때문입니다.
ProtoPie에서는 Chain, Detect 또는 Range 트리거를 사용해 Lottie 애니메이션 재생을 프로그램 방식으로 제어할 수 있습니다. 개발 측면에서는 JavaScript에서 ‘scroll’ 모드를 활성화하기만 하면 Lottie로 스크롤 애니메이션을 구현할 수 있습니다.
Lottie에 대해 더 알아보고 싶으신가요?
위의 예시들이 프로토타입에서 Lottie 애니메이션을 시도해 보도록 영감을 주었기를 바랍니다. Lottie에 대해 더 알아보려면 LottieFiles의 무료 튜토리얼과 강좌를 확인해 보세요. 아니면 라이브러리에 있는 수천 개의 무료 애니메이션부터 둘러보세요. 그러니 마음에 드는 애니메이션을 골라 맞춤 설정하고 아름다운 프로토타입을 만들어 보세요.
