주제를 알고 싶어 네이버 지식백과에 물어보았다.
영어로는 ㅆㄸㅁ[Θi:m] 이라고 읽던데, 테마라는 말은 독어였군..
미리 말하자면, 오늘의 주제는 jQuery Mobile 에서 사용되는 Theme 이다.
어플리케이션이나 웹페이지, 또는 프리젠테이션 자료를 만드는 등의 경우에 우리는 특정 색상에 어떠한 상징을 부여하고 그 상징색에 몇가지 조합을 통해 작성하게 된다. 그리고 이러한 상징과 일관성있는 색상을 사용함으로써 기업은 브랜드 인식을 높일 수 있다. 예를 들면, 빨강은 정열, 열정을 상징하니 이번 사내 컨테스트 홍보 페이지는 빨강계열을 이용하여 작성한다던가 노랑은 명랑, 유쾌함을 상징하니 카카오톡은 노랑색계열로 만든다던가(읭?;) 하는 등의 경우이다.
통일된 색상을 사용한 Application 설계의 예 >
이처럼 우리는 가급적 통일된 색상을 사용하여 상징을 부각하거나 브랜드 인식을 높이고, 더 멋지고 아름답게 꾸밀 수 있으며 무의식 중에(또는 디자이너나 UI/UX 설계자의 감각에 의해) 그렇게 사용해 왔다.
그럼 개발은 어떠한가?
주변에 jQuery Mobile 을 이용하여 개발을 하는 분들을 보면 위와 같은 MMI 나 UI Guideline 문서를 받았지만 UI 적용은 각각의 페이지마다 하는 모습들을 종종 보게 된다. 각각의 페이지 상단의 헤더 배경을 동일한 그림으로 직접 지정한다던가 하는 것은 마치 파워포인트에서 마스터 기능을 이용하지 않고 각각의 슬라이드 배경을 따로 지정하는 것과 같다.
jQuery Mobile 에서는 마치 파워포인트에서 마스터 기능을 이용하듯이 일관된 분위기를 유지할 수 있도록 Theme 를 제공한다.
jQuery Mobile 을 이용하여 다음과 같이 페이지를 작성하면 위의 그림에서 오른쪽에 보이는 것과 같은 다양한 색상의 버튼을 볼 수 있다.
<div data-role="page"> <div data-role="content"> <a href="#" data-role="button" data-theme="a">Swatch a</a> <a href="#" data-role="button" data-theme="b">Swatch b</a> <a href="#" data-role="button" data-theme="c">Swatch c</a> <a href="#" data-role="button" date-theme="d">Swatch d</a> <a href="#" data-role="button" data-theme="e">Swatch e</a> </div> </div> |
위와 같이 Element 에 data-theme 라는 Attribute 를 입력하면 버튼의 색상이 변경되게 된다. data-theme 에 적용되는 a ~ e 의 값은 jQuery Mobile 의 default 테마에서 제공된다.
그럼 jQuery Mobile 에서 사용자 테마를 만들어 사용한다는 것은 a, b, c, d, e 뒤에 f, g, h, i, j, ...... 을 더 만들어 사용한다는 것인가? 라는 의문을 가질 수 있다. 그럼 z 까지 만들면 그 다음은? aa, bb, cc, ...... 이렇게 해야 되나?-_-a
jQuery Mobile 홈페이지에서는 테마에 대해 다음과 같이 말하고 있다.
The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements:
|
jQuery UI? ThemeRoller system? 이것들은 또 뭐야..
jQuery UI 는 PC 브라우저에서 사용되던 jQuery 를 이용하여 만든 UI Widget 의 집합이고, jQuery UI 에서 사용되던 테마 시스템이 ThemeRoller 인데, jQuery Mobile 에서도 이와 비슷한 구조의 시스템을 사용한다고 한다.
영어가 기니까 번역은 패스하고 대충 요약해보면
- 테마는 여러 개의 샘플들의 조합으로 이루어 지는데 그 샘플들을 Swatch 라 한다.
- jQuery Mobile 에서는 기본적으로 default 테마를 제공하고 그 default 테마 안에는 a, b, c, d, e 라는 이름을 가진 샘플들이 존재한다.
- Swatch 는 a ~ z 까지 사용하는 것을 권장하고 보통 하나의 테마에 사용되는 조합이 26가지를 넘어서는 일이 거의 없으므로(없어야하므로) 자신의 테마에 필요한 조합을 a 부터 차례대로 만들어 사용하면 된다.
- 하나의 Swatch 에는 Selectors 를 이용하여 각 위젯의 상태에 따라 여러가지의 상태(색상, 글꼴 등)를 지정할 수 있다.
이러한 테마는 jQuery Mobile 을 빌드할 때에 makefile 에 의해 결정되며 선택된 테마와 jQuery Mobile Style Sheet 가 결합하여 jquery.mobile.css 가 생성된다. 빌드하는 과정은 jQuery Mobile 의 소스를 Clone 하여 다운(git://github.com/jquery/jquery-mobile.git) 받고 node.js 를 설치하고 jquery-mobile\css\themes 에 폴더를 만들어 테마를 생성한 뒤 makefile 과 grunt.js 를 수정하여 빌드하면 되는데 엄청 복잡하다-_-
이 포스팅에서는 jQuery Mobile 의 빌드 시스템을 다루지 않기로 하고 그냥 완성된 jquery.mobile.css 파일을 수정하여 테마를 수정해보도록 하겠다.
다음 파일을 다운로드한다.
| |
example.zip압축을 해제하고 example.html 파일을 브라우저에서 열어보면 다음과 같은 화면들을 볼 수 가 있다.
세 개의 Page 로 이루어진 간단한 샘플이다. 이 샘플에 theme 를 적용해보자.
libs\jquery.mobile-1.2.0\jquery.mobile-1.2.0.css 파일을 열어보자. (libs 에 있는 파일들은 jQuery Mobile 사이트의 download 메뉴에서 받을 수 있다.)
@0@ ...... 뭔가 많지만 자세히 보면 CSS Class 들의 집합임을 알 수 있다. Theme 를 변경하기 위해 수정해야 하는 부분은 /* Structure */ 라는 주석 윗 부분인 700 line 까지다. ( jQuery Mobile 소스를 받아서 폴더 구조를 살펴본 사람들은 눈치챘겠지만, jquery.mobile-1.2.0.css 는 jquery.mobile.theme-1.2.0.css 와 jquery.mobile.structure-1.2.0.css 가 합쳐져서 만들어진다. )
jQuery Mobile 에서 친절하게 주석을 많이 달아두었으니, 주석을 참고하면 조금 더 쉬운 작업이 될 것이다. /* Swatches */ 밑에 /* A ...... */, /* B ...... */, ... 이런 식으로 각각의 Swatch 에 대해 Class 가 작성되어 있다. Class 의 이름만으로 이 Class 가 어떻게 반영될 것인지 짐작이 가는 Class 들도 있지만 jQuery Mobile 을 처음 접하는 사람은 이 Class 의 이름만으로 어떻게 적용될 지 유추해내기가 어렵다.
다음과 같이 Example.html 을 띄워논 브라우저에서 오른쪽 마우스 버튼을 눌러 요소 검사를 클릭한다(또는 Ctrl + Shift + i ). 비슷한 메뉴가 안나온다면 크롬 브라우저에서 다시 시도해보길 바란다. ( 웹 개발은 Webkit 기반의 브라우저에서 하는 것이 ; )
그럼 다음과 같은 새로운 창이 열릴 것이다.
이것은 Inspector 라는 개발자 도구로 현재 브라우저에서 보여지고 있는 HTML 문서에서 일어나는 일에 대한 모든 정보를 볼 수 있도록 해준다. 현재는 브라우저에서 보여지는 Example.html 에 대한 소스가 보인다.
..........?
잠깐! 뭔가 다르지 않은가?
Example.html 을 Text Editor 로 열어 두 개의 소스를 비교해보자.
Example.html 은 간단하게 작성되었지만, Inspector 에서는 뭔가 엄청 복잡해보인다. 이는 jQuery Mobile 이 HTML 파일을 불러올 때에 Element 들을 재해석하여 jQuery Mobile 의 위젯으로 생성하면서 변경된 것이다. 이처럼 중간에 생성된 Class 나 Element 들의 구조로 작성된 Selector 들로 jquery.mobile.theme-1.2.0.css 는 작성되어 있다. 이것을 수정하기 위해서는 jQuery Mobile 의 구조를 명확히 알고 있던가, Inspector 를 이용하여 꾸준히 확인하여야 한다.
아까 브라우저에서 확인한 Example.html 에서 상단의 검은색 헤더가 눈에 띈다. jquery.mobile-1.2.0.css 를 변경하여 이 부분을 변경해보자. 먼저 어떤 부분을 변경해야 되는지 알기 위해 브라우저에서 헤더부분에 마우스 커서를 올려놓고 오른쪽 마우스 버튼을 눌러 요소 검사를 클릭한다.
Inspector 에서 헤더 부분인 아래 div Element 를 선택하면 위의 그림과 같이 브라우저에 영역이 표시되고 해당 역영을 선택할 수 있는 Selector 가 Tooltip 으로 표시된다.
| <div data-role="header" class="ui-header ui-bar-a" role="banner"> |
위의 Element 를 Example.html 에서 찾아서 변경된 부분을 살펴보면 빨간색으로 표시된 부분이 추가적으로 생성되었다는 것을 알 수 있다. 저 부분을 jquery.mobile-1.2.0.css 파일에서 찾아보자.
크게 노력하지 않아도 파일의 첫 부분에서 .ui-bar-a 와 관련된 Selector 들을 찾을 수 있다.
Background 속성과 관련된 부분들을 찾아보자.
녹색 배경으로 표시된 부분이 헤더의 배경색상을 결정짓는 부분인 것 같다. #111 로 표시된 부분을 #0123FF 로 변경한 뒤에 브라우저에서 새로 고침을 눌러 변경된 사항을 확인해보자. 헤더부분이 아래와 같이 푸른색상으로 변경되었다.
이번엔 버튼의 색상을 변경해보자. Next Page 라고 쓰여진 버튼 위에서 마우스 오른쪽 버튼을 눌러 요소 검사를 클릭하자.
Inspector 에서 아래와 같은 Element 를 찾아보자.
| <a href="#secondPage" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c"> |
이번에도 빨간색으로 표시된 새로 생성된 부분을 jquery.mobile-1.2.0.css 파일에서 찾아보겠다. 파일은 특정 Selector 들의 집합으로 표시되어 있고 HTML Tag 와 Class 위주로 나열하고 특정 속성들은 나열된 Selector 에서 특정 상태를 구분하는 용도로 사용되기 때문에 class 를 위주로 검색하자. 주로 테마와 관계된 Selector 는 뒤쪽에 -a, -b, -c, ... 와 같이 Swatch 의 이름이 붙어있는 경우가 대부분이므로 위의 Element 에서 테마와 관련된 Class 를 찾아보면 ui-btn-up-c 가 보인다. 파일에서 ui-btn-up-c 를 검색해보자.
위와 같은 결과가 나왔다.
1) text-shadow 를 지우고,
2) color 를 #222 에서 #eee 로,
3) background-image 에 있는 #fff 를 #3c3c3c 로, #f1f1f1 를 #0123ff 로,
4) 밑에 있는 .ui-btn-up-c a.ui-link-inherit 의 color 를 #2f3e46 에서 #eee 로
변경한 뒤에 브라우저에서 새로고침을 눌러 확인해보자.
버튼뿐만이 아니라 라디오버튼, 체크박스, 옵션, 슬라이더의 핸들까지 모두 색상이 변경되었다. jQuery Mobile 에서는 buttonMarkup() 이라는 함수를 통해 버튼을 비롯한 버튼류(체크박스, 라디오, 셀렉트 등) 을 생성하기 때문에 이와 같은 현상이 발생된다. 이는 통일된 분위기를 연출하기에 좋지만 각각 적용하고 싶다면 Inspector 를 통해 변경된 HTML Tag 를 확인하고 Selector 를 잘 조합하여 세분화 시킬 수 있다.
이와 같은 작업들을 조금 더 쉽게 할 수 있게 해주는 툴이 jQuery Mobile 에서 제공되고 있다. 아래의 링크로 이동해보자.
Welcome to ThemeRoller for jQuery Mobile !!! 이라는 환영 문구가 보인다 : )
Get Rolling 을 클릭하고 상단에 있는 색상 파레트에서 마음에 드는 색을 드래그하여 라디오 버튼 위에 놓아보자.
라디오 버튼에서 선택한 색상을 드랍하는 순간 아래와 같이 색상이 적용된 모습을 볼 수 있다.
변경되는 모습을 직접 확인하면서 작업할 수 있어 테마를 변경하기에 훨씬 수월하다. 이것저것 만져보면서 각각의 Swatch 를 완성시켜 보자.
변경작업이 완료되면 상단에 Download 버튼을 누른다. 아래와 같은 화면이 보일 것이다.
Zip 파일을 만들어 다운받게 해주고 그것을 이용하는 방법에 대해 설명해준다. 여태까지는 jquery.mobile-1.2.0.css 를 사용했지만, 이제는 my-custom-theme.css 와 jquery.mobile.structure-1.2.0.css 를 사용해야 한다는 점을 잊지 말자.
Theme Name 에 테마명을 입력하고 Download Zip 버튼을 눌러 압축된 테마 파일을 받자.
Example.html 의 <head> 부분을 아래와 같이 변경하자.
| <!--link rel="stylesheet" href="libs/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" /--> <link rel="stylesheet" href="libs/jquery.mobile-1.2.0/s2junn.css" /> <link rel="stylesheet" href="libs/jquery.mobile-1.2.0/jquery.mobile.structure-1.2.0.css.css" /> |
Example.html 을 수정하였으면 브라우저에서 새로고침을 눌러 테마가 제대로 적용되었는지 확인해본다.
여기까지 모두 적용하였으면 기본적인 테마 사용법은 익힌 것 같다. 위의 내용을 응용하여 자신만의 테마를 완성해보자.
오늘의 교훈 : 테마라는 말은 독일어다.
'Web' 카테고리의 다른 글
| [jQuery Mobile] 주제를 알자! - 3 - (0) | 2012.12.12 |
|---|---|
| [jQuery Mobile] 주제를 알자! - 2 - (0) | 2012.12.10 |
| Flexible Box Layout module (0) | 2012.03.28 |
| CSS 가상요소(Pseudo Elements) (0) | 2012.03.09 |
| 웹 페이지 저작의 기초 (0) | 2012.03.08 |
