원글(동영상) : http://docs.sencha.com/touch/2-0/#!/video/theming
번역 : https://github.com/KoreaSenchaUserGroup/Lab1/wiki/doc27
작성자 : 최종원

DOC 27. [components] Theming Sencha Touch

Intro

  • 센차의 기본 테마도 훌륭하지만, 만약 스킨을 바꾸고 싶다면 원하는대로 바꿀 수도 있다.
  • SASS 코드 몇줄을 수정해 CSS3 를 수정할 수도 있고, 새로운 아이콘을 추가할 수도 있으며, 새로운 테마를 적용할 수도 있다.

Project setup

  • 데모 애플리케이션을 살펴보도록 하자. github (https://github.com/senchalearn/Touch-Theming) 에서 소스 코드도 볼 수 있다.
  • 데모 페이지를 살펴보면, 센차의 기본 테마가 적용되어있는 것을 볼 수 있다. 몇개의 아이콘들은 이미지가 없는데, 잠시 후에 수정해 넣는 것을 보여줄 것이다.
  • 센차터치의 스킨은 단순히 CSS로 되어 있는데, CSS 전처리기라고 할 수 있는 SASS를 이용해 만들었다.
  • SASS는 CSS에 몇가지 기능(Variables, Nestig, Mixins, Selector Inheritance)을 추가한 것이다.
  • 또 세차터치는 SASS를 이용해 CSS를 제작할 수 있는 compass 프레임워크를 사용하고 있다.
  • 센차터치 테마를 컴파일 하려면 theme.scss 파일과 config.rb 파일이 필요하다. ** theme.scss 는 스타일을 정의하는 scss 파일이다. ** config.rb 파일은 compass 가 동작할 수 있도록 설정하는 설정파일이다.
  • 새로운 스타일을 만들어서 테마를 만들어 보자.
  • 프로젝트에 touch 라는 폴더와 styles 라는 폴더를 만들고 styles 폴더에 config.rb 파일을 만들어 넣자.
  • 준비된 코드를 config.rb 파일에 복사해 넣자.
  • touch 폴더에는 sencha-touch의 resources 폴더와 src 폴더, sencha-touch.js, sencha-touch-debug.js 파일을 복사해 넣자.
  • touch/resources/themes/templates/project 폴더 안에 보면 sencha-touch.scss 파일을 확인할 수 있는데, 이 파일의 내용이 기본이 되어야 한다.
  • styles 폴더에 새로운 테마파일을 만들고 이 내용을 복사해 넣자. (동영상의 경우 default-theme.scss)

Compiling the theme

  • 이제 command line을 통해 styles 디렉토리로 갖서 compass compile 을 실행해 보자.
  • 만약 compass가 설치되어 있지 않다면, compass : command not found 라는 응답이 올 것이다. ** 맥을 사용한다면 http://compass-style.org/install/ 페이지를 참고해 설치할 수 있다. ** gem update –system, gem install compass 명령을 통해 설치할 수 있다. 권한이 필요하면 sudo로 install 하면 된다.
  • 그러면 상위 디렉토리에 xxx-theme.css 파일이 생성되는 걸 확인할 수 있다. (동영상의 경우 default-theme.css)
  • compass watch 명령을 내려 놓으면, compass가 백그라운드에서 scss 파일의 변경을 감시한다. 이때 변경이 감지되면, 해당 내용이 css에 실시간으로 반영된다. (매우 편리해 보인다.)

Writing vanilla CSS

  • 이제 구체적으로 테마를 변경해 보자.
  • 먼저 scss 파일을 만들어야 한다. 이 파일은 일반 css 파일처럼 수정하면 된다.
  • 트위터 타임라인 페이지에 일반 css를 적용해보자. (미리 twitter 타임라인 페이지를 만들어 놓은 것인데, 해당 클래스가 없어서 동영상에서는 이 내용이 공백으로 나오고 있다. 여기에 twitter 에서 제공하는 css를 몇줄 추가한 다음 scss를 컴파일해서 돌려보는 것이다.)
  • twitter 에서 사용하는 css는 보다 가시성을 좋게 하려면 scss의 nesting 문법을 이용해 태그를 정리할 수 있다.

Adding Icons

  • 센차에서는 300여개의 아이콘을 제공한다.
  • touch/resouces/themes/images/default/pictos 밑에 이 300여개의 png 파일들을 확인할 수 있다. 어떤 테마를 만들든, 이 아이콘들을 사용할 수 있다.
  • 예제에서는 20여개의 아이콘이 있는 툴바를 볼 수 있다. (github 예제) 이 아이콘들은 센차에 기본으로 내장된 아이콘들이다. (나중에 나오겠지만, 최종 배포시에는 기본 아이콘들을 제거하고 필요한 아이콘을 기술해 주는 것이 css 파일 사이즈를 줄일 수 있는 매우 유용한 방법이다)
  • pictos 에 있는 다른 아이콘을 이용하고 싶다면, @include pictos-iconmask(‘twitter2′); 와 같은 코드를 scss에 추가해 주어야 한다.
  • compass는 해당 아이콘을 css에 추가하고, 이미지 파일을 base64로 인코딩하여 css에 텍스트값으로 넣어준다. (이렇게 하면, 이미지 파일을 별도로 추가할 필요가 없어 간편하다.)

Changing SASS variables

  • 센차터치는 SASS 변수를 아주 잘 활용하고 있다.
  • 기본 테마에서 base-color를 darkblue로 사용하고 있고, active-color는 lightblue 색을 사용하고 있다. 이 값을 수정하고 싶다면 theme scss 파일에 $base-color 값과 $active-color 값을 각각 원하는 값으로 설정해 주면 된다.
  • $base-gradient : ‘matte’ 가 기본인데, ‘glossy’나 다른 값을 줄 수 있다.

Browsing the documentation

  • http://docs.sencha.com/touch/2-0/#!/api/Global_CSS 사이트를 통해 설정할 수 있는 변수들과 mixin 값들을 확인할 수 있다.
  • loadmask 를 검색한 다음 문서에서 CSS Variables 를 확인해보면, 어떤 CSS 변수를 사용하는지 알 수 있다. 이 변수 값을 바꿔주면 해당 값이 적용된다. Ext.LoadMask 클래스의 경우 $loading-spinner-color 값을 지정해 주면, 스피너의 컬러값이 반영된다.

Compressing the CSS

  • 개발하는 동안에는 compass를 통해 만들어진 css가 가독성이 있는 것이 좋다. 하지만, 배포시에는 이 css를 최대한 짧게 압축해서 배포하는 것이 좋다.
  • compass 를 통해 압축하려면 config.rb 파일에서 output-style 값을 compressed 로 설정하고, environment 값을 production으로 설정한 다음 compile 하면 된다.
  • 또한, 사용하지 않는 컴포넌트를 빼고 배포하고 싶다면, scss의 @include 를 제거(혹은 주석처리)한 다음 compile 해주면 된다. css 파일의 사이즈가 더 줄어든다.
  • default 아이콘 설정을 사용하지 않도록 설정한 다음 필요한 아이콘만 기술해서 넣어주는 것도 파일 사이즈를 줄일 수 있는 한 방법이다.