BYOD 환경에서 모든 모바일 기기에 최적화된 차트와 그래프를 제작하세요

모바일 비즈니스 솔루션 개발의 주요 과제 중 하나는 최종 사용자가 사용하는 다양한 기기에 맞춰 디자인을 조정하는 것입니다. 각 모바일 운영체제는 가장 작은 스마트폰부터 가장 큰 태블릿까지, 다양한 화면 크기를 지원합니다. 또한, 다른 운영체제로 전환하면 모든 화면 크기가 다시 변경됩니다. 이러한 다양한 모바일 기기를 지원해야 하는 필요성은, 직원들이 개인 소유 기기를 사용하는 기업(BYOD)을 위한 모바일 솔루션 개발 속도를 늦출 수 있습니다.

Altova MobileTogether는 다양한 플랫폼에서 사용할 수 있는 모바일 개발 프레임워크로, 한 번 개발하면 여러 플랫폼에서 사용할 수 있습니다

Android
iOS
Windows 8
Windows Phone 8 운영체제
HTML5 기반 웹 브라우저 클라이언트

MobileTogether는 각 운영체제에서 지원하는 모든 화면 크기를 지원하며, 개발자의 생산성을 향상시키는 특수 기능을 제공합니다.

글로벌 변수가 해결책이 될 수 있습니다

MobileTogether Designer는 모바일 솔루션 개발 과정에서 다양한 용도로 활용할 수 있는 30개 이상의 전역 변수와 지역 변수 라이브러리에 대한 접근 권한을 제공합니다. 전역 변수는 정적이며, 솔루션 실행 중에 값이 변경되지 않습니다. 반면, 지역 변수는 동적이며, 특정 조건에서만 사용 가능합니다.

많은 전역 변수들이 모바일 솔루션이 실행되는 동안 해당 장치의 값을 저장합니다

글로벌 변수는 모바일 투게더 디자이너의 속성 창에서 직접 설정할 수 있으며, 또는 글로벌 변수를 포함하는 함수를 만들고, 그 결과에 따라 특정 동작을 정의할 수도 있습니다.

만약 디자인에 필요한 특정 변수를 찾을 수 없다면, 사용자 정의 변수를 직접 정의할 수도 있습니다. 물론, 이러한 변수들은 데이터 소스에 포함된 요소들 외에도 사용할 수 있으며, 함수 내에서 활용할 수 있는 값들을 담고 있을 수 있습니다.

변수 차트의 크기를 설정합니다

만약 "MT_DeviceWidth"라는 전역 변수를 속성 창에서 차트 생성 폭으로 지정하면, 실행 시 차트는 세로 모드로 사용되는 모든 기기의 폭을 자동으로 채우게 됩니다. 이는 기기의 모바일 운영 체제나 화면 크기에 관계없이 적용됩니다.

차트의 높이를 별도로 설정할 필요가 없습니다. 높이는 자동으로 조정되므로, 스크롤 없이 전체 차트를 한눈에 볼 수 있습니다.

글로벌 및 로컬 변수를 "장치 종속 가시성" 옵션(컨텍스트 메뉴에서 선택 가능)과 함께 사용하여 특정 조건에 따른 동작을 정의할 수 있습니다. 예를 들어, 세로 모드와 가로 모드에 따라 다른 동작을 설정할 수 있습니다. Altova MobileTogether 데모 서버의 "위젯 판매 데이터" 솔루션은 로컬 변수를 사용하여 장치 방향에 따라 차트 데이터를 다양한 방식으로 적용하는 방법을 보여줍니다. 예를 들어, "지역별 판매" 페이지는 세로 모드에서는 선 그래프를, 가로 모드에서는 3D 막대 그래프를 표시합니다.

"위젯 판매 데이터" 솔루션은 MobileTogether Designer에 함께 설치되는 예제에 포함되어 있으므로, 해당 예제를 살펴보면서 어떻게 만들어졌는지 확인할 수 있습니다.

$MT_DeviceWidth 변수로 정의된 차트는 기기가 회전해도 크기가 동일하게 유지되며, 아래 막대 그래프 예시에서 볼 수 있듯이 기기의 화면 공간을 효율적으로 활용하지 못합니다.

더 나은 대안은 $MT_CanvasX라는 전역 변수입니다. $MT_CanvasX의 값은 장치가 회전될 때 변경되며, 차트는 자동으로 다시 그려집니다. 만약 속성 창에서 "차트 생성 폭"을 $MT_CanvasX로 정의한다면, 차트는 가로 방향으로 화면에 더 잘 맞도록 더 깔끔하게 다시 그려지며, 수평 축을 따라 범례 텍스트를 표시할 공간이 더 확보됩니다.

다음 방법을 통해 차트 생성 과정을 보여주는 동영상 데모를 Altova 웹사이트에서 시청하거나, 무료 평가판을 다운로드하여 30개 이상의 예제 솔루션을 포함한 평가판을 사용해보고, 자신만의 차트 제작을 시작해 보세요!