iOS의 훌륭한 인터랙션 톺아보기
누군가 저에게 인터랙션 경험이 가장 훌륭한 서비스가 무엇인지 묻는다면 다소 진부한 대답일 순 있겠지만 저는 주저 없이 애플의 iOS라고 답할 것입니다. 사용하기 쉬워 고객과의 상호작용이 우수한 것은 당연지사고 고객과 어떻게 상호작용하는지, 그리고 어떤 방식으로 고객에게 피드백을 전달해 주는지를 생각해 보면 애플만큼 인터랙션 경험이 즐겁고 정교한 서비스를 본 적이 없기 때문이에요. 지금부터 쓰게 될 글은 iOS가 고객에게 어떠한 인터랙션 경험을 제공하는지를 스마트폰의 역사와 애플이 가지고 있는 디자인 철학에 빗대어 분석하는 내용일텐데 타인의 인사이트를 약간 참고함과 더불어 본인의 주관적인 견해 또한 가미된 나름대로 긴 글이 될 것 같습니다. iOS의 인터랙션 세계에 함께 빠져보도록 합시다.
애플과 스큐어모피즘 정신
애플 제품을 오래전부터 사용해 본 사람들은 스큐어모피즘 (Skeuomorphism) 을 기억하고 있을 것이에요. 사전적 정의로 ‘사물 모습 그대로 디자인에 반영하는 기법’을 일컫는데 이에 걸맞게 과거 애플에서 양산되는 GUI는 오프라인의 경험이 연상되는 메타포와 사실적인 질감 표현을 통해 제작되는 양상을 보였습니다.
당시 애플의 스큐어모피즘의 예시. 메모장, 서재, 마이크의 형상으로 디자인하여 어떤 기능인지 누구나 유추할 수 있습니다. 이 시기의 애플의 소프트웨어 총괄 디렉터인 스콧 포스톨을 비롯한 스티브 잡스가 특히나 스큐어모피즘을 선호했던 것으로 알려져 있는데 잡스가 스큐어모피즘을 선호했던 이유는 과연 무엇일까요? 이는 스마트폰이라는 물건이 이 세상에 처음 도래한 당시의 상황과 연관 지어 설명할 수 있는데, 잡스는 세상에 처음 등장한 이 제품을 사용자가 낯설게 여기고 사용하기 어려워할 것을 우려했다고 해요. 2007년 당시는 컴퓨터나 MP3 플레이어 정도를 제외하고는 대중과 친숙했던 상용화된 디지털 프로덕트가 거의 없던 시절이니 당연한 고민이겠죠? 이를 해결하기 위해 잡스가 고안해낸 솔루션은 다름 아닌 오프라인에서의 익숙한 아날로그 경험을 디지털에 반영하는 것이었고, 이를 통해 디지털에서도 아날로그와 유사한 방식으로 제품을 이용하면 되는 것이기에 이는 곧 대중이 제품을 친숙하게 여겨 직관적이고 사용하기 쉽다고 인식할 수 있다는 긍정적인 기대효과로 이어질 수 있었어요. 이로 인해 당시의 스큐어모피즘은 현실 세계와 디지털 세계 간의 교량 역할을 한다는 호평을 받았다고 합니다.
저는 애플이 밟아온 발자취를 스큐어모피즘 이라는 일종의 기법으로만 기억하기보단 정확하게는 이러한 기법으로 인해 나타난 효과로 기억하고 싶습니다. 결국 모든 경위는 사용성 증대를 위한 빌드 업이였고 이를 구현하기 위해 사용한 택틱은 친숙함 이였던 거구요. 잡스가 주도했던 애플은 디지털을 이용하는 감성이 단지 차가운 기계를 조작하는 것에 불과한 게 아닌 실제와 유사한 생동감 넘치는 경험으로 기억되길 원했던 것입니다. 잡스가 안타깝게 타계하였고 이후 조니 아이브의 그 유명한 미니멀리즘 디자인 사상에 걸맞는 플랫 디자인의 시대가 도래하여 아직까지도 그 명맥이 이어지고 있지만 스큐어모피즘은 과연 역사의 뒤안길로 사라졌을까요? 적어도 제 개인적인 견해로는 아니라고 생각합니다. 실제와 같은 경험에 기반한 이 친숙한 정신은 여전히 꺾이지 않고 기존과는 다른 방식으로 살아 숨 쉬고 있다고 생각해요. 그리고 본인이 iOS의 인터랙션이 탁월하다고 생각하는 이유가 바로 이것이구요. 질리도록 여러 번 언급하는 단어이지만 실제와 유사한 인터랙티브를 통해 친숙하게 다가오기 때문입니다.
디지털 프로덕트에서의 상호작용은 어떻게 되어야 하는가
누군가 갑자기 내 몸에 터치를 한다는 상황을 생각해 볼게요. 이런 갑작스런 상황 속에서 사람에 따라 다양한 반응이 발생할 수 있는데 몇 가지 예시를 들어볼 수 있습니다. 말없이 터치한 사람을 쳐다본다거나, 그 사람에게 왜 자기의 몸에 손댔는지를 정중히 묻는다거나, 혹은 손을 뿌리치고 따귀를 때린다거나.. 이처럼 다양한 액션을 가정할 수 있을텐데 여기서 가정한 모든 반응은 상호작용이라고 규정할 수 있습니다. 상호작용은 일반적인 정의로 생물체의 부분들끼리, 물질끼리, 개체끼리 주고받는 작용들을 통틀어 일컫는 말인데 이 방식이 무엇이 좋은지 나쁜 것인지를 떠나서 대상과 대상이 주고받는 모든 동작과 액션의 범주가 상호작용에 해당한다고 볼 수 있는 것이죠. 이처럼 실생활에서도 어떤 동작을 통해 작용이 발생하듯, 우리가 만들게 될 제품도 정적으로 멈춰있는 것이 아니라는 사실을 간과해선 안됩니다. 동작에 따라 대상이 반응을 한다는 근본적인 개념부터 디지털 프로덕트의 인터랙션 역시 그 자체로 실제와 맥락이 유사하다고 볼 수 있어요.
제품을 설계할 때 누구나 고려하게 될 User Flow기본적으로 시중에 상용화된 모든 디지털 제품들은 독립적인 하나의 피쳐만을 제공하는 것이 아닌 요소와 요소가 연결되어 있는 구조로서 사용자의 액션에 따라 제품이 작동하는 동적인 특징을 띄고 있습니다. 이러한 연결성과 움직임을 통해 제품이 궁극적으로 지향하고자 하는 경험에 고객이 온전히 도달하도록 해야 하기 때문에 인터랙션을 설계할 땐 제품이 어떻게 작동되어야 좋은 것인지, 어떻게 해야 작동하는지를 잘 고민하고 고객이 목표에 도달하기 위해 어떤 플로우를 거쳐야 하는지를 잘 짜는 것이 중요하여 이들을 고려하는 것이 핵심적인 과제가 될 것이에요. 이에 다음부터 본격적으로 소개할 것은 애플이 이 실제와 유사한 개념을 실제처럼 어떻게 설계했는지 사례들을 살펴보는 것입니다.
실재하는 것 처럼
스큐어모피즘 GUI가 실제와 유사한 물체나 행위에서 기인한 개념 모형을 표현해낸 결과물이라면 인터랙션의 경우 대상이 움직이는 방법을 설계한다는 특성을 고려하여 실제와 유사한 심상을 넘어 마치 대상이 실재하는 것 같다는 경험으로 만드는 전략을 사용한 것으로 보입니다.
앱 아이콘이 스크린 사이즈로 확장되는 모습
생사의 기로 앞에서 벌벌 떠는 모습. 개인적으로 애플의 인터랙션 중에서 가장 좋아합니다.
부르셨냐는 듯이 반응하는 게 귀엽습니다. 이를 통해 유저의 액션을 디바이스가 인식했음을 알 수 있습니다.앱이나 위젯과 관련된 인터랙션들에서 이러한 경향을 파악할 수 있었는데 앱을 실행하기 위해 클릭 시 아이콘이나 위젯의 형태에서 확장되어 앱 스크린으로 큼지막하게 변화하는 듯한 특유의 연출, 앱이나 위젯을 제거/관리하는 모드에 돌입할 시 숙청(?)을 당할까 봐 두려움에 벌벌 떨고 있는 광경, 앱과 위젯을 꾹 누르고 있을 때 마치 자신을 불렀냐는 듯이 일시적으로 스케일이 커지면서 반응하는 효과까지. 인지과학의 대부인 도널드 노먼이 정의한 인터랙션의 7원칙에는 사용자의 반응에 따라 일어난 변화를 즉각적으로 알려줘야 한다 라는 ‘피드백’ 이라는 개념이 포함되어 있는데 유저의 액션에 따라 아이폰의 앱들은 즉각적으로 반응을 하여 고객에게 당신의 행동을 바로 인지하였음을 마치 생명체와 소통하는 듯한 연출로 알려주고 있습니다. 좋은 인터랙션이 지녀야 할 근간적인 조건에 부합할 뿐만 아니라 재치까지 챙겼으니 이보다 더 즐거운 경험이 어디 있을까요?
Blur를 기능을 이용해 새로운 컨텐츠가 등장해도 기존의 경험이 완전히 없어진 게 아니라는 힌트를 주어 혹여나 제품을 처음 써보는 고객일지라도 당황하지 않아도 됩니다.
헤딩에 사용된 '설정' 텍스트가 Backspace의 레이블로 이동하는 케이스
깔려있는 달 중 하나만 확대해서 보는 것 같은 경험. 또한 컨텐츠와 또 다른 컨텐츠를 각자 독립적인 요소로만 두는 것이 아닌 서로가 유기적으로 연결되어 있는 듯한 현상도 볼 수 있는데 사용자가 새로운 컨텐츠를 호출할 시 기존 컨텐츠는 스크린 내에서 완전히 소거하는 것이 아닌 Background Blur 효과를 통해 살짝 가려둔 후 그 상단에서 새로운 컨텐츠를 보여주는 방식이나, 레이블이 페이지의 메인 헤딩과 Backspace의 레이블로 이중으로 사용되는 케이스, 그리고 캘린더에서 연도가 기재된 Backspace를 누를 경우 기존의 달력이 전체 월별 달력 리스트로 쪼그라드는 것이 바로 그 예시입니다. 이러한 연결성을 통해 고객은 제품을 그저 딱딱하고 감정이 없다고 느끼는 것이 아닌 생동감이 넘치는 하나의 대상으로 바라보게 될 것이며, 이를 통해 유저가 갑작스러운 다른 컨텐츠로의 전환으로 인해 당황하거나 길을 잃지 않게 되는 상황을 미연에 방지하는 것은 물론이고 제품이 작동되는 방식을 별도의 가이드라인 없이 명확하게 이해할 수 있다는 이점까지 노릴 수 있습니다.
효율적으로 상호작용하는 본질을 짚는 것 뿐만 아니라 이 상호작용을 위해 작동하는 움직임을 디자인하는 부분에서도 최근 들어 기억에 남는 사례가 있었는데 작년에 공개된 아이폰 14 시리즈의 다이내믹 아일랜드의 활용입니다. 상단에서 보시다시피 아일랜드가 서로 나뉠 때 물방울 하나가 톡 떨어져 나가는 듯한 묘사마저 세심하게 구현해냈는데 찰나의 순간에 반짝 지나가게 될 트랜지션에서조차 디테일을 구현한 정성이 참으로 인상 깊었어요. 디자인 잘하는 사람들은 디테일을 잘 보는 데에 능하다고 누군가 말한 적이 있는데, 이런 사소한 부분에서의 디테일까지 알뜰하게 챙겨서 그간 고수해온 디자인 철학을 구현해 내고자 하는 애플의 뚝심. 인정합니다.
물건 다루듯이
모바일 디바이스에선 다양한 제스처를 통해 사용자가 제품과 상호작용을 하는데 사실 우리가 행하는 거의 대부분의 제스처들 또한 실제의 경험에서 기인한 행위입니다.
대상을 누르 듯이, 질질 끌 듯이, 꼬집 듯이.대표적으로 버튼을 누르듯이 제품을 Tap 하는 것, 대상을 집어서 꼬집듯이 Pinch로 제품을 축소/확장시키는 것, 물건을 끌어오듯이 Drag로 대상을 밀어서 사용하는 방법 등이 있겠습니다. 애플은 실제 행동에서 모티브를 얻은 이 제스처들에 실제 물건을 다루는 듯한 감성을 추가로 한 스푼 더 얹었는데 이 지점은 다름 아닌 Drag를 이용하여 홈 인디케이터를 사용하는 방법에 있습니다. 아이폰 X가 세상에 등장한 2017년부터 애플은 전통적으로 아이폰에 꾸준히 탑재해왔던 홈 버튼을 과감히 제거하기에 이르렀고 이로 인해 홈 버튼과 유사한 기능을 취하면서 기존과는 전혀 다른 방식의 새로운 상호작용을 강구해야 했어요. 홈 버튼에 대한 대안으로 탄생한 것이 바로 홈 인디케이터인데 이 막대기 하나로 사용자가 제품을 이용할 때 실제로 물건을 쥐는 듯한 경험으로 느끼도록 설계한 것이죠.
인디케이터의 형태는 HIG의 Modality UI의 상단에 위치한 Handle의 모습과 유사해 보였어요. 이것은 핸들이라는 명칭에 걸맞게 손잡이의 역할을 하는 것은 물론이고 실제 손잡이의 형태와 유사하여 손으로 쥘 수 있다는 어포던스가 내포된 요소인데 워낙 오래전부터 사용 되어온 익숙한 개념인지라 존재만으로 ‘여기를 쥐면 조작할 수 있다’ 라는 멘탈 모델이 형성되기 때문에 유저들이 홈 버튼 대신 등장한 이 낯선 요소를 쉽게 인지하고 곧바로 사용할 수 있도록 제작한 것으로 보이네요.
Handle과 유사한 형태로 어포던스를 디자인 했듯이 사용 방법 역시 쥐고 들어올린다는 맥락이 유사합니다.핸들과 유사한 방식으로 고안함에 따라 사용자는 인디케이터를 손으로 쥔다 -> 대상을 들어 올린다 -> 기능이 작동된다 의 플로우로 이용하게 되어 앱 화면을 실체가 있는 물건을 쥐고 다루듯 관리할 수 있게 되는 것이며 과거의 스큐어모피즘을 도입했던 사례와 마찬가지로 기존에 존재하지 않았던 새로운 경험을 실제에 기반한 행위에 빗대어 표현한 애플의 솔루션에 다시금 감탄하게 됩니다. 모방은 창조의 어머니라는 말이 있듯이, 기존부터 답습해온 익숙한 방식을 재해석하여 기존에 없던 새로운 방식으로 창조한 것이고 이는 한 번 사용해 보면 쉽게 잊지 못할 독창적인 경험으로 남게 되어 지금까지 유구하게 이어지는 사례로 기억되는 것으로 보입니다.
대상을 당기는 인력, 대상을 밀치는 척력인디케이터로 앱을 들어 올린 후 작동시킬 수 있는 앱 전환기 기능에서의 경험도 주목할 법 합니다. 여기서는 인간 세계를 둘러싸고 있는 자연계에서의 물체가 가지고 있는 인력 (당기는 힘) , 척력 (미는 힘) 과 유사한 방식으로 인터랙션이 설계된 부분이 돋보였는데 이는 다음과 같습니다.
하단의 홈 인디케이터를 통해 앱을 집어 든 유저가 앱 실행을 유지하고자 할 땐 인력을 통해 앱을 끌어당기고, 실행을 종료하고자 할 땐 척력을 통해 앱을 멀리 밀어내는 방식이 바로 그것입니다. 이것은 자연계의 개념으로만 통용되는 것이 아닌 인간이 자신에게 필요한 것을 가까이 두려는 것과 필요하지 않은 것을 멀리하게 된다는 관계의 개념으로 보아도 실제의 행위와 매우 유사하게 보여요. 이를 수행하기 위해 유저가 거쳐야 할 액션 역시 인력은 사용자로부터 손가락으로 멀리 밀쳐내는 제스처로, 척력은 사용자 쪽으로 가까이 끌어오는 제스처로 설계하여 포용하다/멀리하다 라는 인간 생활에서의 인지 심리에 정확하게 부합하게 됩니다.
이목 집중
유저에게 꼭 필요하거나 숙지해야 할 사항을 콕 집어서 알려주는 사례도 있는데 이 역시 유저가 굳이 먼저 찾지 않아도 서비스가 직접 친절하게 안내해 준다는 점에서 좋은 인터랙션으로 보였습니다.
설정을 켜게 될 시 다른 항목들에 비해 늦게 등장하는 제안 컨텐츠가 가장 대표적인 예시인데 유저가 숙지하면 서비스를 이용하는 데에 큰 도움이 될 수 있는 기능을 가장 늦게 노출시키고 이를 적절한 타이밍의 트랜지션으로 구현하게 되어 유저의 시선은 자연스레 기능이 노출되는 곳으로 가게 됩니다. 이러한 행동 유도를 통해 고객의 이로운 사용 경험을 알아서 먼저 찾아주는 친절한 제품으로 보여질 여지가 있는 것이죠. 실생활에서도 무언가 홀로 움직이는 대상이 있을 때 인간은 당연히 그쪽으로 시선이 가기 마련일 텐데 이러한 인간의 원초적인 심리를 파악하여 제품에 반영한 사례이지 않을까 생각이 들어요. 단순히 컨텐츠가 노출 되는 주기를 늦추기만 했을 뿐인 간단한 방식인데도 유저는 이로 인하여 유의미한 정보를 곧바로 인지할 수 있게 되니 그야말로 작은 것이 참으로 크다고 느껴지는 예시죠.
도널드 노먼이 기고한 많고 많은 저서에서는 제품에서의 인터랙션에 대해 인간 중심적인 디자인이라고 정의해요. 앞서 본인이 언급했던 누군가 내 몸을 툭 치는 행위처럼, 어떤 사물이나 서비스에 대한 감정적인 교류를 통해 상호작용이 일어나도록 하는 분야가 인터랙션 디자인이고 노먼은 이 방식이 효과적으로 작용하려면 제품 중심이 아닌 인간 중심의 사고로 설계되어야 한다고 말했는데 이를 위한 전제에는 사용자가 제품을 자신의 언어로 작동 시키고 행동할 수 있어야 한다는 것과, 제품은 기존의 기계가 작동되는 논리를 사용자의 언어에 맞는 형태로 변환하여 제공해 줘야 한다는 것입니다. 이런 관점에서 보자면 iOS의 인터랙션은 그간 고수해온 친숙함이라는 명맥하에 수립된 디자인 철학을 꾸준히 유지했을 뿐만 아니라 실제 경험에서 기인한 설계를 통해 인간 중심의 효율적인 상호작용 방법을 구현해 내는 데에 성공했다고 봅니다. 브랜드의 철학과 사용성 두 마리 토끼를 모두 잡아낸 애플의 발자취는 어쩌면 세상 모든 디자이너가 가장 이상적으로 여기는 모습이 아닐까 싶어요. 예나 지금이나 앞으로 등장할 애플의 여러 제품이 기대가 되는 이유이자 애플을 사랑할 수밖에 없는 이유이기도 하고..
참고 자료
