[jQuery Mobile] 주제를 알자! - 2 -

지난 번에 Theme 를 변경하는 방법에 대해 포스팅하였다. 같은 맥락에서 진행되는 내용이니 못봤다면 아래 링크를 참고하여 살펴보기 바란다. 아래 example2.zip 파일을 다운로드 받아보자.

http://s2junn.tistory.com/64 example2.zip

다운로드 받은 샘플의 압축을 풀고 example.html 을 브라우저에서 열어 살펴보자.

Third Page 에서 Button 왼쪽에 있는 별 모양의 아이콘은 어떻게 변경할 수 있는가?

이번 포스팅의 주제는 바로 저 아이콘을 변경하는 것이다. jQuery Mobile 에서 아이콘을 변경하기 위해서는 data-icon 속성을 이용하면 된다. data-icon 속성에 "arrow-l", "arrow-r", "arrow-u", "arrow-d", "delete", "plus", "minus", "check", "gear", "refresh", "forward", "back", "grid", "star", "alert", "info", "home", "search" 등을 사용하면 아래에 보이는 아이콘들이 나타나게 된다.

그럼 이 외의 새로운 이미지를 아이콘으로 사용하려면?

우선 사용할 아이콘을 구해보자. 파워포인트로 만들어도 되고 딱히 구할 곳이 없으면 아래 아이콘을 사용한다.

먼저, jquery.mobile-1.2.0.css 를 살펴보자. "ui-icon-" 로 검색하면 다음과 같은 화면을 볼 수 있다.

눈치챘겠지만, data-icon="xxx" 라고 사용되는 부분 앞에 "ui-icon-" 이 붙은 클래스들이 정의되어 있다. 바꿔 말하면 "ui-icon-usericon" 이라는 클래스를 정의하고 data-icon="usericon" 으로 지정하면 ui-icon-usericon 에 지정한 아이콘이 나타나게 된다.

위의 그림에서 background-position 속성만 나열되어 있는 것은 기본 지정된 아이콘은 각각의 그림으로 된 것이 아니라 아래와 같이 긴 그림으로 되어 있고 포지션을 정의하여 표현하도록 했기 때문이다. 여러개의 아이콘 세트가 필요하다면 이와 같이 작성하는 편이 좋다.

하지만 이 포스팅에서는 하나의 아이콘 이미지만을 사용하여 사용자 아이콘을 표시하는 방법으로 진행하겠다. jquery.mobile-1.2.0.css 의 ui-icon-xxx 맨 끝에 다음의 클래스를 추가해보자.

.ui-icon-s2junn { background: #666 /*{global-icon-color}*/; background: rgba(0,0,0,.4) /*{global-icon-disc}*/; background-repeat: no-repeat; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; background-image: url(images/icon.png); -moz-background-size: 18px 18px; -o-background-size: 18px 18px; -webkit-background-size: 18px 18px; background-size: 18px 18px; }

jquery.mobile-1.2.0.css 파일을 저장한 후 example.html 파일의 thirdPage 에서 button 을 찾아 data-icon 속성을 변경해보자.

변경하였으면 브라우저에서 새로고침을 눌러 Third Page 를 확인해보자.

위와 같이 아이콘이 변경되었다.

이렇게 버튼에 data-icon 값을 사용하면(ex. s2junn) 버튼 플러그인이 data-icon 의 값 앞에 "ui-icon-" 을 붙여 타겟 class 이름을 생성한다. 사용자는 "ui-icon-s2junn" 을 구현하여 사용자 아이콘을 사용할 수 있다. 아이콘은 일관성을 유지하기 위해 18 * 18 pixels 와 PNG-8 의 규격을 사용한다.

이렇게 테마와 아이콘을 변경하여 사용하게 된다면 여러 명이 협업할 경우에도 통일된 분위기를 흐뜨러뜨리지 않고 작업이 가능해진다. jQuery Mobile 의 Theme 를 만드는 사람들도 슬슬 보이기 시작하는데, 그 중에 유명한 Theme 를 한 번 살펴보자. 

http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/

요즘 많이 사용하고 있는 iPhone 의 분위기를 모방한 Theme 이다.

iPhone 스럽게 잘 만들었네.. 아마 대부분의 UI는 색상코드만 안다면 금방 따라 만들 수 있을 것이다. 헤더도, 버튼도, 리스트도, 폼도,, 해당 Selector 만 알아낸다면 손쉽게 수정할 수 있다. 그럼 헤더에 있는 Back 버튼은?

어떻게 만들었지? 그림인가? Text 의 크기에 따라 버튼의 크기도 변경되어야 하는데.. 어떻게 구현되었는지 살짝 컨닝해보자 ; ) Back 버튼 위에서 오른쪽 마우스 버튼을 눌러 요소 검사를 클릭한다.

Inspector 가 나타나면 오른쪽 Matched CSS Rules 에서 Back 버튼에 관련된 CSS Selector 를 찾아보자.

위의 빨간 박스쳐진 부분을 살펴보면 Back 버튼은 다음과 같은 구조로 이루어져 있음을 알 수 있다. 그리고 배경이 "images/backButtonSprite.png" 로 지정된 것을 알 수 있다.

<a href="#" data-rel="back" data-theme="a" class="ui-btn ui-btn-up-a ......">          <span class="ui-btn-inner ......">...</span>  </a>

두 개의 HTML Tag 와 하나의 배경이미지로 이루어진 버튼이라.. 우선 배경 이미지로 지정된 그림을 살펴보자.

어라?! 우리가 상상하던 버튼의 모습이 아니다. 왼쪽의 화살표와 오른쪽의 몸통이 만나면 우리가 보던 Back 버튼의 모양이 나타나긴 할 것 같은데 중간에 큰 공백이 있다. 아까 빨간 박스로 표시한 부분을 자세히 살펴보자.

겉에 있는 <a> Tag 는 background 가 "images/backButtonSprite.png" 로 지정되어 있고, 안에 있는 <span> Tag 는 background 가 "images/backButtonSprite.png" 로 지정되어 있.. 는데 뒤에 right 가 더 붙어있다. margin 이 top, right, bottom, left 의 순서로 시계방향으로 적용되니까 왼쪽에 15px 의 여백을 두었군.

아하!

그렇다면 Back 버튼은 아래와 같은 구조일 것이다.

머리들은 참 좋아,, 이런 방법을 이용하여 조금 더 특별하고 참신한 UI 를 구성할 수 있다. example.html 에 위의 Back 버튼을 적용해보자.

jquery.mobile-1.2.0.css 파일에서 "* Structure *" 를 찾아 그 위에 아래 코드를 삽입한다.

/* === BACK BUTTON === */ a[data-rel='back'], .ui-header a[data-rel='back'] { background: transparent url(images/backButtonSprite.png)  0 0 no-repeat !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; border: 0 none !important; height: 30px; top: 5px; } a[data-rel='back'] .ui-btn-inner { background: transparent url(images/backButtonSprite.png)  right 0 no-repeat !important; margin: 0 0 0 15px; padding: 0 8px 0 0 !important; height: 30px; line-height: 30px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0 /*{global-radii-buttons}*/; border-radius: 0 /*{global-radii-buttons}*/; border-top: 0; } a[data-rel='back'].ui-btn-down-a,  .ui-header a[data-rel='back'].ui-btn-down-a { background: transparent url(images/backButtonSprite.png)  0 bottom no-repeat !important; } a[data-rel='back'].ui-btn-down-a .ui-btn-inner { background: transparent url(images/backButtonSprite.png)  right bottom no-repeat !important; } a[data-rel='back'] .ui-icon { display: none; }

이미지는 아래 압축파일을 다운받는다.

backButtonSprite.zip

코드 적용 후에 example.html 을 새로 고침 한 뒤 First Page 에서 Second Page 로 이동해 보자.

아이폰 스타일의 Back 버튼이 적용되었다. 위의 방법들을 활용하면 못 만드는 UI 는 아마 거의 없을 것이다. 프로젝트를 시작하기 전에 기획자와 디자이너, 개발자가 모여 회의를 통해 프로젝트에 적합한 분위기 혹은 느낌의 테마를 완성하고 그것을 이용하여 개발을 시작한다면 보다 나은 완성도와 프로젝트 진행을 보이지 않을까 생각한다.