[스마트정보화 시스템 연재02] 모바일웹 제작서비스(온바일, 위렌노데, 윈크사이트)

2012. 6. 28. 10:21교육



[스마트정보화 시스템 연재02] 모바일웹 제작서비스(온바일, 위렌노데, 윈크사이트)



 



회원가입형 모바일웹 제작사이트를 이용하면 손쉽게 무료 모바일웹을 구현할수가 있다.
국내사이트는 아직 없으므로 대표적인 해외사이트를 알아보면 위렌오데(wirenode.com),윈크사이트(winksite.com)온바일(onbile.com) 등이 있다.

 

 

1.외렌오데


   대표적인 모바일웹 제작서비스로 wirenode와 mofuse가 있다. 둘다 유료와 무료로 제공되고 있는데 wirenode는 몇가지 고급기능을 제외하고 무료로 운영되고 있지만, mofuse는 14일간만 무료로 모든 기능을 사용할수 있는 서비스를 하고 있다. wirenode에서는 모바일폼을 사용할 수 있는 Mobiode서비스까지 무료로 제공 해주고 있다. wirenode 서비스를 이용하려면 먼저 회원가입부터 하여야한다. 회원가입을 하면 모바일용 홈페이지 주소가 
http://ID.wirenode.mobi 형식으로 주어진다.

http://wirenode.com
 ->로그인 ->디자인선택->카테고리선택->QR코드 제공->my websites


* 10가지 주요기능은 노란별표(page active element)로 표시되어 있으며 다음과 같다

(1)RSS Blog Widget (2)Twitter Widget (3)Google Maps Widget
(4)Share in Social Media(Share Button-Facebook,Twitter,Slashdot,Digg,Delicious)
(5)Form Widget (6)Message Widget (7)Clock Widget (8)Invite email (9)Gallery Widget
(10)Wallpaper Widget

 

 

 

2.윈크사이트

    윈크사이트(winksite)PC웹사이트와 같이 모바일웹사이트를 가진 독립된 모바일용 홈페이지로 운영가능하다. 태그, SNS로 연결되어 많은 정보들을 열람해볼수 있다. QR코드 제공, SNS정보 제공(태그별 오픈링크)하며,대시보드에서 편집이 가능하다. 회원가입을 하면 모바일웹주소를 
http://winksite.mobi/Username1/Username2 로 제공해준다.
.
http://winksite.com ->회원가입(sign up)또는 로그인(sign in) ->create site 클릭(타이틀,URL,설명,기타설정)->Build Site 클릭->Dashboard 설정(로고 업로드,색상) -> 모바일웹 주소로 출력


 

3.온바일

    모바일용 홈페이지를 가장 간단하게 만들려면 무료로 제공되는 온바일서비스를 이용하는 것이다. 온바일 서비스는 하나의 웹페이지만을 제공하지만, 다양한 템플릿을 제공하고 있으며, 생성된 코드를 자신의 블로그나 홈페이지 index 파일의 다음에 넣어주면 된다.
만드는 순서는 다음과 같다.


http://onbile.com
 -> 로그인(아이디, 비밀번호)->

1단계:Account(비밀번호입력)

2단계:Design(템플릿선택:blackblog, 색상선택)

3단계:Content(RSS주소 입력, 로고업로드,이메일입력, 구글맵위젯)

4단계:Update(도메인입력)
->이메일로 온 인증주소로 삽입코드 복사후 index화일 다음에 붙혀넣는다.
온바일에서는 QR코드를 제공하지 않으므로 구글서비스를 이용하여 만들어 사용하면 된다.



 

 


 

 

Adobe사의 Dreamweaver CS5.5는 HTML5/CSS3를 지원하며,jQuery 통합사용가능하고,PhoneGap을 통해 기본 Android 및 iOS 앱 제작이 가능하게 되었다. 또한 Adobe사의 FlashBuilder4.5.1부터 아이폰 과 안드로이드폰 앱개발을 가능하게 되었습니다.
  JQtouch 와 JQuery 의 라이브러리는 모바일웹을 구현하기위한 것이다. JQtouch는 JQuery의 UI 라이브러리에 해당하며 JQuery 플러그인으로 분류하고 있다.
  JQtouch는 현재 1.0 베타3 버전이 배포되고 있고, JQuery는 현재 1.6.2 버전이 배포되고 있다.

http://www.jqtouch.com

 

 

http://jquerymobile.com

 

1.JQuery 사용환경설정

    JQuery 는 오픈소스 자바스크립트 라이브러리이다 JQuery 를 이용해서 스크립트 작업을 하면 웹 표준에 위배되는지 걱정하지 않아도 되며 매우 간단한 문법구조로 많은 처리를 할 수 있는 장점이 있다 또한 스크립트의 안정성도 뛰어나 결과적으로 스크립트 작업의 생산성을 극대화 할 수 있게 된다
JQuery 를 페이지에서 사용하려고 하면 JQuery의 기반 라이브러리를 페이지에 정의해야 한다 일반적으로는 JQuery 라이브러리를 직접 다운로드 해서 페이지에 삽입하면 된다



1) JQuery 라이브러리 파일을 직접 페이지에 삽입하기


http://docs.jquery.com/Downloading_jQuery
 에서 최신 버전 다운로드 받는다
(현재 최신 버전은 1.4.2 이다)

그리고 페이지의 head 영역에 해당 스크립트를 포함시킨다
{head}
{script type=”text/JavaScript” src=”jquery-1.4.2.js”}{/script}
{/head}
이제 해당 페이지에서는 JQuery 관련 기능을 이용할 수 있게 된다

 

2) 최소 버전 JQuery 라이브러리 사용하기
JQuery 라이브러리는 풀버전과 최소화버전 두 가지가 제공된다
최소화버전은 사이즈가 작은 대신 디버깅 환경은 제공되지 않는다는 특징이 있다
따라서 개발시에는 풀버전으로 하고 라이브 적용 때에 최소화 버전으로 변경하는 것을 생각해 볼 수 있다. 최소화 버전 역시 JQuery 홈페이지에서 다운로드 받을 수 있다
{head}
{script type=”text/JavaScript” src=”jquery-1.4.2.js”}{/script}
{/head}

 

3) 구글의 CDN 서비스 사용하기
CDN 서비스는 굉장히 빠른 속도로 컨텐트를 내려 받을 수 있는 환경을 제공한다
구글에서 JQuery 라이브러리 다운로드를 위해 CDN 서비스를 무료로 제공해 주고 있다
다음의 URL 이 JQuery 가 호스팅 된 곳이다
최소화 버전)

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

풀버전)

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

역시 이 URL을 head 에 스크립트로 명시하면 된다
{head}
{script type=”text/JavaScript” src=
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js}{/script}
{/head}
JQuery 서적에서는 구글의 CDN 서비스를 이용할 것을 다음과 같은 사유로 권장한다
- 안전하고 믿을 수 있다
- 다운로드가 빠르다
- 어디서나 사용할 수 있다(JQuery.js를 늘 들고 다니지 않아도 된다)

 

4) 마이크로소프트의 CDN 서비스 사용하기
마이크로소프트 역시 구글처럼 JQuery를 CDN 으로 무료 서비스를 제공한다
다음 URL이 그것이다

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

 

2. jQTouch – 사용환경설정
JQTouch 역시 심플한 웹 개발모델을 제시하며, 결국에는 자바스크립트, CSS, HTML 과 같은 기본적인 웹 개발 요소들이 사용될 뿐이다.
물론 jQTouch 라이브러리를 참조해야 하지만 이것 역시 자바스크립트의 범주이다.

 

1)jQTouch 라이브러리 다운로드
흔히 jQTouch 를 플러그인이라 표현 하지만 라이브러리라 표현해도 무방할 것이다
가장 먼저 시작할 것은 이 라이브러리를 개발 PC에 다운로드 하는 것이다.
아래의 링크에서 최신버전의 jQTouch 라이브러리를 다운받는다. 현재시점(2010.10.25) 기준 1.0 beta 2 버전을 다운받는다
http://www.jqtouch.com/
다운받은 파일의 구성은 jQTouch 라이브러리 파일, 테마 스타일 파일, 확장팩 파일, 데모파일 등이다
여기서 데모를 확인해 보면 참으로, 아이폰 앱 스타일에 적합하다는 것을 느낄 것이다

 

2)테마 선택(적용)하기
jQTocuh 는 jQuery 기반의 UI 라이브러리이다. 따라서 스크립트파일과 더불어 스타일을 정의한 CSS파일도 포함되어 있다.
스타일은 총 두개로 나누어져 있는데 jQTouch 테마와 Apple 테마가 그것이다
jQTouch 고유 테마는 검정색 바탕에 회색톤과 하얀 글자가 특징이다.
반면 Apple 테마는 아이폰 UI와 유사하게 청색 계열의 느낌과 흰 바탕 그리고 검정색 글자로 구성된다.
아래 두 화면에서 그 차이를 느낄 수 있다

 

 

두 테마 중 하나를 선택할 수 있는데 다운로드 받은 파일 중 theme 폴더에 각각 다음처럼 정의되어 있다

Apple 테마 : themes >apple >theme.css
jQTouch 테마: themes >jqt >theme.css
jQTouch 를 적용하는 우리의 웹 페이지에 (경로를 맞춰) 다음과 같이 스타일을 정의하면 된다
{style type=”text/css” media=”screen”}@import “./theme.min.css”;{/style}

그리고 기본적인 jQTouch 스타일을 정의한 파일은 jQTouch 폴더에 있는 jqtouch.css 파일이다
이 파일 역시 웹 페이지에 스타일로 정의해 둔다
{style type=”text/css” media=”screen”}@import “./theme.min.css”;{/style}


    3)jQTouch 라이브러리 참조하기

    일종의 핵심 엔진을 참조하는 것으로 jQTouch 스크립트 라이브러리에 대한 참조이다
jQTouch 폴더의 jqtouch.js 파일이 그것이다. 또한 jQTouch 가 jQuery 기반으로 작성되었기 때문에 jQuery 라이브러리의 참조도 필수이다. jQTouch 를 다운받은 폴더에는 친절하게도 jQuery 라이브러리가 포함되어 있다. 현재 jQTouch 버전은 jQuery 1.3.2 버전을 사용하고 있다. 아래와 같이 스크립트를 참조한다
{script src=”./jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8″}{/script}
{script src=”./jqtouch.min.js” type=”application/x-javascript” charset=”utf-8″}{/script}


    4)jQTouch 객체 생성으로 시작하기


      각종 기본 설정을 정의하는 일종의 초기화 과정을 객체 생성 코드로 정의할 수 있다
이 초기화 객체에 사용되는 매개변수를 보면 jQTouch 가 하이브리드 형태의 웹앱에 초점이 맞춰진 라이브러리라는 것을 간접적으로 알 수 있다. 예를 들어, 아이폰 바로가기 아이콘이라던지 로딩 화면등 웹앱의 구성요소 정의가 그것이다.


{script type=”text/javascript” charset=”utf-8″}
var jQT = new $.jQTouch({
icon: ‘jqtouch.png’,
addGlossToIcon: false,
startupScreen: ‘jqt_startup.png’,
statusBar: ‘black’,
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
{/script}
실행화면

 


5)설정 끝, div 엘리멘트와 id, class 속성들

  jQTouch 의 적용을 위한 기본 설정은 이것으로 끝이다.
이제부터는 Div 엘리멘트의 정의와 각종 HTML 요소 그리고 id, class 속성을 통한 형식 지정, 스타일 정의로 화면을 jQTouch 답게 구성할 수 있다.
지금부터가 jQTouch 라이브러리의 구체적 사용법을 알고 진행해야 하는 과정이다.
위 설정들을 포함한 가장 기본적인 jQTouch 기반 웹 페이지의 구성은 아래와 같다.

{html}
{head>
{meta charset=”UTF-8″ />

{style type=”text/css” media=”screen”>@import “./jqtLib/jqtouch.min.css”;

{style type="text/css" media="screen">@import "./jqtLib/theme.min.css";

{script src="./jqtLib/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8">
{script src="./jqtLib/jqtouch.min.js" type="application/x-javascript" charset="utf-8">

{script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'red',
preloadImages: [
'./jqtImg/back_button.png',
'./jqtImg/back_button_clicked.png',
'./jqtImgg/button_clicked.png',
'./jqtImg/grayButton.png',
'./jqtImg/whiteButton.png',
'./jqtImg/loading.gif'
]
});
{/script>
{/head>
{body>
{div id="home">
{div class="toolbar">
First jQTouch Demo
{/div>
{div>
Hello World!!!
{/div>
{/div>
{/body>
{/html}




KWMA 선교정보개발원 장원근원장의 스마트 미션 블로거 내용으로 허락받아 올립니다.