brunch

매거진 UX TALK

라이킷 152 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 강운봉 Jun 13. 2017

모바일앱 트랜지션을 설계할 때 고려해야 할 원칙 3가지

카카오톡 '인터랙션 가이드'를 만들면서 느낀점들

모바일앱에서 트랜지션은 무엇을 고려해야 할까?

모바일앱에서 트랜지션은 "화면 전환 효과"를 말하는 것입니다.

요즘 앱들을 보면 OS에서 지원하는 기본 트랜지션만 사용하기도 하고, 인터랙션을 포함한 감각적인 트랜지션을 사용하는 등 다양한 케이스를 볼 수 있습니다.

이번 아티클은 그동안의 경험을 토대로, 모바일앱 트랜지션을 설계할 때 무엇을 고려해야 하는지 이야기해 보려고 합니다. :)

다양한 트랜지션 효과들 29cm / Pinterest / 현대카드 웨더

인터랙션 가이드를 만들다.

최근 랩에서는 카카오톡팀과 함께 오랜 시간 동안 준비해 온 “인터랙션 가이드“를 카카오톡 팀내 공유하였습니다. 이 과정에서 카카오톡 내 모든 트랜지션을 정면으로 마주하는 기회를 가질 수 있었고, 프로젝트를 진행하면서 “어떤 화면에 어떠한 트랜지션을 사용해야 할까?“라는 고민을 깊게 할 수 있었습니다.

카카오톡 내 모든 화면들을 나열하고 모든 플로우에서 일어나는 트랜지션을 체크해 보니, 생각보다 다양한 케이스가 존재했고, 그만큼 의견들이 혼재되어 있음을 확인할 수 있었습니다.

무작정 기본 OS 가이드를 따르기엔 개성 있는 브랜드를 표현하기에 뭔가 부족하고, 그렇다고 가이드를 조금이라도 벗어나면 “이렇게 해도 되는 건가?“라는 의문이 계속 생기게 되었습니다.

카카오톡 내 트랜지션 플로우 by IxDLab

트랜지션은 정보의 흐름을 따른다.

트랜지션이 발생하는 시점을 확인해 보면 움직이는 “모션효과“에만 집중하는 것처럼 보입니다. 하지만, 눈으로 확인 가능한 디자인의 흐름 이외에도 “다양한 정보의 흐름을 인지하고 있다는 것“을 알아야 합니다.

종종 “무조건 멋져야 한다!”라는 강박에 의미없는 모션이 들어간 경우를 발견하게 되는데, 그런 경우 유저는 “과하다“, “어색하다“라고 느끼게 되고, 자연스럽지 않은 트랜지션으로 인식하게 됩니다.

트랜지션 효과 자체를 좋게 느낄 수 있겠지만, 우리가 느끼는 이러한 감정들은 보이지 않는 정보의 흐름도 함께 인지하면서 느끼게 되는 감정입니다.

“멋져야 한다.“가 컨셉이 아닌 이상 내가 지금 설계하는 트랜지션이 정보를 탐색하는데 방해요소가 되고 있는 것은 아닌지 체크해야 할 것이고, 어떤 이유에 의한 만들어진 것인지 설득할 수 있어야 합니다.

그러면, 좀더 구체적으로 트랜지션에는 어떠한 정보의 흐름들이 있고, 무엇을 고려해야 하는지 이야기해 보겠습니다!

1. 정보 구조를 해치지 않아야 한다.

서비스를 설계할 때 정보의 구조에 따라 메인이 되는 최상위 화면과 세부적인 하위 화면 등 다양한 화면들을 기획하게 됩니다. 유저는 수많은 화면을 만나게 되고, 길을 잃지 않기 위해 현재 나의 위치를 확인하게 됩니다.

여기에서 트랜지션은 “화면간의 관계를 좀더 명확하게 하는 역할“을 합니다. 메인 화면으로 돌아가거나 디테일한 화면들을 계속 이동해야할 수도 있고, 가볍게 Task를 수행하고 종료할 수도 있습니다.

이처럼, 트랜지션은 같은 효과를 반복적으로 사용하기보다는 다양한 정보의 구조를 이해하고 설계해야 하며, 트랜지션 효과로 인해 정보 구조를 이해하는데 혼선을 주지 않도록 해야 합니다.

또한, 화면을 계속 이동하는 방식의 트랜지션보다 앞뒤 문맥을 해치지 않는 선에서는 화면을 이동하지 않고도 Task를 수행할 방안이 있는지 고려해 보아야할 것입니다. 불필요한 화면을 없애고 뎁스를 줄여주는 것은 스크린이 작은 모바일앱에서 매우 중요한 부분임을 명심해야 합니다.

정보 구조에 따른 트랜지션 예시 – Navigation Stack by Ramotion

별도의 화면 전환이 없는 트랜지션 예시 – Folding Cell Android by Ramotion

썸네일 이미지가 화면이 되는 트랜지션 예시 – Preview Transition by Ramotion

2. 디자인의 직관성을 가져야 한다.

# 움직임의 예측

“공이 높은 곳에서 바닥으로 떨어졌다.“라고 한다면 우리는 기대하는 공의 움직임이 있을 것입니다. 트랜지션 또한, 트랜지션이 발생하는 화면의 UI디자인에 따라 다음 화면이 어떻게 나올 것인가 예측하게 됩니다.

만약, 트랜지션이 예측한 대로 이루어졌다면, 유저는 자연스럽다라고 느끼게 되지만, 그렇지 않을 경우에는 어색함을 느끼게 되고, 심하게는 불편함을 호소할 것입니다.

그리고, 유저는 움직이는 방향, 화면의 크기, 공간감 등 움직임을 예측하는 다양한 요소를 인식하게 되는데 “유저의 경험“에 따라 차이가 있으므로 최대한 보편적인 경험을 바탕으로 트랜지션을 설계해야 합니다.

iOS의 경우에는 “SwipeBack“을 적극 활용하면서 제스처 사용성도 중요한 요소로 자리 잡고 있습니다. 앞뒤 문맥의 이동이 잦은 화면의 경우 직관적인 제스처의 적용도 고려해야 할 것입니다.

오프라인 경험을 기반으로 한 애플리케이션 컨셉영상 – Facebook Introducing Paper

신문을 펴고 접는 경험을 적용한 “Paper”앱 인터랙션 예시 – Fold Interaction by Framerjs

# “개인”의 취향보다는 “브랜드”의 취향대로

“쓰으~윽! 땋?! 이렇게 해주세요… 너무 애매하잖아?! T_T“

그렇습니다. 너무 애매합니다. 그래서 문제는 여기서부터 발생을 했습니다.

유저는 원하는 정보를 얻게 되면 Task를 잘 수행했다고 판단하게 됩니다. 그렇기 때문에 자칫 화면 전환이 어떻게 되었냐는 중요하지 않다라고 생각할 수 있습니다. 그런데, 재미있는 것은 어떤 트랜지션을 사용했는지 전혀 신경 쓰지 않는 유저도 있지만, 트랜지션이 재미있어 콘텐츠 탐색에 재미를 느끼는 유저도 있다는 것입니다.

트랜지션의 정의 중 “정보 구조 및 연계성을 시각화하여 인식시킨다“는 의미에서 트랜지션이라는 부분도 디자인과 같이 취향이 다소 반영 된다라는 것을 알 수 있습니다. 간혹 트랜지션이 특정 직군의 취향대로 적용되는 경우가 있습니다. 이는 일관성을 해치고, 파편화를 야기시키는 주요 원인이 됩니다. 그러면, 어떤 기준으로 트랜지션을 설계해야 모두가 만족하게 되는 걸까요?

바로 “브랜드“입니다.

브랜드는 서비스가 추구하고자 하는 방향을 제시하고, 한 목소리를 낼 수 있는 유일한 존재라고 생각합니다. 서비스에서 추구하는 본질를 제대로 이해하고 표현한다면, 실무자나 유저의 공감을 모두 이끌어 낼수 있을 것입니다.

브랜드에 맞는 로고 디자인과 모션 디자인 예시 – Google Logo Redesign

“화려하게, 귀엽게, 멋있게, 부드럽게, 친근하게, …?!“

트랜지션은 같은 움직임도 “Duration Time(지속 시간), Easing Type(가속도 종류)”에 따라 다양한 느낌으로 표현될 수 있습니다. 서비스의 브랜드와 디자인 컨셉이 어떠한지 정확히 분석하여 그에 맞는 트랜지션 느낌을 자연스럽게 녹아 들도록 해야할 것입니다.

다양한 모션느낌을 낼수있는 “Easing Function” 예시 – http://easings.net/

어느 분야든 마찬가지겠지만 기술이나 기능이 어느 정도 평준화되고 나면, 사람들은 기호나 취향에 따라 선택을 하게 됩니다.

최근 넘처나는 애플리케이션 시장을 보면, 이젠 “디테일“에서 승패가 나뉘지 않을까 생각합니다. 유저들은 선택의 폭이 넓어지면서 앱을 비교하게 되었습니다. 앱 디자인을 보기 시작했고, 불편한 점이 있으면 바로 피드백을 보내기도 합니다.

브랜드에 맞는 트랜지션은 콘텐츠의 소비를 촉진시킬 뿐만 아니라 앱 전반적인 퀄리티를 높여주어 유저에게 매력적으로 다가갈 수 있는 중요한 부분이라는 것을 염두해야 할 것입니다.

3. 최적화된 일관성을 유지해야 한다.

# 디바이스의 성능

모바일앱 트랜지션은 디바이스의 성능을 잘 이해하고 설계해야 합니다.

아이디어는 좋으나 지원하는 디바이스의 성능에 따라 트랜지션을 구현하기 힘든 경우도 있습니다.

유리컵을 디자인하려면 유리라는 재질의 특성을 잘 이해하고 디자인해야 한다.

가령, 컵 디자이너가 “유리컵“을 디자인한다고 했을 때, 컵의 형태만 알고 디자인하는 것과, 유리라는 재질의 특성을 잘 이해하고 디자인하는 것은 분명 결과물에 차이가 있습니다.

“성능”이라는 것이 아이디어 단계에서는 배재될 수 있겠지만, 현실적인 구현 단계에서는 제일 중요한 요소가 된다는 것을 염두해야 합니다. 특히, 저사양부터 고사양까지 두루 분포된 안드로이드의 경우 내부 가이드를 통해 OS 버전별 지원 여부를 명확히해야 합니다. 아무리 좋은 트랜지션도 성능에 영향을 끼친다면 브랜드를 해칠 뿐아니라 알 수 없는 “개발 오류“를 발생시킬 수 있기 때문입니다.

주기적으로 디바이스 혹은 버전별 사용 유저들의 분포도를 데이터화 하여 관리하고, 운영 리소스에 여유가 된다면 저사양과의 분기 처리 개발을 통해 더욱 최적화된 트랜지션을 구현해 보는 것도 방법일 수 있습니다.

브랜드별 모든 디바이스 스펙(CPU,Display,Camera, 등) – devicespecifications

# 트랜지션 가이드

개발 이슈와 운영의 편의, 보편적인 사용성 등 여러 가지 이유로 앱을 제작할 때 OS의 기본 가이드를 따르는 것을 권장하고 있습니다. 하지만, 트랜지션의 경우 서비스를 제작하다 보면 기본 트랜지션으로도 해결되지 않는 경우도 있습니다. 같은 화면을 보더라도 해석에 따라 틀려지는 경우가 발생하고, 브랜드 컨셉을 표현하기에 한계가 있기 때문에 커스텀된 트랜지션을 사용하는 경우가 적지 않습니다

서비스될 앱이 OS 기본 트랜지션만으로도 가이드를 충실히 수행할 수 있는지, 브랜드 컨셉에 맞는 커스텀된 트랜지션이 필요한지 미리 검토해 보아야 할 것입니다. 앱의 규모가 커지고 고도화될수록 트랜지션의 종류가 많아지고 파편화됩니다. 만약, 브랜드 컨셉에 맞는 트랜지션이 필요하거나 트랜지션의 일관성을 잃고 있다는 판단이 든다면, 모든 직군과 함께 지속적으로 의견을 수렴할 수 있는 가이드를 제작하는 것을 권장합니다.