간단하게 아이폰용 바이오리듬 어플리케이션을 만들어 보겠습니다. 저도 처음 아이폰 SDK를 사용하여 만들어 보았기 때문에, 과정을 가능한 상세하게 설명할려고 합니다. 바이오리듬은 이전에 데쉬보드 위젯에서의 방식을 사용 하였습니다. 역시나 제대로 된 방법인지는 잘 모르겠습니다.




1. 프로젝트 생성
Xcode를 실행하여 파일 메뉴에서 New Project를 클릭합니다. iPhone OS의 Application 항목에서 가장 마지막에 있는 'Window-Based Application'을 선택한 후 Choose... 버튼을 클릭합니다.

프로젝트명을 'iBio'로 입력하고 Save 버튼을 클릭합니다.


2. iBioView
1) 클래스생성
바이오리듬을 막대그래프 형식으로 보여줄 View 클래스를 만들어 보겠습니다. 메뉴에서 파일/New File...(또는 단축키: ⌘+N)을 클릭합니다. IPhone OS/Cocoa Touch Classes를 클릭하고 아래와 같이 UIView subclass를 선택한 다음 Next 버튼을 클릭합니다.


다음 창에서 아래와 같이 File Name에 iBioView.m을 입력한 후에 Finish 버튼을 클릭합니다.

2) iBioView.h
iBioView.h 파일에 아래와 같이 내용을 추가 합니다.
#import <UIKit/UIKit.h>

#define MAX_DATATYPE        3

@interface iBioView : UIView {
   double bioData[MAX_DATATYPE];
}

- (void)showBioData: (double)days;
- (int)getBioDataAt: (int)index;

@end

MAX_DATATYPE은 바이오리듬 항목을 의미하며, 신체/지성/감성 등 3개의 항목을 가지고 있습니다. bioData에는 각 항목별로 오늘의 바이오리듬 값이 저장됩니다.

3) iBioView.m
iBioView.m 파일에 아래와 같이 내용을 추가 합니다. 설명은 소스내의 간단한 주석으로 대신하겠습니다.
#import "iBioView.h"

@implementation iBioView

- (id)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
          /* 바이오리듬 값을 0으로 초기화 */

           for (int i = 0; i < MAX_DATATYPE; i++) {
               bioData[i] = 0.0;

       }
   }
   return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
   
   /* 세개의 바이오리듬 값 막대 출력 */
    for (int i = 0; i < MAX_DATATYPE; i++) {
        CGContextBeginPath(context);
        CGContextSetLineWidth(context, 15.0);
       
        int y = 34 + (i * 40);
      
       /* 바이오리듬 값이 0보다 작으면 붉은 색으로 크면 파란색으로 표시 */
        if (bioData[i] > 0)
            CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
        else
            CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
      
       /* 선을 그린다 */
        CGContextMoveToPoint(context, 200, y);
        CGContextAddLineToPoint(context, 200 + (bioData[i] * 80/100) , y);
       
        CGContextStrokePath(context);
    }
}

- (void)dealloc {
   [super dealloc];
}

- (void)showBioData: (double)days {
    static const double s_values[MAX_DATATYPE] = {
        23.0, 28.0, 33.0
    };
   
   /* 각 바이오리듬 설정 */
    for (int i = 0; i < MAX_DATATYPE; i++) {
        bioData[i] = sin((days/s_values[i]) * 2 * 3.14195) * 100;
    }
   
   /* 변경된 값으로 view가 다시 그려지도록 한다 */
    [self setNeedsDisplay];
   
}

- (int)getBioDataAt: (int)index {
    return (int)bioData[index];
}

4) 프레임 워크 추가
CGContextBeginPath와 같이 코어그래픽스 프레임워크의 모듈을 사용하기 위해 해당 프레임워크를 추가해야 합니다. 아래와 같이 Xcode 좌측의 Frameworks에서 마우스를 우클릭하여 Add/Existing Frameworks... 메뉴를 선택합니다.


선택창이 열리면 /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS2.0.sdk/System/Library/Frameworks  디렉토리에서 /CoreGraphics.framework를 선택합니다.

* 확인
완료되면 좌측과 같이 CoreGraphics.framework가 추가되어 있는 것을 확인할 수 있습니다.




3. iBioAppDelegate 변경
1) iBioAppDelegate.h
iBioAppDelegate.h 파일에 아래의 내용을 추가합니다. 추가된 항목은 인터페이스 빌더에서 각각의 오브젝트와 액션으로 연결됩니다.

#import <UIKit/UIKit.h>

@class iBioViewController;
@class iBioView;

@interface iBioAppDelegate : NSObject <UIApplicationDelegate> {
   IBOutlet UIWindow *window;

    IBOutlet iBioView *view;
    IBOutlet UIDatePicker *datePicker;
   
    IBOutlet UITextField *text_1;
    IBOutlet UITextField *text_2;
    IBOutlet UITextField *text_3;
}

@property (nonatomic, retain) UIWindow *window;

- (IBAction) viewButtonClicked:(id)sender;

@end


2) iBioAppDelegate.m
iBioAppDelegate.m 파일에 아래의 내용을 추가합니다.
#import "iBioAppDelegate.h"
#import "iBioView.h"

@implementation iBioAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {   
   
    // Override point for customization after app launch   
    [window makeKeyAndVisible];
}


- (void)dealloc {
    [window release];
    [super dealloc];
}

/* 사용자가 보기 버튼을 클릭시에 메시지를 받는 메소드 */
- (IBAction)viewButtonClicked:(id)sender {
    /* 사용자가 DatePicker에서 입력한 생일과 현재 날짜로 부터 차이를 구함 */
    NSTimeInterval ti = [[datePicker date] timeIntervalSinceNow];
    double days = ceil(fabs(ti) / (24 * 60 * 60));
   
   /* view에서 days를 기준으로 바이오리듬을 구하고 출력되도록 한다 */
    [view showBioData: days];
   
   /* 각 텍스트필드에 새로 계산된 바이오리듬 값으로 설정 */ 
    [text_1 setText: [NSString stringWithFormat: @"%d", [view getBioDataAt:0]]];
    [text_2 setText: [NSString stringWithFormat: @"%d", [view getBioDataAt:1]]];
    [text_3 setText: [NSString stringWithFormat: @"%d", [view getBioDataAt:2]]];
}

@end

* 인터페이스 빌더 오픈
변경된 모든 파일들을 저장하고 좌측과 같이 MainWindow.xib를 더블클릭하여 인터페이스 빌더를 실행합니다.



4. 사용자 인터페이스 생성
1) DatePicker
* Library 윈도우
사용자가 생일을 입력할 수 있도록 DatePicker를 설정합니다.


위와 같이 라이브러리 윈도우의 Cocoa Touch Plugin/Data Views에서 Date Picker를 클릭한 후에 드래그 하여 윈도우에 가져다 놓습니다. 아래가 윈도우에 위치한 모습니다.


* 속성 변경
위의 윈도우에서 DatePicker가 선택된 상태에서 속성창에서 좌측과 같이 설정합니다.

속성창이 안보이면 선택된 상태에서  단축키(⌘+1)를 이용합니다.










2) ToolBar
다시 라이브러리 윈도우의 Windows, Views & Bars 항목에서 좌측과 같은 Toolbar 아이콘을 드래그 하여 윈도우의 하단에 아래와 같이 배치합니다.



* 타이틀 변경
툴바의 Item 버튼을 더플클릭하면 좌측과 같이 입력 가능한 상태로 변경됩니다. '보기'라고 입력합니다.



3) 안내문구
다시 라이브러리 윈도우의 Inputs & Values 항목에서 Label을 윈도우의 DatePicker 위로 드래그 해서 놓습니다.


* 속성 변경
좌측과 같이 속성창에서 Text에  "생일을 선택한 후 보기를 클릭하세요" 라고 입력합니다.

하단의 Layout에서 정렬을 중앙 정렬로 놓습니다.






* 확인
현재까지 윈도우의 모습은 아래와 같습니다.
사용자 삽입 이미지


4) View
다시 라이브러리 윈도우의 Windows, Views & Bars 항목에서 좌측과 같은 View 아이콘을 드래그 하여 크기를 조절하여 윈도우의 상단에 아래와 같이 배치합니다.
* 배경 색상 변경
속성창의 Background의 색상선택 버튼을 클릭하여 좌측과 같이 검정색으로 설정합니다.








* 클래스 변경
Class에 Xcode에서 만들어 두었던 iBioView를 선택합니다.





5) 제목, 텍스트 필드
* 제목 라벨
라이브러리 윈도우에서 Label을 세번 드래그 해서 좌측과 같이 배치합니다. 

라벨을 더블클릭하여 입력모드가 되면 각각 '신체:', '감성:', '지성:'으로 입력합니다.










* 텍스트 필드
라이브러리 윈도우에서 좌측과 같은 TextFiled도 똑같이 세번 드래그 해서 이전에 배치한 라벨의 옆에 아래와 같이 배치합니다.



* 속성 변경
⌘를 누른 상태에서 마우스로 클릭하여 좌측과 같이 세개의 텍스트 필드를 선택합니다. ⌘+1로 속성창을 엽니다.







사용자로 부터 입력에 반응하지 않기 위해 'User Interaction Eanbled'를 체크를 해제합니다.



5. 연결
MainWindow.xib 윈도우에서 I Bio App Delegate를 마우스로 우클릭합니다. 아래와 같이 iBioAppDelegate.h에서 생성해 놓은 Outlet들과 'viewButtonCliecked' Action이 있습니다. 이제 실제 오브젝트들과 연결해 보겠습니다.


1) Date Picker 연결
dataPicker 우측의 원 모양의 아이콘을 클릭하면 좌측과 같이 +로 모양이 변경됩니다. 이 상태에서 마우스 버튼을 클릭한 채로 아래와 같이 윈도우의 DatePicker에 드래그해서 놓습니다.


* 확인
완료되면 좌측과 같이 연결된 오브젝트가 표시되며, 우측의 원 모양 아이콘이 on으로 표시되어 연결되어 있슴을 알려 줍니다. x 모양의 아이콘을 클릭하면 연결이 해제됩니다.

2) TextFiled 연결
위와 같은 방법으로 아래와 같이 TextField를 text_1, text_2, text3과 위에서 부터 순서대로 연결합니다.

3) View 연결
같은 방법으로 아래와 같이 view도 연결합니다.

4) viewButtonClicked 메소드 연결
사용자가 보기 버튼을 클릭하면 viewButtonClicked가 실행되도록 위와 같은 방법으로 viewButtonClicked를 툴바의 보기 버튼과 연결합니다.

5) 연결 확인

좌측과 같이 모든 항목들이 정확하게 연결이 되어 있는 것을 확인합니다.

이제 모두 완료되었습니다. 저장 후에 빌드를 한후 실행하여 동작을 확인해 봅니다.









이상 간단하게 첫 아이폰 어플리케이션을 만들어 보았습니다. DatePicker도 동작과 설정이 조금 이상한 것 같고, 처음 갑작스레 만들어 본 것이라 맞는 방법인지 의심스럽습니다. 혹시 잘못된 부분이 있으면 댓글로 알려 주시면 감사하겠습니다.

기본 UI들이 멋있어서 맞출려면 디자인이나 이미지에 신경을 써야 할 것 같습니다. 나중에 조금 더 알아본 후에 월별로 출력하도록 수정하고 몇가지 변경해 본 후에 다시 한번 올려 보겠습니다.
모든 댓글을 환영합니다. (욕설과 광고는 삭제합니다.)
  1. 달룟 2008.09.04 19:24  댓글주소  수정/삭제  댓글쓰기

    와! 멋진데요! 저도 해 볼께요.(가능할까?ㅋ)

  2. Favicon of http://me2day.net/wookay BlogIcon ㄴㅇㄱ 2008.09.04 20:05  댓글주소  수정/삭제  댓글쓰기

    고맙습니다~~~

  3. 달룟 2008.09.04 20:42  댓글주소  수정/삭제  댓글쓰기

    "4) 프레임 워크 추가"할 때 이런 게 뜨는데 정상인가요?

    http://screencast.com/t/8RfrobvM

  4. 달룟 2008.09.04 21:13  댓글주소  수정/삭제  댓글쓰기

    똑같지는 않지만, 거의 같게 만들었습니다.

  5. 함지 2008.09.05 16:08  댓글주소  수정/삭제  댓글쓰기

    브라보 ! 멋지네요. 역시 개발이력(짬빱?!)이 되시는 분들 진도 나가시는게 대단하네요. 달력 돌아가는게 예술입니다 !

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.05 18:28 신고  댓글주소  수정/삭제

      날짜 선택하는 게 하도 커서 뭐가 있어 보이는데, 진도 나간 건 별로 없습니다. ^^;;

      아이폰 개발은 별로 관심이 없었는데, 말씀하신 달력의 예술적인 움직임에 반해서 한번 사용해 보았습니다. :)

  6. Favicon of http://rococo.tistory.com BlogIcon B군 2008.09.09 00:11  댓글주소  수정/삭제  댓글쓰기

    차근차근 잘 설명을 해주셔서 따라하기가 넘 쉬웠어요^-^

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.09 11:54 신고  댓글주소  수정/삭제

      감사합니다. 두번째 버젼은 만들어 놓고 포스팅할 엄두를 못내고 있어는데, B군님의 댓글에 힘을 내서 오늘 점심먹고 시작해 보아야 겠네요. ^^

  7. 함지 2008.09.09 14:29  댓글주소  수정/삭제  댓글쓰기

    이제 사인웨이브가 한,, 일주일, 열흘, 한달치가 색깔별로 떠주면 완전한 App 하나 완성인가요 !? 안그래도 오늘 머니타임즈인가에 KTF의 iPhone 계약건이 나왔던데 론칭기념으로 하나 날려주세요 !

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.09 16:24 신고  댓글주소  수정/삭제

      한달 단위로 보여 주며 하단에 일별로 상세하게 볼 수 있도록 하였습니다. 곧 올리겠습니다.

      기쁜 소식이 나왔네요. 알려 주셔서 감사합니다. ^^

  8. felix 2008.11.03 19:38  댓글주소  수정/삭제  댓글쓰기

    맥북 지르고 ㅋㅋ SDK 깔아 본후 ㅋ

    바로 시작해서 따라 해봤습니다. ㅋ

    중간중간에 에러 나고 잘 안되는 부분이 있긴 했는데

    이제 잘됩니다. ^^;; ㅋ 이제 Toolchain은 그만해야 겠습니다. ^^ ㅋㅋ

  9. skna 2008.11.07 14:53  댓글주소  수정/삭제  댓글쓰기

    결국 자기 디바이스에 올리려면 developer 로 등록해야 되나요?

  10. Favicon of https://cre8ive.tistory.com BlogIcon cre8ive 2008.11.09 02:01 신고  댓글주소  수정/삭제  댓글쓰기

    정말 유익하게, 즐겁게 보면서 따라했습니다.
    조금이나마 Cocoa Touch 에 대한 감을 잡는데 큰 도움이 되었습니다.

    감사합니다 ^^

    IDP 신청화면을 들어갔더니 접수번호알려주고
    기다리라는 화면이 나오네요. 얼마나걸릴지
    빨리 iPod Touch 에 심어보고 싶네요 ^^

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.11.09 16:13 신고  댓글주소  수정/삭제

      보통 2~3일만에 되는 분들도 있고 몇주 걸리는 분들도 있는 것 같습니다. 정확히 어떤 이유에서인지는 잘 모르겠네요.

      빨리 처리되시기를 바랍니다. 좋은 말씀 감사합니다. :)

  11. 버들피리 2009.03.29 13:24  댓글주소  수정/삭제  댓글쓰기

    최근 SDK에서는 delegate 하는 부분이 바뀌었나 보네요. Connections Inspector 에 있네요. 우클릭이라는 글을 보면 당황하게 되네요. 맥마우스는 버튼이 하나인데.. 어디를 말하는 건지.. 제가 맥초보라 어제 샀거든요. ^^; 하여튼 유용하게 잘 보고 있습니다.

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.03.29 15:19 신고  댓글주소  수정/삭제

      아주 오래전 것이 아니라면 근래의 마이티 마우스는 투버튼을 지원을 하고 있습니다. 오른쪽 클릭을 해서 확인해 보세요. 아마 될 것 입니다. 만약 안되신다면 Ctrl + 마우스 클릭하시면 되고요. :)

  12. ssnmovie 2009.06.08 00:14  댓글주소  수정/삭제  댓글쓰기

    제가 원래 프로그램을 다루던 사람이 아니고요... 그래픽쪽 일을 하는 사람인데요...
    무작정 배워보고싶어 맥북 지르고...
    무료가입해서... Xcode 깔고... 해보고있는데요...
    좀 막막하네요..ㅜㅜ
    혹시 어떤식으로 공부를 해야하는지... 조언좀 해주신다면??
    무작정 따라해보고... 그럼.. 될까요??
    왜 이렇게 되는지는 잘 이해가 안되는데...ㅜㅜ

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.06.08 13:33 신고  댓글주소  수정/삭제

      아이폰 개발이 어려울 것은 없지만 프로그래밍 경험이 없으신 분들은 좀 막연할 수 있습니다. 이는 비단 아이폰 개발뿐만 아니라 다른쪽 개발도 마찬가지일 것이고요.

      방향이 어느정도 잡히고 뭔가가 보이기 전까지는 무조건 많이 따라해보고 조금씩 바꿔보고, 관련서적과 자료를 보시는 방법밖에 없을 것 같습니다. 좀 거시기한 말씀이지만.. 왕도는 없는 것 같습니다.

      관련된 커뮤니티나 동호회에 가입하셔서 다른분들과 같이 공부도 하고 궁금한 점을 물어 보시고 하는 것도 좋은 방법일 것 같습니다.

      그럼 힘내시고 수고하세요. :)

  13. 무작정따라하기 2009.06.23 17:50  댓글주소  수정/삭제  댓글쓰기

    무작정 따라 해 보고 있는데, build and go 해 보니까.
    실행할때 아래와 같은 메세지가 나오네요.

    Process: iBio [410]
    Path: /Users/towbtowb/Library/Application Support/iPhone Simulator/User/Applications/E25EFC08-263C-431E-848C-B64E6D19BCB5/iBio.app/iBio
    Identifier: iBio
    Version: ??? (???)
    Code Type: X86 (Native)
    Parent Process: launchd [110]

    Date/Time: 2009-06-24 02:08:12.649 +0900
    OS Version: Mac OS X 10.5.6 (9G55)
    Report Version: 6

    Exception Type: EXC_BREAKPOINT (SIGTRAP)
    Exception Codes: 0x0000000000000002, 0x0000000000000000
    Crashed Thread: 0

    Dyld Error Message:
    Library not loaded: /System/Library/Frameworks/UIKit.framework/UIKit
    Referenced from: /Users/towbtowb/Library/Application Support/iPhone Simulator/User/Applications/E25EFC08-263C-431E-848C-B64E6D19BCB5/iBio.app/iBio
    Reason: image not found

    대충 보니까. Frameworks 에서... 라이브러리가 로드 안된거 같은데.

    왜 그런지.. 아시는지 초보라서 일단 무작정 따라 해 보고 있습니다.

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.06.24 16:47 신고  댓글주소  수정/삭제

      저도 정확한 원인은 모르겠습니다. UIKit은 /Developer 밑에서 찾아야 되는데 좀 이상하네요. iPhone SDK 문제인지, 프로젝트 설정이 잘 못된 것인지, 어플 자체의 오류인지 확실히 모르겠습니다.

      새 아이폰 프로젝트도 이러면 SDK를 다시 설치하셔야 할 것 같고요. 지금 프로젝트만 이러면 설정이나 코드/IB 설정에 문제가 있는 것 같으니 프로젝트를 새로 만드신 후 복사하시거나 소스코드와 IB 연결상태, 속성들을 체크해 보셔야 할 것 같습니다.

  14. Munggu 2009.06.30 11:32  댓글주소  수정/삭제  댓글쓰기

    감사합니다 이제 막 시작해볼까 하는데 많은 도움이 될 것 같네요

  15. jickson98 2012.02.12 17:48  댓글주소  수정/삭제  댓글쓰기

    좋은자료입니다. 긍데 너무 오래 지나서 버젼이 안맞는지 오류가 생깁니다.

    위치는 bioView.m 파일에

    if (self = [super initWithFrame:frame])


    [self setNeedsDisplay];

    이 두 부분에서요. xcode4.2를 쓰고 있는데 어떻게 수정해야할까요?