LifeGame 안드로이드 앱개발 도전기!

Google Play 마켓에서 보기

<게임규칙 변경>

                     

                              [LifeGame 실행영상 - youtube]

물론 마켓에 올렸다고 끝이 아닌것 잘 알고 있다. 관심을 가져주는 분들이 있고, 

개선방향에 의견을 주시면 언제든지 반영할 준비가 되어있다.  

(수고했다는 의미로 광고한번 살포시 눌러주면 개발자에게 큰힘이 된답니다 ^^)

자. 이제 더 흥미로운 앱을 개발하기 위해 다시 고민할 때이다! 

LifeGame Facebook Page 가기

Google Play 마켓에서 보기

 

2. 자바란?

자바 언어의 개발사인 썬은 spac 이란 서버제품군을 제작하는 회사였습니다. 

낮은 H/W 마진을 개선하고자, 자사의 H/W 위에 마진이 높은 S/W(유닉스 등)를 얹혀서 팔려했는데

하드웨어마다 소프트웨어를 재작성해야 하는 문제가 있었습니다. 즉 다양한 머신 위에서

한번작성하면 동일하게 동작하는 S/W를 만들려는 노력해서 Java가 탄생하게 되었습니다

위키: http://en.wikipedia.org/wiki/Java_language

3. 자바의 장점

객체지향적, 플랫폼 독립적, 동적이고 배포하기 쉬우며... 견고하고 보안에 강하다!

하지만 객체지향적이고, 보안에 강하다는 특성을 살리는 것은 소프트웨어를 작성하는 개발자에 전적으로 

달려있답니다. (무서운 강사님의 말씀...)

4. 플랫폼 독립적?

c언어는 컴파일러가 머신에 의존적인 기계어 코드(실행파일)를 생성합니다. 유닉스, 리눅스, 윈도우, 맥에서 

실행하기 위해서는 소스 수준에서 재컴파일이 필요합니다. 

자바는 OS와 소스코드 중간에 JVM(Java Virtual Machine)이라는 중간계층을 두어 이를 해결했습니다. 

소스코드를 가산머신이 인식할 수 있는 중간언어인 바이트 코드로 컴파일해서 배포합니다. 그러면 각 OS에 

설치되어 있는 JVM이 바이트 코드를 기계어로 번역하여 실행합니다.

(단, 각 OS 마다 각 머신에 맞는 JVM이 설치되어 있어야 합니다. 한번만 설치하면 되니까 매번 소스를 

재컴파일해야 하는 것보다는 훨씬 유연성이 있죠)

5. 기업 인터넷 환경에서의 Java

유연성을 위해 3-Tier(프레젠테이션 계층-비지니스 계층-데이터(DB) 계층)의 형태로 구성됩니다. 

현재는 더욱 확장된 N-Tier로 구성된다고 하네요. 

PS. Three Tier를 삼-Tier로 읽는 센스 ㅋ

6. JVM 의 동작방식

클래스 로더가 소스코드를 스캔하여 모든 필요한 클래스를 로드합니다. 필요한 클래스 위치는 CLASSPATH 

환경변수를 참조하게 찾게됩니다. JVM Verifier 가 오작동 될 수 있는 코드(무한루프와 같은...)를 검사해서 

사전에 차단합니다. 이어서 바이트 코드를 실행하게 되는데, 이때 JIT(Just-In-Time) 컴파일러가 동작합니다. 

즉 소스코드와 (컴파일된 .class)클래스 파일의 수정일자를 비교해서, 소스코드가 더 나중에 수정됐을 경우에만 

재컴파일하게 됩니다. 

(PS. JIT를 도입해서 자바의 느린 성능을 어느정도 극복했고, 버전업 될때마다 크게 향상되고 있습니다.

      또 가비지 컬렉터라는 메모리 관리자가 더이상 사용되지 않는 객체를 수시로 검사하여 자동으로 메모리를 

     반환해줍니다)

7. 자바환경에서 보안 구현

언어차원과 컴파일러, 클래스 로더, 바이트코드 검증기(Verifier) 등 계층적으로 위해한 코드를 차단해줍니다.

8. 자바 애플리케이션의 배포방식

.zip 또는 .jar로 압축해서 배포합니다. .jar은 단순히 소스만 압축할 수도 있고, 클래스파일까지 함께 압축해서 

실행가능한 형태로 만들 수 있습니다. 웹에서는 .war 형태로 압축해서 배포됩니다. 

9. JDK(Java Development Kit)

통상 J2SE를 지칭합니다.컴파일러, 코어클래스 라이브러리, 디버거, JVM, JAR(Java ARchive utility) 등으로 

구성됩니다. Java 1.2버전 이후부터 대폭 내부구조가 개선되었는데 이를 표현하기 위해 1.2버전 이후부터는 

JAVA2라고 부릅니다. (웹2.0 처럼 큰 변화가 있었다는 의미이지요). 

JAVA2에는 J2SE, J2ME, J2EE 이렇게 3가지가 있습니다. 

J2ME는 모바일 환경의 S/W 작성을 위해 필요한 클래스만 추려낸 버전이고, J2EE는 기업환겨에 맞게 병렬실행 

등을 강화한 버전입니다. 

10. 자바빈즈(JavaBeans)

Beans는 땅콩을 의미하는 땅콩은 알맹이를 껍데이가 감싸는 형태로 되어있죠. 

클래스가 속성과 메소드를 깜싸고 있는 모습이 흡사 땅콩과 같다해서 자바빈즈라고 부릅니다. 

보통 프레임워크에서 데이터 속성과 표준화된 getter, setter를 갖는 클래스를 빈즈라고 합니다. 

11. 기본형 데이터 타입

기본형	크기	Wrapper 클래스	비고
boolean	16비트	Boolean	true, false
char	8비트	Character	유니코드 사용
byte	8비트	Byte
short	16비트	Short
int	32비트	Integer
long	64비트	Long
float	32비트	Float
double	64비트	Double

1. 라이프 게임 개발을 시작하다

2008년 6월 25일 수요일 새벽 잠들기 전....

1년간 프로그래밍에 전혀 손 대지 않다가... 다시 프로그래밍을 하려고 하니 영~ 힘들다  

1년이란 시간이 매우 길긴 기나부다...그 많은 것을 잊어버렸다. 자바 Spring 프레임워크를 파보려고 하는데

읽어도 무슨말인지 모르겠고, 이클립스 등 개발환경 셋팅하는데만 하루가 걸렸다. ㅡㅡ;;

잊어버린 자바 관련 지식을 상기시키고자, 첫 번째 프로젝트에 들어갔다. 프로그램은 "콘웨이"에 '라이프 게임!'

게임 알고리즘이 간단해서 연습용 프로젝트에 딱인 것 같다.

그럼 라이프 게임이 무엇인지부터 알아보자!

2. 라이프 게임이란?

      

3. 게임 규칙

게임규칙을 요약하면 아래와 같다 

4. 구현하기

프로그래밍을 하기 위하여 구현한 절차는 아래와 같다. 

먼저 모든 셀들을 순회하면서 살아있는 이웃셀을 카운트하고, 살아있는 이웃의 개수를 저장한다

이를 바탕으로 위 세가지 규칙을 적용하여 다음세대 살아있는 셀들을 결정한다.

간략하게 만들어 화면은 아래와 같다. 

4.1 게임판의 표현

게임판은 JPanel을 상속하는 Cell을 가로, 세로 size 개수 만큼의 요소로 갖는 이차원 배열로 표현하였다. 

LifeGame 클래스는 게임의 전체적인 흐름을 관리하는 메소드들을 갖는다. 

public class LifeGame extends JPanel  {
       ...
	private void init() {	
		setLayout(new GridLayout(size,size));
		cells = new Cell[size][size];
		
		for (int i=0; i < size; i++)
			for (int j=0; j < size; j++) {
				cells[i][j] = new Cell();
				cells[i][j].setBorder(BorderFactory.createLineBorder(Color.BLACK));
				add(cells[i][j]);
			}
		rule = new GameRule(cells);
	}
        ...
	public void transition() {
		rule.countAliveNeibor();
		rule.applyRule();
	}
        ...
}

4.2 셀의 표현과 셀의 상태 

Cell은 live 상태(true이면 살아있고, false 죽어있는 상태)와 살아있는 이웃의 개수에 대한 변수를 갖는다. 

live 상태에서 따라서 셀이 그려지거나 혹은 그려지지 않거나 한다.

public class Cell extends JPanel {
	private boolean live = false;
	private int neighborCount = 0;
	private Image img = null;
	private int w, h;
        ...
       @Override
	protected void paintComponent(Graphics g) {
	        ...
		if (live) {
			gg.drawImage(img, 0, 0, this);
		}
		else {
			gg.setColor(getBackground());
			gg.fillRect(0, 0, getWidth(), getHeight());
		}
		g.drawImage(image, 0, 0, this);
	}
}

4.3 게임규칙의 표현

턴마다 LifeGame 클래스의 transition()메소드가 호출되면, GameRule 클래스의 countAliveNeibor() 메소드가 

먼저 호출되고, 이웃하는 셀들에 개수를 모두 카운팅 한뒤, 살아있는 세대를 결정하기 위해 applyRule()메소드가 호출된다. 

public class GameRule {
    ...
     public void countAliveNeibor() {
         ...
     }
     public void applyRule() {
		int neighborCount;

		for (int r = 0; r < rows; r++) {
			for (int c = 0; c < cols; c++) {
				neighborCount = cells[r][c].getNeighborCount();

				if (cells[r][c].getLife()) {
					if (neighborCount <= 1 || neighborCount >= 4)
						cells[r][c].setLife(false);
				}
	
				else  {
					if (neighborCount == 3) 
						cells[r][c].setLife(true);
				}
			}
		} //for 
	}
}

5. 버려진 프로그램은 싫다! 리팩토링~

2009년 08월 04일

예전에 만든 라이프게임 UI가 허접해서 라이프게임 알고리즘은 그대로 드고, 드로잉부분만 수정해서 다시 만들어봤다. 

6. 개발하게 하면서 이런걸 알게되었다~

7. 만들면서 삽질하게 만든 요인들

8. 짜잔~ 최종적으로 만들어진 프로그램

다음은  LifeGame, GameRule, Cell 클래스 소스이다. 

package lifegame;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.GridLayout;

import javax.swing.BorderFactory;
import javax.swing.JPanel;

@SuppressWarnings("serial")
public class LifeGame extends JPanel  {
	private Cell[][] cells;
	private int size; 
	private GameRule rule; 

	public LifeGame(int size) {
		this.size = size;
		init();
	}

	// 초기화 
	private void init() {	
		setLayout(new GridLayout(size,size));
		cells = new Cell[size][size];
		
		for (int i=0; i < size; i++)
			for (int j=0; j < size; j++) {
				cells[i][j] = new Cell();
				cells[i][j].setBorder(BorderFactory.createLineBorder(Color.BLACK));
				add(cells[i][j]);
			}
		rule = new GameRule(cells);
	}

	public void cellAlive(int r, int c) {
		cells[r][c].setLife(true);
	}
	
	public void cellDead(int r, int c) {
		cells[r][c].setLife(false);
	}

	public boolean getLifeCell(int r, int c) {
		return cells[r][c].getLife();
	}

	public void clearGame() {
		for (Cell[] cs : cells) 
			for (Cell c : cs)
				c.setLife(false);
	}

	public void transition() {
		rule.countAliveNeibor();
		rule.applyRule();
	}
	
	@Override
	protected void paintComponent(Graphics g) {
		for (Cell[] cs : cells)
			for (Cell c : cs)
				c.repaint();
	}
}

 

package lifegame;

public class GameRule {
	private Cell[][] cells;
	private static final int LEFT = -1, UP = -1;
	private static final int RIGHT = 1, DOWN = 1;
	private int rows, cols;
	
	public GameRule(Cell[][] cells) {
		this.cells = cells;
		rows = cells.length;
		cols = cells[0].length;
	}

	// 각 셀의 살아있는 이웃을 센다 
	public void countAliveNeibor() {
		int nNeighbor;

		for (int r = 0; r < rows; r++) {
			for (int c = 0; c < cols; c++) {
				
				nNeighbor = 0;
				if (r + UP >= 0)
					if(cells[r + UP][c].getLife())
						nNeighbor++;

				if (r + UP >= 0 && c + RIGHT < cols)
					if (cells[r + UP][c + RIGHT].getLife())
						nNeighbor++;
							
				if (c + RIGHT < cols)
					if (cells[r][c + RIGHT].getLife())
						nNeighbor++;

				if (r + DOWN < rows && c + RIGHT < cols)
					if (cells[r + DOWN][c + RIGHT].getLife())
						nNeighbor++; 
							
				if (r + DOWN < rows)
					if (cells[r + DOWN][c].getLife())
						nNeighbor++;

				if (r + DOWN < rows && c + LEFT >= 0)
					if (cells[r + DOWN][c + LEFT].getLife())
						nNeighbor++;				

				if (c + LEFT >= 0)
					if (cells[r][c + LEFT].getLife())
						nNeighbor++;

				if (r + UP >= 0 && c + LEFT >= 0)
					if (cells[r + UP][c + LEFT].getLife())
						nNeighbor++;

				cells[r][c].setNeighborCount(nNeighbor);
			}
		} // for

	}
	// 살아있는 셀은 이웃이 1명 이하, 4명 이상이면 죽는다
	// 죽어있는 셀은 이웃이  3명이면 살아난다
	// 이웃이 2,3명인 살아있는 셀은 계속 산다 
	public void applyRule() {
		int neighborCount;

		for (int r = 0; r < rows; r++) {
			for (int c = 0; c < cols; c++) {
				neighborCount = cells[r][c].getNeighborCount();

				if (cells[r][c].getLife()) {
					if (neighborCount <= 1 || neighborCount >= 4)
						cells[r][c].setLife(false);
				}
	
				else  {
					if (neighborCount == 3) 
						cells[r][c].setLife(true);
				}
			}
		} //for 
	}

}

package lifegame;

import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Image;
import java.io.BufferedInputStream;

import javax.swing.JPanel;
import javax.imageio.ImageIO;


@SuppressWarnings("serial")
public class Cell extends JPanel {
	private boolean live = false;
	private int neighborCount = 0;
	private Image img = null;
	private int w, h;
	
	
	public Cell() {
		try {
			img = ImageIO.read(new BufferedInputStream(Res.class.getResourceAsStream("../life.png")));
			w = img.getWidth(this);
			h = img.getHeight(this);
			setPreferredSize(new Dimension(w,h));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	public void setLife(boolean s) { 
		live = s;
	}
	
	public boolean getLife() {
		return live;
	}
	
	public void setNeighborCount(int n) {
		neighborCount = n;
	}
	
	public int getNeighborCount() {
		return neighborCount;
	}

	@Override
	protected void paintComponent(Graphics g) {
		// 더블 버퍼링 
		Image image = createImage(getWidth(), getHeight());
		Graphics gg = image.getGraphics();
		
		if (live) {
			gg.drawImage(img, 0, 0, this);
		}
		else {
			gg.setColor(getBackground());
			gg.fillRect(0, 0, getWidth(), getHeight());
		}
		g.drawImage(image, 0, 0, this);
	}
}

직장인에 13월의 월급이라는 연말정산! 

올해는 돈을 뱉어내지? 않기 위해 유난히 사투를 벌였습니다. 표현은 이렇게 했지만 

엄밀히 말하면 정당한 혜택을 얻기 위해 그만큼 알아보고 노력했다는 이야기 이지요 

그중 가장 골머리를 앓았던 건 주택자금 월세공제를 받기 위한 요건있었습니다.

1. 확정일자 무엇이 진실인가?

월세공제를 받을 수 있나? 없나? 에 대한 고민을 한참했지요. 여기서 받을 수 없을 거라고 지례 생각하고 

그냥 넘어가는 사람들이 많은데, 전 좀더 자세히 알아봐야겠다는 생각을 했습니다. 

2. 공제요건

먼저 공제요건에 대해 알아보면

3. 확정일자 이후로 납입된 월세금액에 대해서만 공제가 가능하다?

인터넷을 검색해 보면 어떤 곳에서는 그렇지 않다는 의견이 있어서 의아해하던 차에  

지인을통해 확정일자와 관련하여 국세청에 문의한 내용을 공유받았습니다. 

"콜센터 답변자는 알바여서 정확하지 않다" 는 반대의견을 어디선가 듣고 ^^;; 

위 내용을 좀더 정확히 확인하기 위해서 관련법규를 찾아보았습니다.

국세청 > 국세법령정보시스템 사이트에 접속하면 아래와 같이 세목별 법규 확인이 가능합니다. 

소득세법 제52조  보라색의 밑줄친 부분을 보면

이라는 항목만 있고, 확정일자의 귀속년도에 대한 언급은 없습니다.  otz...

위 문구만을 가지고는 해석을 다양하게 할 수 있기 때문에 굉장히 애매한 부분입니다. 

그래서...

다시 세무서에 전화로 문의를 해보았습니다. 담당자가 이야기하길...

4. 결론 

즉, 결론을 내리자면...

여기까지 제가 알아본 사항들입니다.

혹시나 확정일자 이후에 납부한 금액에 대하서만  적용하셨거나

아에 공제를 받지 못한분들은 위의 내용 숙지하지고 정상적으로 월세공제 받을 수 있기를 바랍니다!!

미흡한 글이지만 조금이라도 도움이 되셨다면 작은 도움의 손길 ^^ 부탁드릴게요! 

 

11회 때 축하공연을 한 달샤벳도 굉장히 인상적이었는데, 12회때는 축하공연이 없어서 

살짝 아쉬웠다는... ㅎㅎ

유익하고 개발자들의 탐구욕을 자극시켜줄  한국 자바 개발자 컨퍼런스를 기대해 봅니다. 

보너스로 ... 11회때 공연마치고 차량으로 복귀하는데  "이쪽 좀 봐주세요!" 하는 외침에

난감한 표정으로 답하는 세리양 이네요 ㅎ 

홈 버튼을 기준으로 왼쪽으로 회전, 오른쪽으로 회전, 거꾸로 뒤집었을 때 등 각 방향을 지칭하게 됩니다!

먼저 기존에는 회전을 지원하기 위해 아래와 같은 스텝을 거쳤습니다.

1. Window에 View 추가 

[self.window addSubview:viewController.view]

2. UIViewController 에 지원 회전방향 delegate 구현 

// 자동회전 지원하는 방향 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationPortrait || 
               interfaceOrientation == UIInterfaceOrientationLandscapeLeft ||            
               interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

3. UIViewController 에서 회전하기 전/후 호출되는 delegate 구현 

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    // 회전하기 전에 호출됩니다.
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
   // 회전 후에 호출됩니다.
}

shouldAutorotateToInterfaceOrientation의 UIInterfaceOrentation 파라미터 타입은 다음과 같이 

enum 타입 상수로  선언되어 있습니다.

typedef NS_ENUM(NSInteger, UIInterfaceOrientation) {
    UIInterfaceOrientationPortrait           = UIDeviceOrientationPortrait,
    UIInterfaceOrientationPortraitUpsideDown = UIDeviceOrientationPortraitUpsideDown,
    UIInterfaceOrientationLandscapeLeft      = UIDeviceOrientationLandscapeRight,
    UIInterfaceOrientationLandscapeRight     = UIDeviceOrientationLandscapeLeft
};

iOS 6.0 에서는 무엇을 바뀌었을까요?

1. Window에 rootViewController 추가 

self.window.rootViewController = viewController;

기존에는 Window의 View를 추가했지만, iOS6.0 부터는 반드시 Window의 rootViewController로 지정해야 합니다. 

2. UIViewController 에 지원 회전방향 delegate 구현 

//  자동회전 지원 유무 
- (BOOL) shouldAutorotate {
      return YES; 
}
// 지원하는 회전방향 
- (NSUInteger)supportedInterfaceOrientations {
    return (1 << UIInterfaceOrientationPortrait) | (1 << UIInterfaceOrientationLandscapeLeft) | (1 << UIInterfaceOrientationLandscapeRight);
}

기존에 2가지 역할을 하던 메소드가 자동회전 유무와 회전하는 방향을 반환하는 메소드로 각각 분리되었습니다.

또 지원하는 회전방향의 경우,  NSUInterger 반환값으로 변경되었는데 이 값은 지원하는 회전방향의 비트가 셋팅된

비트 플래그 값입니다.

typedef NS_OPTIONS(NSUInteger, UIInterfaceOrientationMask) {
    UIInterfaceOrientationMaskPortrait = (1 << UIInterfaceOrientationPortrait),
    UIInterfaceOrientationMaskLandscapeLeft = (1 << UIInterfaceOrientationLandscapeLeft),
    UIInterfaceOrientationMaskLandscapeRight = (1 << UIInterfaceOrientationLandscapeRight),
    UIInterfaceOrientationMaskPortraitUpsideDown = (1 << UIInterfaceOrientationPortraitUpsideDown),
    UIInterfaceOrientationMaskLandscape = (UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight),
    UIInterfaceOrientationMaskAll = (UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskLandscapeLeft |
                                                   UIInterfaceOrientationMaskLandscapeRight | UIInterfaceOrientationMaskPortraitUpsideDown),
    UIInterfaceOrientationMaskAllButUpsideDown = (UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskLandscapeLeft | 
                                                                         UIInterfaceOrientationMaskLandscapeRight),
};

1을 UIInterfaceOrentation 상수값 만큼 왼쪽으로 시프트해주면, 해당하는 방향의 비트를 셋팅할 수 있지요.

또 한가지 중요한 사항은, 커스텀 UINavigationController와 UITabBarController를 사용한 경우(상속해서)

이 커스텀 클래스의 회전 지원 delegate 메소드에서는 topViewController의 회전지원 delegate 메소드로 

위임해야 한다는 것입니다. 아래와 같이 말이죠!

...
- (BOOL) shouldAutorotate {
    return [topViewController shouldAutorotate];
}
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    ...
    // iOS6.0 이상
    NSString *currentVersion = [[UIDevice currentDevice] systemVersion];
    
    NSLog(@"%@", currentVersion);
    
    if ([currentVersion compare:@"6.0" options:NSNumericSearch] != NSOrderedAscending) {
        self.window.rootViewController = self.viewController;
    } else {
        // 하위버전
        [self.window addSubview:self.viewController.view];
    }
    [self.window makeKeyAndVisible];
    return YES;
}

#pragma mark - 회전지원 iOS6.0 이상

// 자동회전 지원유무
- (BOOL) shouldAutorotate {
    return YES;
}

// 회전방향 지원유무
- (NSUInteger)supportedInterfaceOrientations {
    return (1 << UIInterfaceOrientationPortrait) |
           (1 << UIInterfaceOrientationPortraitUpsideDown) |
           (1 << UIInterfaceOrientationLandscapeLeft) |
           (1 << UIInterfaceOrientationLandscapeRight);
}

#pragma mark - 회전지원 iOS6.0 미만 

// 회전방향 지원유무
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft ||
            interfaceOrientation == UIInterfaceOrientationLandscapeLeft ||
            interfaceOrientation == UIInterfaceOrientationLandscapeRight ||
            interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown
            );
}


#pragma mark - 회전 델리게이트 

// 공통
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
    // 회전하기 전에 호출됩니다.
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
    // 회전 후에 호출됩니다.
}

소스코드 다운로드

Rotation.zip

아이폰에서는 애니메이션을 쉽게 구현할 수 있는 수단들을 제공한다

UIView의 위치 이동, 크기변경, 회전, 페이드인/아웃 등과 간단한 애니메이션은 UIView 애니메이션을

사용해서 구현할 수 있다. UIView 클래스에 애니메이션을 위한 메서드들이 존재하며, 

iOS 4.0 부터는 블럭방식의 애니메이션 메소드를 제공해서 코드단에서 편리하게 구현할 수 있다. 

CoreAnimation은 CALayer 단에 적용되며, UIView 애니메이션 효과를 구현할 수 있을 뿐만 아니라  

좀더 복잡하고 세밀한 애니메이션 효과를 줄 수 있다.  하지만 UIView 애니메이션보다는 코딩량이 좀더 많고 번거롭다 

간략히 UIView 애니메이션과 코어 애니메이션을 사용하는 방법에 대해서 알아보자

다음은 UIView를 사용하여 구현한 푸시 애니메이션(네비게이션 푸시가 아니라, 버튼이 움푹 눌리는 듯한 효과)과 

CoreAnimation을 사용하여 구현한 플립 애니메이션(y축을 기준으로 뒤집어 지는 듯한 효과)이다 

1. UIView 애니메이션을 사용한 푸시효과

구현방식은 터치가 발생하면 x, y축 스케일(scale)을 0.3초 동안 0.9로 축소하고

다시 0.3 초 동안 1.0으로 되돌아 오는 효과를 적용했다. UI 요소가 눌리는 듯한 효과를 줄 수 있으며, 인터렉티브한 

느낌을 줄 수 있어서 자주 사용하는 효과중에 하나이다. 

 [UIView animateWithDuration:0.3 animations:^(void) {
        self.transform = CGAffineTransformMakeScale(0.9, 0.9);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^(void) {
            self.transform = CGAffineTransformIdentity;
        }];
    }];

animations 블럭에서 속성을 변경하는 코드가 비동기 방식으로 (메인쓰레드에서) 애니메이션되는 방식이다. 

위 코드는 가로, 세로 Scale을 각각 0.9로 변환하는 애니메이션을 0.3초 동안 수행하고, 

애니메이션이 완료(completion) 하면 원래 스케일로 복원하는 애니메이션을 다시 0.3초 동안 수행한다. 

CGAffineTransform 즉 아핀변환은 벡터에서 등장하는 용어로 변환을 행렬을 사용해서 나타낸 것이라는 정도만 알아두자.

2. CoreAnimation을 사용한 플립효과 

CoreAnimation 은 UIView가 아닌 CALayer에 적용되며, 애니메이션할 CALayer의 property를  지정하고 

애니메이션 상태를 좀더 세밀하게 제어할 수 있는 속성을 제공한다. 

플립 애니메이션을 구현하는 동안 주의할 점은  y축을 기준으로 회전을 하면 이미지가 좌우가 뒤집어 지는 

현상이 발생한다는 것이다.  레이어를 회전시켰기 때문에 뒤집어 지는 것이다. 

이문제는 먼저 90도를 회전 시키고, -90로 뒤집은 상태에서 다시 나머지 회전을 수행하는 방식을

사용하면 해결 할 수 있다. 

- (void)flip {
    // 90도 회전 
    CABasicAnimation *rotateY = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    rotateY.beginTime = 0.0;
    rotateY.toValue = [NSNumber numberWithFloat:radians(90)];
    rotateY.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotateY.autoreverses = NO;
    rotateY.repeatCount = 1;
    rotateY.removedOnCompletion = NO;
    rotateY.duration = 0.4;
    rotateY.fillMode = kCAFillModeForwards;
    
    // -90도로 뒤집은 상태에서 나머지 회전
    CABasicAnimation *rotateY2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    rotateY2.beginTime = 0.4;
    rotateY2.fromValue = [NSNumber numberWithFloat:radians(-90)];
    rotateY2.toValue = [NSNumber numberWithFloat:radians(0)];
    rotateY2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotateY2.autoreverses = NO;
    rotateY2.repeatCount = 1;
    rotateY2.removedOnCompletion = NO;
    rotateY2.duration = 0.4;
    rotateY2.fillMode = kCAFillModeForwards;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = [NSArray arrayWithObjects:rotateY, rotateY2, nil];
    group.duration = 0.8;
    group.autoreverses = NO;
    group.repeatCount = 1;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.delegate = self;
    
    [self.layer addAnimation:group forKey:nil];   
}

CAAnimationGroup은 동시에 여러 애니메이션을 복합적으로 적용할 때 사용하며,  CABasicAnimation의  

beginTime 속성을 사용해서 애니메이션 시작 시점을 조정할 수 있다. 총 0.8초 동안의 시간동안 처음 0.4초 동안

90도 회전하고, 0.4초 후 -90도 뒤집어진 상태에서 0도로 0.4초 동안 회전시켜 마치 카드가 자연스럽게 

뒤집어 지는 듯한 플립효과를 구현하였다

거의 대부분의 애니메이션은 UIView 애니메이션으로 구현할 수 있지만 

UI/UX에 특화된 좀더 재미나고 멋진 효과를 가진 앱을 개발하고 싶다면 코어 애니메이션 사용을 주저하지 말자!

소스코드

AnimButtton_for_bloging.zip

마스크 레이어를 활용하여 이미지의 일부부만 노출시키는 예제를 작성해 보았다. 

핵심은 마스크 레이어를 사용하면 터치 이벤트를 수신할 수 없기 때문에 

상위에 터치 이벤트를 수신하여 마스크 레이어 단에 이벤트를 전달해주는 투명뷰를

덮는 것 !

간단한 예제인데 fx의 설리와 크리스탈을 배경  이미지로 사용하니 재미있는 예제가 됐다. 

(나도 이제 나이 들었나봐 ㅠㅜ 바라만 봐도 행복하구나 ㅋ)

아래는 예제를 실행한 사진이다. 

자! 이제 어떻게 예제를 구현했는지 알아보자!

구현방식을 간단히 그림으로 나타내 보면 아래와 같다. 

SBTouchView 를 완전히 투명하게 해서는 안된다. 완전히 투명할 경우에는 터치 이벤트를 수신하지 못하기 때문에 

투명도를 0.1로 하는 꼼수를 발휘했다.   SBTouchView는 터치 이벤트를 단순히 nextResponder 에게 전달하고, 

SBMaskedView가 그 이벤트를 받게되고, 마스크 영역을 이동시킨다. 

구현 절차는 아래와 같다. 

1. 마스크 레이어 설정 

maskLayer = [[CAShapeLayer layer] retain];
maskLayer.backgroundColor = [UIColor whiteColor].CGColor;
        
pathRect = CGRectMake(1, 1, 118, 118);
        
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect];
maskLayer.path = path.CGPath;
maskLayer.fillColor = [UIColor blackColor].CGColor;

핵심은 레이어의 배경색을 흰색으로 처리하고, 마스킹 시킬 영역(Path)만 검정색으로 칠하는 것입니다.

2. 배경레이어에 마스크 설정 

// 배경이미지 (크리스탈, 설리 이미지)
CALayer *bgLayer = [CALayer layer];

UIImage *bgImage = [UIImage imageNamed:@"christal.jpeg"];
bgLayer.frame = [self frameForImage:bgImage];
bgLayer.contents = (id)bgImage.CGImage;
bgLayer.mask = maskLayer;

[self.layer addSublayer:bgLayer];

배경(이미지) 레이어의 mask 속성에 마스크 레이어를 설정합니다.

3. 터치뷰를 설정 

// 터치 이벤트를 잡을 투명뷰 
SBTouchView *touchView = [[[SBTouchView alloc] initWithFrame:self.bounds] autorelease];
[self addSubview:touchView];

// SBTouchView
@implementation SBTouchView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.1];
    }
    return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [[self nextResponder] touchesBegan:touches withEvent:event];
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [[self nextResponder] touchesCancelled:touches withEvent:event];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [[self nextResponder] touchesEnded:touches withEvent:event];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    [[self nextResponder] touchesMoved:touches withEvent:event];
}

4. 터치 이벤트를 수신하여 마스크 레이어 이동 시키기 

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    
    if (CGRectContainsPoint(pathRect, point)) {
        touchBegan = YES;
        touchPoint = point;
    }
}


- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    if (touchBegan) {
        UITouch *touch = [touches anyObject];
        CGPoint point = [touch locationInView:self];
        
        CGPoint destPoint = CGPointMake(pathRect.origin.x + (point.x - touchPoint.x),
                                 pathRect.origin.y + (point.y - touchPoint.y));

        pathRect.origin.x = destPoint.x;
        pathRect.origin.y = destPoint.y;
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect];
        maskLayer.path = path.CGPath;
        touchPoint = point;
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    touchBegan = NO;
}

터치 영역이 마스크 레이어의 영역일 경우, 마스크 레이어의 위치를 이동시킵니다. 

소스 다운받기

Mask.zip

이상 마스크 레이어 사용법을 알아보면서 간단한 예제도 만들어 보았다. 

아이폰을 하면서 항상 느끼는 거지만...UI 프로그래밍이 생각보다 재밌다는 것!