핀터레스트의 충성고객으로서, 핀터레스트가 어떻게 사용자에게 UI와 UX로 다가가는지, 어떤 철학을 갖고 있는 지 분석해보려고 한다. 한 명의 사용자 입장에서 지극히 주관적인 내용으로 가득함을 말한다.

딱딱하지 않은 디자인

핀터레스트는 전체적으로 둥글둥글한 모서리 형태를 취하고 있다. 그래서 서비스가 전혀 딱딱해 보이지 않고, 이미지 중심의 서비스인 만큼 서비스 전체적으로 콘텐츠에 집중할 수 있게 된다.

심지어 버튼의 경우에도 좀 과하다 싶을 정도로 패딩이 들어가서 손가락으로 터치하기 매우 좋다. 실제로 애플의 Human Interface Guideline(이하 HIG)에서는 터치할 수 있는(Tappable) 영역을 최소 44x44pt로 설정하라고 권고한다. 물론, 보여지는 버튼의 크기는 매우 작게 만들고 터치 영역만 키우는 것도 가능하지만 핀터레스트는 시원한 패딩으로 이를 대응한다.

서비스의 특성이나 타겟 유저에 따라서 다르긴 하겠지만, 실제로 한국의 많은 서비스가 한 화면에 여러가지 글자와 버튼 및 각종 UIControl을 배치하는 것과 대조적으로 보인다.

애플스러움

핀터레스트는 iOS 스러움을 많이 갖고 있는 것 같다. 예를 들어서 상단부에 살짝 마진값을 주어서 인터랙션에 대한 힌트를 주는 것은 iOS13부터 도입된 모달 형태와 비슷하다.

실제로 핀터레스트를 사용해보면 저 상단의 여백이 직관적으로 Draggable한 느낌을 준다. 다만, 차이점이 있다면 iOS는 이전 페이지를 살짝 겹쳐 보여줌으로써 조금 더 입체적으로 보여준다.

그리고 핀터레스트가 훌륭한 점은 아이폰X 시리즈의 위 아래 노치 화면을 가득 채운다는 것이다. 개인적으로 단순하게 Safe Area를 이용하여 개발해서 위아래 단순하게 마진값을 남겨서 자르는 디자인을 별로 좋아하지 않는다. 물론, 노치를 채운다고 해서 더 많은 콘텐츠를 보여준다던가 하는 이점은 딱히 느껴지지 않지만, 모든 사용자의 기기를 고려한다는 것부터 섬세함이 드러난다.

제스쳐 인터랙션

핀터레스트에는 유독 제스쳐 인터랙션이 많이 들어가있다.

기본적으로 네비게이션의 동작 방식이 조금 다르다. 좌에서 우로 스와이프하는 iOS 기본 pop 애니메이션이 아니라 잡아서 끌어버리는 형태로 동작한다.

둥글둥글한 디자인과 핀터레스트의 이러한 동작 방식이 사용자에게 직관적으로 느껴지고, 모든 인터랙션이 서비스와 찰떡이라는 생각이 많이 든다. 디테일 페이지는 당연히 Push 애니메이션을 이용해야 한다고 생각했던 내 자신을 반성한다…

참고로 최근에 인스타그램도 네비게이션 방식을 이런 식으로 바꾼 것으로 알고 있다. 사용해보니 인스타그램도 편하기는 하다!

핀터레스트의 섬세함을 느낄 수 있는 또 다른 부분은 콘텐츠를 끌어서 이동할 때 해당 항목만 움직이는 것이 아니라, 뒤에 백그라운드로 깔려진 배경 또한 미세하게 확대/축소 된다는 점이다. 콘텐츠 자체가 이동하는 듯한 느낌을 주면서 페이지 레이어의 이동이 평평한 화면에 입체감을 부여한다. 위에서 언급 했던 iOS 모달과 다른 방식이지만 같은 목적으로 보인다.

Long Gesture Interaction

핀터레스트는 작은 More 버튼이나 각종 컨트롤을 항상 대체할 수 있는 인터랙션을 만들어 놓는다. 이마저도 시원시원하게 핵심만 딱 보여줘서 참 좋다고 생각한다.

이러한 제스쳐의 단점은 알려주지 않는 한 사람들이 알기 어렵다는 것인데, 이게 있다는 것을 한번 알게된 사용자는 계속 쓰게 될 정도로 편한 기능이다.

검색 화면 전환

검색 탭은 일반적으로 상단에 고정 검색 창이 있고, 그 밑에 관련/추천 내용을 큐레이션 해주게 디자인 된다. 그리고 검색탭을 누르면 화면을 아예 이동시키는 경우도 있고 그냥 그 밑의 내용을 갈아버리는 경우도 있다. 핀터레스트의 경우에는 화면을 Fade로 트랜지션 시켜버린다.

왜 그런 지는 모르겠으나 서치바 UI도 바꾸어 버린다. 아마 텍스트를 더 잘보이게, 쓸데없는 것들을 최소화하려는 핀터레스트의 생각이 담긴 것 같다.

마치며…

핀터레스트는 본질적으로 실물의 거래가 기반이 아닌, 가상의 공간을 제공하는 서비스이다. 나는 이런 경우, 애플리케이션이나 웹사이트의 UI나 UX가 정말로 중요하다고 생각한다.

많은 기업들이 디지털트랜스포메이션이라는 트렌드 뒤에 숨어서 단순히 웹사이트를 모바일 앱으로 옮긴다던가, 모바일 앱만이 갖을 수 있는 특성들(푸시 메세지, 햅틱 피드백, 모달, 스택의 푸시나 인터렉션 등)을 무시하고 만드는 경우가 많다. 모바일 애플리케이션에 대한 이해도가 매우 낮은 상태에서 단순히 트렌드만 좇아가기 때문이다.

실체가 없는 것이지만, 그것을 소프트웨어로 최대한 입체적이고 자연스럽게 구현하는 것이 가장 핵심이지 않을까. 그것을 핀터레스트는 참 잘하는 것 같다

이상 개발자이자 IT 서비스를 좋아하는 한 명의 사용자로써 바라본 핀터레스트 분석을 마칩니다.