강좌 : 모바일 웹 디자인

본 문서는 본인이 모바일 웹을 개발함에 있어서 경험을 한 팁과 노하우를 정리 해 놓았다.

본 문서가 초보 웹 개발자와 중급자에게 도움이 되기를 희망합니다.

본 문서에서는 jQM 을 바탕으로 반응형 모바일 웹 디자인을 하는 것에 초점을 맞춘다.

본 문서는 구글 드라이브에 공유가 되어져 있습니다.

아래의 링크를 클릭하시면 언제든지 본 문서의 최신 정보를 볼 수 있습니다.

https://docs.google.com/a/withcenter.com/document/d/1v-x2ZwZGA6-i8pnXjPnUmRodmoLbn6MSq4FXQlhoLhE/pub

jQM 의 활용

jQM 이나 Sencha 와 같은 툴을 쓰지 않는다는 것은 벽돌 쌓는 기술 밖에 없으면서 100 층 짜리 고층 빌딩을 짓겠다는 것과 같다.

미국까지 가는데 비행기 타고 가면 될 것을 뛰어서, 등산을 하면서, 헤엄을 치면서 갈 필요가 없는 것이다.

jQM 이나 Sencha 와 같은 툴을 익힌다면 100 층 짜리 빌딩을 쌓는데 필요한 모든 기술을 습득하는 것과 같은 것이다.

반응형 웹 디자인

모바일은 반응형 웹 디자인 방식으로 접근을 해야한다.

RWD ( Responsive Web Design ) 이라 부르며 디바이스가 크면 큰 대로, 작으면 작은대로 잘 보여 주어야 한다.

일반적으로 퍼센티지(%) 나 em 개념으로 레이아웃을 만들면된다. 특히 em 경우 많이 혼동이 되는데 개념을 확실하게 이해해야한다.

보다 세밀하게 디자인을 하기 위해서는 벡터 이미지를 직접 만들어야 한다.

일러스트나 포토샵을 통해서 이미지 디지안을 한 다음 벡터 이미지 파일로 저장하는 것이 아니라 직접 GIF, PNG, JPG 를 줌 인(길게 늘여도)해도 이미지가 일그러지지 않도록 이미지 자체를 픽셀 하나 하나 계산해서 만들어 내야 한다.

실제로 SVG (Scalable Vector Graphic)를 포토샵으로 제작 해 보니까 정말 귀찮은 일이 었다.

간편하게 주요한 이미지는 큰것과 작은 것 두개를 작성해서 큰 화면에서는 큰 것을 작은 화면에서는 작은 것을 보여주는 것도 좋은 방법이다.

HTML 페이지의 링크 및 컨텐츠

a.banner { display: inline-block; padding: 2%; height: 10em; text-align:center; font-size: 0.8em; vertical-align: top; }

위와 같이 % 와 em 으로 구성을 했다.

px 로는 반응형 웹 디자인을 할 수가 없다.

단적인 예로 image map 을 픽셀 단위로 한 다음 이미지를 % 로 지정하여 웹 브라우저 크기를 늘린 다음 결과를 보면 image map 이 전혀 마지 않는 다는 것을 알 수 있다.

반응형 이미지 맵 : RWD jQuery Map

https://github.com/stowball/jQuery-rwdImageMaps

입력 박스의 너비를 조정하는 방법

<div style="width: 98%; padding: 0 1%; ">

<input name="key" id="key" class='key' value="<?=$in['key']?>" type="search" placeholder="필리핀의 모든 것 - 필고">

</div>

주요 사용 기술

RWD - Responsive Web Design - http://view.jquerymobile.com/1.3.2/dist/demos/intro/rwd.html

headers & footers Grouped buttons

-> fixed, group buttons, forms,

control group

Custom loader icon

Fixed toolbars

Flip switch Fieldcontain, hidden label

form http://view.jquerymobile.com/1.3.2/dist/demos/widgets/forms/

grid

icons Swatch "d"

list view with filter, thumbnails, Formatted content

게시판 목록을 리스트뷰로 해야한다.

panel

popup - image show

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/popup/popup-images.html

select - horizontal group

tables - 게시판 목록을 할 때 사용 할 수 있다.

input,textarea 에서 날짜, 시간 등 선택

transition - http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/

헤더

아래와 같이 헤더를 레이아웃 했다.

화면이 늘어나면 레이아웃이 유지 되면서 로고와 광고가 같이 늘어나야 한다.

그러기 위해서는 이미지 크기를 최대로 줄이면서 해상도가 좋은 이미지 제작을 해야 한다.

로고

로고를 비교적 크게 만들어서 준비하도록 했다.

이미지 사이즈를 최대한 작게 만들고 확대 또는 축소 했을 때 잘 보이도록 신경을 써야 한다.

너비 600px

높이 60px

헤더 오른쪽 광고

광고도 마찬가지로 이미지 사이즈를 최대한 작게 만들고 확대 또는 축소 했을 때 잘 보이도록 신경을 써야 한다.

주의 할 점은 너비는 300 이지만, RWD 를 위해서 일부러 넓게 한 것이며 왼쪽 영역의 배경을 투명으로 해서 많은 공간을 비워 두어야  한다. 다시 말하면, Responsive 웹 디자인을 위해서 너비 300 중에서 오른쪽 부분을 최소 80 픽셀 이상 투명 배경으로 비워두어야 한다.

넓은 광고

너비 : 300 px

높이 : 60 px

좁은 광고

메인 상단 광고

확대, 축소시 잘 보이도록 GIF 이미지 제작. 전체 용량 120K byte 이하.

너비 800px

높이 120 px

팝업창(로그인 창) 띄우기

아래의 로그인 창을 오픈하는 태그와 실제 표시를 하는 <div>...</div> 부분이 바로 연속으로 붙어 있어야 한다.

특히 header, content, footer 가 문서에 존재해야한다.

<a href='#popupLogin' data-rel='popup' data-role='button'  data-position-to='window' data-transition='pop' class="ui-bar ui-bar-e" data-icon='refresh' >로그인</a>

<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">

<form>

<div style="padding:10px 20px;">

<h3>Please sign in</h3>

<label for="un" class="ui-hidden-accessible">Username:</label>

<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">

<label for="pw" class="ui-hidden-accessible">Password:</label>

<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">

<button type="submit" data-theme="b" data-icon="check">Sign in</button>

</div>

</form>

</div>

중요 팁 * 포인트

버튼의 라운드를 직접 조절 : How to customize corners of button.

<a href="#" class="ui-btn-right" data-role="button" data-mini="true" data-icon="gear" data-inline='true' data-corners="false" style="border-radius: 4px;">옵션</a>

가능한 한 구조를 따를 것

반드시 header, content, footer 구조를 따라야한다. 그렇지 않으면 jqm 이 올바로 동작 안 할 수 있다.

RWD 에 포커스를 맞출 것.

RWD 이미지 맵

https://github.com/stowball/jQuery-rwdImageMaps

POPUP

팝업 창을 연다. 팝업 창은 현재 페이지 내에 있는 data-role=’popup’ 들을 화면에 띄워 준다.

따라서 dialog 보다 간편하다.

특히 dialog 는 ajax 호출을 통해서 데이터를 가져오는데, 디버깅이 어렵다.

data-dismissible="false"

이 옵션은 팝업 창 밖을 클릭하거나 ESC 를 클릭해도 창이 사라지지 않게 한다.

특히 이 옵션은 POPUP 의 DIV 속성에 적용해야한다. 버튼에 하면 안된다.

아이콘 목록

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/

http://view.jquerymobile.com/1.3.2/dist/demos/widgets/buttons/

data-inline="true"

이렇게 하면 실제 컨텐츠 만큼 만 영역이 설정된다.

위 사진에서 보면 취소 버튼이 글자 수 만큼만 영역이 설정되었다.  이는 data-inline=true 가 되어서 그렇다.

Dialog

다이얼로그는 외부 HTML 만 연결된다.

즉, <a href=’#foo’> 와 같이 연결 할 수는 없다.

굉장히 심한 캐시

jQM 은 대부분의 링크 처리를 ajax 로 하는데, 이 때 굉장히 심하게 캐시가 된다.

F5 를 통한 페이지 갱신(리프레시)을 해도 그 때 뿐, 다른 곳을 클릭하면 이전에 값이 나온다. 특히 자바스크립트와 CSS 가 심하게 캐시된다.

이 때에는 <a href=’...’ rel=’external’> 과 같이 해서 처리를 한다. 특히 메인 페이지를 그렇게 처리를 해야 한다.

외부 자바스크립트 로딩

외부 자바스크립트를 로딩하기 전에 가능한 변수를 먼저 설정하는 것이 좋다.

예를 들어

<script src=’...’></script> 와 같이 파일을 로드하는데,

아래와 같이 한다고 해서,

$(function(){

...

});

아래와 같은 변수를 외부 자바 스크립트를 로드하는 태그 밑에 기록해 주면 안된다.

$a=’b’;

위와 같은 변수는 가능한 상단에 로드를 하도록 해야 한다.

jQM 스타일 적용하지 않기

대부분의 경우 <div> 로 감싸게 되면, 적용되지 않는다.

FORM 을 ajax 가 아닌 그냥 실행하기

<form ... data-ajax='false'"> 와 같이 하면 된다.

CSS 적용

jQM 에서는 element 에 많은 클래스와 CSS 를 추가한다.

따라서 CSS 가 잘 적용이 안되면 디버깅을 통해서 어디에 어떻게 적용을 하는지 파헤쳐야 한다.

예)