Nexacro platform으로 OSMU 시스템 만들기
지난 ‘BUX모델이란?’ 연재를 통해 모바일 오피스와 기업용 UI의 One Source Multi Use(이하 OSMU)에 대해 알아보았다.
모바일오피스, 기업용 UI의 OSMU (연재)
1 : http://businessux.tistory.com/17
2 : http://businessux.tistory.com/18
3 : http://businessux.tistory.com/19
4 : http://businessux.tistory.com/20
5 : http://businessux.tistory.com/21
6 : http://businessux.tistory.com/22
7 : http://businessux.tistory.com/23
8 : http://businessux.tistory.com/24
9 : http://businessux.tistory.com/25
10 : http://businessux.tistory.com/26
이를 위해 투비소프트 제품 중 XPLATFORM과 nexacro platform은 하나의 컴포넌트가 여러 포지션 속성을 갖도록 하는 Multi Layout Manager(이하 MLM)라는 기능을 제공한다. 이 기능을 활용하면 특정 디바이스나 해상도에 맞춰서 미리 설정한 레이아웃을 보여줄 수 있다.
MLM 기능을 활용한 OSMU
지난 수 년간 여러 디바이스를 대응해야 하는 프로젝트에서 OSMU로 개발할지, 디바이스 별로 나누어서 개발할지에 대해 논의되는 것을 보았다. 간단히 생각하면 한번만 개발 하면 되고, 유지보수도 한군데서 하는 OSMU 방식이 선택될 것 같지만 현실에서는 후자가 주로 선택되고 있다.
그 이유는,
① 업무화면은 복잡하다. 웹, 앱과 다르게 다양한 기능과 많은 컴포넌트로 구성된다.
② 여러 디바이스에 대응하기 위해서 많은 리소스를 갖고 있어야 한다. 22인치 모니터와 5인치 스마트폰에서 보여지는 이미지를 하나로 제공하기에는 품질문제로 어려움이 있다.
③ 스마트 디바이스 스펙이 낮다. 특히 산업현장에서 사용하는 전용 디바이스는 최소한의 스펙으로 제작되는 경우도 많다.
이런 이유들로 OSMU 업무시스템 프로젝트는 대부분 성능 이슈를 겪었고, 다른 기술이슈와 함께 성능이슈까지 고민하고 싶지 않아 별도 프로젝트를 선택하는 경우가 많다고 볼 수 있다.
오늘은 큰 어려움 없이 마무리 된 프로젝트 경험을 바탕으로 MLM으로 인한 성능이슈를 최소화해서 OSMU 프로젝트를 진행하는 방법을 이야기해보겠다.
MLM이 어떤 기능을 갖고 있는지 알아보자.
MLM 개요 : 업무화면-레이아웃-컴포넌트
- 하나의 업무화면이 여러 개의 크기를 갖는다. 이를 레이아웃이라고 한다.
- 레이아웃에 따라 컴포넌트의 위치, 크기 값을 별도로 줄 수 있다.
- 한 레이아웃에서 컴포넌트를 지우면 모든 레이아웃에서 지워진다. (안보이게 하고 싶으면 Visible:false 속성을 이용한다)
- 컴포넌트에 적용된 이벤트나 개발 소스는 레이아웃과 상관 없이 전체 적용된다.
(보다 자세한 내용은 투비소프트 문의 : 1588-7895)
가장 먼저 OSMU로 개발하기 적당한 프로젝트인지 확인하자.
① 여러 디바이스에서 제공하는 기능과 로직이 동일한가? 다르다면 개발이 별도로 이루어져야 하므로 당연히, 프로젝트 역시 별도로 진행해야 한다. 같다면, OSMU로 개발할 수 있는 프로젝트다.
② UI가 너무 복잡하지 않은가? MLM은 하나의 화면을 순차적으로 볼 수 있도록 분할해주는 Step이라는 기능을 제공하므로 이론상으로는 매우 복잡한 화면도 작은 디바이스에서 표현할 수 있지만, 개발생산성과 사용성을 고려할 때 지나치게 복잡한 화면은 OSMU를 권장하지 않는다. MLM 기능을 잘 아는 기획자와 함께 검토하고 적용 여부를 검토하자.
여러 기능이 한 화면에 집약되어 복잡한 경우는 업무화면을 기능단위로 나누는 것도 좋은 방법이다.
MLM 기능을 잘 알고 있는 UI 기획자가 필요하다.
UI 기획자의 역할이 중요
UI 기획자는 MLM 기능에 대한 이해를 기반으로 각 컴포넌트의 배치만 수정하며 여러 디바이스를 기획한다. 또 프로젝트 초기에 투입되어 MLM을 활용한 OSMU의 사상과 주의점을 개발자와 디자이너에게 전파하는 매우 중요한 역할을 수행한다.
만약 MLM 기능을 활용하는 OSMU 프로젝트 경험이 없는 UI 기획자라면, 투비소프트를 통해 교육을 받고 진행해야 한다. 기획이 잘못되면 프로젝트 전체가 어려워질 수 있다.
단계별 주의할 점을 알아보자. (★★★★★)
① 기획단계
- MLM을 이용한 프로젝트가 익숙하지 않다면, 작은 화면부터 기획한다.
- 팝업에서 다시 팝업을 호출하지 않는다.
- 성능 이슈가 예상된다면 검색조건을 강화해서 조회 결과를 줄이는 것도 좋은 방법이다.
- 폼, 디비전 스크롤 보다는 영역을 접고 펴는 UI를 활용한다.
- 본 주의할 점을 참고하여 최악의 성능을 대비해서 기획한다.
② 개발단계
- 디비전을 최소화 한다. 디비전을 남발하는 것은 성능에 치명적인 영향을 준다.
- 기획, 디자인, 퍼블리싱 단계에서 성능이슈가 생길 수 있는 부분을 바로 공유하고 개선할 수 있도록 한다.
③ 디자인, 퍼블리싱단계
- 가능하면 디자인을 하나로 통일한다. 디바이스 별로 사용하는 색상과 이미지가 다르다면 리소스가 커질 수 밖에 없다.
- 이미지 사용을 최소로 한다.
- 이미지 크기를 늘리거나 줄여서(Stretch, imageedge) 사용하지 않는다. 이미지를 늘리거나 줄이는 것은 엔진이나 하드웨어에서 계산해야 한다는 것을 의미한다. 이는 화면을 다시 그리는 속도에 영향을 준다.
- 이미지의 투명한 부분을 최소화 한다. 이미지 크기를 늘리거나 줄일 때는 투명한 부분도 계산 대상이 된다.
- 움직이는 이미지(gif)를 사용하지 않는다.
- 보더에 라운드를 주지 않는다. (bordertype : round)
- 그림자를 사용하지 않는다. (shadow)
- 색상 값에 투명도를 사용하지 않는다. (#0000004f), 투명이 필요하면 opacity 속성으로 입력한다.
위 주의점들은 강제사항이 아니다. 각각은 성능에 큰 영향을 미치지 않는 경우가 많다. 하지만 다수가 누적되면 화면이 끊기는 등의 성능이슈가 발생할 수 있으므로 사전에 대처하는 것을 권장한다.
MLM을 활용해서 OSMU 프로젝트를 진행하는 것은 생각보다 어렵지 않다. 위의 내용만 잘 알고 진행하면 큰 성능이슈 없이 결과물을 만들어낼 수 있을 것이다. 더욱이 MLM은 nexacro platform의 핵심기능 중 하나로 연구소의 지원도 매우 적극적이다. 만약 MLM을 활용한 OSMU 프로젝트를 고민하고 있다면 걱정 말고 시작해보자.
