무신사 쇼핑, 패션의 새로운 경험
유정선, 인터랙션디자이너
Lottie는 전문관 브랜드의 아이덴티티를 표현하고 고객 인지 경험을 확대하는 데 큰 역할을 하고 있습니다. 그리고 비슷한 디자인 구조에서 차별성을 높이는 효과적인 제작 방법으로 활용되고 있습니다.
무신사는 국내외 다양한 패션 정보를 교류하던 “무진장 신발 사진이 많은 곳” 이라는 인터넷 커뮤니티에서 출발했습니다. 이후 다양한 브랜드의 정품을 믿고 구매할 수 있는 패션 쇼핑 서비스인 무신사 스토어를 선보였고, 지금은 스트릿 브랜드부터 하이엔드 브랜드까지 패션의 모든 것을 아우르는 패션 기업으로 성장했습니다. 무신사는 커뮤니티로 출발했기에 고객의 참여를 유도하는 서비스들이 많고, 다양한 브랜드들이 입점해 있기에 브랜드와의 동반성장을 중요하게 생각합니다.
다양한 콘텐츠들이 담겨 있는 패션 스토어에서 고객에게 신규서비스를 알리고, 입점 브랜드의 홍보를 위해 활용하고 있는 Lottie 애니메이션을 소개합니다.
1. 새로운 전문관 오픈을 알리다.
무신사에는 다양한 패션 카테고리에 특화된 전문관 페이지가 있습니다. 전문관은 다양한 상품 중에서 각 분야에 특화된 정보를 빠르게 찾아보고 구매할 수 있도록 도와주는 역할을 하는데요.
아울렛 전문관을 오픈할 때 페이지의 진입점이 퀵메뉴들과 같은 공간에 배치되어 차별성을 높여야 했습니다. 그래서 버튼에 로고를 활용한 애니메이션을 추가하였고, Lottie는 애니메이션 파일 포맷 중 용량 대비 모션의 퍼포먼스가 가장 좋았습니다. Lottie 버튼은 다른 버튼에 비해 트래픽이 2배 이상 많았으며 이후에 출시된 키즈와 스포츠 전문관에도 Lottie를 사용하게 되었습니다.
Lottie는 전문관 브랜드의 아이덴티티를 표현하고 고객 인지 경험을 확대하는 데 큰 역할을 하고 있습니다. 그리고 비슷한 디자인 구조에서 차별성을 높이는 효과적인 제작 방법으로 활용되고 있습니다.
모션이 추가된 버튼의 주목도가 상승하고 트래픽이 증가함에 따라 전문관을 넘어 중요한 프로모션 서비스에도 Lottie 버튼을 사용하게 되었습니다.
특히 무신사는 오퍼월 서비스를 통해 무신사의 숨겨진 기능이나 신규 서비스를 고객에게 알리고 있는데요.
사용자들은 오퍼월을 통해 미션을 수행하면 포인트나 적립금을 받게 됩니다. 포인트와 적립금을 나타내는 동전의 모양이 서로 동일하여 모션으로 차별성을 주려고 고민했고, “포인트는 터지고 적립금은 쌓인다” 라는 컨셉을 설정하여 모션을 만들었습니다.
Lottie는 position이나 scale, opacity 같은 기본 속성을 넘어 shape Layer의 path와 gradient color 에도 움직임을 넣을 수 있는 것이 큰 장점입니다.
Path 의 모양 자체를 변경하면 3D 느낌을 구현할 수 있고, gradient color 변화로 빛의 흐름도 표현 가능합니다. 애펙의 타임리맵 기능을 적절히 활용하면 입체감 있는 shape과 함께 텐션 있는 속도감으로 풍부한 움직임을 만들 수 있습니다.
2. 입점 브랜드와 함께 만드는 무신사 라이브
무신사는 패션 브랜드에 특화된 라이브 방송 ‘MUSINSA LIVE’를 진행하고 있습니다. 입점 브랜드들과 협업하여 보통 저녁 8시부터 10시까지만 방송을 하고 있는데요. 라이브를 진행할 때마다 해당 브랜드의 로고를 활용하여 “좋아요” 모션을 제공하고 있습니다.
방송 중에 브랜드 로고를 자주 노출시켜 브랜드 인지도 상승에 기여하고자 했습니다.
각 브랜드마다 로고의 크기와 모양이 다르기 때문에 커스터마이징에 따른 노력이 필요하지만, 무신사는 입점 브랜드와의 동반성장을 추구하는 기업 철학을 Lottie 를 활용해 표현하고 있습니다.
3. 모션 디자인의 한계를 넘어서다
Lottie가 등장하기 전까지는 모바일 앱에 애니메이션을 넣는 것이 매우 어려운 일이었습니다. gif 와 png 시퀀스 용량과 품질의 한계 때문에 만족할 만한 움직임을 보여주지 못했고, 그 결과 애니메이션은 제작 단계에서 제외되는 경우가 많았습니다.
하지만 Lottie 의 등장으로 많은 모바일 서비스에서 자신의 브랜드 아이덴티티를 애니메이션으로 표현하고 있습니다. 이로 인해 모션디자이너는 앱 실행 시뮬레이션 제작뿐만 아니라 실제 앱에 구동되는 모션 에셋과 인터랙션까지 설계하는 역할로 업무 역량이 크게 확장되었습니다.
LottieFiles는 Lottie의 다양한 기능의 개선, 추가 그리고 보급을 위해 끊임없이 노력하고 있는 것 같습니다. 그 노력이 현업에서 일하고 있는 수많은 디자이너의 상상력과 가능성을 펼치는 토대가 되기 때문에 언제나 응원하고 감사의 말씀을 전합니다.
다운로드 무신사
