안녕하세요. 김종광입니다.

Sencha Blog 글을 번역해 봤습니다.
정확한 표현을 위해 원글을 유지 했습니다. 번역글의 완성도를 위해 매끄럽지 않은 부분은 여러분이 좀 알려 주시기 바랍니다.

아울러,  “한국 센차 유저 그룹” 페이스북 페이지도 많이 방문해 주세요.^^


Re-skinning Your Apps Just Got Easier with Sencha Architect 3

December 05, 2013 | Miroslav Bojic

There are many reasons why you might want to change the look of your app. That’s why we came up with the Themes feature in Sencha Architect 3. Theming was one of the most requested features, and I’m proud to be one of the people who worked on adding it to Architect 3.
앱의 외관을 바꾸려는데는 다양한 이유가 있을 수 있습니다. 그래서 Sencha Architect 3 의 Theme 기능을 제안하려고 합니다. Theming은 가장 요청을 많이 받았던 기능으로, 저는 Architect 3에 해당 기능을 추가하는데 일조한 것을 자랑스럽게 생각하고 있습니다.

In this blog post, we will give you a quick run through of the Themes feature and share a few tips. You’ll also learn how to export a theme built in Architect, so you can use it with other Sencha Touch and Ext JS projects.
이번 포스트에서는 Theme 기능에 대해 빠르게 살펴보고 몇가지 팁을 드리려고 합니다. 이번 포스트를 통해 다른 Sencha Touch및 Ext  JS 프로젝트에서 사용할 수 있도록, Archtect에서 개발된 Theme을 export하는 방법을 익히실 수 있습니다.

To learn more, sign up for the Architect 3 webcast on Thursday, 12/12 at 9-10am PST.
더 자세한 사항을 보시려면 12월 12일 오전 9시-10시 (PST) 목요일에 방영되는 Architect 3 웹캐스트에 참여하세요.

The New Themes Feature in Architect 3
Architech 3 새로운 Theme 기능

Sencha Touch and Ext JS themes are built using Sass. Sass uses the same syntax as SCSS, and it makes working with themes more efficient than CSS. Ext JS and Touch themes consist of rules that form the base for all the components to display correctly across different browsers. You can change the look of UI components by editing these rules and variables.
Sencha Touch와 Ext JS theme는 Sass를 사용하여 만들어집니다. Sass는 SCSS와 같은 syntax를 사용하며, CSS보다 더욱 효과적으로 theme 작업이 이루어질 수 있도록 합니다. Ext JS와 Touch theme들은 다양한 브라우저 전반에 걸쳐 모든 컴포넌트들이 정확하게 디스플레이 될 수 있는 기반을 형성하는 규칙으로 이루어져 있습니다. 이러한 규칙이나 변수들을 수정하여 UI 컴포넌트들의 외관을 변형시키실 수 있습니다.

Theming Basics
기본 theming

Theory
이론

Theming can mean a lot of different things, from simple tweaks to a complete visual overhaul. To make global changes to components, you modify variables in the base components which are then inherited by other components down the line. You can make localized changes by applying styles to component instances or creating custom Sass rules.
Theming은 간단한 수정 작업에서 비주얼적인 면의 전면적인 점검까지 포괄적인 부분을 포함합니다. 컴포넌트들에 전반적인 변화를 가하기 위해서는 일을 진행하는 중 다른 컴포넌트들에 의해 계승된 기본 컴포넌트들에 포함된 변수값을 수정해야 합니다. 컴포넌트 인스턴스에 스타일을 적용하거나 custom Sass 규칙을 생성해 냄으로써 국부적인 변화를 줄 수 있습니다.

Variables can inherit values from each other. You can reference component variables in your custom Sass.
변수들은 서로 value들을 물려받을 수 있습니다. 당신의 custom Sass 내 컴포넌트 변수들을 참조할 수도 있지요.

Take a look at the diagram below for a visual representation of how variables and custom Sass work together.
다음 도표에서 변수들과 custom Sass가 어떻게 작용하는지 보실 수 있습니다.

Team Inheritance Structure
UI style variables inherit from Component variables which inherit from Base variables. Custom Sass may refer to any of these or to custom CSS selectors in the project.
UI 스타일의 변수들은 기존 변수값에서 상속된 컴포넌트 변수값들을 물려받습니다. Custom Sass는 이들 중 아무 변수나 또는 프로젝트 내 custom CSS selector를 참조합니다.

Tip: It is possible to modify or create new inheritance structures in variables. To create a new inheritance, right click a variable to copy its Sass reference, and paste it to another variable. Avoid circular references because your code will not compile.
팁: 변수들의 상속구조를 수정하거나 새롭게 만들어낼 수 있습니다. 새로운 상속을 만들어내기 위해서는 변수를 오른쪽 클릭하여 참조할 Sass를 복사 하시고 다른 변수에 붙여넣으세요. 코드가 complie되지 않을 수 있기 때문에 순환 참조를 피하세요.

Let’s theme!
테마를 만들어 봅시다!

The best way to customize themes is to take a top-down approach. Start by defining global settings and variables, and then get more specific as you go along. This should make your code easier to understand and maintain.
Theme을 커스터마이징 하는 최선의 방법으로는 하향식 접근 방식을 꼽을 수 있습니다. 전반적인 셋팅과 변수의 규정을 시작으로 진행하시면서 더욱 구체적으로 지정하시면 됩니다. 이렇게 하시면 코드가 더욱 이해하기 쉬워지고 유지하기도 간편해지지요.

As you get deeper into the component hierarchy, you’ll notice inheritance and dependencies on higher classes increases. Take a look at the screenshots below, to get a better idea of what this means.
컴포넌트 계층구조를 알아갈수록 높은 클래스에 대한 상속과 의존성이 증가한다는 사실을 눈치 채셨을 겁니다. 다음 화면을 보시고 이에 대해 생각해 보세요.

Base Variables
Most variables here have discrete values or refer to another base variable.
대다수의 변수들은 이산값을 가지고 있거나 또다른 기준 변수를 참조합니다.
Component variables
Component variables: one variable refers to a base variable, then other component variables refer to it internally (e.g. button default background color -> button default base color -> base color).
컴포넌트 변수: 하나의 변수는 기준 변수를 참조하고, 다른 변수들은 이에 대해 내부적으로 참조합니다. (예: 버튼 디폴트 배경색 -> 버튼 디폴트 기본색 -> 기본색)
UI styles
UI styles: variables here commonly refer to corresponding component variables.
UI 스타일: 이 변수들은 일반적으로 상응하는 컴포넌트 변수를 참조합니다.

Top level theming is done through global or base variables. These variables are listed under Ext.Component for Ext JS and Ext.Class for Touch. These variables do not change the styling directly. Instead, they are inherited by most of the other variables. For example, in the Touch Default theme, you’ll find variables like ‘base color’ or ‘font family’ that directly affect a component or UI style variables. And in some cases, they’ll indrectly affect them, so you need to be careful.
최고수준의 theming은 전역변수나 기준변수를 통해 이루어집니다. 이러한 변수들은 Ext JS에서는Ext.Component, Touch에서는Ext.Class에 나열되어 있습니다. 이 변수들은 스타일링을 직접적으로 변화시키지 않는 대신에 대다수의 다른 변수들에게서 상속됩니다. 예를 들어, Touch Default theme에서는 직접적으로 컴포넌트나 UI 스타일 변수에 영향을 미치는 ‘base color’ 또는 ‘font family’를 찾을 수 있으실 겁니다. 일부 경우에서는 간접적인 영향을 가하기도 하기 때문에 주의하셔야 합니다.

Tip: Always try to keep the number of variables you are modifying to a minimum. If you are modifying a lot of component variables, check to see if there is a base variable that corresponds to all of them first.
팁: 항상 수정을 가하는 변수의 수를 최소화하시길 바랍니다. 다수의 컴포넌트 변수를 수정하신다면, 이 변수들과 일치하는 기준 변수가 있는지부터 확인하세요.

Component variables offer more detailed configuration options. Typically, you only change these variables if you are making major changes to the visual appearance of a theme. Keep in mind, changes to component variables will change the look of all the instances of the same component. Proceed with caution — a lot of component variables inherit from base variables or other component variables.
컴포넌트 변수는 더욱 상세한 설정 옵션을 제공합니다. theme의 시각적인 외형에 주요 변화를 야기하고자 하실 때는 일반적으로 이 변수들만 수정합니다. 컴포넌트 변수 수정은 동일한 컴포넌트들의 모든 인스턴스의 look을 변화시킨다는 점을 주의하셔야 합니다. 다수의 컴포넌트 변수들이 기준 변수 또는 다른 컴포넌트 변수로부터 상속 되었기 때문에 조심스럽게 진행하세요.

Some UI components can be fairly complex, such as Grid Panel (Ext.grid.Panel). Its appearance depends on variables defined in 15 different classes. That’s because Grid Panel is the combination of multiple components including a panel, columns, rows, editable cells, a grid, grouping headers, etc. You should also be aware that not all relevant component variables are listed when you select a component. When that happens, select the entire theme and search for the variables there. For example, if you’re using Grid Panel, searching for ‘grid’ will find all the variables you need to configure it.
Grid Panel (Ext.grid.Panel) 등의 일부 UI 컴포넌트들은 상당히 복잡할 수 있습니다. Grid Panel의 외관은 15개의 다양한 클래스로 규정된 변수에 의존하고 있습니다. 이는 Grid Panel이 패널, 행, 열, 편집 가능한 셀, 그리드, grouping header등의 복합적인 컴포넌트들의 조합으로 이루어져 있기 때문입니다. 컴포넌트를 선택하실 때 관련된 모든 컴포넌트 변수들이 열거되어 있지 않다는 점을 기억하셔야 합니다. 그런 일이 발생했을 때는 전체 theme을 선택하시고 변수를 검색하세요. 즉, Grid Panel을 사용하신다면, ‘grid’를 검색하셔서 설정하고자 하시는 변수를 찾으시면 됩니다.

Take a look at the following screenshot to see a list of variable groups containing grid related variables.
다음 스크린샷을 통해 그리드에 관련된 변수를 포함하고 있는 변수 그릅의 리스트를 확인하세요.

Grid Panel
All the classes that contain variables that define the look of Grid Panel.
Grid Panel의 외관을 결정짓는 변수들을 포함하고 있는 모든 클래스

Tip: When creating inheritances, avoid having the style of one component depend on the style of another component. As a rule of thumb, keep inheritance structure within the component or from base variables to component variables.
팁: 상속을 생성하실 때, 단일 컴포넌트의 스타일이 또다른 컴포넌트의 스타일에 의존하는 상황을 피하시길 바랍니다. 경험으로 보아, 상속 구조를 컴포넌트 내에서나 기준 변수에서부터 컴포넌트 변수로 유지하세요.

Tip: Almost all component variables have a prefix relevant to the component they affect. This makes searching much easier.
팁: 대다수의 컴포넌트 변수들은 영향을 미치는 컴포넌트들에 접두부 관련성을 가지고 있습니다. 따라서 검색이 훨씬 쉽지요.

You may want to create a view containing several components of the same type but have them look different (for example, a green ‘OK’ and a red ‘Cancel’ buttons). For this simple case, just apply a UI style to a single instance to modify how the component looks. You’ll find most of the default themes have predefined UI styles for commonly used components. However, when none of these suits your needs, you will want to create a custom UI style that you can configure and apply to a specific component.
동일한 유형의 컴포넌트들을 포함하고 있는 뷰를 생성하는 동시에 각기 다른 룩을 갖기 원하실 수 있습니다. (예: 녹색의 ‘OK’ 버튼과 빨간색의 ‘Cancel’ 버튼). 이런 간단한 경우에는 컴포넌트의 룩 변경을 위해 단일 인스턴스에 UI 스타일을 적용하시면 됩니다. 대부분의 디폴트 테마가 자주 사용하는 컴포넌트들을 위해 미리 규정된 UI 스타일을 가지고 있다는 것을 확인하실 수 있을 겁니다. 그러나 이게 맘에 들지 않으신다면, 직접 설정하고 특정 컴포넌트에 적용할 수 있는 custom UI 스타일을 만드실 수 있습니다.

Tip: Before creating a UI style, check to see if there is a default one that meets your requirements.
팁: UI 스타일을 만드시기 전에, 당신의 요구사항을 충족시키는 디폴트가 있는지 먼저 확인하세요.

Sooner or later, you may find there are things you want to change about a component for your app, but the variable for the UI style doesn’t exist. Fortunately, you can create it with a custom Sass resource that you attach to a theme. This custom Sass resource will always be linked to the theme. If you reuse the theme in another project, the linked Sass resource will come with it. Below are the two objects that allow linked Sass — theme and template resources.
이내 앱을 위한 컴포넌트 중 변경하고 싶은 부분들을 찾아내실 겁니다. 그러나 UI 스타일을 위한 변수는 존재하지 않지만 다행히도 theme에 첨부하신 Custom Sass 리소스를 사용해 만들어 내실 수 있습니다. 이 custom Sass 리소스는 항상 theme에 연결되어 있습니다. 다른 프로젝트에서 theme을 재사용하신다면, 연결된 Sass 리소스 역시 딸려올 것입니다. 다음은 연결된 Sass를 가능하게 하는 두가지 대상인 theme과 템플레이트입니다.

Linked custom Sass resources
Linked custom Sass resources can be added to the theme resource or to the templates in your project.
연결된 custom Sass 리소스는 프로젝트의 theme 리소스나 템플레이트에 추가될 수 있습니다.

Here are a couple of more tips that will make it easy for you to customize the look of your components.
컴포넌트들의 룩을 간단히 커스터마이징 할 수 있는 팁을 참조하세요.

Tip: The colorpicker is available when editing the custom Sass resource. To preview a color from the code, select the hex-code or any other type of color code and click on the colorpicker button — the color from the code will be selected.
팁: custom Sass 리소스를 수정하실 때 colorpicker를 사용하실 수 있습니다. 코드에서 컬러를 미리보시려면, hex-code나 다른 종류의 컬러코드를 선택하시고 colorpicker 버튼을 클릭하세요. 그러면 코드에서부터 컬러가 선택됩니다.

Tip: Automatic compiling can be toggled on and off. It’s useful to turn it off if you’re making a lot of subsequent changes (for example, editing a Sass resource) in order to prevent unnecessary compiling.
팁: 자동 컴파일링은 토클로 켰다가 끄실 수 있습니다. 다수의 후속적인 변화를 주고 계실 때는 (Sass 리소스 수정 등) 불필요한 컴파일링을 예방하기 위해 꺼두시는게 유용합니다.

Advanced Practices

Selecting a theme
theme 선택

When you create a new theme in Architect, it will always be an extension of a basic Ext JS or Touch theme. The underlying principles for creating Ext JS and Sencha Touch themes is the same. However, there are differences in how they were implemented. This is important to keep in mind because Ext JS and Sencha Touch themes are not interchangeable.
Architect에서 새로운 theme을 생성하실 때는 항상 기본 Ext JS 또는 Touch theme의 확장으로 이루어질 것입니다. Ext JS와 Sencha Touch theme을 만드는 기본 원칙은 동일합니다만, 실행 방법에 차이가 있습니다. Ext JS와 Sencha Touch theme은 교체사용이 불가하기 때문에 주의하셔야 합니다.

You can create your own themes based on any of the available themes in the Ext JS and Sencha Touch frameworks. If you want to radically change the look and feel of your app, consider using the Neptune theme (for Ext JS) or the Default theme (for Sencha Touch). These themes were created with customization in mind and have more variables than other themes.
Ext JS와 Sencha Touch 프레임워크 내 사용가능한 theme을 기반으로 본인만의 theme을 만드실 수도 있습니다. 앱의 look and feel의 전면적인 변화를 원하신다면 Neptune theme (Ext JS) 또는 Default theme (Sencha Touch)의 활용을 고려해보세요. 이런 theme들은 커스터마이징을 염두에 두고 만들어져 다른 theme보다 더욱 많은 변수를 가지고 있습니다.

Advanced inline Sass
고급 인라인 Sass

Variable inheritance is a powerful feature that allows you to directly link variables and combine them with modifiers for even more control. Modifiers in Sass are functions or mixins — either predefined or custom. For example, if you want to modify button base color to be 10% darker than base color, you can set its value to:
변수 상속은 개선된 통제를 위해 변수를 직접적으로 연결하고 수식자와 함께 결합시킬수 있도록 하는 강력한 기능입니다. Sass내 수식자는 미리 지정되거나 custom된 기능 또는 misin입니다. 예를 들어, 버튼 기본색을 기본색보다 10% 어둡게 수정하고 싶으시다면 다음과 같이 value를 설정하실 수 있습니다.

button base color darken($base-color, 10%)

By using this feature, color dependence is inherited from a base variable versus creating a discrete variable.
컬러 의존성은 이런 특징을 이용하여 불연속 변수와 대조적으로 기존변수로부터 상속됩니다.

Tip: For an overview of available functions in Sass, take a look at the Sass documentation.
팁: Sass에서 이용가능한 기능의 살펴보시려면 Sass documentation을 한번 보세요.

Theming templates

When working with templates, you can create a Sass resource linked to the template. You can insert the template structure into the linked Sass resource by clicking the button in the editor. This way you can jumpstart your styling, since all the classes in your template will be copied into the linked Sass resource.
템플레이트를 만드실 때, Sass 리소스가 템플레이트에 연결되게 만들실 수 있습니다. 에디터에 있는 버튼을 클릭하여 템플레이트 구조를 연결된 Sass 리소스에 삽입하실 수 있습니다. 템플레이트에 있는 모든 클래스가 연결된 Sass 리소스에 복사되기 때문에 이런 방식을 통해 스타일링을 시작하실 수 있어요.

Sass resource
Clicking ‘Insert tpl scss structure’ will detect and copy all the class names from your template into the Sass resource.
‘Insert tpl scss structure’를 클릭하시면 템플레이트에 있는 모든 클래스명이 Sass 리소스로 탐지 및 복사됩니다.

Exporting a theme for Ext JS and Touch projects
Ext JS 및 Touch 프로젝트를 위한 theme exporting

After creating a theme with Architect, you can export it for reuse in Ext JS and Touch projects. It’s a manual process, but it is quite straightforward.
Architect을 이용해 theme을 생성하신 후, Ext JS와 Touch 프로젝트에서의 재사용을 위해 export 할 수 있습니다. 수작업이긴 하지만 꽤 간단합니다.

The following steps require you to have Sencha Cmd 4+ installed and set up.
다음 과정을 위해서는 Sencha Cmd 4+를 설치하시고 셋업 하셔야 합니다.

For Sencha Touch 2.3:

  • After you’re done with theming, build your Architect project
    Theming을 마치신 후에 Architect 프로젝트를  생성하세요.
  • In your Architect project folder, locate the exported css file: build/testing/project-name/sencha-touch-xxx.css
    Architect 프로젝트 폴더에서 불러온 css 파일을 설치하세요: build/testing/project-name/sencha-touch-xxx.css
  • In the Touch project that you are importing the theme to, create a ‘theme’ folder at the root
    테마를 import 하고자 하시는 Touch 프로젝트에서 root에 ‘테마’ 폴더를 만드세요.
  • Copy the CSS file to the newly created ‘theme’ folder
    새롭게 만든 ‘테마’ 폴더에 CSS 파일을 복사하세요.
  • In the Touch project, edit the app.json file as follows:
    Touch 프로젝트에서 다음과 같이app.json 파일을 수정하세요.

    • find the ‘css’ property
      ‘css’ property를 찾으세요
    • modify ‘theme’ to the name of the theme it was based on, e.g. ‘Default
      기반이 되는 테마명으로 ‘theme’을 수정하세요. 예. ‘Default’
    • modify ‘path’ to theme/sencha-touch-xxx.css
      ‘path’를theme/sencha-touch-xxx.css로 수정하세요
  • Execute sencha build app to rebuild your Touch project with the new theme
    새로운 theme과 함께 Touch 프로젝트를 재생성하기 위해 Sencha build app을 실행하세요

For Ext JS 4.2

  • After you’re done with theming, save the project and locate the theme package in your project folder: project/packages/ext-theme-xxx
    Theming을 마치신 후, 프로젝트를 저장하시고 다음과 같은 프로젝트 폴더에 theme 패키지을 설치하세요. : project/packages/ext-theme-xxx
  • Copy the theme to your ext folder in your non-Architect project or workspace: ext/packages
    비Architect 프로젝트 또는 작업영역 내 ext 폴더에 theme을 복사하세요.: ext/packages
  • In your non-Architect project folder, edit app.json file to include the line ‘theme’ : ‘ext-theme-xxx’. If the ‘theme’ setting already exists, modify it to point to the new theme
    비Architect 프로젝트 폴더에서app.json파일이 ‘theme’을 포함하도록 수정하세요.: ‘ext-theme-xxx’. ‘theme’ 셋팅이 이미 존재한다면 새로운 theme을 나타내도록 변경하세요.
  • Execute sencha build app to rebuild your Ext JS project with the new theme
    Sencha build app을 실행하여 새로운 theme과 함께 Ext JS 프로젝트를 재생성하세요.

Note: if you rename the theme while doing the steps above, make sure you also adjust all the references to the theme name in all the config files in the package.

주의: 상위 단계를 실행하는 도중 테마명을 바꾸신다면 패키지 내 모든 config 파일에 있는 테마명에 관련된 사항을 수정하셔야 합니다.

Below, you can see the output from the Sencha Cmd Export Log. When saving or exporting the project, Sencha Cmd will report where the new theme has been saved.
다음은 Sencha Cmd Export Log의 아웃풋입니다. 프로젝트를 저장하거나 불러내실 때, Sencha Cmd는 새로운 theme이 어디에 저장되었는지 보고 할 것입니다.

Sencha Cmd Export Log
The Sencha Cmd Export Log shows that the custom theme ext-theme-neptune-d3f6xxxhas been exported into the packages folder within the project.
Sencha Cmd Export Log는custom theme ext-theme-neptune-d3f6xxx이 프로젝트 내 패키지 폴더에 export되었다는 것을 보여줍니다.

Bonus

If you are creating a full-blown theme rather than styling an app, we’ve created an Ext JS template containing all the commonly used components and settings in a single view — you can download it from market.sencha.com here. This template will let you see how the changes in the theme affect all the components.

Happy Theming!

앱의 스타일링뿐이 아닌 전면적인 theme을 생성하신다면 자주 사용되는 모든 컴포넌트들과 셋팅을 단일 뷰에 포함하고 있는 Ext JS 템플레이트를 활용하세요. 여기 Market.sencha.com 에서 다운 받으실 수 있습니다. 이 템플레이트는 theme에 가해진 변화가 모든 컴포넌트에 어떤 영향을 미치는지 확인 할 수 있도록 도와줄 것입니다.
그럼 즐거운 Theming 되세요!


번역:

[ 김종광 - JongKwang Kim ]

- 주식회사 종광, 수석연구원/CTO
- 한국센차유저그룹 운영자
- 미래부/NIPA, 소프트웨어 마에스트로 멘토

- E-Mail : kim@jongkwang.com
- Blog : http://jongkwang.com
- Twitter : @jongkwang
- Facebook : https://facebook.com/kimjongkwang