스마트폰UI 기법 익히기
1. 모바일 UI 프레임워크
사용자 경험(User Experience, 이하 UX)가 중요시
모바일 웹 = HTML5 + 모바일 UI 프레임워크
모바일 UI 프레임워크를 사용하면 네이티브앱과 UX가 거의 비슷해진다.
모바일 UI 프레임워크는 대부분 오픈 소스로 개발 되고 있다.
그 중 가장 유명한 것이 JQuery Mobile과 Sencha Touuch 모바일 이다
2.JQuery Mobile을 배워보자
특징
Write less, do more - 최소 작업으로 더 많은 효과를 얻을 수 있다.
자바스크립트를 전혀 모르더라도 HTML5 와 CSS3 로 만들어진 기존의 페이지를 손쉽게 변경이 가능하다.
최신의 UX를 제공 받을수 있따.
가장 많은 디바이스를 지원한다.
Ajax와 DOM을 사용하여 페이지를 직접 관리 한다.
Ajax(javascript + xml 통합 기술) 사용하여 페이지를 DOM(Document Object Model) 에 차곡 쌓아 놓는 작업을 한다.
그 후 브라우저는 덩어리를 한꺼번에 출력 한다.
스택 히스토리(Stack history)로 Back 단추 링크를 자동으로 연결한다.
JQuery Mobile이 DOM을 직접 관리하다 보니 또 한가지 장점 [Back] 단추를 눌렀을 때 이전 페이지가 어디인지 기억했다가
그곳으로 직접 이동 한다.
3.JQuery Mobile로 스마트폰 UI 시작
<link rel="stylesheets" href="jquery.mobile-1.4.2.css" />
jQuery Mobile에서 사용하는 CSS 스타일. 이 스타일을 통해서 다양한 테마와 아이콘 등을 표시
뒤에 min 자가 붙는것은 압축을 해서 배포용으로 만들었다는 의미 이다.
<script src="jquery.js"></script>
Jquery Mobile 내부적으로 JQuery에 기반을 두어 자바스크립트가 작성
<script src="jquery.mobile-1.4.2.js"> </script>
JQuery Mobile의 실제 자바스크립트 파일. 모든 동작이 이 파일을 통해 이루어짐.
파일을 직접 다운로드 받아 자신의 파일에 포함시키거나, JQuery Mobile의 직접 호스팅해서 그 파일들의 URL을 알려준다.
이러한 주소를 CDN(Contents Delivery Network)라 부른다.
이방법의 장점은 한번 파일이 전송이 되면 스마트폰 단말기에 캐시되어 남아 있고 이에 내 파일에 접속하지 않아도 다른 앱에서 사용했다면 속도가 더 빨라 진다.,
뷰포트 설정하기
<meta name="viewport" content="width=device-width, initial-scale=1">
페이지 만들기
페이지 구성은 <body>안에 <div> 태그로 그룹을 만들고 data-role특성에 "page"라고 지정한다,.
사용법
<div data-role="page">
....
</div>
예제
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
4. 화면 구성을 위한 UI 작성하기
한 페이지 안에 모두 구성하기
예제
<body>
<div data-role ="page" id="main">
<div data-role="header" data-theme="b">...</div>
<div data-role="content">
<h1> 메인페이지</h1>
<a href="#sub">서브페이지 </a>
</div>
<div data-role="footer">...</div>
</div>
<div data-role ="page" id="sub">
<div data-role="header" data-theme="b">...</div>
<div data-role="content">
<h2> 서브페이지</h2>
<a href="#main" data-direction="reverse"> 메인페이지</a>
</div>
<div data-role="footer">...</div>
</body>
href 특성에 북마크를 지정하듯이 <a>태그에 id선택자의 이름을 적어주면 해당 화면으로 이동한다.
JQuery Mobile의 장점은 이동하는 페이지의 히스토리를 기억한다는 것이며, <a> 태그에 다음처럼 data-direction을 reserve로 지정하면, 장면전화 효과를 자동으로 처리 해준다
JQuery 1.4.2 이상부터는 기본 장면전화 효과 Fade이기 때문에 좌우 이동 스라이드 효과를 주기 위해 data-transition="side"를 꼭 입력한다.
<a> 태그의 href가 아닌 이전 주소로 되돌아고 싶다면 data-direction="reserve" 대신에 data-rel="back"을 사용한다.
data-dircetion은 화면 전환효과가 적용되고 data-rel은 장면 전환뿐만 아니라 브라우저의 뒤로가기 단추와 유사한 기능을 한다.
여러개의 페이지로 구성하기
각각의 페이지를 완성된 형태로 구성하고 링크 내용도 페이지의 파일 이름을 직접 작성