본 적이 있을지도 모를
앱 UI와 유사한 고급 웹 UI
디자인 5


오늘은 David Fay의 아티클을 공유합니다 :-)

주제는 모바일 웹 디자인 고급 UI에 대한 내용이에요. http://style.com/ 의 모바일 웹 사이트 UI를 예를 통해 5가지 고급 테크닉을 이야기합니다.

근래 추세를 보면 네이티브 앱 디자인과 같은 UI를 모바일 웹 디자인에서도 유사하게 구현하려는 흐름이 잦죠. 얼마 전까지는 네이티브 앱에 비해 느린 웹의 특성 상, 이를 구현하기는 매우 어려웠지만요. 하지만 웹 기술이 나날이 빠르게 발전하고 있어, 이제는 네이티브 앱과 웹 사이의 간격을 줄여가고 있습니다. 물론, 보다 빠르고 성능 좋은 모바일 디바이스의 등장이 이를 더욱 부추기고 있는 것이겠고요~

1. 기존 웹 기반의 캘린더 UI, 모바일에서는 이제 그만!

모바일 디바이스에서 기존 웹 기반의 캘린더 UI는 끔찍한 경험이었어요. 가뜩이나 작은 뷰포트에 많은 정보를 보여줘야 하는 달력 디자인이라니… 디자이너에게 이는 심각한 고민거리를 안겼습니다. 이런 고민을… 캐러셀(Carousel: 공항 수하물 컨베이너 밸트) UI 와 Javascript의 액션을 더함으로서 모바일 사용자 경험에 최적화된 캘린더 UI를 구현해내었습니다.

style.com 캘린더(calendar)

style.com 모바일 웹 사이트의 패션쇼 달력 UI는 작은 모바일 화면에서도 쉽게 날짜, 이벤트를 검색할 수 있어요. 2개의 캐러셀이 적용된 UI를 통해서!

2. 숨겨진 공간을 활용(Off-Canvas Flyouts UI)을 활용하라!

오프 캔버스 UI는 협소한 화면을 활용하는 적절한 경험을 사용자에게 제공해주었습니다. 상하좌우 모든 면을 활용하거나, 좌우 특정 면을 활용함으로서 쉬운 내비게이션(탐색)을 가능케 해주죠. 특히 쇼핑몰처럼 방대한 자료를 선보이는 서비스의 경우, 숨겨진 공간을 활용하는 UI는 더욱 선호됩니다. style.com 모바일 웹 사이트에서는 왼쪽 숨겨진 캔버스를 통해 사용자의 기록(history)을 보여주고, 오른쪽 숨겨진 캔버스에서는 주요 내비게이션을 배치시켜 놨습니다.

Off-Canvas UI

HTML5 로컬스토리지(localStorage)와 오프 캔버스 UI를 Mobify가 활용하여 개발한 자체 기술로 적용된 예죠. 이를 피카부(Pikabu)라 부르고 있습니다.

3. 작은 화면에서도, 이미지 갤러리는 시원 시원하게!

일반적으로 최적화된 모바일 웹 콘텐츠의 텍스트를 핀치 줌(Pinch Zoom)하여 확대/축소하여 보는 것은 적합하지 않지만… 이미지의 경우는 다릅니다. 텍스트와 달리 이미지 콘텐츠의 경우는 사용자가 좀 더 자세히 보고 싶어하는 경향이 있으니까요. 국내 모바일 웹의 경우, 이미지를 확대해 볼 수 없어 이미지를 크게 보려면 다운로드 받아 봐야 하는 불편함이 있죠. ☹

style.com 모바일 웹 사이트는 이 문제를 이미지 콘텐츠를 담고 있는 컨테이너(div)를 확대할 수 있는 기능을 적용함으로 멋지게 해결한 결과를 보여줍니다. 일반적인 뷰포트(Viewport) 확대/축소가 아니라, 컨테이너를 확대/축소한다는 점을 눈여겨 보세요. 핀치 줌 이벤트를 Javascript로 감지하여 이미지를 확대/축소할 수 있는 네이티브 앱의 기능을 그대로 모방한 결과입니다.

핀치 줌 UI

애플의 레티나 iOS 스마트 디바이스에서만 이 기술 적용이 가능하다고 이야기 하고 있어 아쉬움이 남긴 합니다. 아무래도 디바이스 픽셀을 처리하는 방법이 노하우인듯 한데요. 이미지 기능 확대 구현 부분은 인기 라이브러리 hammer.js를 사용했습니다.

4. iPad 이미지 갤러리 탐색과 유사한 이미지 캐러셀

성능과 탐색. 이 2마리 토끼를 모바일 디바이스 환경에서 잡는 것은 무척이나 어려운 일입니다. 하지만 바꿔 이야기하면 이를 구현해 냄으로서 고 해상도 화면을 활용한 네이티브 앱 UI 이미지 브라우징 경험을, 웹에서도 적용 가능하다는 거죠.

Issue 1. 성능

대부분 모바일 브라우저에서 발생되는 성능 문제는 페이지의 많은 요소를 렌더링과 관련됩니다. 렌더링이 과할 수록 CPU 사용량이 높아지니 다운될 확률이 높아지죠. 더구나 레티나 디스플레이를 지원하는 기기는 일반 이미지보다 2배나 크니 화면에서 보이는 이미지를 제외한 나머지 이미지 영역을 최적화해야 하는 과제가 주어집니다. style.com의 경우는 하나의 캐러셀 이미지 상에서 무려 80,000개 이상의 픽셀이 기록되었으니 그 면적이 어마 어마함이 느껴질 겁니다.

Mobify는 이 문제 해결을 고심한 끝에 비활성된 이미지 슬라이드를 최적화할 수 있는 라이브러리 Mobify.js를 개발했습니다. 이를 통해 전체 파일 크기 6.2MB를 10배 축소한 650KB만으로 이미지 캐러샐 한 페이지 구현이 가능해졌습니다. 놀라운 결과네요 :-)

Issue 2. 탐색

성능에 이은 고민거리는 바로 탐색. 이미지 탐색에 있어 신속하게, 쉽게 이동하려면 어떻게 해야할까?

gallery

결론은 이미지 캐러셀 그리드를 만듬으로서 사용자의 인터렉션에 따라 CSS를 변경하는 방법으로 이를 해결했습니다.

5. 네이티브 앱 같은 알파벳 리스트

협소한 모바일 뷰포트 상에서 항목이 긴 목록의 경우, 사용자가 스크롤 탐색하는데 있어 알파벳 인덱스는 매우 손쉽게 원하는 위치를 찾을 수 있도록 도와줍니다. 이 알파벳 인덱스는 애플의 아이폰에서 볼 수 있지만, 웹에서 이를 구현하는 일은 매우 어려웠어요.

알파벳 리스트 탐색 UI

하지만 style.com에서는 달력에서 사용한 기법과 iscroll.js를 활용하여 알파벳 인덱스를 멋지게 재현해냈습니다. 웹에서 말이죠.

결론.

모바일 앱 디자인과 유사한 UI 구현이 모바일 웹에서 실현 불가능한 것은 아니라는 사실. 방법을 모색하고, 실현을 도모한다면 모바일 웹 UI는 기존의 웹과 다른 새로운 사용자 경험을 제공할 수 있을 것이라는 점! 보다 나은 사용자 경험을 제공하는 UI 디자인은 모바일 앱과 웹이 서로를 모방하고, 모방하면서 상상 그 이상을 구현할 것으로 믿어 의심치 않음~ :-) UI 디자이너여 계속 계속~ 고민하고 연구하라! 어떤가요? 가슴이 두근두근 하지 않나요~? ㅋ

원문 아티클: http://www.mobify.com/blog/5-advanced-mobile-web-design-techniques-style-com/


Leave a comment