안드로이드 Theme & Style (테마 & 스타일) 강좌

2013. 1. 10. 18:17





추가적인 강좌를 진행 하기 이전에 안드로이드 기본적인 UI 개념에 대해 설명해 드리겠습니다. 제가 안드로이드 프로그램 개발자가 아니라 다소 틀린 내용이 있을 수 있습니다. 제가 알고 있는 선에서 설명 해 드리겠습니다. 기본적으로 테마작업을 하게 되면 창작테마 방향으로 제작 진행하게 되면 이미지 수정작업 위주로 작업하게 됩니다. 하지만 안드로이드 탑재되어있는 테마를 이끌어내서 순정 테마 작업이 가능한 부분에 대해 설명해 드리겠습니다. 기본적인 개념만 잡으시면 테마작업하시는데 큰 도움이 될 수 있습니다.






안드로이드 Theme & Style


Theme 와 Style을 담당하는 부분은 Framework-res.apk 디컴파일 해서 나오는 valuse폴더안에 Style.xml에서 담당하고 있습니다. xml화일을 살펴보면 아래와 같이 크게 3가지 theme로 구분됩니다.

style name="Theme", style name="Theme.Holo", style name="Theme.deviceDefault"


이 Theme 라고 하는 부분이 안드로이드 UI를 담고 있는 내장 테마이며 theme는 style로 구성이 되어있는 집합체 입니다. 안드로이드 스마트폰 기기의 기본적인 테마 AndroidManifest.xml 에서 지정하고 있습니다. 이 부분에서 자신만의 Theme를 만들어서 기본 테마로 지정할 수 있습니다. 넥서스폰 같은 경우는 기본 UI를 holo theme를 사용하고 있고 국내에서 사용하고 있는 갤럭시 시리즈는 삼성 터치위즈 UI인 devicedefaul를 사용하고 있어서 기본적인 UI가 틀려집니다.


정리를 해드리면 devicedefault는 삼성의 터치위즈UI, theme는 안드로이드 진저UI, theme.holo는 holo UI라고 보시면 됩니다. 앞으로 진행할 강좌는 삼성 터치위즈 기본 devicedault부분을 holoUI로 바꾸는 과정에 대해 설명해 드릴겁니다. 미지 수정없이 소스만 수정해 가면 자신의 폰 UI가 holoUI로 변화되는 부분을 확인 하실 수 있습니다.

(style.xml에서 지정하고 있는 부분들은 이미 drawable, Layout에 소스가 만들어져 있는 부분입니다.)








이해가 잘 안가시죠? 스샷으로 설명해 드릴께요


아래와같이 삼성 터치위즈의 순정테마(devicedefault) 부분을 holoUI 로 변경할 수 있습니다.



style name="Theme.deviceDefault"

  



style name="Theme.Holo"

  






안드로이드 Theme 종류


맛클에 SKYRIM님께서 차이점을 너무 정리 잘해주셔서 종류에 관한 내용은 SKYRIM님 내용을 참조해 주시면 됩니다.

자료 포스팅 허락해 주신 SKYRIM님께 감사드리면 아래 링크 방문하셔서 추천 부탁드리겠습니다.

출처 : http://www.matcl.com/?m=bbs&bid=tip&uid=134822



이하 SKYRIM님 자료 입니다.


갤3(노트2도 동일)의 경우 총 6가지의 테마가 들어있습니다.



1. Theme

ICS이전에는 기본적으로 프레임워크 내에 테마 종류가 다양하지 않았고, 한가지의 테마만을 제조사 입맛에 맞게 커스텀했습니다.그래서 앱 개발자는 같은 내용물을 보여주고 싶어도, 기기에 따라 테마가 죄다 다르게 되어있으므로 보여지는게 천차만별이었습니다. (쉽게말해 파편화입니다) 이 파편화를 ICS부터는 방지해 보고자, 

테마를 여러개로 세분화한 것입니다. 그러면서 구형앱에 각 제조사마다 제각각으로 되어있던 그 부분을 그냥 'Theme'로 고정했고, 이 부분에 대해 수정을 하지 못하게 하였습니다. 이 부분은 진저브레드 까지의 호환성을 유지해야 하는 이유 때문에 ICS임에도 불구하고 진저브레드 스타일의 색깔, 모양을 고수하게 만들었습니다. 그것이 이부분을 진저 잔해라고 부르는 이유입니다. 즉 진저 잔해는 문제점이라기보다는 구형앱의 완벽한 호환을 위해 어쩔 수 없이 꼭 존재해야 하는 부분에 가깝습니다. (말은 구형앱이지만, 당장 가장 많이 쓰는 카카오톡만 해도 Theme의 스타일을 곳곳에 많이 이용합니다) 이 Theme부분은 진저브레드 까지의 아주 촌스러운 검정, 주황색 스타일로 구성되며, 리스트 줄간격이 매우 넓고 요즘 기기들과는 별로 맞지 않는 다소 조악한 스타일을 지니고 있습니다. 딱 보면 많이 촌스럽습니다.


<Theme의 예>



2. Theme.Light

1번에 소개한 기본 테마의 Light버전으로, 검정 위주 대신 흰색 위주로 만들어졌는데 실제로 이를 이용한 앱은 거의 존재하지 않기 때문에 볼 기회도 별로 없고, 크게 신경쓰지 않아도 되는 부분입니다. 구형 앱은 거의 99%가 Theme로 만들어져 있습니다.



3. Theme.Holo (Holo dark UI)

이것이 ICS부터 새로 만들어진 소위 'Holo UI'입니다. (앞으로 진행하게될 부분입니다.)

Holo UI는 구형 진저스타일의 Theme와 달리 흰색이 섞이지 않았으며 검정에 가까운 진한 회색, 그리고 푸른색 위주입니다. 또한 조악함 대신 세련미가 돋보이는 미래지향형 UI입니다.

또한 이 부분 역시 구글에서 각 제조사가 커스텀하지 못하도록 제한했습니다. 과거는 Theme를 각 제조사별로 커스텀했다면, 지금은 Theme, Theme.Holo 모두 구글 순정 그대로 탑재하도록 강제했습니다. 그렇기 때문에 ICS 이후부터 만들어진 앱은 되도록 Holo UI를 기본으로 하여 제작하도록 유도하였고, 그럴 경우 구형앱의 조악한 디자인이 아닌 세련된 미래형 디자인을 얻을 수 있고, 과거처럼 제조사별로 파편화가 일어나지 않게 됩니다. 쉽게말해 갤럭시든 옵티머스든 베가든, Holo UI를 이용하여 만들어진 앱이라면 어떤 기기든 같은 모양을 보여줄 수 있어서 파편화를 방지합니다. 이를 이용한 앱으로는 쿼드런트, 노바런처, QuickPic, 맛클앱(블랙테마) 등이 있습니다.

<Theme.Holo의 예>



4. Theme.Holo.Light (Holo light UI)

Holo UI의 또다른 모양입니다. 기본적으로 Holo UI와 쌍둥이지만, 검은색 위주가 아닌 흰색 위주로 구성됩니다. 이 UI를 사용한 앱들로는 가장 친숙한 구글 Play Store, G메일, 구글플러스, 구글맵, 맛클앱(화이트테마)이 있으며, 옵티머스 ICS의 기기 기본 UI도 Holo Light UI를 약간 변형하여 만들어 졌습니다.


<Theme.Holo.Light의 예>



5. Theme.DeviceDefault (Touchwiz holo dark)

이것은 이름에서도 알 수 있듯 기기 기본 테마를 말합니다. 즉 기존 진저까지는 프레임워크에 존재하는 한가지의 테마를 제조사별로 커스텀했다면, ICS부터는 아예 Theme와 Theme.Holo는 고정시켜두고 거기다 추가로 Theme.DeviceDefault를 만들어서 이것만 기기의 커스텀 테마로 쓰도록 한 것입니다. 삼성 갤3의 경우 터치위즈 UI가 여기에 해당합니다. 갤3의 터치위즈 UI는 갤2까지와 달리 뒤에 holo라는 이름을 붙여서 진한 청록색 톤을 이용하여 만들어졌습니다. 갤3의 삼성 기본앱들 대부분이 여기에 해당하며, 삼성 기본앱 뿐 아니라 Root Explorer같은 앱은 서드파티 앱이면서도 DeviceDefault를 이용하는 경우도 있습니다.

<Theme.DeviceDefault의 예>



6. Theme.DeviceDefault.Light (Touchwiz holo light)

이것은 삼성 터치위즈 UI의 light 버전입니다. 마치 구글 Holo UI에 light버전이 있는것과 유사합니다.

그러나 이는 어쩐 이유에서인지 쓸 수 없게 되어있습니다. 모양은 완성이 되어있습니다만, 안 쓰는 이유는 아마도 흰색 톤이다 보니 아몰레드 수명과 관련이 있다고 봅니다.

이 테마를 보려면 직접 자기가 테마 파일을 수정하는 수밖에 없습니다.

완전한 Touchwiz holo light는 아니지만, 삼성Apps 어플이 이 UI와 거의 비슷한 모양과 색감을 사용합니다.

<Theme.DeviceDefault.Light의 예>






앞으로 안드로이드 기본테마를 HoloUI로 바꾸는 강좌를 3회정도로 나눠서 진행 드리겠습니다.


좋은자료 제공해주신 SKYLIM님 다시한번 감사드립니다.







azdesign™ ☆ 테마제작관련 ☆/테마제작강좌 , , , , , , , ,



  1. Blog Icon
    NM

    강좌가 기다려집니다..!!
    수고하시고 새해복 많이 받으세요~

  2. Blog Icon
    Az님팬

    기대되네요 잘보고 배울게요

  3. Blog Icon
    쏘~~닉

    기대기대 ^^

  4. 와우 멋집니다ㄷㄷ

  5. Blog Icon
    paulice

    한눈에 이해가 갑니다^^
    개인적으로 holo light가 넘 끌립니다ㅎ
    xml에서 어찌하면 holo light가 될까요?

  6. Blog Icon
    daedaios

    아주 유용한 강좌가 될겄 같네요 개인적으로 질문 하나만 하면 안될까요?
    전에 디자이어HD 쓸떼에는(롬은 안드로이드 레볼루션이었어요) 포샾으로
    투명 이미지만 만들어서 넣어주며면 설정창이나 기타 앱등에서 투명으로 쓸수 있었는데요
    넥서스4 는 죽어도 않되네요 background_holo_dark 투명으로 해도 그냥 검은 화면만 나오고
    다른 그림이 있는이미지는 적용되지만요 아무리 방법을 찿아보고 강좌글 뒤져봐도 도통 모르겠네요 알고 게시면 좀 알려 주실 수 없나요?

  7. 안드로이드 4.2.2가 사진 이미지는 있어도 뒤에 배경이 xml로 색상코드로 고정되기 때문입니다.

  8. Blog Icon
    cruel

    저기 디컴파일은 되는데 컴파일이 안되는데 어떻게하죠??로그봐도 하나도 모르겟네요 ㅠㅛㅠ

  9. styles.xml인가 거기아서 어떤 부분을 수정하면 cm 등의 롬에서 Holo.Light.Dark.ActionBar 을 환경설정등 전체적인 유아이에서 기본 테마로 쓸수있는지 말씀해 주실수 있으신가요 ㅠ