아이폰 스크롤 UI의 고유한 멘탈 모델

작년에 발표된 MacOS X의 메이저 업데이트인 lion (10.7) 을 설치하고 체감한 가장 큰 변화는 스크롤바가 사라진 것 입니다. 알록달록 스크롤바가 너무 싫었거든요. 오에스텐의 GUI 요소들은 맥하드웨어의 소재에 맞춰 변화했습니다. 맥북이나 아이맥에 아노다이징 처리한 알루미늄이 사용되면서 창의 타이틀이나 툴바는 매트한 금속 질감으로 바뀌었는데, 스크롤바 만은 유독 초기 iMac을 닮은 반짝이는 캔디 느낌의 아쿠아테마를 10년째 유지했습니다. 반짝거리는 썸이나 논두렁 처럼 깊게 패인 트랙은 창의 테두리도 없앤 미니멀한 다른 디자인 요소들과 조화를 이루지 못하고 부담스러워 보였습니다.

OSX snow leopard (10.6) vs. lion (10.7)

인디케이터 vs 컨트롤러

스크롤바는 현재 보고 있는 부분이 전체 페이지의 어느 위치인지, 썸의 길이를 통해 전체의 분량이 얼마나 되는지 가늠할 수있는 정보 표시와 스크롤바를 움직여서 원하는 위치로 바로 이동하는 컨트롤러의 두가지 역할을 합니다. 그러나 마우스 휠이 개발되고 터치패드에도 휠 스크롤 기능이 제공되면서 스크롤바를 잡아서 이동하는 경우는 거의 없어졌습니다. 원래는 조작이 쉽도록 충분한 크기를 가지고 있었던 것인데, 컨트롤러의 역할이 줄어들고 인디케이터 역할만 하다보니 과분한 공간을 차지한다는 생각이 듭니다. 부차적인 정보가 컨텐트 자체 보다 더 사용자의 시각적 주의를 빼았는다는 점이 더 큰 문제이기도 하고요.
피처폰들은 그래서 가느다란 스크롤바를 사용했습니다. 상하 키패드로 스크롤을 하니 인지가능한 최소한의 픽셀로 스크롤바를 표시 했습니다. 하지만 터치 스크린을 사용한 프라다 폰이나 윈도우즈 모바일에서는 스크롤 조작이 요구되어 보다 두꺼운 스크롤 바를 채용하게 됩니다. 휴대전화나 PDA처럼 작은 화면에서는 스크롤바가 차지하는 영역이 더욱 부담스럽지만요. 공간을 희생하며 크게 만들었음에도 작은 화면에서 스크롤바을 잡고 스크롤 하는 건 영 불편하기 짝이 없었습니다.

LG 샤인폰(2007.11), LG 프라다폰(2007.5), 삼성 T옴니아 - 윈도우모바일 6.1 (2008.11 )이미지 출처 세티즌

 

아이폰의 UI 혁신은 낡은 것을 과감히 버린 것

스크롤바를 키우자니 컨텐트 공간을 낭비하게 되고 스크롤바를 줄이면 조작이 어렵습니다. 모순되어 보이는 이 문제를 아이폰의 스크롤 UI는 스크롤바를 없애는 혁신적인 방법으로 해결했습니다. 스크롤바 같은 UI요소를 사용하지 않고 컨텐트 문서를 직접 밀어서 스크롤하게 하도록 했습니다. 문서를 잡고 스크롤하게 되면서 우선 조작 영역이 훨씬 넓어지니 사용이 편해졌고 (fitts's law) 터치의 움직임과 화면의 움직임이 일치해서 세밀한 조작을 할 수 있게 되었습니다.

지금은 너무나 당연하고 다른 방법을 생각할 수도 없지만 아이폰 이전에는 없던 방식이었습니다. 풀터치 스크린으로 보다 먼저 출시된 프라다폰이나 비슷한 시기에 출시된 삼성의 F700, 아이폰 출시 다음해에 나온 윈도우모바일 6.1 에서도 스크롤바를 사용했습니다. 아이폰 이후에 윈도우모바일을 탑재하고 나온 삼성의 옴니아나 HTC의 스마트폰 등은 이러한 제스쳐 스크롤을 제공하였지만 그건 윈도우모바일이 OS차원에서 제공하는게 아니라 제조사들이 만든 앱에만 구현해 넣은 것입니다. 앱 레벨의 구현 한계 때문에 비슷하게 동작할 뿐이지 반응이 매우 부자연스러웠습니다. 기본 탑재된 앱을 벗어나면 낯선 스크롤바를 만나게 됩니다.

안드로이드는 당시 스마트폰의 대세인 블랙베리 형태를 모델로 삼고 터치 인터페이스는 고려하지도 않았습니다. 스티스 잡스의 아이폰 발표 후 10개월이 지나서 세르게이 브린이 야심차게 오픈소스 모바일 OS 플랫폼으로 안드로이드를 발표할 때도 안드로이드는 쿼티 키패드를 사용하는 하드웨어 플랫폼 위주로 데모를 보여주었습니다. 터치스크린에서는 몇 개 앱에서의 일부 기능만을 보여주었는데 브라우저 패닝시에 화면이 느릿한 손가락도 따라오지 못하는 등 성능상으로 구현이 불완전했을 뿐 아니라 목록 선택이나 가상 키보드 같은 기본적인 터치 인터페이스도 준비되어 있지 않았던 것 같습니다. 데모에서는 북마크 목록을 선택하기 위해 터치스크린에서 터치가 아닌 하드웨어 키(트랙볼)를 조작하여 포커스를 이동합니다.

직접 조작으로의 전환

물론 아이폰 이전에도 포토샵과 같은 애플리케이션에서 hand tool 모드(손바닥 아이콘)에서 화면을 잡고 패닝을 하는 UI가 있었습니다. 하지만 그건 별도의 모드로써 동작하는 것이고 우리가 기본 모드로 사용하는 화살표 형태의 커서는 오브젝트(아이콘,텍스트) 선택이 우선입니다. 새로운 매체인 터치스크린을 처음 도입하면서 커서나 포커스를 통해 간접적으로 선택을 우선하는 기존의 GUI의 관습을 뒤엎기는 쉽지 않았을 것입니다. 모든 앱을 처음부터 다시 만들지 않는 이상 기존 앱과의 호환성을 고려하지 않을 수 없었을테고요.

애플은 스크롤을 위해서 선택 기능을 과감히 빼버렸습니다. 개선은 쉽지만 혁신이 어려운건 장점만이 아니라 기존의 것을 잃게되는 트레이드 오프가 따르기 때문입니다. 조직에서의 의사결정은 보수적인 경향이 있어서 기존의 것을 잃는다면 얻는 것이 더 크더라도 아이디어가 폐기되거나 보완하기 위한 장치가 덕지덕지 붙어서 원래의 명료함을 잃게되는 경우가 많거든요. 애플은 스크롤 특허의 개발 배경에서 밝히고 있듯이 폰이라는 작은 화면에서 정보를 표시하기 위해서는 패닝과 줌밍이 필수적이기 때문에 무엇보다 우선 해야 한다고 판단한 듯 합니다. iOS에서 텍스트 선택은 2년 뒤인 3.0에서나 구현됩니다.

스크롤바를 없애면서 잃게된 다른 여러 가지 중 하나는 조작을 하지 않을때는 위치 정보를 알 수 없다는 것입니다. 하지만 이는 처음 로딩시는 스크롤바를 보였다가 사라지게하여 전체 양을 가늠할 수 있도록 하고 조금 움직여보면 알 수 있기 때문에 심각한 문제는 아니었습니다. 책을 읽을 때도 얼마나 남았는지 남은 페이지 두께를 보거나 다음 챕터까지 페이지를 들춰보는건 자연스러운 동작이니까요.

화면을 잡고 움직이는 것이라 세밀한 조작이 가능하게 되었지만 그로인해 페이지가 길어지면 원하는 위치로 바로 이동하는 조작이 상당히 번거러워졌습니다. 스크롤바는 페이지 길이가 얼마나 되건 화면의 크기만큼만 움직이면 원하는 위치로 빠르게 이동할 수 있었던 반면에 한 페이지씩 계속 밀어 대야하니까요. 긴 페이지의 이동이 불편한 문제를 해결하기 위해 스크롤을 빨리 하면서 손을 떼면 관성에 의해 스크롤이 유지되는 flicking 제스쳐를 함께 제공하였습니다. 또 스크롤바는 가로와 세로만으로 반듯하게 움직이지만 화면을 손으로 잡아서 움직이다보면 삐툴삐툴 움직여서 글을 읽기 어려워집니다. 이 문제는 가로 세로로 약간 비스듬하게 움직이더라도 반듯하게 보정하는 것으로 해결 합니다.

tangible 스크롤 멘탈 모델

아이폰의 스크롤UI가 사실상 표준으로 다들 사용하고 있는 이유는 자연스럽고 직관적이기 때문일텐데요. 따로 학습할 필요없이 이미 경험적으로 알고 있는 지식에 기반한 사용자 멘탈 모델을 만들어내기 때문인 것 같습니다. 아이폰의 스크롤 UI는 화면에 보이는 페이지가 스크린 위의 픽셀 정보가 아니라 물리 법칙이 적용되는 가상의 평면적인 물리 공간에서 정말 만져지고 질량을 가지는 실체로써 존재한다는 환상을 만들어냅니다.

도널드 노먼은 두뇌의 작용에 따라 디자인을 3단계로 나누었는데, 이런 애플의 스크롤 멘탈 모델은 행동적인(behavioral) 단계가 아니라 보다 본능적인(visceral) 단계에서 형성되는 것 같습니다. 터치 스크롤은 구현 상으로는 단순히 손가락이 움직인 만큼 화면을 움직여 주어서 손 끝이 마찰에 의해 페이지에 딱 붙어서 밀고 있다고 느껴지도록 하는 것입니다. 요즘은 CPU가 빨라져서인지 개선이 되긴 했지만 안드로이드는 아키텍처의 문제인지 많이 더듬(stuttery)거려서 실제 물리 공간상의 물체라는 멘탈 모델을 형성하기 어렵습니다. 행동적으로 손가락을 따라 화면이 움직이는 건 같지만 미묘한 차이로 실제 물체를 잡고 움직인다는 느낌을 주지는 못합니다.

페이지의 끝까지 이동했을 때 효과인 bounce-back scroll 도 이런 멘탈모델과 관련이 있습니다. 페이지가 경계에 부딪혀 바로 멈추어 버리고 손가락만 미끄러지면 가상의 물리 공간이라는 모델을 형성하기 어렵습니다. 현실적인 물리 공간에서 이런 비탄성 충돌을 하면 더 격한 반응이 생기니까요. 안드로이드에서 사용하는 시각적인 충돌 피드백은 손 끝의 마찰을 이용해 민다는 촉각적인 모델에는 적합하지 않습니다. 또한 꽝하고 부딪히는 충돌이라는 피드백 자체가 부정적이고요. 아이폰은 탄성 스크롤을 모델에 적용하여 부드럽게 충돌을 흡수합니다. 끝에 다다르더라도 탄성에 의한 저항은 있지만 여전히 미는 방향으로 움직입니다. 소송에 사용된 bounce-back이라는 용어는 손을 떼었을때 되돌아오는 시각적인 효과에 집중하지만 충격을 흡수하고 탄성의 저항에 의해서 조금씩 손끝이 미끄러지는 의사 촉각 경험이 저에겐 보다 매력적이었습니다.

페이지에 표시하는 내용이 복잡해서 렌더링이 오래걸리는 경우에 페이지가 무겁다라는 표현을 쓰는데, 플리킹을 해보면 스크롤이 빨리 안되는 것이 마치 정말 무거워서 잘 안 움직이는 것 같은 느낌이 들게 합니다. 무거우면 같은 힘(운동량)으로 플리킹을 하더라도 빨리 안 움직이게(v=F·t/m) 되고 마찰력(Ff = μ·Fn = μ·m·g)도 커져서 금방 스크롤이 멈출것 같고요. 애플 특허에는 마찰력을 시뮬레이션 한다는 내용만 언급되어 있고 자세한 구현 방법은 없지만 일관된 동작으로 사용자가 이런 모델을 형성하는데 도움을 주고 있습니다. 저는 최신 안드로이드 단말이 나오면 항상 이 플리킹 테스트를 해보는데 여전히 만족스러운 단말을 만나지 못했습니다. 버벅거린다는 불만을 해소하기 위해서인지 빠르게 튜닝을 하긴 했는데, 에너지 법칙을 무시한 채 더 빨라지기도 하고 마치 마찰이 없는 우주공간에서 휙휙 날아다니듯 움직여서, 자연스러운 물리 현상이라고 느끼기보다는 인위적인 인터페이스를 의식하게 만듭니다. 경험적으로 알고 있는 물리 법칙을 위배하는 동작을 보이면 실제한다는 환상도 깨지고 메탈 모델도 만들어지기 어렵습니다.



아직 최종 판결이 난 것은 아니지만 애플과 삼성의 소송 결과를 해석하는 다양한 시선이 있는 것 같습니다. 저는 UI 디자인을 하는 입장에서 UI의 중요성이 부각되고 이슈화 되는 기회가 되어 우선은 의미가 있다고 생각하고 또 이제는 UI를 설계할 때 최선을 선택하는게 아니라 다른 것을 택하는 쪽으로만 위축이 되지 않을까 걱정이 되기도 합니다. 암튼 그래도 애플의 스크롤 UI 만큼은 보호받을 만큼 새롭고 진보적이라는 것은 인정합니다. 터치 인터페이스에서 가장 기본이 되는 스크롤만 봤을때, 다른 단말들도 기능적으로는 동작을 유사하게 흉내내고는 있지만 여전히 아이폰만큼 매끄럽게 분명한 멘탈 모델을 만들지 못하는 걸 보면 아이폰이 5년 이상 앞섰다는 스티브잡스의 호언장담이 허세만은 아니었구나 싶습니다.



*이 글은 Tech it! 에도 실린 글입니다.