Design
우리는 왜 그래픽에 모션을 사용하는가?
여기어때 Brand Design Team여기어때
2023년 6월 30일
원문에서 보기 ↗모션을 활용한 효과적인 마케팅/브랜딩 방법
여기어때 프로모션이나 콘텐츠에 2D, 3D를 활용한 모션 그래픽을 종종 볼 수 있어요. 작년부터 2D, 3D를 활용해 여기어때다운 그래픽을 제작해 왔는데요, 해당 내용이 궁금하신 분들은 <여기어때 3D 그래픽 개발기> 에서 확인하실 수 있어요. 현재까지 많은 그래픽에 모션들이 활용되었고, 다양하게 적용해 오면서 알게 된 점이나 느낀 점들을 공유해 보려고 해요🙂
모션을 왜 사용할까요?
여기어때의 그래픽을 개발하고, 모션을 적용하는 것. 브랜드 아이덴티티에 감정을 담아 입체적 경험으로 전달하는 흥미로운 작업이에요. 어떻게 하면 좀 더 유저와 가까워지고, 즐거운 브랜드로 기억될 수 있는지에 대해 고민했어요. 이번 글에서는 여기어때의 그래픽과 모션을 사용하는 방법에 대해서 알아볼게요🙌
유저의 시각적인 흥미를 일으킬 수 있어요.
멈춰있는 이미지보다는 움직이는 이미지를 보았을 때, 우리는 자연스럽게 시선이 집중돼요. 모션은 정적인 이미지보다 훨씬 동적이고 생동감이 있죠. 이는 곧 주목성에 큰 역할을 한다고 볼 수 있어요. 앱 프로모션의 경우, 유저들의 관심을 끌어 방문한 페이지에서의 이탈률을 낮추고 구매까지 이어질 수 있는 확률을 올리는 데 도움이 될 수 있어요.🏹

토끼를 찾아라 (경품 이벤트)

행운의 주사위 (경품 이벤트)

주사위 굴리는 모션 3D 모델링 화면

주사위 충돌 오브젝트 설정 화면
유저가 직접 주사위를 굴리는 느낌을 주기 위해 c4d에 있는 물리 엔진을 사용해서 주사위가 주사위 판에 부딪히고 굴러가게 만들었어요. 그런데 모델링 된 주사위 모양 그대로 굴리게 되면 주사위의 각진 부분 때문에 원하는 만큼 굴러가지 않고 빨리 멈춰버리는 문제가 있어요. 그래서 주사위 모델링은 그대로 두고 주사위에 해당하는 충돌 오브젝트를 새로 둥글게 하여 주사위가 원하는 대로 충분히 굴러가게 만들었어요. 위 이미지의 노란색 선으로 보이는 덩어리가 충돌 오브젝트 모양이에요. 모델링 된 주사위보다 더 둥글게 만들어져 있는 게 보일 거예요. 주사위가 너무 빨리 멈춰도, 너무 오래 굴러다녀도 부자연스럽죠.
브랜드를 차별화할 수 있어요.
2D, 3D 그래픽을 만들고 모션을 사용해 여기어때만의 색을 차곡차곡 쌓아가고 있어요. 이런 경험들은 여기어때의 콘텐츠를 지속적으로 유저가 경험하게 하고, 아이덴티티를 확립하여 사용자가 브랜드를 쉽게 식별하고 연결할 수 있도록 하죠.✨

여기어때 블랙 인스타그램 스토리 (블랙카메라, 블랙캐리어, 블랙 에디터노트)

여기어때 블랙 인스타그램 스토리 (블랙프라이데이, 새해맞이 검은토끼)
여기어때의 그래픽을 베이스로 고급 숙소 큐레이션 ‘블랙’만이 보여줄 수 있는 트렌디하고, 고급스러운 색과 질감 표현을 통해 여기어때 블랙만의 톤앤무드를 잡아가고 있어요.

블랙 프라이데이 비주얼 질감 테스트

블랙 카메라 비주얼 질감 테스트
위 이미지는 여기어때 블랙만의 고급스러운 비주얼을 만들기 위해 여러 재질과 움직임 테스트를 했던 화면인데요, 재질 변화를 통해 분위기가 달라지는 걸 느낄 수 있어요.
정보를 효과적으로 전달해요.
앱 내 크고 많은 혜택들을 효과적으로 전달하기 위해서는 글로 자세하게 표현하는 것도 필요하지만, 한눈에 볼 수 있는 이미지의 인상이 큰 역할을 한다고 생각해요. 좋은 혜택들을 좀 더 효과적으로 표현하기에 아쉬웠던 정적인 그래픽을 보완해 주는 장점이 있어요. 유저가 혜택들을 직접적으로 더 와닿을 수 있게 하고, 어떤 의도를 표현하려고 했는지 좀 더 이해하기 쉽게 전달할 수 있어요. 혜택들을 좀 더 명확하게 보여주고, 혜택에 대한 이해를 높여줘요.🏆

최저가 챌린지 (최저가 강조 모션)
위 이미지는 “최저가” 타이틀에 반짝이는 모션을 적용시켜 유저에게 최저가 프로모션이라는 것을 강조해서 확실히 보여줄 수 있어요.

특급호텔 공동구매 (좋아요 하트 모션)
공동구매 프로모션에서 “좋아요” 플로팅 버튼을 누르면 누를수록 공동구매의 혜택이 올라간다는 것을 효과적으로 보여줄 수 있는 반응형 모션이에요.
모션 그래픽을 본 여러분은 어떤 느낌이 드셨나요? 궁금한 점이나 느낀 점을 댓글로 남겨주셔도 좋아요 :)
지금까지 나눈 이야기 끝까지 읽어주셔서 감사해요!
그럼 다음 글에서 또 만나요👋
Written by. leica