[인터랙션] 페이지의 끝 피드백
모바일 UI의 애니메이션, 트랜지션 혹은 인터랙션에 대한 탐구
터치스크린을 사용하는 스마트폰에서는 터치 조작과 관련된 많은 화면 인터랙션들이 있죠. OS에서 제공하는 것들도 있지만, 여러 앱들이 각자의 컨셉에 맞는 화면 인터랙션을 제공하기도 합니다. 가끔 쓰다보면 새롭고 재밌어서 괜히 손가락으로 슥슥 문지르며 화면을 보기도 해요.
오늘은 그런 것들 중, 페이지의 끝을 나타내는 방식의 사례를 몇 가지 공유합니다. 더 정확히는, 다들 탄성을 적극적으로 활용한 앱들입니다. 그리고 페이지 끝 피드백의 방식과 연관될만한 앱에 대한 개인적인 의견도 약간 넣었습니다.
예전에 pxd의 무이님이 '아이폰 스크롤 UI의 고유한 멘탈 모델'에서 관련 내용을 설명한 적이 있으니, 흥미가 있으신 분은 읽어보시면 좋겠습니다. 그리고 넓은 접근에서 UI 애니메이션에 대한 생각을 적었던 'User interface의 애니메이션 & 트랜지션'도 읽어보시면 관심이 더 가실 것 같네요 :)
자, 그럼 시작합니다.
1. Yahoo News Digest
정보제공을 위한 앱에서는 잘 쓰지 않는, 과감한 사선이 돋보이는 레이아웃인데요. 이 앱의 목적은 한정된 양의 기사를 주기적으로 제공하고 그 안에 잘 정제된 풍부한 자료를 펼쳐주는 것입니다. 따라서 글의 대표 이미지가 중요한 역할을 합니다. 그야말로 글의 얼굴인데, 페이지 상단의 많은 부분을 차지하고 사선처리까지 되어 글의 영역까지 침범한 듯 보입니다. '사진도 글과 같은 비중으로 세심히 골랐으니 잘 봐줘' 라고 느껴지는데, 페이지 상단 끝에서 더 잡아당기면 사진이 확대되어 존재감을 더 높여주는 듯 보입니다.
2. Medium
진지한 글쓰기를 표방하는 서비스이죠. 앱이 나오기 전 이미 웹에서도 시원시원하게 이미지를 표시하는 레이아웃을 제공하고, 대표이미지를 부각시키는 디자인이었습니다. 모바일 버전은 Yahoo News Digest와 약간 닮기도 했는데 조금 정적인 느낌이 듭니다. 아마도 '아래 진지한 글 읽기 준비됐어?' 하는 정도의 들어가기 느낌으로 이미지를 하나의 장치로 넣은 느낌입니다. 이미지는 그대로 있고, 그 위에 중첩된 글 제목,부제,글쓴이,읽기 시간 등의 정보만 탄성을 가지고 움직이기 때문에 조금 더 무게감이 느껴집니다.
3. Path
소규모의 닫힌 SNS인 Path입니다. 아기자기한 인터랙션들이 많이 들어있는데요, 타임라인의 상단에는 자신의 타임라인 대표 이미지가 슬쩍 표시됩니다. 그리고 최상단에서 더 아래로 끌어내리면 대표이미지의 가려진 부분들이 더 보이죠. Yahoo News Digest와는 또 다른 느낌입니다. 앞의 것이 이미지 확대에 대한 탄성 효과를 주로 보여주려고 했다면, 이것은 가려진 부분을 슬쩍 보여주는 것과 이미지를 이동시키는 것에 대한 탄성을 주었죠. 매번 보게되는 이미지를 너무 거슬리지 않게, 또 심심하지 않게 보여주는 적절한 인터랙션입니다. 가끔 손가락으로 끄집어 내려서, '원래 사진이 어떤 모습이었지?' 하고 보기도 합니다.
4. Evernote
에버노트의 첫화면은 언제나 익숙해지기 힘든 느낌입니다 ^^ 여러 방식의 노트 작성 메뉴, 바로가기, 최근노트, 노트북, 태그 등 많은 것들을 빠르게 접근해주게 해야한다는 압박감이 느껴지기도 하는데요. 이 화면에서 페이지의 끝을 더 내리면, 각 요소들이 서로 멀어지며 공간이 늘어나는 탄성효과를 볼 수 있습니다. 마치 고무줄로된 팔찌를 늘리면 고무줄에 달려있는 장식들이 멀어지는 것처럼요. 이런 효과가 화면의 많은 요소들을 분리해서 인식할 수 있도록 어느정도 도와줍니다. 다닥다닥 붙어있던 요소들이 멀어지며 '이만큼은 노트, 저만큼은 노트북이야' 라고 말하는 것처럼요.
5. Passbook
이 앱은 딱히 설명하지 않더라도, 실제의 카드와 카드를 다루는 방식과 거의 유사하다는 것을 느낄 수 있습니다. (아, 이건 건전한 놀이를 할 때 느껴지는 것인가요 ^^;) 어쨌든 여러 카드가 겹쳐져 있을 때 카드를 인식하기 쉽게 도와준다는 측면이 있겠지만, 그것보다는 현실에 가까운 느낌을 주기 위해 사용한 인터랙션이 아닐까 싶습니다.
6. Safari
확실히 내가 보던 웹사이트들, 여러 탭들 사이를 탐색할 때라면 사이트 제목보다 그 화면을 보여주는 것이 효과적입니다. 마지막 기억과 함께 인식을 도와주는 용도로 가장 효과적이겠죠. 하지만 그렇게 하려면 표시 공간에 대한 트레이드오프가 생길 수 밖에 없는데요, Safari는 현실세계의 서류함을 메타포로 하여 적절하게 풀어냈습니다. 서류함에서 서류를 찾을 때도 하나하나 꼼꼼히 보지 않고 서류함 안의 서류들을 앞으로 슥슥 넘겨가며 찾듯, 대략적인 전체이미지로 파악할 수 있도록 했습니다. 그리고 페이지의 끝에 다다르면 입체감을 통해 그 메타포를 적극적으로 표현해서 리스트 방식을 이해할 수 있도록 도와줍니다.
앱의 주제,형식과 해당 앱의 인터랙션의 연관성은 저의 생각이니 다른 의견이 있다면 알려주세요 :)
* 이 글은 제가 2014년 pxd story에 쓴 글입니다. 이와 비슷한 UI 디테일에 관한 탐구나, UX디자인 전반에 관심이 있으시다면 pxd story 블로그를 찾아가 보세요!
