U.Seung's Log

 안녕하세요.
 오늘은 잠시 쉬어가는 의미로 테마 제작 이야기를 이어서 적습니다.
 벌써(?) 세 번째 이야기가 되겠습니다.

 너무 딱딱하게 적으면 재미 없을 것 같아서
 이번에는 제가 테마를 만드는 과정을 차례대로 적어 보았습니다.

 기존에 만들었던 구글 (단모음) 키보드 테마 제작 과정을 최대한 실화를 바탕으로 적었습니다.
 물론, 제작은 몇 주전에 했고 글은 오늘 적으니까 시간상 차이는 꽤 있습니다. ㅎㅎ


#1. 배경이미지 만들기

 먼저 YooKey Pro의 테마를 만들기 위해서는 배경 이미지가 필요합니다.
 아래는 기본 테마에 포함되어 있는 배경 이미지 입니다.

 이 배경 이미지만 바꾸어도 멋진 테마가 되겠죠?!
 혹시나 해서 필요하실 수 있으실 것 같아서 버튼 사이즈를 조정한 파일도 올립니다.
 왼쪽은 버튼을 1개 더 쓰실 수 있도록 [다음문장]을 쪼갠 것이고, 오른쪽은 [간격]과 [다음문장]을 반반 싸이즈로 맞춘 것입니다.



 오늘 설명 드릴 테마는 구글 키보드를 배경으로 만들어야 되는데
 안드로이드에서 사용하는 배경을 그대로 가져다 쓰면 편할것 같다는 생각이 들었습니다.

 그래서 갤S를 쓰는 친구에게 카카오톡을 부탁을 좀 했습니다.
 ( 대화에서 부분 부분 오려다가 붙였습니다..)

 갤S 유저도 모른다고 하니 모르는 사람이 많긴 한가 봅니다.

 귀찮다고 안 해주면 어쩌나 걱정했는데
 다행이 나중에 밥을 사주기로 하고 (말로만...) 배경 그림을 획득 했습니다. ^^
 아래가 실제로 제가 받은 파일입니다.
 

 이제 이미지를 YooKey에 맞게 가공을 해야 합니다.
 YooKey에서는 320x216 크기를 사용합니다.
 iPhone 4/레티나 디스플레이 용으로 만들고 싶으시면 640x432로 만드시면 됩니다.

 저는 이 작업을 할 때, Paint.NET이라는 프로그램을 이용합니다. (http://www.getpaint.net/)
 가볍고 무료이고 가벼워서 사용합니다. 개인적으로 n년동안 썼는데 이제 어느 정도 사용도 익숙 해졌습니다.
 네 뽀샵을 사용할 줄 아신다면 뽀샵을 이용하셔도 됩니다. (저는 프로그램도 없어요.)

 주로 하는 작업은 이미지의 작은 부분을 Select한 후, Copy & Paste로 문자를 지우는 작업입니다.
 일단 크기에 맞게 Crop한 후, 자판에 적힌 글씨를 모두 지웠습니다.
 쉽게하는 방법이 있는지 모르겠지만.. 전 그냥 Copy & Paste신공으로 열심히 작업했습니다. ^^
 몇 분 정도의 작업 끝에 결국 아래와 같은 이미지를 만들었습니다. (320x216 사이즈의 이미지 입니다. )

 처음엔 몰랐는데 작업을 하다보니.. 원본 이미지 퀄리티가 좀 떨어진다는 것을 발견 했습니다.
 카카오톡이 이미지를 손상 시킨 것 같기도 하고요. 안드로이드 자체가 이러진 않을 것 같은데 말이죠.
 친구한테 다시 보내달라고 하기도 그렇고.. (사실 작업하던게 아까워서) 그냥 이걸로 쓰기로 했습니다.

 일단 그래도 이미지를 만들었으니 iPhone에 넣어 볼까요? (굳이 따라하진 마세요. ^^)
 이미지만 넣으면 이렇게 됩니다.ㅋㅋ
 

#2. 버튼 배치 하기

 이제 배경은 만들었으니 버튼을 만들어야 합니다.
 각각의 버튼은 픽셀단위로 위치를 직접 지정을 해줘야 합니다.

 'ㄱ' 이라고 표시 되는 버튼은 (10, 30) 의 위치에 있고,
  너비는 100px, 높이는 50px 다.  이런식으로 사용자가 지정하면 YooKey에서는 해당 위치에 투명한 버튼을 만들어 줍니다.  YooKey에서는 이러한 설정을 xml 파일을 통해서 하고 있습니다.
  실제 파일은 열어보면 아래와 같이 생겼습니다.

  모든 버튼을 다 일일히 지정해야 하냐고요?
  네 그렇습니다. 모든 버튼을 저렇게 하나씩 다 적어줘야 합니다. (약간의 노가다 작업이 있는 것은 사실입니다.)

 그래서 저는 이것을 SpreadSheet로 정리해서 작업에 사용합니다. (종이에 적기도 하고요)
 Excel이라는 Microsoft의 훌륭한 프로그램이 있으신 분들은 사용하셔도 되지만
 저 처럼 Excel이 없는 분들은 그냥 Google Docs를 이용하시면 됩니다.

 각각의 버튼에 대해서 위치와 크기를 SpreadSheet에 정리를 다하면 아래와 같이 됩니다.

 이런걸 어떻게 만드냐고요? 이미지 파일 열고, 한땀 한땀 픽셀을 세면... 어렵지 않습니다. ^^
 ( 대충 보면 패턴이 있기 때문에 몇개 해보고 붙여넣기 하시면 됩니다. )

 이제 각 버튼를 구분할 수 있도록 ID를 할당 해주어야 하는데요.
 [ㄱ]이나 [ㅏ] 버튼 처럼 사용자가 버튼의 기능을 정하는 버튼은 적절하게 중복되지 않는 아이디를 쓰면 되지만
 [BackSpace]나 [Space]등의 기능 키들은 반드시 이미 할당된 ID를 사용해야 합니다.
 이미 할당 된 기능키 들의 ID는 아래 문서에 정리 해두었습니다.
 ( 기능키가 아니더라도 ID는 정해진 범위의 값을 써야 합니다.)

 이제 위의 문서를 참조해서 각 버튼에 대해서 ID를 부여하면 아래와 같이 됩니다.

 이걸 YooKeyStyle.xml 파일로 바꿔야 하는데요.
 아까 보여드린 XML 형태가 있죠? 그런 형태로 바꾸어야 합니다.

 저는 가끔씩 약간의 노가다 작업을 피하기 위해서 간단한 프로그램을 만들어서 쓰기도 하는데요.
 여기에 대해서는 정신 건강의 이유로 많은 분들에게 권장 드릴만한 것이 아니기 때문에
 꼭 필요하신 분만 살짝 펼쳐 보세요. (꼭 이렇게 하실 필요가 없다는 이야기 입니다.)

더보기

 
 이제 기존에 있던 YooKeyStyle.xml 파일에서 위에서 만든 부분만 붙여 넣은 다음 UTF-8 포맷으로 저장하고,
 혹시 XML 포맷에 깨지지 않았는지 Internet Explorer에서 XML 파일의 유효성을 체크 해준다음에
 iPhone에 넣어 보았습니다.

 아직은 부족하지만 그래도 어느 정도 모양이 잡혀가는 것 같죠?!
 네, 놀랍게도(?) [줄바꿈] 버튼과 [지구본], [Space] 는 심지어 동작을 하기도 합니다.
 다른 버튼은 아직 지정하지 않아서 누르면 소리와 진동은 있지만 글자를 입력 시키지는 못합니다.

 하지만, 전체적으로 버튼의 위치가 원하는 곳에 맞게 지정되었는지 한눈에 볼 수가 없습니다.
 그래서 테마 제작 하시는 분들을 위해서 v1.0.5부터 DEBUG_MODE 라는 것을 만들었습니다.
 설정 > YooKey > 길게 누르는 키 인식 시간 > DEBUG_MODE 를 선택하시고, 
 원하시는 어플리케이션을 재 시작 해주시면 됩니다.

 그러면 아래와 같이 버튼으로 지정한 부분에 흰색 RoundBox가 나타납니다.



 이제 거의 정확하게 버튼이 위치하신 것을 보실 수 있습니다.
 한 땀, 한 땀, 픽셀을 세었더니 이렇게 잘 맞습니다. 아하하하;;;;

#3. 버튼에 문자 할당하기

 여기부터는 조금 재미있는 단계 입니다.
 이제 이미지도 만들고, 버튼도 배치 시켰으니 버튼 위의 문자를 지정하고, 버튼을 눌렀을 때 어떤 동작을 할지 지정만 하면 됩니다. (이제 픽셀을 세지 않으셔도 됩니다.ㅋ)

 각 버튼이 어떤 역할을 할지 지정하면 되는 것 인데요.
 가장 위에 있는 버튼은 화면에는 [ㅂ]이라고 표시한 다음,
 한번 누르면 [ㅂ] 두번 누르면 [ㅃ] 세번 누르면 [ㅂ].. 이 입력되도록 만들면 됩니다.

 네, 역시 이것도 XML을 작성해야 하는 데요. 아래와 같이 작성하시면 됩니다.

 여기에서 가장 중요한 것은 position이 48번 이라는 것입니다.
 위에서 첫번째 버튼에 48번 ID를 할당한 적이 있죠? 그 ID를 여기에 지정하시면 됩니다.

 두 번째로 중요한 것은 key type이 0번 이라는 것인데
 이 key type은 value에 적힌 값을 번갈아 가면서 입력 해줍니다.

 세 번째로는 title부분인데 이 부분에 적힌 문자가 화면에 표시됩니다. (단순히 표시용으로만 사용 됩니다.)

 key type이 0번 타입말고 어떤 타입이 있는지 궁금하신 분도 계실 텐데요. 아래 문서를 참조하여 주시면 됩니다.

 이런 식으로 각 버튼의 기능을 정의 하는 파일로는 기본 패키지에는 아래와 같은 파일이 있습니다.
 - Korean_EZ.xml
 - Korean_1000ZIN.xml
 - Digit.xml
 - Symbol_1.xml
 - English_LowerCase.xml 

 파일명은 딱히 정해진 것은 아니며, 원하는 이름을 쓰시고 해당 이름을 YooKeyConfig.xml에 지정 해주시면 됩니다. 저는 YooKey_GDAN.xml 을 사용 하였습니다.
 역시 이 작업도 각 버튼마다 하나씩 기능을 지정 해주어야 합니다. 특정 버튼에 대한 설정이 누락 된다면, 해당 버튼은 동작하지 않습니다.

 여기까지 작업이 완료되면 아래와 같이 키보드가 완성(?)됩니다.

여기까지 작업된 버전이 실제 어떻게 생겼는지 궁금하시면 위의 파일을 받으시면 됩니다.

#4. 튜닝!

 사실 여기까지 만들었다고 해서 끝은 아닙니다.
 많은 실전 테스트를 통해서 개선할 부분을 개선해야 겠죠?!

 저는 많이는 못하고, 몇가지 부분만 개선 해보았습니다. ( 이 부분은 최근에 작업하였습니다. )
 조금 더 개선할 부분이 남아 있는데.. 이건 다음에 여유가 생기면 작업 하겠습니다.

 [개선한 부분]
  - 쓰다보면 빈칸이 너무 많아서 잘 안눌리는 것 같은 느낌을 받습니다.
     그래서 빈칸을 최소화 했습니다.
  - 아이폰 자판은 위로 불룩 불룩 튀어나와서 좋은데 그런게 없어서 좀 아쉽죠.
     그래서 조금이나마 튀어 나도록 수정했습니다.
  - 버튼 Highlighted 되었을 때, 배경 이미지를 버튼에 알맞게 추가 하였습니다.
  

[개선 가능한 부분]
  - 아이폰에 내장된 Qwerty 키보드와 같이 쓰면 높이가 미세하게 안 맞습니다. 높이가 맞으면 좋을 것 같습니다.
  - 길게 눌렀을 때의 버튼을 추가하고, 이게 배경 이미지에 안드로이드 처럼 우측 상단에 작은 글씨료 표시되면 좋을 것 같습니다.
  - 화살표 기능을 좋아하시는 분도 계실텐데 지금은 화살표 키가 없네요 ^^