마트폰을 사용하고 난 이후 누구나 그렇듯 이리저리 핸드폰 배경화면이나 테마를 꾸민다고 많은 시간을 할애하게 됩니다.

이는 꼭 스마트폰이 아니라도 처음 Windows95를 사용하게 되었을 때도 마찬가지였던 것 같은데요.
하지만, 시간이 지나면 이 모든 짓(?)들은 삽질임을 늬우치게 되고 그냥 기본 테마로 가게 마련이지요.(결국은 성능 우선)

스마트폰에서는 Today 화면을 어떻게 꾸미느냐가 가장 큰 고민이었던 것 같습니다.
다양한 어플리케이션에서 제공하는 Today Plugin을 적절히 조합하면 이쁘고 유용한 Today 화면을 누구나 쉽게 꾸밀수가 있죠.

하지만, 이런 많은 프로그램들을 사용해보면서도 정말 신기하리만큼 제맘에 "쏙" 드는 프로그램을 찾기란 여간 힘든것이 아니었습니다.

그러던 와중에 알게된 "엄청난" 프로그램이 있었으니 바로 BatteryStatus 라는 프로그램입니다.

저도 처음에는 이름만 보고 "Today에 배터리 잔량이나 표시해주겠지~" 라는 생각에 그냥 넘겨버렸었는데요.
하지만 그건 저의 착각이었습니다.

이 프로그램은 Theme 기능을 이용해서 사용자 누구나 자신만을 위한 Theme를 직접 제작할 수 있게 되어있고 아이콘, 문자열 등 모든 부분에 있어 xml 파일만 수정하면 누구나 쉽게 Theme를 제작할 수 있도록 Library도 제공하고 있습니다.

사용자 삽입 이미지

<제 M480의 Today 화면, 제일 상단이 BatteryStatus>

그럼 서론은 이정도로 하고 BatteryStatus를 이용하여 Theme를 한번 꾸며보도록 하겠습니다.


◆ 우선 제작사 홈페이지로 가서 Download 받습니다.

http://www.chi-tai.info/cs_batterystatus_xda_neo_wm5_im_cs.htm#Download

설치하는 방법은 다른 스마트폰 어플리케이션과 다르지 않기 때문에 생략하도록 하겠습니다.


◆ Theme 제작을 위한 예제 및 설명 페이지

http://www.chi-tai.info/cs_batterystatus_xda_neo_wm5_ext_cust_im_cs.htm

Theme 제작을 위한 모든 상세한 설명은 위 페이지에서 확인할 수 있으며 저도 위 페이지를 직접 보면서 공부(?)를 하면서 Theme를 제작하였습니다.

하지만 그렇다고 "다 보고 알아서 해라"라고 하면 너무 무성의 해 보일 것 같아서 위의 스크린샷과 같이 제가 만든 심플한 Theme를 예를들어서 간단하게 설명해 보겠습니다.


◆  필요한 파일 및 폴더

사용자 삽입 이미지

우선 위와 같이 theme가 설정된 xml 파일 하나와 theme에 사용될 icon 파일 등이 모여있는 resource 폴더가 준비되어야 합니다. 이때, xml 파일의 이름과 resource 폴더의 이름이 꼭 같을 필요는 없습니다.

다음으로 resource 폴더 내부를 보겠습니다.

사용자 삽입 이미지

위에 폴더 내부를 보시는 바와 같이 제가 꼭 필요로 하는 이미지들만 만들어서 넣어두시면 됩니다.

여기서 주의해 주셔야 할 점은 시계를 표현하기 위한 숫자 이미지의 이름을 정확히 지정해 주어야 한다는 것입니다.

위의 그림을 예로 들어 설명하면 0~1까지의 이미지와 seperator, am, pm, alarmon, alarmoff 등의 이미지는 그 이름을 정확히 지정해 주어야 합니다.

그리고 나머지 SMS나, 부재중전화, Bluetooth, WiFi 등의 이미지는 원하는 이름을 지정하되 이름뒤에 숫자를 0과 1을 이용하여 활성화/비활성화를 구분해주셔야 합니다.


◆ Theme XML 파일의 수정

다음으로 본격적인 Theme XML 파일을 수정해 보도록 하겠습니다.
앞에서 말씀드린바와 같이 상세한 설명은 제작사의 홈페이지를 활용해주시구요.
저는 위에 보여드린 제 Today 화면을 만드는 법을 기준으로 간단하게 설명하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<Window xmlns="http://www.chi-tai.info/BatteryStatus" itemselect="1" mode="1" imagesrc="webpainter" version="1">
    <!-- 시간 및 날짜 -->
    <Row name="시계" >
        <View height="45" fontsize="0" rowtoggle="0">
            <Item class="date" ontap="StartApp" path="\Windows\calendar.lnk">
                <label text="MMMM d일 dddd" top="-15" left="-50" align="left" fontsize="-2" color="000000" />
            </Item>
            <Item class="clock_digit" >
                <image left="-120" top="10"/>
            </Item>
            <Item class="clock_digit" >
                <image left="-30" top="10"/>
            </Item>
            <Item class="clock_seperator">
                <image left="-10" top="10"/>
            </Item>
            <Item class="clock_digit" >
                <image left="0" top="10"/>
            </Item>
            <Item class="clock_digit">
                <image left="0" top="10"/>
            </Item>
            <Item class="clock_alarm" ontap="CtlPnl" index="16" subindex="2">
                <image top="-1" left="0"/>
            </Item>
            <Item class="clock_apm">
                <image top="17" left="-23" />
            </Item>
            <!--전화-->
            <Item class="registry_tracker"  ontap="PhoneMissedCalls" onhold="MenuPhone" absolute="1">
                <image src="misscall%d.png" left="140" />
                <label text="%d" suppress0="1" left="-22" top="-8" width="24" fontsize="-1" bold="1" align="center" color="000000">
                    <registry key_value="HKCU\System\State\Phone\Missed Call Count" />
                </label>
            </Item>
            <!--SMS문자-->
            <Item class="registry_tracker" ontap="StartApp" path="\Windows\SKTSMS.lnk">
                <image src="sms%d.png" left="12" />
                <label text="%d" suppress0="1" left="-30" top="-8" width="24" fontsize="-1" bold="1" align="center" color="000000">
                    <registry key_value="HKLM\System\State\Messages\SMS\Unread\Count" />
                </label>
            </Item>
            <!--Bluetooth-->
            <Item class="registry_tracker" ontap="ToggleBluetooth" onhold="MenuBluetooth">
                <image src="bluetooth%d.png" left="18" />
                <registry key_value="HKLM\System\State\Hardware\Bluetooth" mask="0x1" />
            </Item>   
            <!--WiFi-->
            <Item class="registry_tracker" ontap="ToggleWiFi" onhold="MenuWiFi">
                <image src="wifi%d.png" left="10" />
                <registry key_value="HKLM\System\State\Hardware\MITs\wifi"/>
            </Item>
        </View>
    </Row>
</Window>


페이지의 가로폭이 협소한 관계로 코드 보기가 힘들어졌네요- 양해바랍니다.


우선 xml을 잘 아시는 분이라면 더이상 설명이 필요없겠지만 없으신 분들을 위해 간단한 구조를 설명드리겠습니다.

본 xml 구조를 트리구조로 다시 표현하면

[windows]

└ [Row]

└ [View]

└ [Item]

└ [Image]

└ [Label]


와 같이 나타낼 수 있겠습니다.

여기서 [Windows]는 가장 최상의 태그로 꼭 넣어줘야 합니다
[Windows]는 1개 이상의 [Row]를 가질 수 있고 0개 이상의 [Image]를 가질 수 있습니다.
각각의 [Row]는 1개 이상의 [View]를 가질 수 있고 0개 이상의 [Image]를 가질 수 있습니다.
각각의 [View]는 1개 이상의 [Item]과 0개 이상의 [Image]를 가질 수 있습니다.
각각의 [Item]은 0개 이상의 [Image]와 [Label]을 가질 수가 있습니다.

결국 간단히 말하면
크게 행은 [Row]로 구분하고 열은 [Item]으로 구분한다고 보면 되겠습니다.

사용자 삽입 이미지

물론 사이에 [View]라는 녀석이 있긴 한데.
이것은 개념적으로는 하나의 [Row]에 다양한 [View]를 만들어 두고
시시때때 필요한 상황에 필요한 [View]만 보이게 하기 위해 활용가능합니다.
물론 Toggle을 통해서 바꿔가면서 볼 수도 있구요.

하지만 저의 Theme 같은 경우는 하나의 [View]만 사용하였기 때문에 이번에 여러개의 [View]를 사용하는 방법은 생략하도록 하겠습니다.

결국 우리 눈에 보이는 것은 [Item] 요녀석이 되겠죠.
그리고 [Item] 요녀석이 우리에게 보여줄 수 있는 방법은 - 이쁜 아이콘 혹은 글자 라는 것입니다~
바로 이게 핵심이 되겠습니다.

그러니까 위와 같이 큰 틀을 잡고 그 틀에 맞춰서 [Row][View][Item]을 배치시켜주고 그 각각의 [Item]에 이제 어떻게 보여줄 것인가를 생각해서 넣어주면 된다는 거죠.

위에 설명한 내용을 제 Today 화면을 예로 들어서 한번 살펴볼면 다음과 같이 되겠습니다.

사용자 삽입 이미지
그러니까 저같은 경우는 그냥 한 행으로 이루어 져 있기 때문에 [Windows][Row][View]를 그냥 하나씩 넣고 그 안에 [Item]들을 차례데로 나열해서 배치한 것이 되겠습니다.

물론 여기서도 주의해야할 사항들이 몇가지 있는데 그것들은 아래 절에서 상세히 설명하도록 하고 이번절에서는 Theme 파일의 전체적인 구조와 틀을 잡는 방법을 설명하였습니다.


◆ Item을 배치할 때 주의할 사항

Item을 배치할 때에 꼭 주의해서 봐야 할 Attribute들이 있습니다. 우선 [Item] 태그에 사용되는 Attribute 중에서는 아래의 Attribute 들을 알아야 합니다.

- class
각각의 아이템들이 무엇을 정의하고 있는지에 대해서 미리 정해놓은 class 명을 적어줍니다. 일반적인 item들은 이 class만 정의해 줌으로서 기본적인 내용은 자동으로 [Item] 태크의 위치에 자동으로 표시가 됩니다. 그리고 이 class 의 종류는 위에 설명한 제작사 홈페이지에 상세하게 나와 있습니다. 참고해보시면 되겠습니다.

- path
[Item]을 클릭했을 경우 바로가기 위치


[Item] 안에 들어가는 [Image]와 [Label] 에 들어가는 Attribute 중에서는 위치를 세팅하기 위한 다음의 Attribute를 기본적으로 알아야 합니다.

- left : 왼쪽 아이템을 기준으로 얼마나 떨어져 있는가를 정의

- top : 상/하 기준으로 중간보다 얼마나 위로 혹은 아래로 치우쳐져 있는가를 정의

물론 위의 위치 Attribute에서 기준값은 무조건 "왼쪽의 아이템"이 아닙니다. 기준값을 상대값으로 할 것인가 절대값으로 할 것인가, 혹은 왼쪽 아이템의 왼쪽을 기준으로 할 것 인가, 왼쪽 아이템의 오른쪽을 기준으로 할 것인가를 모두 정할 수 있으며 이는 [Item] 태그의 absolute Attribute 값을 세팅함으로서 바꿀 수 있습니다. 이 Attribute 값을 세팅하지 않으면 기본적으로 이전 아이템의 오른쪽을 기준으로 거리를 측정하게 됩니다. (이 역시 매뉴얼 페이지에 상세하게 나와 있습니다)


그 다음으로 [Image]의 경우 이미지의 경로를 적어주기 위한 src Attribute 가 있습니다.
이미지 경로를 적어줄 때에는 이미지 이름에 %d를 이용한 정규표현을 활용하여 상황에 맞게 다른 그림을 표현할 수 있습니다. 예를들어 sms%d.png 라고 이미지 명을 정해 놓으면 문자가 오지 않았을때에는 sms0.png 파일이 표시되고 문자가 왔을 때 sms1.png 파일이 화면에 표시되게 됩니다. 같은 방법으로 부재중전화, 블루투스, WiFi도 아이콘을 삽입하시면 되겠습니다.

그 다음 [Image]와 함께 글자를 표시하기 위한 [Label]을 활용해 보겠습니다. 일반적으로 블루투스나 WiFi 같은 경우는 디바지스의 On/Off만 아이콘으로 표시해주면 되지만 부재중전화나 문자는 횟수를 카운트해서 글자로 표현해주면 더욱 효과적입니다. 이같은 경우 [Label]을 이용하여 text Attribute에 "%d"를 넣어주면 카운팅 된 숫자만큼 화면에 표시가 됩니다.

[Label]도 left, top Attribute를 적절히 조절해서 위치를 조정할 수 있기 때문에 저와 같의 이미지 위에 겹쳐서 숫자가 나오게 할 수도 있겠습니다.


시계를 표현하기 위해서는 숫자 하나하나를 하나의 [Item]으로 표시해야하고 class는 "clock_digit"이 됩니다. "시"와 "분" 사이에는 "clock_deperator"라는 class의 [Item]도 추가해 줍니다.

알람을 표시하기 위한 [Item]의 class는 "clock_alarm"입니다.
am/pm을 표시하기 위한 [Item]의 class는 "clock_apm"입니다.
알람과 am/pm은 해당하는 이미지가 자동으로 toggle 되어 표시되게 됩니다.


◆ 기타 중요한 사항

추가적으로 제가 Theme를 만들면서 중요하게 생각하는 것이 몇가지 있는데 대표적인 것만 적어보겠습니다.

- [Windows] 에 itemselect
itemselect를 "0"으로 세팅하면 기본적으로 하나의 Row 단위로 선택이 됩니다. 이 값을 "1"로 세팅해주면 하나의 [Row]에 있는 각각의 Item들이 하나하나씩 선택이 됩니다. 이는 M480의 경우 핑거마우스를 사용할 경우는 별로 중요하지 않을 수 있으나 방향키를 사용할 경우 하나하나의 아이템을 찾아가기 위해서는 필수 세팅사항이 되겠습니다.

- [Windows]에 mode
mode를 "0"으로 하거나 생략하게 되면 기본적으로 qvga 모드가 됩니다. 그리고 "1"로 세팅하게 되면 vga 모드가 됩니다. 이는 자신이 RealVGA 96dpi를 사용하느냐 128dpi를 사용하느냐에 따라 다르게 세팅하면 되겠습니다. 누군가가 mode="0"으로 세팅한 테마를 자신의 128dpi 에 적용하면 아이콘들의 크기가 더 크게 늘어나서 보이기 때문에 희미하거나 일그러져서 보이게 되고 아이템의 위치도 달라지게 됩니다.


※ 시간이 부족하고 제가 글솜씨가 부족한 관계로 상세하고 체계적인 설명을 적지는 못했습니다. 머릿속에 많은것이 있는데 모든것을 전달하지 못해서 안타깝게 생각합니다. 위에 말씀드렸듯이 모든 Reference Library는 제작사 홈페이지를 통해 습득할 수 있습니다. 다만 제가 적어놓은 글을 참고하시고 다른분들이 만든 Theme를 참고하시어 적당히 수정을 하시면 누구나 BatteryStatus를 이용하야 나만의 Today 화면을 쉽게 만드실 수 있을꺼라고 생각합니다. 혹시 제가 쓴 글에 오류가 있거나 부족한 점 궁금하신 점은 댓글이나 메일로 보내주시면 제가 아는 한 상세하게 답변해 드리겠습니다.

크리에이티브 커먼즈 라이선스
Creative Commons License

트랙백을 보내세요

트랙백 주소 :: http://webpainter.pe.kr/trackback/25 관련글 쓰기

댓글을 달아 주세요

  1. 버들 2008/11/11 15:12

    정말 저에게 곡 필요한 내용입니다. 감사드리고요...담아가겠습니다.

비밀글 (Serect)
댓글 달기 (Submit)