전지적 인터랙션 시점,
ios14 업데이트 이야기
난 아직도 애플의 아이팟 터치를 내 손으로 직접 경험해본 그 순간을 잊을 수가 없다. 고등학생의 나이였던 2007년, 아이폰이 아직 국내에 공식으로 출시되기 전이었고, 같은 반 친구가 아이팟 터치를 사 와 자랑을 하던 중이었다. 당시 애플의 아이팟은 mp3 파일을 itunes를 통해서만 옮길 수 있는 까다로운 음악 다운로드 절차(?) 때문인지 몰라도 국내에서는 아이리버, 코원, 삼성의 mp3 플레이어에 비해서 유저수가 현저히 낮았다. 그 어린 나이에도 애플 감성에 홀린 듯 아이팟 나노를 사용하고 있던 나는, 별로 친하지도 않은 친구의 아이팟 터치를 만져보기 위해 친구 주위를 서성거렸다.
매점에서 사 온 빵과 맞바꾼 아이팟 터치와의 짧은 경험은 말 그대로 신세계 그 자체였다. 버튼을 밀어서 잠금 화면을 해제하고, 경험해 보지 못한 부드러운 스크롤과 스크롤이 마지막에 닿았을 때 일으키는 경쾌한 바운스, 기기를 가로로 눕히면 등장하는 커버플로우, 사진을 두 손가락으로 확대하는 직관적인 핀치 제스처 등, 디지털 기기와 나와의 인터랙션이 감동 포인트가 될 수 있다는 것을 처음 경험해본 순간이었다.
애플은 그 이후로도 꾸준히 작지만 강한 마이크로 인터랙션을 업데이트 해왔다. 이번 ios14에도 어김없이 마이크로 인터랙션의 변화가 이뤄졌고, 지극히 주관적이면서 인터랙션 디자인의 시점으로, ios14에 대해 이야기해보고자 한다.
ios의 마이크로 인터랙션
ios14 업데이트에 대해 이야기하기 앞서, ios의 전반적인 마이크로 인터랙션에 대해 짚어보고 싶다. 아이폰X의 출시 당시, 아이폰에 홈버튼이 없어지면서 ios의 인터랙션 방식에는 또 한 번의 큰 변화가 왔다. 그중 하나로, 사용자가 앱화면을 종료하고 홈화면으로 돌아가고 싶을 때, 홈버튼을 누르는 단순한 행위를 대체하는 직관적인 인터랙션 방식이 등장하였다. 앱화면의 밑을 들어 올려, 앱화면을 툭하고 던져 날려버리는 방식이다.
사용자는 앱화면 밑을 살짝 들어 올리면 앱화면 뒤에 존재하는 홈화면의 레이어를 볼 수가 있다. 이는 사용자들에게 앱화면의 카드형 레이어 뒤에는 홈화면의 레이어가 존재한다는 입체적인 공간감을 심어주는 계기가 되고, 앱화면을 카드처럼 던져버리면 홈화면으로 돌아갈 수 있다는 어포던스를 제공한다. 사용자가 앱화면을 들어 던져버리면, 앱화면의 레이어는 작아지면서 다시 앱의 아이콘의 자리로 돌아가게 된다.
ios(좌)는 앱화면을 밑을 잡고 위로 던지는 행위를 현실세계의 물성을 최대한 반영하여 공간감을 더욱 실감 나게 표현하였다.ios 상에서의 입체적인 depth를 이해한 사용자는, 이러한 일관된 ios의 공간감을 기반으로 아이폰의 다른 인터랙션에 대해서도 쉽게 인지할 수 있게 된다.
앱화면에서 다른 앱화면으로 이동하는 경우, 앱화면의 밑을 좌우 방향으로 스와이프 하면 같은 레이어 선상 좌우에 존재하는 다른 앱화면으로 이동할 수 있게 된다. 화면 옆에 보이지 않는 곳에 존재하는 다른 카드를 보기 위해, 앞에 보이는 카드를 옆으로 밀어 버린다는 심플한 인터랙션 개념이다. 이러한 인터랙션의 개념을 익힌 사용자는 다음에도 손쉽게 이 기능을 사용할 수 있게 된다. 애플은 이러한 공간감과 UI 간 자연스러운 모션을 통해 사용자로 하여금 디지털 디바이스가 아닌, 실제로 존재하는 물체(object)를 다루는 듯한 부드러운(fluid) 사용성을 경험하게 해 준다.
앱화면들은 같은 선상의 레이어에서 인터랙션이 가능하다는 개념을 사용자에게 지속적으로 각인시킨다.이렇게 애플은 아이폰에 홈버튼을 없애면서 ios 상에서 depth를 느낄 수 있는 공간감을 훨씬 강조하기 시작했다. 레이어와 레이어, 모듈과 모듈 간의 관계를 depth로 설정하고, 이를 인터랙션으로 유저들에게 끊임없이 각인시켜 더욱 자연스럽게 ios를 이용할 수 있게 한다.
공간감을 강조하는 ios14의 마이크로 인터랙션
이번 ios14 업데이트에서도 ios의 공간감을, 소소하지만 더욱 강조하여 보여줄 수 있는 마이크로 인터랙션 업데이트가 이뤄졌다. x, y축으로의 이동보다는 3d 공간감을 더욱 느끼게 해주는 z축으로의 이동이 많아졌고, 이는 기존 플랫 디자인에서 뉴모피즘으로 옮겨간 UI 디자인 요소들과도 적절한 시너지 효과를 보여주고 있다.
위젯창 이동 트랜지션
첫 번째로, 위젯창으로 이동하는 트랜지션에 변화가 생겼다. 기존 ios13에서 위젯창으로 이동할 때는 첫 홈화면에서 위젯 화면으로 스와이프 할 때 같은 선상의 레이어에서 진행되었다. 하지만 이번 ios14에서는 홈화면에서 위젯 화면으로 전환할 시 홈화면이 z축, 즉 뒤로 이동하면서 블러 효과가 발생하고, 그 위로 위젯창이 화면에 자리 잡게 된다. 이러한 변화는 ios의 공간감을 더욱 강조함과 동시에 위젯 창을 독립적인 레이어로 만들어줌에 따라, 이번에 새롭게 강화된 위젯 기능에 힘을 실어주는 효과를 낸다.
새롭게 추가된 앱 보관함 또한 홈화면의 맨 마지막 창에서 스와이프했을 시 똑같은 트랜지션과 함께 새로운 독립적인 레이어로 화면에 자리 잡게 된다.
ios13 위젯창 트랜지션(좌) / ios14 위젯창 트랜지션(우)앱 보관함
이번 ios14에 새롭게 생긴 앱보관함에서도 공간감을 강조하는 마이크로 인터랙션이 보인다. 각 카테고리 폴더의 전체 앱리스트를 보고자 할 때, 4개의 앱아이콘이 몰려있는 곳을 탭 하면 해당 카테고리 폴더의 모든 앱들이 화면에 펼쳐지게 된다. 이때 기존 화면은 블러 효과와 동시에 z축 뒤로 이동하게 되고, 그 위로 새로운 레이어에 앱 아이콘들이 보이게 되는데, 아이콘의 행과 열 별로 이동 모션 타이밍에 딜레이를 주어 마치 아이콘들이 뿜어져 나오는 듯한 입체감을 갖게 된다. 이 역시 마찬가지로 ios가 갖는 depth 구조를 더욱 실감 나게 느낄 수 있는 마이크로 인터랙션이다.
위젯
이번 업데이트에서 가장 이슈 된 사항인 위젯에서도 입체적인 모션을 볼 수가 있다. 각 종류별 위젯의 사이즈를 선택하는 구간에서 위젯이 x, y, z축으로 천천히 돌고 있다. 이는 해당 위젯이 배경과 분리되어 사용자가 직접 터치하고 컨트롤할 수 있는 요소라는 힌트를 제공한다. 실제로 위젯을 길게 터치하여 홈화면 배경으로 드래그하면 원하는 위치에 위젯을 갖다 놓을 수 있으며, 위젯을 화면에 놓는 순간 위젯 중심으로 주변 아이콘이 물결치듯 파동을 일으키게 되는데, 이는 위젯을 더불어 모든 아이콘들이 사용자가 직접 터치하여 이동하고, 컨트롤할 수 있는 요소들이라는 점을 다시 한번 자연스럽게 각인시킨다.
위젯이 입체적으로 천천히 돌며 사용자가 직접 컨트롤할 수 있는 요소라는 힌트를 제공하며(좌), 스택 위젯 이동 또한 z축으로의 이동이 함께 이뤄져 공간감을 느끼게 해 준다(우).그 외
그 외 새로운 마이크로 인터랙션 시도들도 있다. 대표적인 것이 뒷면 탭인데, 단순히 아이폰의 뒷면을 두 번, 혹은 세 번을 탭 하는 것으로 사용자가 지정한 기능을 실행할 수 있다. 또 카메라 앱에서는 인스타그램 스토리나 틱톡과 같은 '짧은 영상' 콘텐츠를 촬영하는 사용자가 늘어남에 따라 일반 사진 셔터를 길게 누르고 있으면 간단한 영상 촬영할 수 있게 업데이트되었고, 기존 연속 촬영 기능은 사진 셔터를 좌측으로 드래그하는 인터랙션으로 대체되었다. 이것 또한 셔터 버튼을 기존 틀에서 꺼내야 하는 디테일한 물성을 부여하여 사용자가 새로운 인터랙션을 좀 더 자연스럽게 익힐 수 있게 하였다.
마이크로 인터랙션은 작지만 강한 디테일이다. 어떻게 보면 아무것도 아닌 업데이트일 수도 있겠지만, 우리가 현재 사용하는 터치, 스크롤, 드래그를 '당연하게' 여길 수 있게 된 것에는, 디지털 프로덕트가 우리의 정신과 몸에 일부인 것처럼 자연스럽게 움직이고 반응하는 인터랙션 디자인 덕분일 것이다. 키보드, 마우스, 스타일러스 등을 지나, 어쩌면 우리는 지금 디지털 기기와 가장 자연스럽고 인간 중심적인 인터랙션을 하고 있는지도 모른다. 화면의 콘텐츠를 직접 만지고, 실제 사물을 다루는 듯한 물성을 가져 던지고, 돌리고, 옮기는 행위는 마치 디지털 기기와의 상호작용이 아닌, 실제로 존재하는 물체와 상호작용하는 듯하다. 마지막으로 몇 년 전 자료이기는 하지만, 애플의 인터랙션 원칙에 대해 자세하게 설명하고 있는 영상 하나를 공유하며 마무리한다.
https://developer.apple.com/videos/play/wwdc2018/803/
