당겨서 새로고침, Pull to Refresh UI를 모방한 브랜딩

초반 Pull to Refresh(당겨서 새로고침) UI, PC의 방식을 그대로

애플이 2007년 아이폰을 발표하고 2년 후, 2009년 드디어 아이폰이 한국에 상륙했습니다. 처음 아이폰을 접했을 때 '터치 기반의 UI가 제대로 작동이나 할까?'라는 의문을 품었지만, 지인의 아이폰의 빌려 터치 감도를 체험했을 때 감탄을 금치 못했던 게 생각나네요. 그 당시의 UI(User Interface)는 보조 입력 장치인 마우스와 키보드를 활용한 PC의 방식이 지배적이었습니다. 하지만 이제 내 손가락이 보조 입력 장치를 대신하게 되고 스마트 폰의 인터페이스를 더 직관적이고 쉽게 사용할 수 있게 된 거죠. 손가락으로 페이지를 넘기면 화면이 넘어가고, 손가락으로 페이지를 올리고 내리면 화면이 스크롤됐습니다. 보조 입력 장치가 없으니 내 손의 물리적 제스처로 인터페이스를 조작했습니다. 하지만 페이지의 새로고침만큼은 기존의 PC의 방식이 적용됐습니다. PC와 동일한 버튼의 형태로 버튼을 터치하면 화면을 새로 고치는 방식이었습니다. 

Pull to Refresh(당겨서 새로고침) 방식이 흥미로운 건 iOS 제작사인 애플에 의해 발명된 방식이 아니라는 거죠. 저는 이 부분이 굉장히 흥미롭습니다. 기존의 PC 방식에서 어떻게 지금의 당겨서 새로고침으로 변경되었을까요? 

세상에 없던 UI, Pull to Refresh(당겨서 새로고침)

Pull to Refresh(당겨서 새로고침)은 트위터의 클라이언트 앱인 Tweetie에서 처음 등장했습니다. Tweetie의 Brichter는 처음에 Tweetie를 개발하는 동안 응용 프로그램에 새로 고침 기능을 추가하고 싶었습니다. 당시의 다른 모바일 애플리케이션들은 화면의 모서리 한쪽에 새로고침 버튼을 두어 새로고침 기능을 수행할 수 있게 구성했습니다. 하지만 모서리의 한쪽은 탐색 및 작업을 함에 있어 UI에 가장 귀중한 공간이었기 때문에 새로고침 버튼 같은 평범한 버튼이 위치하는 것은 낭비처럼 보였습니다. Brichter는 중요한 코너 공간에 뭔가 다른 활용이 될 수 있도록 다른 방식을 만들기로 결정합니다. 처음에는 애플의 가이드를 따르는 UI 메커니즘을 만들 계획이었으나 Pull to Refresh(당겨서 새로고침)이라는 새로운 UI 메커니즘을 개발합니다. 

Brichter는 최종 버전을 출시하기 전에 Pull to Refresh(당겨서 새로고침)의 반복 실험을 진행했습니다. 처음에는 사용자의 화면에 Pull to Refresh(당겨서 새로고침)의 단서가 없이 스크롤할 때 새로고침을 진행했습니다. 그러나 이 실험에서는 사용자에게 새로고침이 발생하는 시각적 피드백을 제공하지 않았습니다. Brichter는 사용자에게 시각적 피드백을 제공할 필요가 있다고 생각했고 사용자가 제스처를 더 잘 이해할 수 있도록 시각적 피드백이 추가되었습니다. 마지막으로 페이지를 살짝 당기면 새로고침이 발생한다는 텍스트도 포함시켰습니다. 대부분의 사용자가 처음 접하는 UI이기 때문에 설명 텍스트를 포함시켰다고 밝혔습니다. 출시 이후 Tweetie의 Pull to Refresh(당겨서 새로고침) 방식은 사용자에게 많은 호평을 받았습니다. 이후 새로고침 기능은 Foursquare 및 Gowalla와 같은 위치 공유 서비스와 같은 수많은 iPhone 응용 프로그램에 등장했습니다. 그리고 Tweetie는 2010년 트위터에 인수되면서 Pull to Refresh(당겨서 새로고침) 방식 또한 트위터에 귀속됩니다. 트위터는 Pull to Refresh(당겨서 새로고침) 방식의 특허를 진행했지만 방어적인 목적으로만 사용하고 Pull to Refresh(당겨서 새로고침) 방식을 독점적으로 사용하지 않는 방식으로 결정한다고 밝혔습니다. 

Pull to Refresh(당겨서 새로고침)의 UI를 모방한 브랜딩

Pull to Refresh(당겨서 새로고침) 방식이 탄생한 지 10년이 지난 지금 이 방식을 대체할 수 있는 방식은 아직 없는 거 같습니다. 아마도 기존의 방식을 대체하기 위해서는 더 좋은 방식이 나와야 할 테지만 아직까지는 어려울 거 같네요. 하지만 Pull to Refresh(당겨서 새로고침) 방식을 모방해 브랜딩과 정보를 제공하는 사례가 몇 개 보이기 시작합니다. 흥미로운 건 새로고침이라는 방식이 필요 없는 화면에 이 방식을 모방해 브랜딩 요소와 정보 요소를 노출하는 방식으로 활용하고 있다는 점입니다. 사용자의 기존 무의식을 활용해 센스 있게 접근하는 점이 신선하다고 느껴집니다. 배달의 민족의 메인 화면에서 당겨서 새로고침을 진행하면 '땡겨요'라는 문구가 화면 상단에 노출됩니다. 그리고 음식 아이콘이 돌면서 나중에 '김치찌개 땡겨요'와 같은 문구로 마무리가 지어지는데요. 사실 배달의 민족 메인 화면에는 새로고침의 기능이 작동되지 않습니다. 이유는 리로딩할 콘텐츠가 필요가 없기 때문입니다. 화면을 새로고침 해도 새로 로딩되는 콘텐츠가 없습니다. 한마디로 메인의 콘텐츠는 배달 지역에 따른 고정 콘텐츠입니다. 그런데도 배달의 민족은 왜 화면을 당겼을 때 이러한 메시지를 넣은 걸까요? 배달의 민족은 초기 투자 시절부터 브랜딩과 마케팅에 엄청난 비용을 투자했습니다. 

배달이라는 핵심 비즈니스가 시장에서 주도적으로 소비자에게 인식시켰습니다. 그 방법으로 브랜딩과 마케팅을 활용해 배달이라는 비즈니스 이미지를 구축했습니다. 그런 브랜딩 DNA가 모바일 애플리케이션 UI에도 영향을 미친 거 같습니다. 배달의 민족 메인 콘텐츠는 새로고침이라는 기능이 필요 없음에도 화면을 아래로 당기면 배달의 민족 브랜딩 메시지가 마치 Pull to Refresh(당겨서 새로고침) 방식처럼 노출되게 구현했습니다. Pull to Refresh(당겨서 새로고침) 방식을 모방해 모바일 페이지를 스크롤하게 되면 우연히 브랜딩 메시지가 노출되도록 구성한 점은 좋은 아이디어 사례라고 생각됩니다.

그리고 또 하나의 사례가 있습니다. 바로 현대카드 애플리케이션입니다. 현대카드는 '현대카드 웨더'라는 날씨 앱을 이미 배포한 적이 있습니다. 날씨 앱이 한창 유행하던 시기가 있었습니다. 현대카드 웨더가 배포되던 시기 현대카드 정태영 부회장은 페북에 피드를 공유했는데요, 대충 이런 내용이었습니다. '날씨 앱을 왜 만드는지 모르겠지만 계속 못하게 하면 디자인팀이 삐질까 봐 승인했다는' 유머인지 진담인지 알 수 없는 내용의 피드를 올렸던 게 기억이 나는군요. 앱 디자인이 날씨 앱 중에는 최고였지만 결국 저도 자주 쓰지는 않았습니다. 현대카드 온라인 비즈니스에 어떤 연결점이 있어 보이지도 않고요. 최근 현대카드 앱을 사용하다가 날씨 앱의 정보가 현대카드 앱의 Pull to Refresh(당겨서 새로고침) 방식으로 적용되는 것을 보게 됐는데 나쁘지 않아 보였습니다. 

배달의 민족과 마찬가지로 새로 로딩되는 콘텐츠가 없음에도 Pull to Refresh(당겨서 새로고침) 방식을 모방해 정보를 제공하고 있습니다. 기존 앱의 정보를 가져와 메인 앱인 현대카드에 적용한 점은 괜찮아 보입니다. 날씨라는 정보는 데일리 정보이고 라이프 정보입니다. 그 정보를 메인 앱에 Pull to Refresh(당겨서 새로고침) 방식으로 적용한 것은 신선해 보입니다. 

UI 제스처를 브랜딩 요소로 활용할 수도 있다

Pull to Refresh(당겨서 새로고침) 방식은 모바일 디바이스에서 데이터를 로딩하는 메커니즘을 새로 정의하면서 탄생했습니다. 하지만 이제 그 경험을 모방해 브랜드 메시지나 데일리 정보를 라이트 하게 전달하는 방식으로 활용하는 사례를 종종 목격하곤 합니다. 이게 무슨 의미인가 하면 10년이 지난 UI 방식이 아직도 변화하고 진화하고 있다는 의미입니다. 새로운 방식을 만들어 내는 것은 매우 어렵고 대단한 일입니다. 하지만 기존 방식을 모방해 새로운 방식을 만들어 내는 것 또한 매우 훌륭하다고 생각됩니다. 새로운 것을 만들기 위해서는 기존 방식의 사고를 전환시키는 생각이 중요합니다. Pull to Refresh(당겨서 새로고침) 방식 또한 기존 애플의 가이드를 따르기보다는 새로운 고민과 사고를 활용해 탄생된 UI이니만큼 그런 사고력이 중요하다고 생각합니다. 또 기존 방식을 모방해 새로운 방식으로 활용하는 것도 좋은 아이디어가 될 수 있습니다. 

Pull to Refresh(당겨서 새로고침) 방식을 모방해 배달의 민족은 브랜드 메시지를 현대카드는 기존 서비스의 정보를 라이트 하게 노출하는 거처럼 말이죠. 그래서 배달의 민족과 현대카드의 Pull to Refresh(당겨서 새로고침) 모방 방식이 쉽게 지나칠 수 있는 사례이지만 흥미롭게 보는 이유이기도 합니다. 새로운 방식을 고민하는 것도 좋지만 기존의 방식을 활용해 새롭게 보여주는 것도 좋은 방법이 될 수 있습니다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.