최근의 소프트웨어는 모바일을 기본으로 하고 있을 정도로 PC 기반 소프트웨어에서 모바일 기반 소프트웨어로 변화하고 있는 추세다. 모바일 소프트웨어도 스마트폰의 발달로 인해 다양한 형태로 개발되고 있는데, 소프트웨어 개발 프로젝트에서는 어떠한 형태로개발해야 하는지를 예산, 개발 기간, 사용자 분석 등을 통해 결정한 후 개발해야 한다. 이번 회에서는 모바일 소프트웨어의 종류와개발 방법에 대해 살펴보도록 한다. 개발 방법을 잘 이해하여 효율적인 모바일 소프트웨어 개발이 되기를 기대한다.
사례 연구 전 확인 사항
모바일 소프트웨어의 종류
모바일 소프트웨어의 종류는 네이티브 앱(Native app), 모바일 웹(Mobile web), 하이브리드 앱(Hybrid app) 등 3가지가 있다. 네이티브 앱은 모바일 운영체제에 따라 프레임워크가 선택되고 그에 맞춰 소프트웨어 개발이 이루어지기 때문에 디바이스에 최적화된소프트웨어를 만들 수 있지만 해당 모바일 운영체제 외에서는 구동되지 않는다. 모바일 웹은 모바일 디바이스 안에 있는 브라우저를통해 구동되기 때문에 모바일 운영체제와 상관없이 구동 되지만 브라우저가 지원하지 않는 기능은 구현되지 못한다. 하이브리드 앱은 이 두가지를 모두 지원하는 방식이다(그림1). 단순히 생각하면, 무조건 하이브리드 형태로 하는 것이 나을 듯 싶지만 만들고자하는 모바일 소프트웨어의 특성을 고려해 정하는 것이 좋다.
<그림1> 네이티브 앱과 하이브리드 앱의 개발 방식
출처: http://www.codejs.co.kr/mobile-web/
이 외에도 기술적으로는 웹 앱이지만, UI/UX를 네이티브 앱으로 구현하여 겉으로 보이기에는 네이티브 앱으로 보이도록 한 모바일웹 앱(Mobile web app)이 있다.
모바일 소프트웨어의 장단점
각 모바일 소프트웨어는 개발 방식에 따라 장단점을 가지고 있다. 그림2는 디바이스의 기능 액세스, 속도, 개발 비용, 스토어 활용, 개발 프로세스 별로 구분하여 나타내고 있다. 종합적인 부분을 살펴본다면 하이브리드 앱이 효율이 높은 것으로 나타나고 있다.
<그림2> 모바일 소프트웨어의 부문별 효과
출처: http://www.scribd.com
①네이티브 앱
아이폰, 안드로이드 폰, 윈도우 폰과 같이 모바일 디바이스에 직접 설치해서 사용하는 소프트웨어를 말하는 것으로 플랫폼 전용의SDK로 개발되고, 앱스토어나 마켓을 통해 배포되는 것이 특징이다. 장점으로는 모바일 디바이스가 가지고 있는 모든 기능을 사용할수 있다는 것과 자유로운 UI 구현이 가능하다. 실행 속도도 다른 방식보다 빠르지만 업데이트를 위한 배포가 스토어를 통해야 하기때문에 불편하고, 디바이스에 종속적이기 때문에 개발 비용과 유지보수 비용이 높다는 단점이 있다.
②모바일 웹
모바일 디바이스가 가지고 있는 웹 브라우저를 통해 접속하도록 만들어진 웹 소프트웨어로 기존의 웹 개발 기술로 개발할 수 있고설치할 필요없이 브라우저를 통해 바로 이용할 수 있다는 장점이 있다. 그리고, 배포가 편리하고 디바이스에 독립적이라는 점과 개발과 유지보수 비용이 비교적 낮다는 점도 장점이다. 단점으로는 디바이스의 기능을 사용하는데 한계가 있는데, 이는 사용자와 다양한 인터페이스를 유지해야 하는 모바일 특성상 한계가 드러난 단점이라 할 수 있다. 브라우저 기반으로 개발되기 때문에 UI를 구현하는데 제약이 있고 실행 속도가 느리다는 단점도 있다.
③하이브리드 앱
네이티브 앱처럼 설치해서 사용하지만 내부 기능은 웹 기술로 구현한 모바일 소프트웨어다. 플랫폼 전용의 SDK+ 웹 기술로 개발하고, 최소한의 기능만 네이티브 앱으로 개발하고 일반적인 기능은 웹으로 개발하는 특징이 있기 때문에 스토어를 통해 배포할 수 있다. 모바일 디바이스의 모든 기능에 접근할 수 있고 개발과 유지보수 비용이 낮다는 장점과 디바이스에 종속적이고 UI 구현에 제약이 있는 단점이 있다.
모든 경우에 하이브리드 앱으로 개발하는 것이 좋은 것은 아니다. 다음과 같은 형태는 하이브리드 앱을 사용해서 개발하는 것이 좋다.
- Android, iOS, Windows Phone 등 여러 모바일 플랫폼에서 작동해야 하는 경우 - GPS, 카메라, 통화 등의 모바일 기기 기능을 사용해야 하는 경우 - 인터넷 접속이 안 되는 상황에서도 작동해야 하는 경우 - 네이티브 앱에서만 얻을 수 있는 고성능의 그래픽이 필요하지 않는 경우 |
모바일 웹 앱과 html5
웹 기술을 이용해서 모바일 소프트웨어를 개발하고 서비스하지만 네이티브 앱처럼 보이는 웹 기반 소프트웨어로, CSS3를 이용하여네이티브 앱과 같은 UI/UX 제공한다. 모바일 웹과 같은 장점을 가지지만 사용자에게는 네이티브 앱과 같은 UI/UX를 제공하고html5 기술을 이용하여 모바일 디바이스의 기능을 사용할 수 있는 장점이 있다.
다양한 이유로 html5가 소프트웨어 개발 시장의 핵심 테마로 자리잡고 있다. html5를 적용하면 전자서명과 인증서까지도 서비스가가능하기 때문에 아직도 ActiveX가 동작하는 우리나라에서는 플래시나 액티브엑스의 대체용으로 관심을 받고 있는 것이 사실이다. 최근에는 애플이나 구글에서도 html5를 적극 적용하려는 움직임이 있어 html5의 기술 발전은 급속도로 빨라질 것으로 보인다.
Internet Explorer가 아직 주류를 이루는 PC 환경에서는 html5 지원이 미진하기 때문에 Firefox, Chrome, Safari 같은 브라우저를 통해서만 확인이 가능하지만, 모바일 환경으로 오면 얘기가 달라진다. 모바일 웹의 대부분을 차지하고 있는 것이 iPhone의 Safari와Android의 Chrome이기 때문에 이 두개의 플랫폼이 html5를 잘 지원하고 있기 때문이다. 그림3은 html5가 모바일 웹 앱 구조에서구동하는 것을 나타내고 있다. 그림3이 구동하는 방법에 대해서는 아래 사이트를 참고한다.
<그림3> html5 모바일 웹 앱의 구조
출처: Brian Fling’s how to design and development mobile web apps
<참고사이트>
<웹진 145호: 공학 트렌드> 모바일 html5를 통한 소프트웨어 개발 기술 변화 http://www.sw-eng.kr/member/customer/Webzine/BoardView.do?boardId=00000000000000030641&currPage=6 &searchPrefaceId=&titOrder=&writeOrder=®DtOrder=&searchCondition=TOT&searchKeywo rd=%EB%AA%A8%EB%B0%94%EC%9D%BC |
사례 연구
푸딩 얼굴 인식 앱
출처: H3 Developers Conference - 앱스프레소팀
푸딩 얼굴 인식 앱은 5500줄 이상의 자바스크립트, 2700줄 이상의 CSS, 200줄 이상의 네이티브 코드로 구현되어 있다. 그림4는푸딩 얼굴 인식 앱의 화면 인터페이스 구성을 나타내고 있다. 초기 화면(index.html)을 가지고 있으며, 페이지 번호(pageid)의 선택에 따라 액티브 페이지(Active page)로 보여주게 된다.
<그림4> 푸딩 얼굴 인식 앱의 화면 인터페이스 구성
그림4와 같이 여러 개의 화면을 두면서 페이지 이동을 하는 이유는 빠른 화면 전환과 효과를 위해서다. 이러한 작업을 위해서 자바스크립트와 CSS를 이용하여 화면 전환 효과를 나타내야 하고, 이 것을 단일 페이지에서 전환되도록 구현한 것이 그림5에 나타나 있다.
<그림5> 자바스크립트와 CSS를 이용한 단일 페이지에서 화면 전화 효과 코딩
그림6은 화면 전환 효과가 발생했을 경우 어떻게 동작하는지 설명하는 그림이다. 자바스크립트에서 API서버, 웹서버를 구동 시키고, 결과 데이터를 디바이스에 html 형태로 전송하게 된다.
<그림6> 화면 전환 효과의 구동 프로세스
브라우저 기반으로 개발을 한다면 html이 다시 읽히도록 화면을 리로드(reload)하는 방식으로 화면을 바꿔야 하는데, 이러한 방법은부하도 많이 걸리고 데이터 전송량도 적지 않게 된다. 모바일 웹 앱도 MVC(Model + View + Control) 형태로 화면 전환에 필요한필요한 부분인 뷰의 영역만 바꾸는 방법을 취하면 부하나 데이터 전송량이 낮아지는 효과가 있다. 그림7은 이러한 방법을 적용하기위해 그림5의 html을 수정한 소스 코드를 나타낸다.
<그림7> 모델과 뷰의 분리를 통한 html의 수정
모델과 뷰를 분리했던 것처럼, 뷰와 컨트롤러도 분리할 수 있다. 화면의 동적인 변화를 그림5에서처럼 자바스크립트에서 처리하는것이 아니고, CSS를 통해 처리한다면 UI개발단에서 자바스크립트를 호출해서 사용하는 경우의 수가 현저히 줄어들게 된다. 이러한효과는 뷰와 컨트롤러의 영역이 분리되기 때문에 UI개발자와 자바스크립트 개발자의 영역이 분리되게 된다. 그림8은 이러한 방법을적용하기 위해 그림5의 css를 수정한 코드이다.
<그림8> css의 수정
이러한 결과는 MVC 기반에서 생각해보면, 그림5와 같이 단일 페이지에서 구현할 경우에는 하나의 화면이 바뀌어도 M, V, C가 모두바뀌게 되기 때문에 구동에 많은 시간과 비용이 들고, MVC를 분리해서 구현할 경우에는 화면이 바뀔 때 M이 주로 바뀌기 때문에 시간과 비용이 현저히 줄어들게 된다.
위의 사례를 통해 알 수 있는 사항은 모바일 웹을 사용 중에 있지만, GUI(Graphic User Interface) 환경의 MVC 아키텍처 형태로 구현함으로써 사용자에게는 웹이 아니라 네이티브 앱으로 서비스를 받는 착각을 일으키게 된다. 웹이 가지고 있는 한계를 적절한 아키텍처 변형과 html5를 활용한다면 다양한 네이티브 기능을 활용할 수 있을 것이다. 하지만, 조심해야할 것은 모바일 웹은 웹일 뿐이다. 위와 같은 방법으로 구현하더라도 너무나 화려한 UI/UX를 사용한다면 모바일 소프트웨어에 많은 부담이 있을 수 있으니 주의해야 한다.
기대 효과와 결론
클라이언트/서버 기반의 소프트웨어가 주류를 이루던 PC에서 웹 기반의 소프트웨어가 인기를 얻은 이유는 개발, 배포의 일관성과편의성 때문일 것이다. 모바일 플랫폼에 따라 달리 개발해야 했던 모바일 소프트웨어는 모바일 웹과 하이브리드 웹 앱이 나타나면서일관성 있는 개발 방법과 다양한 기능 활용이 가능하게 되었다. 이러한 현상은 기존 모바일 소프트웨어 개발이 좀 더 체계적으로 변할 것이고, 체계적인 개발 방법들 속에서 더 효율성 있는 개발 기법들이 많아질 것으로 예상된다.
참고자료
ftp://ftp.software.ibm.com/software/kr/pdf/WSW14182_Native_Web_or_Hybrid_White_Paper.pdf
http://www.sw-eng.kr/member/customer/Webzine/BoardView.do?boardId=00000000000000039178&currPage=3&searchPrefaceId=&titOrder=&writeOrder=®DtOrder=&searchCondition=TOT&searchKeyword=%EB%AA%A8%EB%B0%94%EC%9D%BC
http://www.slideshare.net/infect2/html5-33930692
출처: http://www.sw-eng.kr/member/customer/Webzine/BoardView.do?boardId=00000000000000046530&currPage=&searchPrefaceId=&titOrder=&writeOrder=®DtOrder=&searchCondition=TOT&searchKeyword=