> 견적문의
 
작성일 : 18-12-19 18:14
모바일 기기의 인터넷 트래픽 비중
 글쓴이 : rtwtysk4472
조회 : 1  
일본서버호스팅 일본서버
일본서버 일본서버임대 일본IDC 일본가상서버 일본클라우드 일본VPS
일본VPS 일본서버추천 일본호스팅 모바일 기기의 인터넷 트래픽 비중이 PC의 인터넷 트래픽 비중을 앞지를 정도로 사람들은 PC에서보다 모바일 기기에서 웹 서비스를 더 많이 사용하게 됐습니다. 이런 변화가 웹 서비스의 UI에도 많은 영향을 끼쳤습니다. 변화에 영향을 받은 대표적인 UI로 스크롤과 캐러셀(carousel)이 있습니다. 스크롤과 캐러셀은 PC 환경에서도 많이 사용된 UI지만, 모바일 환경에서 중요도가 더 커진 UI입니다. 작은 모바일 기기의 화면에서 더 많은 콘텐츠를 사용자에게 제공하려 할 때 스크롤과 캐러셀은 굉장히 효과적으로 많은 양의 콘텐츠를 제공할 수 있습니다. 더구나 터치라는 모바일 기기의 사용자 경험에 익숙해진 사용자들에게 스크롤과 캐러셀은 자연스럽게 콘텐츠를 소비할 수 있게 하는 UI입니다. 스크롤 UI 캐러셀 UI 네이버의 서비스에서도 스크롤과 캐러셀을 사용하고 있고, 심지어 네이버 모바일 서비스는 전체가 캐러셀로 구현됐습니다. 네이버 모바일 서비스 네이버 서비스에 구현된 스크롤 UI와 캐러셀 UI의 대부분은 내부적으로 egjs 라이브러리의 모듈인 eg.Axes를 사용합니다. 네이버 서비스는 실제로는 egjs 라이브러리의 모듈인 eg.MovableCoord을 내부적으로 사용합니다. eg.Axes는 eg.MovableCoord를 바탕으로 egjs 2.0 버전에서 새롭게 만든 라이브러리입니다. 이 글에서는 스크롤과 캐러셀 같이 사용자 액션에 반응하는 UI를 위한 라이브러리인 eg.Axes를 개발하면서 겪은 경험을 소개하겠습니다. eg.Axes는 무엇인가 eg.Axes는 '사용자의 입력'을 '범위를 갖는 여러 개의 축'으로 변환하는 컴포넌트다. eg.Axes의 기능 다음의 "What is the eg.Axes?"데모를 살펴보자. ?"What is the eg.Axes?" 데모: https://naver.github.io/egjs-axes/#what-is-the-egaxes PC에서는 마우스와 마우스 휠을 사용해 egjs 로고를 이동하거나 확대, 축소할 수 있다. 모바일 기기에서는 손가락으로 끌거나 손가락을 오므리고 벌려서 egjs 로고를 이동하거나 확대, 축소할 수 있다. What is the eg.Axes? 데모 eg.Axes를 사용하면 다양한 입력 장치에서 전달된 정보를 축 정보로 변환할 수 있다. 변환된 축 정보를 바탕으로 DOM을 제어하면 '사용자의 다양한 입력에 반응하는 UI'를 손쉽게 만들 수 있다. 왜 eg.Axes를 만들었나 스크롤 UI와 캐러셀 UI는 egjs와 eg.Flicking 모듈로도 구현할 수 있다. 하지만 비슷하면서도 다른 두 UI의 특성 때문에 새로운 컴포넌트를 개발해야 할 필요가 있었다. 비슷한 듯 다른 스크롤과 캐러셀 스크롤 UI는 사용자의 입력 방향에 따라 콘텐츠를 움직인다. 마우스 포인터나 사용자의 손가락이 오른쪽에서 왼쪽으로 이동하면 콘텐츠의 위치도 오른쪽에서 왼쪽으로 이동한다. 이때 사용자의 입력 시간과 이동 거리에 따라 애니메이션으로 이동할지, 그냥 콘텐츠의 위치만 바꿀지 결정한다. 수하물 컨베이어나 회전목마처럼 구성 요소가 순환하도록 만든 캐러셀 UI도 마찬가지로 사용자의 입력 방향에 따라 콘텐츠를 움직인다. 마우스 포인터나 사용자의 손가락이 오른쪽에서 왼쪽으로 이동하면 콘텐츠의 위치도 오른쪽에서 왼쪽으로 이동한다. 스크롤과 다른 점은 사용자의 입력이 멈춘 이후 현재 이동한 거리의 위치에 따라 다음 콘텐츠 영역(패널)으로 이동할지 현재 패널로 되돌아 갈지 결정해야 한다는 점이다. 이동할 패널이 결정되면 애니메이션으로 이동한다. 스크롤과 캐러셀의 작동 방식 이와 같이 스크롤과 캐러셀의 작동 방식을 자세히 살펴보면 두 UI의 작동 방식이 비슷하다는 것을 알 수 있다. 사용자의 입력을 받고 애니메이션으로 콘텐츠를 이동하는 부분은 동일하다. 반면 사용자의 액션이 끝난 이후의 동작은 조금 다르다. 이런 약간의 차이 때문에 컴포넌트를 각각 개발했었다. 하지만 유지 보수에 상당한 비용이 든다는 문제가 있었다. 브라우저 파편화 문제가 발생하거나 기능에 문제가 발생했을 때 동일한 목적의 코드를 매번 각각 다른 컴포넌트를 위해 개발해야 했다. 요구 사항이 다른 스크롤과 캐러셀 서비스에서는 항상 사용자에게 보다 좋은 사용자 경험을 제공하고자 한다. 스크롤 UI는 패럴랙스(parallax) 스크롤처럼 화려한 효과를 제공하거나, 끌어서 새로 고침(pull to refresh)과 같은 기능을 제공한다. 끌어서 새로 고침 캐러셀 UI는 3D 효과나 이미지 회전과 같은 기능을 제공한다. 3D 효과의 캐러셀 하지만 이런 다양한 사용자 경험을 제공하는 UI는 기존의 스크롤 컴포넌트와 캐러셀 컴포넌트로는 개발하기 어렵다. 결국 새로운 효과를 구현하기 위해서 새로운 컴포넌트를 만들거나, 일관성이 떨어지는 옵션과 기능을 기존 컴포넌트에 추가하는 작업을 해야만 했다. 다양한 사용자 입력 PC에서는 사용자 입력 방법이 마우스와 키보드를 이용한 입력만 있다. 하지만 모바일에서는 사용자 입력 방법이 매우 다양하다. 터치스크린부터 키보드, 기기의 방향, 기기의 움직임, GPS를 이용한 위치 이동 등 굉장히 많은 입력 방법이 있다. 터치 입력에도 오므리고 벌리기(pinch), 쓸어 넘기기(swipe), 살짝 누르기(tap) 등 여러 가지 제스처가 있어 이를 분석하고 처리하는 것도 결코 쉬운 일이 아니다. 더구나 기기가 계속 발전하면서 계속 추가되는 사용자 입력 방법을 처리하기는 더욱 어렵다. eg.Axes는 어떻게 해결했나 다음과 같은 세 가지 방법으로 앞에서 언급한 문제를 해결할 수 있었다. 첫째, 스크롤 컴포넌트와 캐러셀 컴포넌트에서 동일하게 사용하는 부분을 '사용자 입력을 인지'하는 부분과 콘텐츠를 이동할 때 사용하는 '애니메이션 부분'으로 공유하게 했다. 이로써 개발 및 유지 보수에서 발생하는 비용 문제를 해결했다. 둘째, 사용자의 입력을 축 정보로 표현함으로써 스크롤 UI와 캐러셀 UI의 디자인 제약을 해결했다. 변환된 축 정보를 바탕으로 DOM을 변경함으로써 사용자의 입력에 반응하는 다양한 UI를 손쉽게 만들 수 있게 되었다. 셋째, 다양한 사용자 입력을 받을 수 있는 플러그인인 inputType 플러그인을 제공했다. 터치나 마우스뿐만 아니라 기기의 방향, 기기의 움직임과 같은 입력 유형도 플러그인으로 만들 수 있다. inputType 플러그인을 사용하는 방법에 관해서는 "자신만의 eg.Axes InputType은 어떻게 만드는가?"를 참고한다. eg.Axes로 무엇을 할 수 있나 eg.Axes는 사용자의 다양한 입력을 다수의 축 정보로 변경한다. 개발자는 이 축 정보를 바탕으로 DOM을 제어할 수 있고, 사용자 입력에 반응하는 UI를 손쉽게 만들 수 있다. 다음은 eg.Axes를 사용해 마우스나 터치 입력을 0~360 사이의 값으로 변경해 활용한 예다. ?"Car 360º viewer" 데모: https://naver.github.io/egjs-axes/#car-360º-viewer Car 360º viewer 데모 UI와 관련된 변경은 eg.Axes의 change 이벤트에서 처리하고 있다. // 1. Initialize eg.Axes const axes = new eg.Axes({ angle: { range: [0, 360], circular: true } }); // 2. attach event handler axes.on("change", ({pos}) => { const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum - 1); images.map((v, i) => { v.style.display = i === index ? "inline-block" : "none"; }); }); // 3. Initialize a inputType and connect it axes.connect("angle", new eg.Axes.PanInput(".car_rotate")); 다음은 2개 축을 사용해 회전하는 큐브 모형의 UI를 만든 예다. ?"Rotate a Cube" 데모: https://naver.github.io/egjs-axes/#rotate-a-cube Rotate a Cube 데모 3개 축을 사용하면 확대, 축소가 가능한 지하철 노선도도 간단히 만들 수 있다. ?"Subway Map" 데모: https://naver.github.io/egjs-axes/#subway-map Subway Map 데모 eg.Axes에 관한 더 자세한 내용은 eg.Axes 사이트와 GitHub 저장소를 참고한다. - eg.Axes 사이트: https://naver.github.io/egjs-axes - GitHub 저장소: https://github.com/naver/egjs-axes - 이슈 관리: https://github.com/naver/egjs-axes/issues 마치며 UI 컴포넌트를 다루는 오픈소스는 굉장히 많다. 대표적인 스크롤 컴포넌트로는 Matteo Spinelli가 만든 iScroll이 있다. GitHub에서 9,900여 개의 'Star'를 얻을 정도로 많은 사랑을 받고 있는 오픈소스다. 캐러셀 컴포넌트를 다루는 오픈소스는 스크롤 컴포넌트를 다루는 오픈소스보다 더 많다. Bootstrap과 jQuery 플러그인, Slick, OwlCarousel 등 정말 많은 오픈소스가 있다. 하지만 이런 컴포넌트로는 사용자 입력에 반응하는 UI를 개발할 때 제약이 많다. eg.Axes는 이와 달리 다양한 사용자 입력 형태를 지정할 수 있고, 여러 개의 축을 지정해 다양한 형태의 UI를 구현할 수 있다. 입력 형태를 신경 쓸 필요 없이 UI를 그리기만 하면 된다. eg.Axes로 상상하는 UI를 마음껏 구현해 보기를 바란다.

 
   
 





대표자 : 정재일 I 주소 : 경기도 안양시 동안구 시민대로 248번길 25 ,경기창조산업 안양센타 801호 I 사업자등록번호 : 123-86-22183
상호명 : ㈜엘프테크 I TEL : 031-348-2300 I FAX : 031-348-2400
copyrightⓒ2013 ㈜엘프테크 all rights reserved.