어제는 다소 이론적인 부분을 소개 해드렸는데..
오늘은 실전편... 같이 하면서 배우는 YooKey Pro 커스터마이징 입니다.
준비물:
0. YooKey Pro 정품이 설치된 아이폰/아이팟
1.
YooKey Resource 패키지
2.
i-Funbox
3.
Notepad++
일단 WinterBoard에서 천지인BIG을 선택합니다.
여기까지는 쉽게 하실 거라고 생각합니다.
위의 스크린샷은 기본 메모 어플입니다.
이번 목표는 [간격] 버튼과 [다음] 버튼을 바꾸는 것 입니다.
꼭 해낼 겁니다. ^^
일단은 준비물 1번.. YooKeyResource 파일을 다운 받은 후, 적당한 곳에 압축을 풉니다.
저는 아래 그림과 같이 바탕화면에 풀었습니다.
그리고, Library/Themes 폴더로 이동합니다.
여기에 지금 우리가 설정한 YooKey_1000ZIN_BIG.theme 폴더가 보이는데..
이것을 기준으로 바꿀 것이기 때문에 이 폴더를 통채로 복사 합니다.
저는 Ctrl+Drag로 복제 폴더를 만들었습니다.
드래그가 익숙치 않으시다면... Ctrl + C / Ctrl + V 하셔도 됩니다.
그렇게 하시면 조금 마음에 안 드는 이름이 생성되는데..
이름을 YooKey_Custom.theme로 바꾸어 줍니다.
그럼 아래와 같은 모양이 될 것입니다.
자 이제 YooKey_Custom.theme 폴더에 커서를 가져다 대시고.엔터를 다.다.닥. 누르시면.. (혹은 클릭. 클릭. 클릭) UIKit.framework 폴더까지 도착하실 수 있습니다.
총 3개의 파일이 있습니다. 일단 PNG 파일은 구경 한번씩 해주세요 ^^
어떻게 생겨 먹은 놈인지 보시면 아실 겁니다.
(참고로 제가 만들었어요. 크기는 320x216 인데 한칸에 몇 pixel씩 할당해야 하는지 열심히 계산해서 만들었습니다.)
이미지는 필요에 따라서 기호에 맞게 고치실 수 있습니다.
우리가 오늘 고칠 녀석은
YooKeyStyle.xml 입니다.
HTML 보면.. <a style="font-size:12px; top: 10px; font-face: 잘생김"> 이렇게 해당 태그가 가지는 비쥬얼적 속성을 style이란 attribute를 통해서 지정할 수 있습니다. 마찬가지로 YooKey에서도 각 버튼도 저런식으로 하면 좋겠다 싶어서 이름을 Style이라고 지었습니다.
또, 이야기가 길어지는데 이만 줄이고 YooKeyStyle.xml 을 아까 준비물3 에 나온 Notepad++로 열어 줍니다.
(다른거 쓰셔도 됩니다.)
그 다음에 파일을 주~~~욱 내려가다 보면 아래와 같은 부분이 있습니다.
frame이라고 적힌 곳 옆에 x, y, width, height가 보입니다.
왠지 [다음]과 [간격]의 frame값을 바꿔주면 될 것 처럼 보입니다.
일단 이 부분을 바꾸고 저장을 합니다.
이제 iPhone을 PC에 연결 합니다.
준비물2에 에서 준비했던 i-Funbox를 실행시키고, iPhone의 /Library/Themes 폴더로 이동합니다.
그리고 이제 직접 만든 YooKey_Custom.theme/ 폴더를 iPhone에 (슝~) 복사하시면 됩니다.
자 이제 WinterBoard를 켜면 어떻게 될까요?
신기(?) 하게도 방금 만든 애가 올라와 있습니다.
기쁜 마음에 선택을 하고 Respring ㄱㄱ ~
이제 다시 기본 메모 어플을 열면?
두그 두그 두그....
뭔가 바뀌긴 바뀌었습니다.
눌렀더니 정상 동작 하긴 합니다.
근데 글자 색깔이 굉장히 어색합니다.
아무래도 저렇게 쓸수는 없을 것 같습니다. 뭔가를 더 바꿔야 할 것 같습니다.
다시 Notepad++을 열고, [간격]과 [다음]이 들어간 곳들을 비교해 보면..
style="0", style="1"..... 저 놈들이 다른데.. 뭔가 비밀(?)을 가진 것 같습니다.
파일의 위 쪽으로 가보면.. 스크롤을 쭈~~욱 해보면...
뭔가 style에 대한 선언이 되어 있는 것을 보실 수 있습니다.
주목해서 보야할 부분은..
button style 0번은 title_color가 0,0,0,1 이고
button style 1번은 title_color가 1,1,1,1 입니다.
그리고, 버튼에 들어간 글자의 색상은 좌측 버튼들은 검정색이고, 우측 버튼들은 하얀색 입니다.
애플의 개발킷에서는 색상의 RGBA값을 255, 255, 255 단위로 쓰지않고, 0.0 ~ 1.0 범위의 소수 단위를 사용합니다. ( 0.5는 127 쯤 되고, 1.0 이 255가 됩니다. ) 그래서 YooKey도 이에 맞추었습니다.
따라서 button style 0번은 검정색 글씨에 흰색 그림자를 설정한 것이고, button style 1번은 흰색 글씨에 검정색 그림자를 설정한 것입니다. CSS에도 보면 class라고 해서 style sheet를 위에다가 선언해서 쓸수 있는데 그것과 비슷한 개념이라고 보시면 됩니다.
위치가 바뀌었으니 당연히 색상도 바뀌어야 겠죠?
YooKeyStyles.xml의 [간격]과 [다음]의 button style id도 서로 바꾸어서 저장 해 줍니다.
그리고는 해당 파일을 i-Funbox를 이용해 아이폰에 드래그 한번 해 주신 후,
메모 어플을 재시작 하면 이제 아래와 같이 나옵니다.
음... 뭔가 이제 색상은 맞추어 진 것 같은데..
[다음] 버튼의 크기가 좀 눈에 거슬립니다. 폰트의 크키가 [ㅇㅁ]이나 [ㅈㅊ]과 맞 먹습니다.
다시 YooKeyStyle.xml 파일을 열어 보면..
아래 그림에서 처럼 기존에 [간격] 버튼은 폰트 크기를 강제로 더 줄인 것을 보실 수 있습니다.
즉, 여기에 설정한 Style은 id를 통해서 지정했던 Style기반 하에 추가적인 Style을 지정할 때, 사용할 수 있습니다. (HTML도 그런 식 입니다.)
이제 이 부분도 [다음] 버튼 쪽으로 옮겨 줍니다.
YooKeyStyle.xml 파일을 다시 한번, 저장 후
i-Funbox를 통해서 다시 iPhone으로 해당 파일을 옮겨 줍니다.
그리고 나서 다시 메모 어플을 재 시작 하면.......
두둥~
처음 모양에서 간격과 다음이 바뀌신 것 보실 수 있습니다. ^^
------------------------------
위에서 설명한 과정을 통해서 만든 파일을 첨부 합니다.
-------------------------------
네이버 통합 검색에서 "YooKey 테마" 혹은
이미지 검색에서 "YooKey" 로 쳐보니까 테마 만드신 분들이 꽤 계시네요 ^^