2013. 9. 9.

iOS 어플 만들기 2탄! D-Day 어플 만들기

iOS 어플 만들기 2탄! D-Day 어플 만들기


안녕하세요? 지난 1편('Hello World'편 바로가기)에 이어 이번에는 조금 더 재미있는 어플을 만들어 보겠습니다. 지난번에는 단순히 화면에 글자만 찍어보고 끝나서 많이 아쉬우셨죠? 오늘은 누구나 한번쯤은 사용해보았을 D-Day 어플을 만들어볼 거예요. 오늘 구현해 볼 기능은 기본적인 기능, 기념일까지 몇 일이나 남았는지를 알아보는 기능입니다! 준비물은 1편(바로가기)을 참고해주시길 바라면서 바로 시작할게요. 고고고~ ^^


천릿길도 한 걸음부터! 새 프로젝트 생성


a. 먼저 새 프로젝트를 생성합니다.


b. Single View Application을 선택하고 어플의 이름을 입력한 후 Create를 눌러 새 프로젝트를 만듭니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


c. Summary 탭에서 어플에 대한 설정을 해줄 수 있는데요, 오늘은 아이폰 홈화면에 나타날 아이콘의 이미지를 설정해 보겠습니다. Summary 탭에서 스크롤을 아래쪽으로 조금만 내리면 App Icons라는 항목이 있습니다. No image specified라고 쓰인 사각형을 오른쪽 클릭하여 Select File을 선택하면 아이콘으로 사용할 이미지를 고를 수 있습니다. 다만, 아이콘에 사용될 이미지는 png형식에 57*57pixel 크기의 이미지가 필요합니다. 저는 나중에 어플 배경으로 사용할 해바라기 이미지를 57*57사이즈로 잘라서 아이콘으로 이용하였습니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


어플 화면을 구성해보자! 컨트롤 배치


여기서부터는 왼쪽 트리 목록에서 스토리보드를 클릭해서 필요한 컨트롤들을 배치하게 됩니다. 여러분이 직접 만들 어플의 모습이 드러나게 되는 것이죠!


a. 먼저 어플 배경화면으로 사용할 이미지를 프로젝트에 추가합니다. 추가할 때는 이미지 파일을 프로젝트에 복사하여 추가하도록 체크를 선택합니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


b. Image View를 마우스로 끌어서 아이폰 화면전체에 맞도록 배치한 후에 Image View의 Image항목에서 방금 추가한 이미지를 선택하면 배경화면이 적용됩니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


c. 컨트롤 중에 Date Picker를 찾아서 스토리보드로 끌어다 놓고, Date Picker의 속성을 그림과 같이 변경합니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


d. 계산된 날 수를 보여주기 위해 Label을 찾아서 스토리보드 위로 끌어다 놓은 후 더블클릭하여 내용을 변경합니다. 저는 가운데 숫자에 빨간색 Zapfino 폰트를 적용해 보았습니다.





어플리케이션 작동을 위한 필수과정, 소스코드 만들기!


자 이제 화면에 보이는 것들은 모두 준비되었네요! 이제부터는 날짜를 입력받고, 오늘까지 흐른 시간을 계산하고, 가운데 숫자를 변경하는 소스코드를 작성할 차례입니다. 지금까지 컨트롤들(Date Picker, Label들)을 화면에 배치했지만, 소스코드에서 그 컨트롤의 값을 읽어오거나 변경하려면 해당 컨트롤의 이름을 알아야 합니다. 이제부터 컨트롤에 이름을 붙여보겠습니다. 조금 어렵게 보일지도 모르지만 어플이 작동하는 구조를 익히는 것에 의미를 두고 따라 해보시면 좋을 것 같습니다.


a. 오른쪽 위에 보이는 Editor 아이콘들 중 두 번째 Assistant Editor 아이콘을 누르면, 아래와 같이 스토리보드와 소스코드 편집창이 함께 보입니다. 스토리보드가 잘 보이지 않으면, 가운데 경계부분을 마우스로 잡고 좌우로 조정할 수 있습니다. ^^


(이미지를 클릭하시면 크게 볼 수 있습니다.)


b. 우리가 변경해야 할 숫자(Label컨트롤)를 마우스 오른쪽 버튼을 클릭한 채로 오른쪽의 소스코드 중 @interface ViewController : UIViewController 와 @end 사이에 가져다 놓고, Name에는 Result라고 적은 후 Connect 버튼을 눌러줍니다. 그러면 아래와 같이 자동으로 소스코드가 추가되는 것을 볼 수 있습니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


c. 같은 방식으로 Date Picker도 방금 추가된 소스코드 바로 아래쪽에 끌어다 놓고 Name은 myDatePicker라고 적고 Connect버튼을 누릅니다.



d. 그리고 Date Picker를 다시 한 번 마우스로 끌어다 놓고, Connection 항목을 Action으로 바꾼 뒤 Name에는 DateChanged로 적고 Connect버튼을 누릅니다. 여기서는 Date Picker 컨트롤에 값이 변경되는 액션이 발생할 때마다 호출되는 함수를 추가하는 부분입니다. 우리가 만드는 D-Day어플의 경우에는 날짜가 변경되면 변경된 날짜와 현재 날짜를 계산해서 Result Label컨트롤에 있는 숫자를 변경해주는 함수가 되겠죠?



위의 작업들을 수행함으로써 날 수를 계산하고 보여주기 위해 소스코드에서 필요한 컨트롤들을 참조할 수 있게 되었습니다.


e. 이제 다시 Editor아이콘 중 첫 번째 Standard Editor를 선택한 후 왼쪽 파일목록에서 ViewController.m 항목을 선택하여 Date Picker의 날짜가 변경되었을 경우 날 수 계산을 수행하고, Result Label을 변경하는 소스코드를 추가합니다. 프로그래밍 언어에 대해서는 차차 공부하시면 되는 부분이므로 오늘은 아래의 그림과 같이 소스코드를 그대로 작성하고 결과를 확인하도록 하겠습니다.


(이미지를 클릭하시면 크게 볼 수 있습니다.)


마지막 단계! 다 만든 어플리케이션 확인하기


자! 드디어 D-Day 어플이 완성되었습니다! ^0^ 왼쪽 위에 있는 Run버튼을 눌러 시뮬레이터에서 어플을 실행해 보겠습니다!


a. Date Picker를 마우스로 바꾸면 가운데 숫자가 변하는 것을 볼 수 있습니다. 저는 올해가 며칠이나 지났는지 확인해 보았습니다. 홈버튼을 누르면 처음 설정한 해바라기 아이콘이 보이네요.



소스코드를 처음 접해보신 분들은 어렵고 복잡해 보이겠지만, 프로그래밍 언어 역시 말 그대로 언어의 한 종류라고 생각하시면 배우는데 거부감이 좀 덜 들지 않을까요? 이번에 알려드린 Date Picker 컨트롤 외에도 재미있는 컨트롤들이 많이 있으니 잘 활용하면 여느 유료 프로그램 못지 않은 어플을 만들 수 있을 것 같습니다. 저도 한창 공부하고 있기 때문에 설명이 부족한 부분이 많습니다만, 우리 함께 언젠간 만들어 볼 대박 어플의 꿈을 꿔 볼까요? ^^