[하이브리드앱 만들기] 모바일 간단 게시판 #1

제목: Concept
최초작성일: 2014-12-23
최종수정일: 2014-12-23 이제 이틀만 지나면 크리스마스네요. 매년 이맘때쯤 "이번 일 년은 정말 빨리 지나갔어" 라고 생각하지만 올해는 더더욱 빠른 속도로 휩쓸고 지나가버린 느낌입니다. 예전에는 어른(?, 저도 지금은 어른입니다.)들께서 나이가 먹으면 시간이 빨리 간다고 말씀하셔도 무슨 말인지 공감할 수 없었지만, 결혼하고 육아하며 살아보니 그 말씀에 정말 백배공감 하게 되네요. 이제부터 간단하게 모바일 앱으로 게시판을 하나 만들어볼까 합니다. 앱이라고 해도 사용하는 언어는 Android Java도 아니고, iOS Objective-C 도 아닌 WEB으로 해보겠습니다. 하지만 이렇게 비즈니스를 구성하는 건 WEB 기술인 JavaScript 이지만 모양새는 Packaging한 앱의 형태여야 합니다. 그래서 Open Source인 PhoneGap을 사용해볼까 합니다. 그냥 Native에서 WebView를 하나 만들고 Web Page를 Load 해도 유사한 결과를 만들어낼 수 있지만, 그런 방법으로 개발할 경우 Native 개발을 많이 포함할 수 밖에 없는 형태가 됩니다. 우리는 일단 WEB Resource의 구성에 집중할 예정이므로 Open Source로 널리 사용하는 PhoneGap을 사용하겠습니다. 게시판을 구성하는 기본적인 로직은 일반 게시판과 동일합니다. 하지만 모바일에 맞는 UI를 구성해보는 부분과, Form Submit 형태가 아닌 Ajax 통신 기반으로 만들어보도록 하겠습니다. 어차피 Hybrid 라는게 내부에 있는 Contents 자체는 Web 이다보니 HTML로 게시판을 개발해보신 분들이라면 그다지 어렵지 않게 만드실 수 있습니다. 하지만 실제 프로젝트를 하게 되면 단말 별로 예상하지도, 기대하지도 않았던 이슈들이 프로젝트에 많이 참여하게 되므로 의외로 기초가 중요한 것 같습니다.

일단 전체 구성을 표현한 그림을 한 장 보고 가도록 하겠습니다.

1. Application 구성

일단 그림의 오른쪽과 같이 Local PC에 APM(Apache + PHP + MySQL)으로 간단한 웹 서버를 하나 구성합니다. APM은 아래 경로에 가시면 다운로드할 수 있습니다. http://www.apmsetup.com Hybrid Application은 WEB 기술로 구현하므로 WEB Resource의 위치에 따라 자연스럽게 두 가지 방법으로 나눌 수 있습니다. WEB Resource를 단말에 넣어서 Packaging하는 방법과 서버에 두어서 Package와 분리하는 방법입니다. 두 가지 방법에는 생각해보면 당연할 차이점 및 장단점이 존재합니다. 전부 나열하기는 힘드나 간략하게 표로 한 번 정리해 보겠습니다.

구분	서버 페이지 (1안)	단말 페이지 (2안)
장점	-. JSP / ASPX / PHP 등 화면을 서버 사이드 스크립트 방식으로 개발 가능함 -. 화면 수정 시 어플리케이션 재배포가 필요 없음 -. 어플리케이션이 모두 서버에 있으므로 상대적으로 보안성이 좋음 -. Package 용량이 가벼움	-. WEB Resouce가 단말에 있으므로 다운로드가 필요없어 빠름 -. 실제 업무 데이터만 다운로드 하므로, 데이터 사용량이 적음
단점	-. 페이지 실행 시 필요한 WEB Resource를 모두 다운로드 하므로 로딩이 느림 -. 모든 데이터를 서버에서 다운로드 하므로, 데이터 사용량이 많음	-. 화면은 HTML로만 구성 가능함 -. 화면이 수정되면 어플리케이션 전체를 재배포해야 함 (부분 배포를 위한 기능개발 필요) -. 어플리케이션 소스가 모두 단말에 있으므로 Reverse Engineering에 취약함 -. WEB Resource가 많을 경우 Package 용량이 커짐

장단점을 정리해보면 위의 표와 같습니다. 다시 시선을 위의 어플리케이션 구성으로 옮겨보면 우리는 Client 어플리케이션을 모두 단말에 두고, 필요한 데이터만 서버에서 AJAX 통신을 통해 가져오는 2안으로 개발하도록 하겠습니다. 일반적인 Native 어플리케이션의 경우 당연히 UI는 단말에 있으므로 우리도 일반적인 어플리케이션 개발 방식을 따른다는 의미로 2안으로 해보겠습니다. 1안의 경우는 페이지에 대한 업데이트가 잦거나 보안 솔루션 등이 많이 도입되어 Package 사이즈가 배포에 부담스러운 경우에 주로 사용하며, 일반적으로는 페이지 로딩 및 전환 속도가 빠른 2안을 선호합니다.

2. 프로젝트 구성

프로젝트 구성에 대한 부분은 [개발환경 구성] > [PhoneGap (Windows)], [PhoneGap (iOS)] 부분에 자세히 정리해 놓았습니다. 해당 메뉴를 참고하셔서 개발환경을 설치하고 프로젝트를 생성해서 IDE로 반입하면 됩니다. IDE로 반입하면 Windows / MAC OSX 모두 www라는 경로가 있습니다. 해당 경로가 우리가 개발하는 WEB Resource의 루트 경로이며 앞으로 개발하는 모든 파일은 www 기준으로 경로를 잡으시면 됩니다. 사실 프로젝트를 구성하는 목적은 PhoneGap 이라는 Platform을 이용해서 어플리케이션을 Packaging 하기 위함입니다. 우리는 일단 Packaging 은 제외하고 WEB Resource에 대한 부분만 Google Chrome을 이용해서 할 예정이므로 현재는 큰 의미는 없지만 개발하는 소스는 모두 www 경로 아래 두도록 하겠습니다.

3. Google Chrome 개발환경 구성

로컬에서 개발하는 JavaScript 기반의 어플리케이션을 Google Chrome으로 테스트하기 위해서는 옵션이 두 가지 필요합니다.
-. --disable-web-security
-. --allow-file-access-from-files
위 두 가지 옵션입니다. 먼저 --disable-web-security의 경우 Google chrome에서 제한하고 있는 Cross Domain에 대한 Scripting을 허용합니다. 우리는 Local에 있는 파일(Local 서버가 아닌 Local 파일입니다)에서 서버의 데이터를 요청할 것이므로 Google Chrome에서 제한하게 됩니다. (JavaScript의 Same Origin Policy와 별개로 Chrome에서 제한합니다.) 따라서 해당 옵션을 적용하여 Cross Domain에 대한 보안사항을 해제하여야 테스트 가능합니다.

두 번째 --allow-file-access-from-files 옵션입니다. Local에서 파일을 읽어오고자 할 경우 적용하여 해제해주어야 하나 우리는 사용하지 않을 예정이므로 적용하지 않아도 됩니다.

보안 옵션은 Windows에서는 바로가기에 적용하면 되며, MAC OSX는 터미널에서 실행 시 --args 옵션 뒤에 적용하면 됩니다. 정상적으로 해제되었을 경우 Chrome 브라우저의 상단에 아래 그림과 같은 경고가 표시됩니다.