제품을 개발할 때 디자인 팀의 길은 쉽지 않습니다. 특히 모션 디자인은 디자인 과정에서 종종 뒷전으로 밀리기 때문에 더욱 그렇습니다.
하지만 사용자 문제점과 이해관계자의 우려가 저절로 해결되지는 않습니다. 그래서 임박한 마감 기한 속에서도 좋은 사용자 경험을 만들기 위해 모션 디자인이 필요합니다.
이 사실을 Warner Bros. Discovery의 모션 디자이너 Mia Vidamour보다 잘 아는 사람은 없습니다. 그녀는 두 개의 브랜드 제품을 담당하는 국제 팀의 일원으로 일하고 있습니다.
최근 웨비나에서 Mia는 자신의 업무가 제품 디자인과 모션 디자인의 교차점에 놓여 있으며, 바로 그 영역에서 ProtoPie의 가치가 가장 크다고 말했습니다. 그녀의 팀이 최근 앱 프로젝트 중 하나를 위해 어떻게 우리 도구를 사용해 프로토타입을 만들었는지 계속 읽어보세요. 그 결과물은 최종적으로 성공한 제품과 정확히 똑같이 보이게 되었습니다.
모션 디자인은 디자인 과정에서 중요하지만 종종 간과되는 도구입니다
사람들은 애니메이션된 형태와 움직임에 자연스럽게 사회적 의미를 부여합니다. 이는 모션 디자인에 의도한 표현이 없더라도 최종 사용자가 그것을 해석의 근거로 삼을 수 있다는 뜻입니다.
이런 점을 염두에 두고 Warner Bros. Discovery 팀은 모션 디자인을 다음과 같은 용도로 사용합니다.
주목을 유도하기 위해 사이트나 앱의 객체와 페이지 요소에 시선을 끕니다.
사용자의 방향을 잡아 주기 위해 사이트나 앱에서 특정 객체와 페이지 요소 간의 공간 관계를 설정합니다.
복잡한 디자인 문제를 해결하기 위해, 모션이 강조를 만들고 의미를 부여할 수 있기 때문입니다.
브랜드 표현을 위해, 이들의 분야에서는 브랜딩이 매우 중요합니다. 따라서 새로운 기능을 개발할 때 팀은 브랜드를 전달할 수 있는 표현력 있고 생동감 있으며 활기찬 모션 디자인을 만드는 것이 중요하다고 여깁니다.
하지만 앞서 언급했듯이 모션 디자인은 종종 디자인 과정에서 우선순위가 낮아지는 부분입니다.
그렇다면 모션 디자인의 가치를 입증하기 위해 어떻게 이를 알리고 적극적으로 지지할 수 있을까요?
Warner Bros. Discovery의 해결책은 일찍 시작하는 것입니다. 모션 디자인이 디자인 과정 초기에 해결책으로 식별될 수 있다면, 일정과 출시일이 촉박한 프로젝트 막바지까지 기다리는 것보다 훨씬 수월합니다.
모션 디자인을 활용해 좋은 UX 제품 만들기
최근 프로젝트 중 하나에서 팀은 2~5세 어린이를 위한 프로그램 블록인 Cartoonito 앱의 디자인을 새롭게 개편했습니다.
이 프로젝트는 전적으로 모션 중심으로 진행되었으며, 팀의 상호작용적이고 혁신적인 접근 방식을 전달하기 위해 고충실도 프로토타입에 크게 의존했습니다.
팀의 과제는 2~5세 사용자를 위한 앱 내 콘텐츠 발견의 새로운 방법을 탐색하는 것이었습니다. 타깃 사용자를 염두에 두고, 내비게이션 바를 특히 문제적인 영역으로 파악했는데, 그 이유는 다음과 같습니다:
2~5세 어린이 모두가 글을 읽을 수 있는 것은 아닙니다.
아이콘이 꽤 작았습니다.
전체 내비게이션 인터페이스에는 사용자가 앱을 탐색하고 발견하도록 유도할 더 많은 시각 요소와 인터랙티브 기능이 필요했습니다.
전반적으로 앱은 최종 사용자가 쉽고 직관적으로 좋은 콘텐츠를 찾을 수 있도록 더 사용자 중심적이고 일관된 방향으로 바뀌어야 했습니다.
사용자 조사 후, 팀은 다음이 필요하다고 판단했습니다:
터치 상호작용을 제한하고 화면 가장자리에 큰 내비게이션 화살표를 배치해 UI를 단순화하기.
어린이는 텍스트보다 물리적 피드백에 크게 의존하므로 시각 요소를 더 많이 추가하기.
어린이는 화면 속 캐릭터와 소리, 애니메이션으로 상호작용할 수 있기를 기대하므로 더 많은 상호작용을 개발하기.
팀은 두 가지 아이디어를 개발했고, 오른쪽 화살표를 누르면 회전하여 새 섹션으로 넘어가는 회전하는 세계 컨셉을 선택하기로 했습니다. 그 결과 인터페이스는 사용자에게 더 명확해졌고, 향후 더 많은 일러스트와 상호작용을 추가할 수 있는 공간도 생겼습니다.
그러나 새 내비게이션 시스템은 사용자 관점에서는 더 단순하지만, 제품 디자인과 혁신 단계에서 고려해야 할 움직이는 요소가 많습니다.
예를 들어 새 내비게이션 시스템에는 단색으로 표시되는 선택 상태가 있고, 사용자가 탐색할 때 부드럽게 전환되도록 하는 그라데이션 전이 상태도 있습니다.
또한 내비게이션 오버레이, 정적 페이지 요소, 일러스트와 제목, 회전하는 동적 요소, 배경, 단색 정적 요소와 같은 여러 레이어로 구성되어 있습니다.
이는 팀이 프로젝트의 이해관계자들에게 직접 전달해 작동 방식을 체감하게 할 수 있는, 더 구체적인 무언가가 필요하다는 뜻이었습니다.
기본적으로 그들에게 필요했던 것은 고충실도 프로토타입이었고, ProtoPie로 바로 그것을 만들 수 있었습니다.
다음 영상을 보고 Warner Bros. Discovery 팀이 ProtoPie를 어떻게 사용하는지 더 알아보세요.
Warner Bros 디자인 스튜디오가 업무 흐름에서 ProtoPie를 사용하는 방법
ProtoPie를 사용해 Mia의 팀은 다음만으로도 복잡한 프로토타입을 쉽게 만들 수 있었습니다:
연동 플러그인을 사용해 Figma의 모든 것을 가져오기.
시행착오 끝에 내비게이션 시스템을 처음부터 구축하기.
맞춤 제작한 캐릭터 바디 애니메이션을 추가해 프로토타입에 적용함으로써 앱의 인터랙티브 요소를 강화하기. 아래 그림에서 보이듯이 오른쪽 화살표를 누를 때마다 세계가 회전합니다. 이를 통해 사용자는 흥미롭고 몰입감 있는 섹션으로 전환할 수 있습니다.
그럼에도 첫 번째 버전에서는 실제 콘텐츠에 접근하려면 두 번 탭해야 해서 몇 가지 우려가 있었습니다. 하지만 이 앱은 비디오 게임 라이브 스트리밍에 사용되므로, 사용자는 콘텐츠를 중앙에 바로 볼 수 있어야 했습니다.
그래서 팀은 연구 및 개발 단계로 돌아갔습니다. 결국 다음과 같이 결정했습니다:
상단에 인터랙티브 메뉴를 추가하기.
일부 반복 버전을 조정하기.
일부 메뉴 요소의 위치를 조정하기.
사용자가 카드들을 클릭해 앱을 둘러보고 발견하도록 화면 하단에 카드를 배치하기.
이 두 반복 버전 모두 프로토타입이 필요했습니다. 겉보기에는 단순한 내비게이션 시스템이지만 배경에는 복잡한 요소가 많기 때문입니다.
팀이 프로토타입을 만든 것은 매우 가치 있었습니다. 확장성 같은 문제를 파악할 수 있었기 때문입니다. 첫 번째 버전에 더 많은 콘텐츠를 추가한다면 스크롤되는 위치를 조정해야 했습니다. 그래서 프로젝트의 최종 데모에서는 콘텐츠에 항상 접근할 수 있도록 더 많은 상호작용 기능을 추가했습니다.
ProtoPie로 이 작업을 할 때 가장 좋았던 점은 ProtoPie Player였습니다. 개발 없이도 프로토타입을 팀원들의 손에 직접 쥐여줄 수 있게 해 주었습니다. 이 기능을 사용하면 링크만 가진 누구와도 프로토타입을 공유할 수 있습니다.
이들은 국제 팀이기 때문에 라틴 아메리카의 팀원들도 휴대폰에 ProtoPie Player를 다운로드할 수 있었고, 이는 개념을 확실히 설득하는 결정적인 요소였습니다.
ProtoPie Player 외에도 팀은 특히 다음 세 가지 기능이 유용하다고 판단했습니다:
ProtoPie-LottieFiles 연동
조건
변수 기반 상호작용
LottieFiles 연동을 활용한 고충실도 프로토타이핑
LottieFiles는 AfterEffects에서 애니메이션을 .json 파일로 내보낼 수 있게 해 주는 AfterEffects 플러그인입니다.
이 기능은 많은 프로토타이핑 앱이 지원하지 않지만, ProtoPie는 예외라고 말씀드릴 수 있어 기쁩니다.
Warner Bros. Discovery 팀에게 이 기능은 .json 파일을 개발자에게 넘기기 전에 테스트할 수 있다는 점에서 매우 유용했습니다.
아래 그림은 Warner Bros 디자인 스튜디오가 ProtoPie를 사용한 고충실도 프로토타이핑에서 LottieFiles를 어떻게 구현했는지를 보여줍니다.
서로 다른 다섯 개의 LottieFiles를 볼 수 있으며, 그중에는 상호작용 지점에서 조합되도록 만든 두 개의 반복되는 야자수와 컨페티가 포함되어 있습니다. 또한 애니메이션 캐릭터를 탭할 때마다 대기 상태에서 시작해 작은 뒤집기 동작을 합니다.
ProtoPie에서 복잡한 상호작용 만들기
회전하는 세계 컨셉의 기능을 보여주기 위해, 상단 UI 레이어를 아래로 스크롤할 때 일러스트 레이어도 아래로 움직이게 해야 했습니다.
팀은 연쇄 반응을 사용하고 페이지 컨테이너의 스크롤을 월드 레이어의 오프셋에 매핑함으로써 이 상호작용을 구현할 수 있었습니다. 이를 통해 두 레이어가 실시간으로 함께 아래로 움직이는 듯한 착시를 만들 수 있었습니다.
같은 상호작용으로 스크롤 애니메이션도 넣을 수 있습니다. 스크롤이 절반쯤 올라가면 스크롤에 의해 작동되는 두 개의 버튼이 나타납니다.
또 원했던 기능은 필터 버튼이 동영상 페이지에서만 나타나게 하는 것이었는데, 이 역시 조건을 사용해 구현할 수 있었습니다.
문서화 및 인수인계 단계를 간소화하기
문서화 및 인수인계 단계에서 ProtoPie는 Warner Bros. Discovery 모션 디자인 팀에게 정말 큰 시간 절약이 되었습니다.
프로토타입에는 여러 상호작용이 겹쳐 있어 탐색하기가 어려울 수 있었습니다. AfterEffects를 사용해 일부 요소를 인수인계하려면 초당 프레임 수를 계산해 밀리초로 변환해야 했습니다.
ProtoPie에서는 그런 작업이 이미 몇 초 만에 처리됩니다.
전체 문서화 과정의 일환으로 디자인 팀은 다음을 포함한 모든 자료를 Confluence에 업로드합니다:
페이지 소개
삽입된 Figma 파일
Lottie 상호작용 녹화본
ProtoPie 프로토타입
애니메이션 타임라인 및 기타 에셋.
이 페이지는 모든 것의 단일 진실 공급원 역할을 하며, Jira와 연결되어 제품 관리자, 개발자, 품질 분석가를 위한 기준점이 됩니다. 팀은 이것을 인수인계를 문서화하는 강력한 방법으로 여기며, ProtoPie는 그들의 워크플로에 잘 맞습니다.
성공적인 인수인계 후, 새롭게 개편된 Cartoonito 앱은 몇 달 전 배포되었습니다.
최종 결과는 무엇일까요? 만족한 이해관계자, 만족한 사용자, 그리고 ProtoPie로 만든 프로토타입과 정확히 똑같이 보이는 앱입니다.
ProtoPie는 모션 및 상호작용 디자인을 쉽게 만듭니다
ProtoPie가 귀사의 디자인 팀이 기록적인 속도로 고충실도 프로토타입을 만드는 데 어떻게 도움이 되는지 알아보려면 문의해 주세요!
