적용버전 : XpressEngine 공통 XE 코어 모바일(Mobile) 웹(Web)

XE 코어 모바일(Mobile) 웹(Web)

XE 모바일은 모바일 웹(Web)

스마트폰과 아이폰이 등장하면서 앱(App)이라는 단어를 심심찮게 듣고 있는데 앱(App)이란 무엇일까요? 앱(App)은 application의 줄임말로 넓은 의미에서는 운영체제(OS)위에서 실행되는 모든 응용 소프트웨어를 말합니다. 운영체제란 윈도우 XP, 애플사의 맥 OS X 등과 같은 컴퓨터 운영 및 동작을 실행하기 위한 운영(시스템) 프로그램을 말하며 응용 소프트웨어란 시스템 소프트웨어를 제외한 한글, 워드, 엑셀, 웹브라우저 등과 같은 모든 프로그램이라 할 수 있습니다. 결국 스마트폰에서의 앱(App)이란, 모바일 운영체제를 제외한 모든 추가 설치 응용 소프트웨어입니다.

그런데 모바일 웹(Web)과 모바일 앱(App)은 분명히 다릅니다. 앱(App)은 위에서 설명드린 것처럼 XE 코어의 모듈, 또는 위젯과 같이 최소 단위의 프로그램(완성된 바이너리 파일)의 설치(install) 과정이 꼭 필요하게 됩니다. 그리고 사용자 단말기기의 운영체제 위에서 종속되어 작동하기 때문에 각 회사들의 단말기 운영 소프트웨어가 호환되지 않으면 공유될 수 없으며 버전의 차이에 따라 작동 및 운영이 불가능한 경우도 발생하게 됩니다. 반면에 모바일 웹(Web)이란, 기존의 웹브라우저를 활용한 HTML, 스크립트(Script) 언어를 그대로 사용하면서 설치나 배포(앱스토어와 같은)의 과정 없이 서버에 접속하는 것만으로도 의도한 목적과 작동 기능의 구현이 가능하고 따라서 웹페이지처럼 하나의 문서(소스)로도 다양한 웹브라우저와 단말기기에서 공통적으로 활용될 수 있는 "One Source Multi Use"가 가능하며 PC의 웹브라우저와 동일하게 작동하지만 표시화면이 조금 작을 뿐이라고 생각하시면 좋습니다.

서로의 장단점은 분명하게 다릅니다. 모바일 웹(Web)은 앱스토어처럼 배포 및 설치의 과정이 불필요하지만 무선인터넷 또는 3G, 4G, Wifi와 같은 무선통신기술을 이용해야 하기 때문에 웹페이지를 표시하는데 많은 데이터량과 속도의 문제가 발생하고 따라서 화려하고 멋진 UI(User interface) 개발이 어렵습니다. 반면에 앱(App)은 윈도우처럼 모바일 OS를 기본 바탕으로 확장되어 운영할 수 있기 때문에 빠른 반응 속도와 화려한 화면기능을 구성할 수 있으며 인터넷이 불가능한 경우(오프라인)에도 동작 및 운영(주소록, 앨범 등)이 가능하지만, 각종 단말기기의 OS 종류(iOS,Android,Windows Mobile 등) 및 버전에 따라 지원 가능한 기술적 적용 범위에 종속되어 각각 다른 앱 소프트웨어를 제작하고, 기술 검수 후에 등록, 배포해야 하는 어려움이 따르게 됩니다.

XE 모바일은 모바일 웹(Web)입니다. 따라서 HTML 문서로 작성된 웹페이지가 필요하며 이 문서를 돕는 CSS와 JS 문서를 모아놓은 레이아웃 디렉터리가 별도로 필요하고 XE 코어에서는 이것을 모바일 레이아웃(m.layouts)이라고 부릅니다. 이 디렉터리 역시 복수형으로 여러 종류의 모바일 레이아웃을 만들어 넣어 두고 기능과 쓰임에 따라 바꿔가면서 사용할 수 있습니다. PC 화면보다 작은 화면에 표시하는 방법을 고려해야 하기 때문에 페이지, 외부페이지, 게시판 등을 모바일 환경에 맞도록 기능과 구성(UI)을 조금씩 수정할 수 있어야 합니다. 또한 HTML5와 CSS3, Mobile jQuery 등을 활용하게 되면 모바일 환경에서의 웹페이지를 더욱 멋지고 알차게 표현할 수 있습니다.


XE 모바일 웹(Web) 동작 원리

PC 환경에서 웹브라우저를 이용해 XE 코어가 설치된 서버에 접속하거나 스마트폰, 아이패드 등의 모바일로 접속하는 경우 간섭쟁이 애드온이 꼭 참견을 합니다. "형님, 이 사람은 스마트폰으로 형님을 찾는데요?" XE 코어는 씩 웃으면서 대답을 합니다. "그래, 어떤 스마트폰인지 호패(?)를 확인해 봐! 그리고 모바일이 맞으면 내가 입을 다른 옷을 준비해 줘!"

image

간섭쟁이 애드온(Mobile Addon)은 접속 브라우저의 navigator.userAgent를 보여달라고 요구합니다. 그리고 userAgent에서 iPod, iPhone, Android, BlackBerry, SymbianOS, SCH 라는 문자를 발견하게 되면 XE 코어에게 모바일이 맞다고 이야기합니다. 그러면 XE 코어는 layouts 폴더에서 입을 겉 옷을 찾지 않습니다. m.layouts 폴더에 들어가 입고 나갈 다른 옷을 찾게 됩니다. 왜냐하면 layouts 폴더에 있는 레이아웃들은 DIV의 가로(width) 값들이 CSS 문서에 의해서 고정되어 있고(width:980px) PC의 모니터처럼 큰 화면에 적당한 레이아웃들뿐입니다. 반면 m.layouts 폴더에 들어있는 레이아웃은 320X480 픽셀의 작은 스마트폰 화면에 최적화된 레이아웃을 가지고 있기 때문입니다. 만약 모바일 애드온이 참견하지 않게 되면 XE 코어는 항상 layouts 폴더에서 레이아웃을 찾게 됩니다.


모바일 구성하기

1. 모바일 레이아웃
모바일 환경에서는 무엇보다도 화면의 표시 크기가 일반 PC 모니터보다 작기 때문에 웹사이트의 모든 내용을 포함하기에는 곤란할 수 있습니다. 또한 무선 인터넷 통신 환경을 고려하여 이미지 사용을 최대한 자제하고 데이터 트래픽 양을 줄여야 하는데 이렇게 모바일 환경에 알맞도록 만들어지는 레이아웃을 TEXT LAYOUT이라고 말합니다. 모바일 레이아웃은 페이지, 외부페이지, 게시판(board) 등의 컨텐츠를 모바일 환경에서도 PC와의 균형과 조화를 이루면서 충분한 정보를 제공하고 모바일의 고유 기능을 최대한 활용할 수 있어야 합니다.(예: 전화번호를 클릭했을때 통화시도하기 등)

2. 메뉴
기존의 사용중인 메뉴를 그대로 사용할 수도 있고 별도의 모바일용 메뉴를 구성하여 모바일 레이아웃과 연결해 사용할 수도 있습니다.

3. 페이지
페이지에 모바일을 적용하게 되면 페이지 구성을 위한 모바일(Mobile) 버튼/PC 버튼이 추가 되고 각각의 컨텐츠 내용을 별도로 작성할 수 있습니다. 모바일에서 보여질 페이지를 작성하지 않으면 기본 페이지 데이터(PC)를 재정렬해서 보여줍니다.

4. 외부 페이지
모바일 화면 구성을 위한 별도의 모바일용 외부 문서 위치를 추가로 지정하여 사용할 수 있습니다. PC로 접속하는 경우에는 외부 문서를, 모바일 접속인 경우에는 모바일용 외부 문서를 불러오게 됩니다.

5. 게시판(board)
게시판은 모바일 설정과 함께 추가 모바일 스킨을 적용해 데이터를 출력합니다. 게시판(board) 모듈에는 일반 스킨(skins) 폴더와 더불어 모바일용 스킨(m.skins) 폴더가 들어 있습니다. 레이아웃과 같은 방법으로 PC로 데이터를 요구받게 되면 skins 디렉터리에서, 모바일로 데이터를 요구받게 되면 m.skins 디렉터리에서 각각 게시판의 스킨을 적용하게 됩니다.


주의사항

모바일용 레이아웃(m.layouts)과 게시판 스킨(m.skins)을 사용할 때 꼭 고려해야 할 부분은 기본 레이아웃과 스킨을 그대로 적용하는 경우 최신버전의 코어로 업그레이드시 함께 수정/변경 될 수 있습니다.(덮어쓰기 주의) 기본 레이아웃과 스킨을 변경하여 사용해야 할 경우에는 반드시 다른 이름으로 복사한 후에 각각의 m.layouts/사용자모바일레이아웃/conf/info.xml과 board(모듈)/m.skins/사용자모바일게시판스킨/skin.xml 문서의 정보를 수정하여 사용해야 합니다.