AirenSoft Story

Window는 컨텐츠를 출력하는 역할을 수행하고,  Views는 컨텐츠를 구성하고 그리는 역할을 수행합니다. Window는 MS Windows와 비교하였을 때 메인 다이얼로그, Views는 컨트롤이라고 생각해도 무방합니다. 일반적으로 아이폰 어플리케이션은 1개의 Window와 여러개의  Views로 구성됩니다. 어플리케이션이 생성될 때 UIWindow 클래스의 인스턴스가  아이폰 어플리케이션의 유일한 window가 되고, 그것에 하나 이상의 Views가 포함됩니다. 그 후 UIWindow는 포함된 Views를 출력하는 역할을 수행하게 됩니다. 아이폰 운영체제가 계층적인 windows를 지원하기는 하지만, 1개가 넘는 window를 생성하지 말라고 경고하고 있습니다.

UIWindow는 닫기 버튼이나 타이틀바와 같은 UI를 제공하지 않습니다. 모든 기능은 프로그래밍으로 정의하여 처리해야 합니다. 이것은 모든 아이폰 어플리케이션이 같은 UI 방법으로 시작과 종료를 하기 위한것으로 아이폰의 바탕화면에서 아이콘을 터치하여 프로그램을 시작하고, 홈 버튼을 눌러서 종료하는 것을 위한 것입니다.

어플리케이션을 생성할 때, window의 초기 사이즈는 화면 사이즈에 꽉 차게 생성됩니다. nid나 코드 모든것을 통해서 window는 화면 사이즈보다 작아질 수 없습니다. 화면 사이즈에 맞는 UIWindow는 다음과 같이 UIScreen 을 이용하여 다음과 같은 코드로 생성할 수 있습니다.

<code>
UIWindow * aWindow = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
</code>

아 이폰 어플리케이션에서 view는 대부분 UIView를 상속받아 만들어집니다. 이것은 사용자의 인터페이스를 출력하고, 인터페이스와 통신하는 중요한 두가지 역할을 수행합니다. 모든 view 오브젝트는 지정된 사각 영역 안에서 출력하고 인터페이스의 이벤트를 처리합니다.

하나의 view는 여러개의 sub view를 관리합니다. sub view의 관점에서 그것을 포함하고 있는 view는 superview 또는 parent view라고 불립니다.  sub view 또한 또 다른 sub view를 포함하여 superview가 되는 계층적 구조를 가지고 있습니다.

아이폰 운영체제는 UIKit 이라는 클래스를 제공합니다. UIKit은 UIView를 이용한  window와 각종 컨트롤(views)을 제공합니다. 정말 다양한 views를 제공하기 때문에 다른 운영체제에서 프로그래밍할 때와는 다르게 새로운 컨트롤을 제작할 일이 거의 없습니다. UI 디자인도 그 무엇보다 훌륭하여, 프로그래머가 디자인에 신경쓰지 않고 기본 컨트롤을 그대로 써도 멋진 프로그램이 될 정도입니다. 다른 운영체제(Window)에서는 그렇지 않았죠.


위 그림에서 보는 것과 같이, 정말 많은 컨트롤이 기본적으로 제공되고 있습니다. 각 컨트롤에 대한 자세한 내용은 각각의 컨트롤을 검색하여 사용해보시면 금방 숙지할 수 있습니다.

UIKit은 기본적으로 top-left 좌표계를 사용합니다. 왼쪽 상단이 0,0으로 아래, 오른쪽으로 갈 수록 숫자가 커지는 방식입니다. 다른 운영체제처럼 정수계를 사용하지 않고, floating 형식, 즉 실수계를 사용합니다. 이것은 더 정확히 위치를 잡을 수 있게 하는것에 많은 도움이 됩니다. 예를 들어 300, 300 사이즈를 1/4 로 줄였다가 다시 4배로 정확히 키울 수 있습니다. 다음 그림은 아이폰 스크린과 좌표계의 관계를 나타냅니다.

모든 View 객체는 크기와 위치 속성을 포함함니다. 크기와 위치를 결정하는 속성으로는 Frame과 Bounds라는 두 가지의 중요한 개념이 있습니다. Frame은 출력되는 화면 영역을 의미하고, Bounds는 출력할 데이트에서의 영역입니다. 아래 그림을 보면 이 개념을 확실하게 이해할 수 있습니다. 왼쪽에 있는 그림 데이터에서 사용할 영역을 지정한것이 Bounds 개념이고, 이 Bounds를 화면 영역의 어느 부분에 출력할 지 결정하는 좌표가 Frame 영역입니다.

또 한가지 속성에 Center 값이 있습니다. 이 값은 Frame 영역에서의 가운데 좌표(X, Y)를 의미합니다. Bounds 영역에서의 Center가 아니라는 점을 꼭 명심하고 있어야, 나중에 개발 할 때 헷갈림이 없을 것입니다.

View 객체가 생성될 때 위 세가지 (Bounds, Frame, Center) 속성이 다음과 같이 초기화 됩니다.
Bounds rectangle 의 원점(Top-Left)를 0, 0으로 설정하고, 가로, 세로를(Width, Height)를 Frame(화면 영역)과 같게 설정합니다. 그리고 Center 속성을 Frame의 width/2, height/2 즉 가운데로 설정합니다. 이 세가지의 속성은 각각을 수정해도 다른 두가지의 속성에 다음과 같이 영양을 끼칩니다.

* Frame 속성을 설정하면 Bounds가 Frame의 사이즈에 맞게 확장됩니다. 그리고 Center 속성이 새로운 Frame에 맞게 변화합니다.
* Center 속성을 설정하면 Frame 속성의 원점이 변경됩니다. 즉, Frame의 크기가 변경되는 것이 아니고 Frame의 가운데를 손가락으로 잡고 움직여서 Frame 자체를 움직이는 듯한 효과가 있습니다.
* Bounds의 사이즈를 변경하면 Frame이 그 크기에 맞춰서 변화합니다.
* Bounds의 원점은 두개의 속성(Frame, Center)의 변경 없이도 바꿀 수 있습니다. 아래 그림과 같이 Bounds의 원점을 대각선 아래로 변경하여 그림의 다른 부분을 똑같은 Frame 에 출력되도록 할 수 있습니다.

이로서 아이폰의 윈도우, 뷰, 좌표계의 개요를 마무리 하겠습니다. 다음 강좌에서는 각 좌표를 변환(회전, 이동, 확대, 축소)등을 수행할 수 있는 방법을 소개하고 실질적으로 실습하는 모습을 보여드리겠습니다.

이번주에는 매우 간단한 게임 두 가지에 대해서 리뷰하겠습니다. 이 두 가지 게임은  두 손가락을 가지고(한 손으로 해도 됩니다) 속도를 즐기는 게임이라는 공통점을 가지고 있습니다.

그 첫 번째는 2009년 2월 21일 Entertainment 카테고리의 free application 9 위인 Bubble Wrap 이라는 게임입니다. 이른바 사람들이 말하는 일명 뾱뾱이( 에어캡 ) 게임입니다.
 

게임을 시작하면 화면에 우리가 종종보던 뾱뾱이(에어캡)들이 자리를 잡고 있습니다. 자, 지금부터 45초 동안 손가락들이 얼마나 빠르게 움직일 수 있는지 내 손가락의 속도를 확인하는 일만 남았습니다.

45초간의 스피디한 손가락 움직임을 보여주었다면 나의 점수를 기록합니다.

Bubble wrap은 어릴적에 뾱뾱이(에어캡)가 생기면 장난감 삼아서 놀던, 그 향수를 불러일으키는 그런 게임입니다. 손가락을 얼마나 빠르게 움직이느냐 하는 단순함으로 다가옵니다. 하지만 제가 게임을 즐겼던 환경이 i pod touch 2세대였기 때문인지, 뾱뾱이(에어캡)를 누르는 생동감을 단순히 소리로만 느껴야 한다는 것이 작은 아쉬움으로 남았습니다. 아마도 iPhone 이라던가 국내에 있는 T 옴니아나 햅틱등의 진동이 되는 기기라면 보다 재밌게 즐길 수 있을 것으로 생각 됩니다.

팁을 한가지 드린다면, 터치를 통하여 터진 뾱뾱이(에어캡)가 다시 바람이 들어가는데 시간이 조금 걸리기 때문에 약간씩의 여유를 가지면서 터트려 준다면 높은 점수를 얻을 수 있습니다.


두번째 게임은 Fast finger 입니다.

이 application은 비록 순위에 올라있지는 않지만 Bubble Wrap 과 같이 손가락 빠르기를 테스트하는 게임입니다.
start 버튼을 누르면 아래와 같은 화면이 나오는데  tap 부분을 빠르게 눌러주면 카운트가 됩니다.

30초 동안 열정적으로 터치를 해 주는 것이 게임의 전부 입니다. 30초가 지나면 몇번 터치가 되었는지 점수가 나오고 restart 를 누르면 다시 게임을 하게 됩니다.

위 게임은 친구들과 내기용으로 한 두번 해 보기에는 유용해 보이지만 게임 중간중간에 자사의 다른 프로그램을 홍보하거나 점수를 기록하는 기능이 없어서 게임에 동기부여가 되지 않아 지속적으로 하기엔 무리가 있습니다.

이번주에 소개한 두 게임 모두 조작이 쉽고 단순함이 매력적이긴 하지만 이런 매력만으로는 게임을 지속하고 다시 찾게하기 어려워 보입니다. Bubble Wrap 의 경우 뾱뾱이(에어캡)가 다시 바람이 들어가는 시간을 줄이거나 점수를 올려주는 보너스 요소를 조금 보강하고, F.finger의 경우는 문지르기를 넣거나 자신의 기록을 남길 수 있는 공간이 생간다면 사용자들로 하여금 보다 재미를 느끼게 해 줄 수 있지 않을까 생각 해 보았습니다.

   *알려드립니다! 이 게시물은 해킹에 성공한 iPod touch에만 적용되는 것이므로 그렇지 않은 iPod touch유저분들의 오해가 없으시기 바라면서 글을 시작하겠습니다.

   오늘부터 써드파티어플(Cydia 어플리케이션)중 한 가지를 선택해서 소개해드리는 시간을 갖도록 하겠습니다. 이번 시간에는 WinterBoard라는 테마변경 써드파티어플을 소개하겠습니다. WinterBoard는 iPod touch의 테마를 변경시켜주는 써드파티어플 입니다. 자기의 입맛대로 테마를 꾸밀 수 있다는 장점이 있어서 많은 iPod touch 해킹 유저들이 애용하는 써드파티어플 중 한가지이기도 합니다. 자 그럼 다 같이 설치를 시작해 볼까요?

   먼저 다음 그림과 같이 Cydia에서 WinterBoard를 설치합니다.


 
   그리고 컴퓨터와 iPod touch를 연결해주시고 아래의 경로에서 다운받은 TouchExplorer를 실행시켜줍니다. 초기 실행화면은 다음 그림과 같습니다. 단, net framework 2.0 이상이 컴퓨터에 설치되어 있지 않다면 응용 프로그램 오류 창이 뜨니 다음의 경로에서 다운로드 받아 설치해주세요.
TouchExplorer :

net framework : http://download.microsoft.com/download/5/6/7/567758a3-759e-473e-bf8f-52154438565a/dotnetfx.exe



   이제 받아놓은 테마를 해당 경로에 넣을 차례인데요. 아래의 경로로 찾아가봅시다.
   /private/var/stash/Themes.******** (* 표시 되어 있는 부분은 iPod touch마다 다르니 Themes까지 찾아가시면 됩니다.) 받아놓은 테마를 드래그해서 통째로 넣어주시면 됩니다. (만약 압축이 되어 있으면 풀어서 넣어주세요.) 저는 '박보영'씨의 테마를 넣어보았는데요. 아래 그림과 같이 테마가 들어간 걸 보실 수 있습니다. (한글명일 경우 자음과 모음이 분리되지만 신경쓰지 않으셔도 됩니다.)



   '박보영'씨 테마의 폴더로 접근하면 아래와 같이 Icons와 Dock, Wallpaper 3가지로 구성되어 있는 걸 보실 수 있습니다.



   이제 적용을 시켜 볼 차례입니다. Cydia를 통해서 설치한 WinterBoard를 실행시킵니다. 저장한 '박보영'씨 테마를 선택해서 체크해줍니다. 아래 그림까지 되셨다면 Home버튼을 누릅니다.



   Home버튼을 누르고 잠시 대기하면 iPod touch가 새로 Loading되면서 전체적으로 아래 그림처럼 테마가 바뀌어 있는 것을 보실 수 있습니다.



   만약 배경화면을 변경하고 싶으시다면 미리 여러 개의 사진을 넣어둔 뒤에 이름만 Wallpaper로 바꿔주시거나 그때그때 iPod touch를 다시 컴퓨터와 연결하시고 TouchExplorer를 실행시킨뒤에 테마의 경로로 접근하신뒤에 원하는 사진을 넣으시면 됩니다. (jpg사진도 가능하니 참고하세요.)

   지금까지 WinterBoard를 설치하고 테마를 변경하는 과정까지 차례대로 진행해보았습니다. 제가 좋아하는 사람의 사진이나 예쁜 아이콘으로 꾸미니 iPod touch를 더 즐기고 싶은 마음이 들더군요. 갖가지 어플리케이션을 설치해서 써보는 재미도 있구요. 자기만의 iPod touch를 꾸미기 위해 작은 도전을 해보는 것도 좋을 것 같다는 생각이 듭니다. 혹시 진행 과정 중 혼란이 가는 부분이 있다면 추가/수정하도록 하겠습니다. 감사합니다.