49
1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트 결과보고서 기간 : 2013.7.20~7.26 대상 : 중3 창의성반 지도 : 동의과학대학교 김종현 교수

스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

1

2013 여름방학

부산광역시 정보영재교육원 강좌

스마트폰 앱개발 기초

교육자료 및 프로젝트 결과보고서

기간 : 2013.7.20~7.26

대상 : 중3 창의성반

지도 : 동의과학대학교 김종현 교수

Page 2: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

2

수업 목차

1. Objective-C 기초

(1) Hello World 작성

(2) 기본 클래스 작성, property 변수, 메소드

(3) Wizard 게임

(4) Island Survival 게임 2. iOS 앱 프로그래밍 기초

(1) Story Board 사용법

- Hello iPhone 작성

(2) Hello Fun 앱 제작

- IBOutLet, IBAction 이해 및 활용

(4) 프로그래밍 문제 해결

- Hello Fun 앱 upgrade 3. Tap Me 게임 앱 제작

- 다함께 Tap Me 게임 제작

- UILabel, UIButton, NSTimer, UIAlertView..

- 게임 알고리즘 4. 기초 프로젝트 수행 (2인 1조 or 1인)

(1) Tap Me 게임 창의적 기능 추가

5. 수업 참고 자료 : A Tutorial series about iOS for high school

students (1) http://www.raywenderlich.com/5600/ios-for-high-school-students-

getting-started

(2) http://www.raywenderlich.com/11079/ios-for-high-school-

students-text-adventure-game

(3) http://www.raywenderlich.com/25561/ios-for-high-school-

students-making-your-first-ios-app-part-1

(4) http://www.raywenderlich.com/27191/ios-for-high-schoolers-

making-your-own-ios-app-part-2

Page 3: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

3

Day 1. Objective-C 기초(Wizard Game)

(예제 프로그램 1) Wizard Game

// Wizard Gmae

#import <Foundation/Foundation.h>

int main(int argc, const char * argv[])

{

@autoreleasepool {

// 변수 선언(정의)

float strengh; // 힘(강함)

float intelligence; // 지능

float speed; // 속도

float alchemy_skill; // 연금술 기술, alchemy:연금술, skill:기술

float sum; // 합계

float avg; // 평균

NSLog(@"What is your strength(1-10)?");

scanf("%f", &strengh);

NSLog(@"What is your intelligence(1-10)?");

scanf("%f", &intelligence);

NSLog(@"What is your speed(1-10)?");

scanf("%f", &speed);

NSLog(@"What is your alchemy skill(1-10)?");

scanf("%f", &alchemy_skill);

sum = strengh + intelligence + speed + alchemy_skill;

avg = (strengh + intelligence + speed + alchemy_skill) / 4;

NSLog(@"sum = %f avg = %f", sum, avg);

//Here are the logical statements that determine a response based on the user's input for

various skills!

if (strength >= 8 && intelligence >= 8 && (alchemy_skill + speed)/2 < 7)

{

NSLog(@"You are a clever brute. You are known for your defense of Aristotle's logic,

while being equally admired by competent athletes. In the gladiator ring, your

intelligence outmatches beings of even greater strength.");

}

if (speed >= 8 && intelligence >= 8 &&

(alchemy_skill + strength)/2 < 7)

{

NSLog(@"You are an assassin. Your sharp blade and agile mind gleam in the

shadows.Being not particularly confrontational, you wear an aura of mystery.");

}

if (alchemy_skill >= 8 && intelligence >= 8 &&

(strength + speed)/2 < 7)

{

NSLog(@"You are a cleric. You summon mysterious powers to heal and protect.");

}

Page 4: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

4

if (avg >= 8 && avg <= 9)

{

NSLog(@"You are a mage, apprenticed to a great wizard. One day you may be a

master of the universe.");

if (avg >= 5 && avg <= 7)

{

NSLog(@"You are a commoner. You will live a long life, and tend to your property.");

}

if (avg >= 1 && avg <= 4)

{

NSLog(@"You are a peasant. Your lord is cruel. He does not compensate you for the

work that you accomplish. You only dream of being successful. :(");

}

}

return 0;

}

(프로그래밍 문제) 게임 종료 및 새로하기 추가

위의 Wizard 프로그램은 "프로그램 종료"하는 부분이 없다. NSLog(@"1.Restart Game.

2.STop");을 출력하여 게임 세로 하기와 게임 종료하는 부분을 추가하여 수정하시오.

Page 5: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

5

Day 2. Objective-C 기초(클래스 작성)

1. 클래스, 메소드 선언과 정의

(프로그래밍 예제) 클래스 정의 및 사용

Page 6: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

6

// main.m

// MyClass

#import <Foundation/Foundation.h>

// interface 정의

@interface MyClass : NSObject

{

// 멤버 변수 정의

int a;

int b;

}

// 메소드 정의

- (void)setA:(int)x;

- (void)setB:(int)y;

- (int)add;

@end

// implementation 정의

@implementation MyClass

- (void)setA:(int)x

{

a = x;

}

- (void)setB:(int)y

{

b = y;

}

- (int)add

{

return a + b;

}

@end

int main(int argc, const char * argv[])

{

@autoreleasepool {

// 객체(혹은 인스턴스) 생성 및 메모리 할당

MyClass *myclass = [[MyClass alloc] init];

[myclass setA:15];

[myclass setB:20];

NSLog(@"Sum is %i", [myclass add]);

}

return 0;

}

Page 7: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

7

결과값은 ?

2. 다중 인수 메소드(Multiple Parameter Method)

(프로그래밍 예제 1) 다중 인자

// main.m

// MultiPara

#import <Foundation/Foundation.h>

@interface MultiPara : NSObject

// 다중 인수 정의

- (int)sum:(int)a andb:(int)b andc:(int)c;

@end

@implementation MultiPara

- (int)sum:(int)a andb:(int)b andc:(int)c

{

return a + b + c;

}

@end

int main(int argc, const char * argv[])

{

@autoreleasepool {

MultiPara *class = [[MultiPara alloc] init];

NSLog(@"Sum is %i", [class sum:5 andb:10 andc:20]);

}

return 0;

}

Page 8: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

8

(프로그래밍 예제 2) main.m 에 있는 클래스 정의를 헤드화일(.h)과 구현화일(.m)으로

분리 하는 방법

MyClass.h

#import <Foundation/Foundation.h> @interface MyClass : NSObject

// 다중 인수 선언

-(int)sum:(int)a andb:(int)b andc:(int)c; @end

MyClass.m

#import "MyClass.h" @implementation MyClass -(int)sum:(int)a andb:(int)b andc:(int)c { return a + b + c; } @end

maim.m

#import <Foundation/Foundation.h> #import "MyClass.h" int main(int argc, const char * argv[]) { @autoreleasepool { MyClass *class = [[MyClass alloc]init]; NSLog(@"Sum is : %i", [class sum:5 andb:7 andc:10]); } return 0; }

Output:

Sum is : 22

(프로그래밍 예제 3) 사칙 계산기(Calculator) 만들기

// Calculator.h

// Calaculator

#import <Foundation/Foundation.h>

@interface Calculator : NSObject

{

double accmulator; // 계산값의 누적

}

// 메소드 정의

- (void)setAccmulator:(double)value;

- (double)accumlator;

Page 9: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

9

// 사칙연자사 메소드 정의

- (void)add:(double)value;

- (void)minus:(double)vlaue;

@end

// Calculator.m

#import "Calculator.h"

@implementation Calculator

- (void)setAccmulator:(double)value

{

accmulator = value;

}

- (double)accumlator

{

return accmulator;

}

- (void)add:(double)value

{

accmulator = accmulator + value;

}

- (void)minus:(double)value

{

accmulator = accmulator - value;

}

@end

// main.m

// Calaculator

//

// Created by Jonghyun Kim on 13. 7. 21..

// Copyright (c) 2013 년 Jonghyun Kim. All rights reserved.

//

#import <Foundation/Foundation.h>

#import "Calculator.h"

int main(int argc, const char * argv[])

{

@autoreleasepool {

Calculator *deskCalc;

deskCalc = [[Calculator alloc] init];

[deskCalc setAccmulator:0];

[deskCalc add:100];

[deskCalc minus:25];

NSLog(@"Result is %f", [deskCalc accumlator]);

}

return 0;

Page 10: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

10

}

(결과 값은?)

(프로그래밍 문제) 위 Calculator 프로그램을 사칙연산이 가능하도록 곱하기(multi),

나누기(divide) 메소드를 추가하고, 연산된 값을 초기화(0)할 수 있는(accmulator 의

값을 0) clear 메소드를 추가하라.

3. Property 변수

- 멤버 변수를 클래스 외부에서 사용하기 위하여 세터(setter)와 게터(getter) 메소드

제공

- 프로퍼티를 이용하면 메소드 호출([ ]) 대신에 점(.)을 이용해서 접근 가능함

- 헤더 파일에는 @property 지시자를 사용하여 선언, 구현 화일에는 @synthesis

지시자를 사용하여 점(.) 연산자 이용시 사용할 게터와 세터 메소드를 컴파일러가

자동 생성 하도록 함. 최근 iOS 6.0 부터는 @synthesis 를 사용하지 않아도

됨( aut(결과 값은?)

(프로그램 예제) Rectangle 클래스 정의, 인스턴스 변수, 인스턴스 메소드

// main.m

// Rectangle

#import <Foundation/Foundation.h>

@interface Rectangle : NSObject

{

int width; // 넓이

int height; // 높이

}

- (void)setWidth:(int)newWidth;

- (int)width;

- (void)setHeight:(int)newHeight;

- (int)height;

- (int)size;

@end

@implementation Rectangle

- (void)setWidth:(int)newWidth

{

width = newWidth;

}

- (int)width

Page 11: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

11

{

return width;

}

- (void)setHeight:(int)newHeight

{

height = newHeight;

}

- (int)height

{

return height;

}

- (int)size

{

return width * height;

}

@end

int main(int argc, const char * argv[])

{

@autoreleasepool {

Rectangle *r = [[Rectangle alloc]init];

[r setHeight:10];

[r setWidth:20];

NSLog(@"사각형의 넓이는 : %i", [r size]);

}

return 0;

}

(프로그래밍 문제 2) 위 프로그램 예제를 property 변수를 사용하여 다시 프로그래밍 하시오.

// main.m

// Rectangle

#import <Foundation/Foundation.h>

@interface Rectangle : NSObject

{

int _width;

int _height;

}

- (int)size;

// property 변수 선언

@property int width, height;

@end

Page 12: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

12

@implementation Rectangle

- (int)size

{

return _width * _height;

}

@end

int main(int argc, const char * argv[])

{

@autoreleasepool {

Rectangle *r = [[Rectangle alloc]init];

//[r setHeight:10];

//[r setWidth:20];

r.height = 10;

r.width = 20;

NSLog(@"사각형의 넓이는 : %i", [r size]);

}

return 0;

}

(프로그래밍 문제 3) 위 Calculator 프로그램을 사칙연산이 가능하도록 곱하기(multi),

나누기(divide) 메소드를 추가하고, 연산된 값을 초기화(0)할 수 있는(accmulator 의

값을 0) clear 메소드를 추가하라.

Page 13: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

13

Day 3. Story Board 를 사용한 ButtonFun 제작

1. Story Board

2. ButtonViewController.h

// ButtonFunViewController.h

// ButtonFun

#import <UIKit/UIKit.h>

@interface ButtonFunViewController : UIViewController

@property (strong, nonatomic) IBOutlet UILabel *myLabel;

- (IBAction)buttonPressed:(id)sender;

@end

3. ButtonViewController.m

// ButtonFunViewController.m

// ButtonFun

#import "ButtonFunViewController.h"

@implementation ButtonFunViewController

Page 14: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

14

- (IBAction)buttonPressed:(id)sender {

NSString *title = [sender titleForState:UIControlStateNormal];

NSString *newStr = [NSString stringWithFormat:@"%@ is pressed", title];

_myLabel.text = newStr;

}

@end

4. 시뮬레이터 결과

(프로그래밍 문제) 두개의 버튼(Left, Right)를 각각 선택하면 Label 에 아래와 같이

출력하도록 하시오.

Page 15: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

15

Page 16: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

16

Day 4. Mini 프로젝트 : Tap Me 게임제작 01

<내용>

"Ray Wenderlich 의 iOS for High School"의 Tap Me 앱 소스를 다음과 같이 창의적인

기능을 추가하여 수정함

1. "Tap Me" 버튼을 최초 터치할때 Timer 가 작동을 시작함

2. 최종결과 값을 보여주는 UIAlertView 에 "Game Stop" 가능 추가

3. 게임 랭킹을 보여주는 기능을 작성해 보기 바람(게임 스코어를 배열 등에 저장.....)

4. 기타 등등 좋은 아이디어를 추가하기....

<앱 스크린>

Page 17: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

17

<스토리 보드>

Page 18: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

18

<소스 코드>

// TapMeViewController.h // TapMe

#import <UIKit/UIKit.h>

@interface TapMeViewController : UIViewController <UIAlertViewDelegate>

{

NSInteger count; // 현재 tap count 기록

NSInteger seconds; // 현재 시간 기록

NSTimer *timer; // 타이머 클래스 변수

bool timerOn; // ON 이면 타이머 작동, OFF이면 타이머 중지

}

@property (strong, nonatomic) IBOutlet UILabel *scoreLabel;

@property (strong, nonatomic) IBOutlet UILabel *timerLabel;

- (IBAction)buttonPressed:(id)sender;

@end

// TapMeViewController.m

#import "TapMeViewController.h"

@interface TapMeViewController ()

@end

@implementation TapMeViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

// 타이머 메소들 실행....

[self setupGame];

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

- (IBAction)buttonPressed:(id)sender {

timerOn = true; // 버튼을 누르면 타이머 작동 시작

count++;

self.scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];

}

- (void)setupGame

{

timerOn = false; // Timer Switch Off

seconds = 30;

count = 0;

// 화면 초기화

_timerLabel.text = [NSString stringWithFormat:@"Time: %i", seconds];

// 타이머 가동

timer = [NSTimer scheduledTimerWithTimeInterval:1.0f

target:self // 내자신이 객체에서 타이머 호출

selector:@selector(substractTime)

userInfo:nil

Page 19: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

19

repeats:YES];

}

- (void)substractTime

{

if(timerOn) {

seconds--; // Timer 작동

_timerLabel.text = [NSString stringWithFormat:@"Time: %i", seconds];

}

if (seconds == 0) {

[timer invalidate];

// UIAlertView 를 사용하여 최종 score를 출력...

NSString *finalScore = [NSString stringWithFormat:@"You scored %i points",count];

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Time is up"

message:finalScore

delegate:self

cancelButtonTitle:@"Play Again"

otherButtonTitles:@"Game Stop", nil];

[alert show];

timerOn = false;

}

}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex

{

if (buttonIndex == 0) {

[self setupGame];

} else if (buttonIndex == 1) {

exit(0);

}

}

@end

Page 20: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

20

Day 5~6. Mini 프로젝트 : Tap Me 게임제작 02

* 프로젝트 결과보고서 양식을 다운로드 받아 잘 작성하여, 김종현

교수([email protected])로 보내기 바람( 파일명 : 장서현_프로젝트_보고서.docx).

1. 그림, 사운드 등 리소스 파일(TabMe_Resources.zip) 첨부

2. 앱 스크린

3. 게임 음악(오디오) 처리

- <AVFoundation/AVFoundation.h>

- AVAudioPlayer 클래스 사용법

4. 소스 코드

// TabMeViewController.h // MyTabMe01

#import <UIKit/UIKit.h>

#import <AVFoundation/AVFoundation.h>

@interface TabMeViewController : UIViewController <UIAlertViewDelegate>

{

NSInteger count;

Page 21: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

21

NSInteger seconds;

NSTimer *timer;

// AVAudioPlayer 객체 선언

AVAudioPlayer *buttonBeep; // 버튼 터치할때 음원

AVAudioPlayer *secondBeep; // Timer 음원

AVAudioPlayer *backgroundMusic; // 게임 빽그라운드 음원

}

@property (strong, nonatomic) IBOutlet UILabel *scoreLabel;

@property (strong, nonatomic) IBOutlet UILabel *timerLabel;

- (IBAction)buttonPressed:(id)sender;

@end

// TabMeViewController.m // MyTabMe01

#import "TabMeViewController.h"

@implementation TabMeViewController

- (void)viewDidLoad

{

[super viewDidLoad];

//self.view.backgroundColor = [UIColor purpleColor]; // ADD THIS!!

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImageimageNamed:@"bg_tile.png"]];

self.scoreLabel.backgroundColor = [UIColor colorWithPatternImage:

[UIImage imageNamed:@"field_score.png"]];

self.timerLabel.backgroundColor = [UIColor colorWithPatternImage:

[UIImage imageNamed:@"field_time.png"]];

// 오디오 설정 메소드(setupAudioPlayerWithFile)을 실행하여 AVAudioPlater 객체 생성

buttonBeep = [self setupAudioPlayerWithFile:@"ButtonTap" type:@"wav"];

secondBeep = [self setupAudioPlayerWithFile:@"SecondBeep" type:@"wav"];

backgroundMusic = [self setupAudioPlayerWithFile:@"HallOfTheMountainKing"type:@"mp3"];

[self setupGame];

}

- (AVAudioPlayer *)setupAudioPlayerWithFile:(NSString *)file type:(NSString *)type

{

// 1. 오디오 파일명을 인자로 받아 PC 파일시스템에 있는 오디오 파일의 위치를 찾음(path)

NSString *path = [[NSBundle mainBundle] pathForResource:file ofType:type];

NSURL *url = [NSURL fileURLWithPath:path];

NSLog(@"%@", url);

// 2. 인자로 받은 오디오 파일이 존재하지 않을때 예외 처리

NSError *error;

// 3. 오디오 파일이 있는 위치(path)와 파일을 사용하여 AVAudioPlayer 객체 생성

AVAudioPlayer *audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:urlerror:&error];

// 4. 오디오 파일이 존재하지 않을때 예외 처리

if (!audioPlayer) {

NSLog(@"%@",[error description]);

}

// 5. 메소드을 호출한 곳으로 객체를 넘겨줌

return audioPlayer;

}

Page 22: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

22

- (IBAction)buttonPressed:(id)sender {

NSLog(@"button pressed!!!");

//_scoreLabel.text = @"Pressed";

count ++;

_scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];

[buttonBeep play];

}

// Timer 설정

- (void)setupGame

{

seconds = 30;

count = 0;

[backgroundMusic setVolume:0.3];

[backgroundMusic play];

_timerLabel.text = [NSString stringWithFormat:@"Time: %i", seconds];

_scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];

timer = [NSTimer scheduledTimerWithTimeInterval:1.0f

target:self

selector:@selector(subtractTime)

userInfo:nil

repeats:YES];

}

- (void)subtractTime

{

seconds--;

_timerLabel.text = [NSString stringWithFormat:@"Time: %i", seconds];

[secondBeep play];

if (seconds == 0) {

[timer invalidate];

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Time is up!"

message:[NSString stringWithFormat:@"You scored %i points", count]

delegate:self

cancelButtonTitle:@"Play Again"

otherButtonTitles:nil];

[alert show];

}

}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {

[self setupGame];

}

@end

Page 23: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

23

수업 후기

1. 프로젝트 내용

프로젝트 과제인 어플리케이션은 일정 시간을 두고 얼마만큼 가운데의 버튼을

클릭하는지를 게임으로 만든 것입니다. 이름은 TapMe 이며, 디자인은 미국의

고등학생들을 위한 iOS 프로그래밍 자료인 (http://www.raywenderlich.com/25561/ios-

for-high-school-students-making-your-first-ios-app-part-1)에서 참고하였습니다.

주어진 시간은 30 초이며 이 시간내에 최대한 많이 누를 수록 점수(Score)가 많이

올라갑니다.

원래 어플리케이션을 실행하자마자 바로 타이머가 작동하였으나, 버튼을 클릭하는

순간부터 시간이 흘러야 점수를 확실하게 측정할 수 있다고 판단하여 첫 클릭을 하는

순간부터 시간이 흐르도록 설정하였습니다. 시간이 모두 흐르면 끝났다는 메세지와

함께 점수를 보여주고, 메세지의 버튼을 누르면 Time 은 다시 30 으로 리셋이 되며

‘Tap Me!’ 버튼을 누를 때까지 흐르지 않는, 즉 어플리케이션을 실행했던 그 순간으로

돌아갑니다.

어플리케이션을 만들고 테스트하던 중, 30 초가 지날때까지 계속 기다리는 것이

불편하여서 리셋(Reset) 기능을 넣었습니다. 처음 리셋버튼을 넣을 때 각 함수에 대해

연결하는 방법을 몰랐지 ‘iOS 6 프로그래밍’을 보고 공부하였고 Reset 기능을 추가할

수 있었습니다. 하단에 Reset 버튼을 누르게 되면 다시 맨 처음 상태로 돌아가고, 다시

시작할 수 있습니다.

점수를 데이터로 저장하는 방법을 찾아 보았지만 결국 알 수 없었고 어쩔 수 없이

어플리케이션이 켜져 있는 동안 가장 높은 기록을 Max 값에 넣어 두었습니다. 그리고

시간이 끝나면 나오는 메세지에 함께 뜨도록 만들었습니다.

디자인 작업을 할 때 Retina 와 non-Retina 를 각자 따로 작업해주었고, 그 결과

디자인이 모든 아이폰에 맞도록 만들었습니다.

Page 24: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

24

2. 프로젝트 소감

처음으로 Xcode 를 통해서 게임을 만들어 보았습니다. ‘Tap Me!’ 어플리케이션을

만들기 시작했을때는 내가 과연 이런걸 만들 수 있을까 하는 생각과 안드로이드

버전으로도 만들어봤는데 iOS 버전이라고 못 만들게 뭐가 있는가 하는 생각이

겹쳐있었습니다. 계속 만들면서 프로그래밍 실력이 느는 것을 느꼈고 저는

프로그래밍에 자신감이 붙을 수 있었습니다. 그리고 기본 과제에만 만족하는 것이

아닌, 제가 원하는 여러가지 기능을 추가시켰습니다. 예를 들어 Reset 버튼이나

Max 값에 들어있는 기록을 들 수 있는데, 이런 기능을 추가시키면서 공부할 수 있어서

더욱 보람찼습니다.

이 어플리케이션은 처음 만든 게임인 만큼 정이 들어 있습니다. 그래서 조금 더

수정하고 다듬어서 제 자신만의 독특한 어플리케이션을 만들고 싶습니다. 나아가

Page 25: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

25

제가 지금까지 필요했던 어플리케이션을 누구에게 의존하여 만들어 달라고 하는 게

아니라 제가 직접 만들어서 실용적으로 사용하고 싶습니다. 그리고 이

어플리케이션으로 다른 사람들을 돕고 싶습니다.

- 중 3 창의성반 김기홍 작성-

Page 26: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

26

프로젝트 최종 보고서

Page 27: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

27

부산광역시 정보영재교육원

여름방학 집중기 수업 프로젝트 보고서

제목 : 아이폰 Tap Me 게임 앱 개발

이름 : 김 기 홍

소속 : 중 3 창의성반

지도 : 동의과학대학교 김종현 교수님

날짜 : 2013. 7.20 ~ 7.26

Page 28: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

28

1. 아이폰 결과 화면

Page 29: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

29

2. 프로젝트 내용

이 어플리케이션은 일정 시간을 두고 얼마만큼 가운데의 버튼을

클릭하는지를 게임으로 만든 것입니다. 이름은 TabMe 이며, 디자인은

(http://www.raywenderlich.com/25561/ios-for-high-school-students-making-your-first-ios-app-part-

1)에서 참고하였습니다.

주어진 시간은 30 초이며 이 시간내에 최대한 많이 누를 수록

점수(Score)가 많이 올라갑니다.

원래 어플리케이션을 실행하자마자 바로 타이머가 작동하였으나, 버튼을

클릭하는 순간부터 시간이 흘러야 점수를 확실하게 측정할 수 있다고

판단하여 첫 클릭을 하는 순간부터 시간이 흐르도록 설정하였습니다. 시간이

모두 흐르면 끝났다는 메세지와 함께 점수를 보여주고, 메세지의 버튼을

누르면 Time 은 다시 30 으로 리셋이 되며 ‘Tap Me!’ 버튼을 누를 때까지

흐르지 않는, 즉 어플리케이션을 실행했던 그 순간으로 돌아갑니다.

어플리케이션을 만들고 테스트하던 중, 30 초가 지날때까지 계속 기다리는

것이 불편하여서 리셋(Reset) 기능을 넣었습니다. 처음 리셋버튼을 넣을 때

각 함수에 대해 연결하는 방법을 몰랐지 ‘iOS 6 프로그래밍’을 보고

공부하였고 Reset 기능을 추가할 수 있었습니다. 하단에 Reset 버튼을 누르게

되면 다시 맨 처음 상태로 돌아가고, 다시 시작할 수 있습니다.

점수를 데이터로 저장하는 방법을 찾아 보았지만 결국 알 수 없었고 어쩔 수

없이 어플리케이션이 켜져 있는 동안 가장 높은 기록을 Max 값에 넣어

두었습니다. 그리고 시간이 끝나면 나오는 메세지에 함께 뜨도록

만들었습니다.

디자인 작업을 할 때 Retina 와 non-Retina 를 각자 따로 작업해주었고, 그

결과 디자인이 모든 아이폰에 맞도록 만들었습니다.

3. 소감

처음으로 Xcode 를 통해서 게임을 만들어 보았습니다. ‘Tab Me!’

어플리케이션을 만들기 시작했을때는 내가 과연 이런걸 만들 수 있을까 하는

생각과 안드로이드 버전으로도 만들어봤는데 iOS 버전이라고 못 만들게 뭐가

있는가 하는 생각이 겹쳐있었습니다. 계속 만들면서 프로그래밍 실력이 느는

것을 느꼈고 저는 프로그래밍에 자신감이 붙을 수 있었습니다. 그리고 기본

과제에만 만족하는 것이 아닌, 제가 원하는 여러가지 기능을 추가시켰습니다.

예를 들어 Reset 버튼이나 Max 값에 들어있는 기록을 들 수 있는데, 이런

기능을 추가시키면서 공부할 수 있어서 더욱 보람찼습니다.

이 어플리케이션은 처음 만든 게임인 만큼 정이 들어 있습니다. 그래서 조금

더 수정하고 다듬어서 제 자신만의 독특한 어플리케이션을 만들고 싶습니다.

나아가 제가 지금까지 필요했던 어플리케이션을 누구에게 의존하여 만들어

달라고 하는 게 아니라 제가 직접 만들어서 실용적으로 사용하고 싶습니다.

그리고 이 어플리케이션으로 다른 사람들을 돕고 싶습니다.

Page 30: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

30

부산광역시 정보영재교육원

여름방학 집중기 수업 프로젝트 보고서

제목 : 아이폰 Tap Me 게임 앱 개발

이름 : 김나영

소속 : 중 3 창의성반

지도 : 동의과학대학교 김종현 교수

날짜 : 2013.07.22-2013.07.26

Page 31: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

31

1. 아이폰 결과 화면

Tap Me 앱 첫 실행 화면 1 회 클릭=스코어 1, 타이머 동시시작

30 초경과 점수 결과, 재시작 클릭, 첫화면으로 리셋

재시작 여부 팝업창

(*게임 종료 클릭시 게임 종료 (아이폰 바탕화면으로 ..) )

Page 32: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

32

2. 내용

(소스파일 캡쳐)

Page 33: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

33

Page 34: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

34

Page 35: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

35

3. 소감

아직 프로그래밍 실력이 많이 부족하고 개인적으로 x-code 를 사용하여

게임을 만들어 본적이 없어서 Tap Me 앱을 만들어 낼 수 있을까 하는

생각이 먼저 들었지만 프로젝트로 친구들, 선생님과 함께 할 수 있는

기회가 주어져서 많이 배울 수 있는 기회가 되었습니다. 새로운 코드를

배운 것은 물론이고 게임을 만들면서 발생하는 오류들을 찾아내서 고칠 때

왜 이런 오류가 났을까에 대해 생각하게 되고 프로그래밍을 할 때 구조를

어떤 식으로 짜야하는지 조금 더 감을 잡을 수 있게 된 것 같았습니다.

그리고 이 게임을 만들면서 외부 이미지나 사운드 파일을 처음 첨부해

보았는데 첨부한 파일을 스토리 보드에서 적용 시키지 않고 코드로 적용

시키는 것도 신기했습니다. 제 손으로 직접 만들어낸 첫 작품이라 부족한

모습도 많이 보이지만 그래도 조금이나마 발전했다는 생각이 들어서 매우

보람찬 시간이였고 지금까지 배운것으로 만들 수 있는 앱이 몇 개 되지

않는다는 생각이 들지만 꾸준히 공부하여서 제가 상상하던 게임이나

실생활에 필요하다고 생각되는 앱들을 스스로 개발할 수 있고, 주변에서

원하는 기술들을 만들 수 있는 정도의 능력을 갖추고 싶습니다. 지금보다

더 크게 발전해나갈 IT 계에 기여할 수 있는 사람이 되었으면 좋겠습니다.

Page 36: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

36

부산광역시 정보영재교육원 중 3 창의성반

여름방학 집중기 수업 프로젝트 보고서

제목 : 아이폰 Tap Me 게임 앱 개발

이름 : 김 준 엽

소속 : 중 3 창의성반

지도 : 동의과학대학교 김종현 교수님

날짜 : 2013.7.20 ~ 7.26

1.아이폰 결과 화면

Page 37: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

37

2. 내용

Page 38: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

38

3. 소감

현재 삼성, LG 등에서 제작하고 있는 안드로이드 폰이 현재 아이폰보다

매출이 더 증가한다고 한다. 그래서인지 우리 주변 사람들을 보면 스마트폰

중에서 교육용을 제외하고는 아이폰을 쓰는 사람은 그렇게 많지 않다. 그

때문인지 나도 아이폰에 대한 관심이 낮아지게 될 뿐만 아니라 iOS

프로그래밍은 잘 하지 못했다. 나도 처음 맥을 이용해서 iOS 프로그래밍을 할

때는 선생님 설명을 잘 따라가지 못하면 어쩌나, 어려울 것 같은데 등의

걱정이 많이 생겼었다. 하지만 김종현 교수님 께서는 복잡해 보이는 코드를

쉽게 설명해주셨다. 또 ‘Tap me’ 라는 간단한 게임을 만들면서, 겉으로는

간단해 보일지 몰라도 실제로 만들 때 들어가는 코드가 엄청 많다는 것을

새삼 느끼게 되었다. 기회가 된다면, 집에 맥을 사서 직접 다양한 앱을 만들어

보고 싶다.

Page 39: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

39

iOS 아이폰 어플만들기

프로젝트 보고서

중 3 컴퓨터 창의성반

손하은

1. 결과화면

Page 40: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

40

2. 프로젝트 내용

Xcode 와 object-C 를 이용한 app 만들기

-code 넣기(프로그램 기반, 변수지정 등등..매우많음)

-이미지 삽입(배경화면 설정, 버튼모양)

-클릭시 이벤트(숫자 적립)

-Label 이용(정적:이름띄우기, 동적:시간,점수

-꾸미는법(색넣기 그림넣기 등등)

-timer 넣기(시간이지날수록 숫자차감, 0 이되면 끝)

-알림창(게임이 끝날시, 다시 or 끝의 선택화면)

-클릭시 이미지변화

=Tap me:버튼을 30 초 동안 터치해서 점수 올리는 게임.

3. 소감

Page 41: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

41

작년에 했던 ios 기반 앱만들기와는 조금 달라서 신기했고

작년보다 조금 더 어려웠다. 작년에는 object 를 많이

이용하고 그 기능 자체로 대부분 만들었는데 이번에는

우리가 코드를 집적 입력하는것이 대부분이라서 그런 것

같다. 자꾸 에러가 많이 나서 좀 힘들기도 했고 갑자기

생각대로 안되서 애먹었고 특히 timer 가 안되서 결국

친구들과 선생님 도움도 많이 받았지만 마지막에 내가만든

결과물을 보니 신기하고 보람있었다. 다만 결국

마지막까지 버튼 주변의 하얀바탕은 안없어져서 그게 좀

아쉽다. 다음에도 이런 기회가 있다면 좀더 어렵고

재밌는걸 만들어서 지금보다 UI 를 좀 예쁘게 꾸며보고 싶.

지금은 폰을 바꿔서 이 앱이 안들어가겠지만 다음에 혹시

다시 아이폰으로 바꾸게 된다면 탈옥해서 앱을

넣어봐야겠다

Page 42: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

42

부산광역시 정보영재교육원 중 3

창의성반 여름방학 집중기 수업

프로젝트 보고서

제목 : 아이폰 Tap Me 게임 개발

이름 : 우 정 규

소속 : 중 3 창의성반

지도 : 동의과학대학교 김종현 교수님

날짜 : 2013.7.20~ 7.26

1. 아이폰 결과물 사진

Page 43: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

43

2. 내용

Page 44: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

44

(Screenshots, Lectures) [Head File]

[Main File]

Page 45: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

45

Page 46: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

46

Page 47: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

47

Page 48: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

48

[Story Board]

[설명]

이것은 TabMe 라는 이름을 가진 어플리케이션이다. 싱글뷰를 이용해

만들었으며, 기본적인 베이스는 두개의 라벨(시간표시, 점수표시)와 버튼

한개(누르면 점수가 올라감)로 이루어져 있다. 어플을 실행하게 되면, 맨 위의

아이폰 결과화면 첫번째 화면처럼 뜨며, 가운데의 Tap Me! 버튼을 누르게

되면 맨 위의 time 부분이 30 초부터 카운트다운되며, bgm 이 나오게 된다.

또한 Tap Me! 버튼을 누를때마다, 스코어가 증가한다. 타이머가 다 끝나고 난

뒤에는, 시간이 끝났다는 알림이 뜨며, 그 밑에는 자기가 세운 스코어가

표시되고, 게임을 계속할 것인가 아니면 종료할 것인가를 결정하는 두개의

버튼이 있다. 만약 전자를 누르게 된다면 맨 처음화면으로 리셋되어 돌아가고,

후자를 누르게 된다면 어플리케이션이 종료된다.

Page 49: 스마트폰 앱개발 교육자료 및 프로젝트...1 2013 여름방학 부산광역시 정보영재교육원 강좌 스마트폰 앱개발 기초 교육자료 및 프로젝트

49

소스는 전체적으로는 간단한 편이나, bgm 부분과 알람창 부분, 그리고

타이머 부분의 소스가 조금 복잡해서 힘이 들었다. 맨 처음소스는 어플을

실행시키자 마자 바로 게임이 시작되게 소스가 구성되어 있었는데, 불편함이

느껴졌다. 처음에는 Integer 로 변수 a 와 b 를 선언하여, a 는 타이머와 관련,

b 는 bgm 과 관련해서 tab me 버튼을 누를때 타이머와 bgm 이 시작되게

소스를 구성했다. 하지만 나중에 김종현 교수님이 bool 함수를 이용해서

소스를 짜게 되면 더 간단하게 될수 있다는 말을 듣고, a = s, b = bg 로

고쳐서 bool 로 선언한뒤, 소스를 짜보았다. 하이스코어를 저장하여 보여주는

부분도 만들어 보려는 했으나, 배열을 이용해야 하여 복잡하고 어려워 만들지

못하였다.

3. 소감

평소에 어플리케이션이라는 것을 매우 흥미롭게 생각해왔었고, 한번쯤은

나도 만들어보고 싶다는 생각을 항상 했었었다. 정보영재원에 들어와서,

2 학년때 objective-c 와 x-code 를 접하게 되면서, ios 어플을 어느정도는

만들 정도가 되었다.

이번에 김종현 교수님과 함께한 TabMe 어플 만들기 프로젝트는 나에게는

아주 흥미로운 것이었다. 조금 더 많은 기능들을 넣어보고 싶었으나, 아직

실력이 부족할뿐만 아니라, 주어진 시간이 부족하여 많은 기능을 넣는 부분은

실패하고 말았다.

기본적인 Tab Me 소스를 보니, 바로 어플이 시작되자마자, 게임이

시작되고, 게임이 끝난후 다시하기를 누르니 바로 또 게임이 시작되는

불편함이 존재했다. 그에 관련해서 따로 start 버튼을 만들어 보았으나,

그보다는 tab me 버튼을 눌렀을때 게임이 시작되는 것이 어떻겠느냐는

의견을 듣고 그에 맞추어서 수정하게 되었다.

평소 학원을 다니거나 내신대비를 한다고 좋아하는 어플 만들기를 할

기회가 거의 없었는데, 이렇게 집중기동안 ios 어플을 만들어보게 되어 정말

좋았다. 1 년전에 배운것을 거의 까먹은 상태라 처음에는 조금 힘들었으나,

계속 하다보니 자신감이 붙었고, 재미있다는 생각이 들었다. 이제까지는

스트레스를 게임이나 tv 보기, 웹서핑하기 등으로 풀었었는데, 이렇게

좋아하는 어플을 만드는 것도 하나의 좋은 취미이자 스트레스해소법이

될수도 있겠다고 생각했다. 짧은 기간이었지만 ios 어플 만들기를 강의해주신

동의과학대학교 김종현 교수님께 감사드린다.