[Design] 해피 모먼트를 전해주는 인터랙션 디자인

안녕하세요! 저는 플레이키보드 UIUX 디자이너 조예린입니다. 🥰

저는 오랫동안 모션 그래픽을 주력으로 다루며 에프터이펙트, 프리미어 프로를 활용해 2D 그래픽 애니메이션을 제작하는 영상 디자이너 겸 편집자 경험을 쌓아왔어요. 커다란 프레임 속의 밀도와 완성도를 높이기 위해 요소를 끊임없이 풍부하게 쌓아야 하는 영상 디자인과 달리, 작은 프레임 속에서 단순한 조형 요소를 사용하며 서비스를 만드는 UIUX 디자인에 매력을 느껴 포지션을 바꿔 플키팀에 합류하게 되었습니다.
UIUX 실무는 처음이라 입사 전 달라진 직무에 잘 적응할 수 있을까 작은 걱정도 있었지만, 오히려 이러한 제 경험과 강점을 접목해 영상 디자인과 유저 경험을 접목한 재밌는 프로젝트를 진행하게 되었어요!

플레이키보드가 인터랙션 디자인을 통해 유저에게 해피 모먼트를 안겨준 사연을 들어보실래요? :)

늘 우리의 곁에 있는 인터랙션 디자인

우리가 사용하는 앱에는 인터랙티브 애니메이션이 정말 많습니다. 누구나 인터랙션 디자인에 익숙해져 주의 깊게 보지 않으면 모르고 지나치게 되죠. 이제는 오히려 프로덕트에서 모션이 없는 경우를 보면 딱딱한 느낌을 받기도 해요. 저도 늘 아이콘이 움직이는 형태를 머릿속에 그리며 UI 작업을 진행하곤 해요.

퇴근할 때도 어떤 인사말을 나눌까 뚝딱이던 햇병아리 입사 2주 차, 야심 차게 신규 유저의 7일차 잔존율을 향상하기 위한 출석 체크 프로젝트를 진행하게 되었습니다. 🐥 처음으로 제가 설계한 UX/UI가 구현되는 작업이었는데요. 이번 기회에 신규 유저에게 보일 팝업창에 애니메이션을 삽입하기로 했어요. 애니메이션이 첫 보상에 대한 더 큰 해피 모먼트를 안겨주고, 플키에 긍정적인 감정을 심어줄 수 있겠다는 생각이 있었거든요. 제가 잘할 수 있는 것을 프로덕트에 녹여보고 싶은 생각도 있었구요! 그렇게 막연하게 gif 출력만을 생각하던 찰나, 개발자님이 스윽… 새로운 툴인 Lottie를 알려주셔서 알아보게 되었어요.

그래서 Lottie가 뭔데요?

Lottie란 Airbnb에서 개발한 애니메이션 오픈소스 라이브러리입니다. 에프터이펙트에서 직접 제작한 모션을 json 파일로 변환하거나, 무료로 리소스를 내려받아 사용할 수도 있어요. 벡터 기반이기 때문에 아주 적은 용량으로, 사이즈 손실 없이 정교한 작업이 가능하다는 장점이 있어요! 쉽게 설명하면 svg 파일에 모션 값까지 포함되어있다고 이해하면 빠를듯해요. 에프터이펙트로 모션을 구현하고, Lottie를 통해 json 파일을 추출한 후 개발자님께 전달하면 끝나는 아주 간단한 형태예요.

짜릿했던 최초 적용기

❶ 선물 상자의 ‘포장을 뜯는 기쁨’을 🎁

같은 선물을 받아도 상자에 담긴 선물이 더 설레는 이유는 포장을 뜯는 과정까지 경험에 포함되기 때문이지 않을까요? 그래서 유저에게 뜯지 않아 온전하거나, 이미 뜯어진 선물 상자를 보여주기보다는 포장을 뜯는 순간의 기쁨을 선물하고 싶었어요.

신규 유저에게 7일간의 출석체크 기간 동안 4개의 테마를 선물했고, 위의 이미지는 그때마다 보여진 다이얼로그 속 모션이에요. 16px의 아주 작은 기존 선물 아이콘 리소스를 활용해 모션을 제작했어요. json 파일을 뽑으면서도 ‘이게 될까…?’ 긴가민가하며 넘겨드린 후 개발자님의 테스트 화면에서 잘 작동하던 걸 본 순간 느낀 기쁨이 아직도 생생히 기억이 나요. 🙂 놀라운 건 gif 파일을 json 파일로 대체하여 312KB이던 용량이 39KB로 약 1/10 줄었다는 사실! 앱의 용량은 줄이며, 유저의 기쁨은 키울 수 있었죠.

❷ 오래된 출석 도장엔 발랄한 생명력을 👩🏻‍🎨

출석 체크 7일 중 3일은 출석 도장만 찍으며 쉬어가는 타임이었는데요. 기존 출석 도장 리소스를 활용하기에는 출석 체크 UI와 톤앤매너가 맞지 않아, 아이콘을 서비스의 메인 컬러에 맞춰 좀 더 발랄하게 리디자인했어요. 기존 출석 도장은 코드 자체에서 스케일의 변화를 주어 도장이 찍히는 것처럼 보이게 되어있었는데, 이번 기회에 코딩 없이 더욱 정교하게 도장이 찍히는 모션을 구현했어요.

최종적으로 프로덕트에 로티 파일을 적용하는 과정에서 개발자님의 디테일로 더욱 완성도가 높아졌어요! 딜레이를 넣어 7개의 도장이 차례대로 찍히는 효과를 만들어주셨는데, 그 당시 개발자님이 멋진 요리사처럼 보였어요. 😂 제가 크림리조또에 트러플 오일을 휘휘 둘러 더 맛있게 향을 냈다면, 개발자님은 완성된 요리에 그라다파다노를 갈아 올리고 파슬리를 뿌려 더 먹음직스러운 비주얼로 완성해준 느낌이랄까요. 🧑🏻‍🍳

포스팅을 위해 아이콘을 다시 gif로 변환해 제가 첨부한 이미지의 모션이 실제 구현되는 것보다 매끄럽지 못하게 보이는데요. 플레이키보드 앱에서 더 정교하고 부드러운 모션을 확인할 수 있어요. 쫀득한 디테일을 위해 프레임 단위로 확인하며 속도 그래프를 조절했거든요. 📈 아직도 신규 유저를 위한 출석 체크 이벤트는 진행중이니, Lottie 적용기를 확인할 겸 플키러가 되어 4개의 테마 선물도 함께 받아 가는 건 어떨까요! (틈새 영업 맞아요 💁🏻‍♀️)
(지금 사용해보기)

자신감에 박차를! 아이콘 인터랙션

❶ 자꾸자꾸 누르고 싶은 ‘공감’ 버튼 💗

플레이키보드의 테마 리뷰란과 서비스 내 커뮤니티 ‘플키득’에 공감과 답글 기능을 추가할 기회가 생겼어요. 공감 버튼에도 인터랙션을 적용한다면 유저들이 더 활발히 사용하겠다는 판단이 들어, 자신 있게 ‘공감 아이콘 인터랙션도 lottie 파일로 제작할게요!’라고 협업툴에 외쳤죠. 😎

앞서 제작한 아이콘보다 훨씬 사이즈가 작고 실시간 인터랙션 성격이 강하기 때문에, 작업 중 두 가지를 중점적으로 고려했어요. 첫째는 연속해서 눌러도 유저의 경험을 방해하지 않을 것, 둘째는 코드로 구현할 수 있는 이상의 모션을 보여줄 것. 단순히 아이콘의 스케일과 불투명도 값만 조절할 거라면 코드로 구현하는 게 효율적이겠죠. 코드만으로는 불가능한 시각적 다채로움을 전달하기 위해 하트가 터져 나오는 인터랙션을 직접 제작했어요. 비슷한 아이콘 레퍼런스들을 수집해 1프레임씩 뜯어보며 디테일을 손보았던 기억이 나네요. 안드로이드 디바이스에서는 누를 때마다 햅틱 피드백을 추가해 촉각 경험까지 전달하고자 했어요. :)

❷ 추석 맞이! ‘송편’ 이스터에그 🥚

추석 이벤트 댓글 페이지를 송편으로 수정하자는 귀여운 아이디어가 있었는데요. 기존의 아이콘 디자인 스타일과 크게 벗어나지 않도록, 세 가지 색상을 함께 나열해 더욱 송편처럼 보일 수 있도록 신경 쓰며 제작했어요. 개발자님께 부탁드려 댓글마다 다른 색의 송편이 랜덤으로 뜨도록 구현했고, 송편 아이콘을 적용한 기간 동안 평소보다 더 많은 공감이 달렸어요. 누를 때마다 다른 색의 송편이 뜬다는 점이 더 유저의 기대감을 높이고 클릭 액션을 일으킨 것 같아요. ‘제 댓글에 송편 눌러주세요!’, ‘저도 떡 주세요!’라는 유저들의 귀여운 피드백들을 구경하며 뿌듯했답니다. 😉

사용성을 해치지 않는 한도 내에서, 즐거움을 전해주도록!

유저에게 즐거움을 주거나, 시선을 끌고 행동을 유도하는 데에 있어 인터랙티브 애니메이션은 크게 효과적인 방법입니다. 하지만 남용된다면 오히려 전하고자 하던 목적을 해치게 될 수 있어요.

내가 진행하려는 인터랙션 디자인이 뚜렷한 목적 없이 디자이너의 내적 만족을 충족시키기 위한 ‘멋부림’인건 아닌지, 오히려 사용성을 해치고 있지는 않은지를 생각하며 앞으로 차차 프로덕트에 적용해나갈 예정이에요. 동일한 액션이지만 더 즐거운 경험을 안겨줄 수 있는 인터랙션 디자인으로 플키러들에게 행복의 찰나를 선물해주고 싶어요. :) 유저의 행복을 위해 늘 고민하는 플키팀의 발자취를 계속 지켜봐 주세요~ 🥰

참고자료

Official guide to Lottie
모션 디자인은 UX에 어떤 영향을 미칠까?
모션으로 사용성 만들기 : 모션 선언문의 UX (1)
[Lottie] 로티 애니메이션 만들기 1편 — 디자이너들의 깃헙, 로티