하이브리드 앱 강좌 #2. 안드로이드 앱 개발의 기초

개요

이 글에서는 본격적인 하이브리드 앱 개발에 앞서 안드로이드 앱 개발에 필요한 기초 개념을 설명합니다.
프로젝트 생성, 앱 실행, 레이아웃, 이벤트 처리를 간략한 예제를 통해 다룹니다.

새 프로젝트 생성

이클립스를 처음으로 실행한 화면에서 자식창인 Android IDE 옆의 X 버튼을 클릭해서 닫고 나면 다음 화면을 볼 수 있습니다.

첫 화면

새 프로젝트1

툴바 첫번째에 있는 New 아이콘 옆의 아래 화살표(▼)를 클릭하고 Android Application Project를 클릭합니다.

새 프로젝트2

New Android Application 창에서 다음 항목을 지정해야 합니다.

  • Application Name: 구글 플레이스토어, 앱 목록 등에 나타나는 앱 이름을 지정합니다.
  • Project Name: 개발 중에 이클립스에 저장될 프로젝트명을 지정합니다.
  • Package Name: 개개의 어플을 구분하는 고유한 아이디에 해당합니다. 패키지명이 동일한 어플이 여러 개가 있더라도 한 폰에는 하나만 설치할 수 있습니다. 따라서 각 어플은 전 세계에서 중복되지 않는 패키지 이름을 가져야 하고, 관례적으로는 개발자의 웹사이트의 도메인 네임을 뒤집어서 많이 사용합니다.
  • Minimum Required SDK: 이 앱이 호환되는 안드로이드 운영체제 버전의 최솟값을 지정합니다. 현재 기준으로는 Android 2.3.3에 해당하는 API 10 버전을 권장합니다.
  • Target SDK: 이 앱이 사용할 모든 기능을 제공하는 안드로이드 운영체제 버전의 최솟값을 지정합니다. Minimum Required SDK에 비해 너무 높은 값을 지정할 경우 하위 버전 호환을 위한 코드 작성이 길어집니다. 개발의 편의성을 위해서는 Minimum Required SDK와 동일하게 설정하는 것을 권장합니다.
  • Compile With: 기본값대로 최신 컴파일러를 사용하면 됩니다.
  • Theme: 배경색, 글자색, 버튼색 등 어플의 전반적인 색상을 Dark, Light 등에서 선택할 수 있습니다. 안드로이드 설정 화면을 예를 들면 갤럭시 시리즈는 배경색이 검정인 Dark Theme, 옵티머스 시리즈는 배경색이 흰색인 Light Theme를 사용하고 있습니다.

Minimum Required SDK에 API 10을 권장하는 이유를 알기 위해서는 아래 링크를 통해 현재 전세계에서 사용중인 안드로이드 기기의 운영체제 버전에 대한 통계를 확인해야 합니다.

Dashboards | Android Developers

버전 통계

2013년 8월 1일 기준으로 전세계에서 안드로이드 2.3.3 진저브레드 (API 10) 이상의 버전을 사용중인 사람이 96.1%이므로 이를 기준으로 삼는 것이 좋습니다.
안드로이드 2.2 프로요 (API 8) 버전을 기준으로 삼을 경우 추가로 2.6%의 사람들에게 어플을 제공할 수 있지만 진저브레드 버전에서만 제공하는 기능들을 사용하기 까다로워집니다.

새 프로젝트3

다음 단계에서는 앱의 아이콘을 직접 만들지, 액티비티를 자동으로 생성할지, Workspace 폴더 내에 새 프로젝트를 생성할지 여부를 묻습니다.
기본값대로 두고 Next 버튼을 클릭합니다.

새 프로젝트4

앞에서 앱의 아이콘을 직접 만들겠다고 선택했기 때문에 나타나는 화면입니다.
직접 이미지를 선택하거나, 클립아트 중에서 고르거나, 원하는 문자열을 통해서 아이콘을 생성할 수 있습니다.

새 프로젝트5

액티비티를 자동으로 생성하겠다고 선택했기 때문에 나타나는 화면입니다.
Create Activity를 체크된 상태로 두고, 목록 중에서 Blank Activity를 선택합니다.

새 프로젝트6

생성할 액티비티에 관한 정보를 입력합니다.

  • Activity Name: 생성할 Java 클래스의 이름입니다. ?????Activity 와 같은 형태로 지정합니다.
  • Layout Name: 생성할 xml 파일의 이름입니다. layout_?????와 같은 형태로 지정합니다.
  • Navigation Type: 레이아웃 형태를 지정합니다. 일단은 None을 선택합니다.

새 프로젝트 생성됨

여기까지 마친 뒤에는 위와 같은 화면을 볼 수 있습니다.

안드로이드 프로젝트 구조

프로젝트 구조

  • src: .java 파일이 저장됩니다.
  • assets: 앱에 들어갈 .htm, .css, .png, .jpg, .mp4 등의 파일들을 종류 제한, 파일명 제한 없이 자유롭게 넣을 수 있습니다. 하위 폴더를 생성할 수 있습니다. 앱의 패키지 파일(.apk)의 압축을 풀면 그대로 노출됩니다. AssetManager를 통해 접근합니다.
  • res: 앱에 들어갈 이미지, 레이아웃, 메뉴, 문자열 등을 넣을 수 있습니다. 해당되는 폴더에 안에만 파일을 추가할 수 있고, 임의로 하위 폴더를 생성할 수 없습니다. 앱의 패키지 파일의 압축을 풀어도 노출되지 않습니다. R이라는 클래스를 통해 접근합니다.
  • AndroidManifest.xml: 앱에 관한 정보를 기록하는 파일로서, 어플명, SDK 버전, 액티비티 목록, 앱이 사용하는 권한(Permission) 등을 기록합니다. 이 파일에 기록되지 않은 액티비티를 실행하거나, 여기에 기록되지 않은 권한을 사용하려고 하면 앱의 실행이 중단됩니다.

앱 실행

실행1

앱을 처음으로 실행하기 위해서는 툴바에서 Run Project 버튼 옆의 아래 화살표(▼)를 클릭하고 Run Configurations를 클릭합니다.

실행2

좌측 화면에서 Android Application을 선택하고 New launch configuration 아이콘을 클릭합니다.

실행3

Project를 지정하기 위해 Browse 버튼을 클릭합니다.

실행4

Project Selection 창에서 실행하려는 프로젝트를 선택하고 OK 버튼을 클릭합니다.

실행5

Name 칸에 적당한 이름을 적습니다.
대개는 프로젝트명을 복사, 붙여넣기 하는 것을 권장합니다.
다음으로는 Apply 버튼을 클릭하고 Run 버튼을 눌러서 실행합니다.

실행6

앱을 처음 실행할 때에만 앞의 과정이 필요합니다.
다음부터 앱을 실행할 때에는 Run Project 버튼 옆의 아래 화살표(▼)를 클릭하고 해당 프로젝트를 선택하면 됩니다.

실행7

PC와 케이블로 연결되어 있던 스마트폰에서 해당 앱이 실행됩니다.

실행8

앱을 종료해 보면 설치된 앱 목록에 방금 실행한 앱이 있는 것을 확인할 수 있습니다.

레이아웃

레이아웃01

새 프로젝트를 생성했을 때에 기본적으로 적용된 레이아웃은 Relative Layout입니다.
이번 예제에서는 이것을 Linear Layout으로 바꾸어 줍니다.
이클립스의 오른쪽 위에 있는 Outline 창에서 RelativeLayout을 선택하고 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴에서 Change Layout을 클릭합니다.

레이아웃02

Change Layout창에서 New Layout Type으로 LinearLayout(Vertical)을 선택하고 OK 버튼을 클릭합니다.

레이아웃03

다음으로는 Palette에서 버튼을 선택해서 레이아웃 창으로 드래그합니다.

레이아웃04

TextView 아래에 Button이 배치된 것을 볼 수 있습니다.
버튼의 width를 조절하기 위해서 버튼이 선택된 상태에서 오른쪽 아래의 Properties 창의 Width를 선택합니다.
Width 필드가 보이지 않을 경우 Layout Parameters 필드 왼쪽에 있는 [+]버튼을 클릭하면 됩니다.

레이아웃05

기본값으로 지정되어 있던 wrap_content 대신에 match_parent를 선택합니다.

레이아웃06

버튼의 width가 늘어나 화면을 가득 채우는 것을 볼 수 있습니다.
다음으로는 버튼의 텍스트를 수정하기 위해 오른쪽 위의 Outline 창에서 버튼을 선택하고 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴에서 Edit Text를 클릭합니다.

레이아웃07

Resource Chooser 창에서 New String 버튼을 눌러 새로운 String을 생성합니다.

레이아웃08

Create New Android String 창에서 String 칸에 원하는 문자열을 입력합니다.
New R.string. 칸에는 이 문자열을 할당할 java 변수명을 입력합니다.
이렇게 하면 .java 파일에서 R.string.(변수명)으로 해당 String 값을 사용할 수 있게 됩니다.
입력이 완료되면 OK 버튼을 클릭합니다.

레이아웃09

다시 Resource Chooser 창에서 조금 전에 생성한 Android String을 확인할 수 있습니다.
OK 버튼을 클릭합니다.

레이아웃10

버튼의 텍스트가 바뀐 것을 확인할 수 있습니다.

레이아웃11

이번에는 TextView의 weight를 조절해서 버튼의 높이는 최소가 되고, TextView의 높이는 최대가 되도록 조절하겠습니다.
화면에서 TextView를 클릭하여 선택합니다.
오른쪽 아래의 Properties 창에서 Weight 필드를 선택하고 숫자 1을 입력하고 엔터키를 눌러 입력합니다.

레이아웃12

TextView의 높이가 늘어나 최대값이 되고 Button은 최소한의 높이만을 가진 채로 화면 아래에 배치되는 것을 확인할 수 있습니다.

이벤트 처리 #1: id 지정

이벤트를 처리하기 위해서는 id가 필요합니다.
앞에서 생성한 Button과 TextView에 각각 id를 지정하겠습니다.

이벤트01

Outline 창에서 버튼을 선택하고 마우스 오른쪽 버튼을 클릭한 뒤 컨텍스트 메뉴에서 Edit ID를 선택합니다.

이벤트02

Rename Resource 창에서 New Name에 원하는 id를 입력합니다.
이 예제에서는 buttonTest로 지정합니다.

이벤트03

마찬가지로 텍스트뷰를 선택하고 마우스 오른쪽 버튼을 클릭한 뒤 컨텍스트 메뉴에서 Assign ID를 선택합니다.

이벤트04

텍스트뷰의 id를 textViewTest로 지정합니다.
버튼과 텍스트뷰의 id 지정이 끝난 뒤에 Outline을 보면 다음과 같습니다.

이벤트05

이벤트 처리 #2: 멤버변수 선언

이벤트06

화면 왼쪽 위의 Package Explorer 창에서 MainActivity.java를 더블클릭하면 아래와 같은 코드를 볼 수 있습니다.

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

MainActivity 클래스 안에 멤버변수로 textViewTest, buttonTest를 선언합니다.
또한 ButtonTest의 클릭 이벤트를 처리할 OnClickListener를 선언합니다.

public class MainActivity extends Activity {

	TextView textViewTest;
	Button buttonTest;
	OnClickListener cListener;

	@Override
	protected void onCreate(Bundle savedInstanceState) { ... }

	@Override
	public boolean onCreateOptionsMenu(Menu menu) { ... }

}

이 때에 보다 쉽게 입력하기 위해서는 이클립스의 자동완성 기능을 사용하는 것이 편리합니다.
예를 들어 OnClickListener를 전부 입력할 필요 없이 onclickl까지 입력한 상태에서 Ctrl+Space bar를 입력하면 자동완성이 가능한 단어들의 목록을 볼 수 있습니다.

이벤트07

여기에서는 android.view.View에 포함된 OnClickListener를 선택하면 됩니다.

한편 TextView와 Button에 빨간색 밑줄이 그어진 것은 해당 클래스가 import 되어 있지 않기 때문입니다.
이를 해결하기 위해서는 TextView에 마우스 포인터를 가져다 두고 잠시 기다리면 됩니다.

이벤트08

이러한 팝업창에서 import ‘TextView’ (android.widget)을 선택하면 됩니다.

이벤트 처리 #3. 멤버변수 연결

앞에서 선언한 TextView, Button 변수를 실제 텍스트뷰, 버튼과 연결해야 합니다.
onCreate 메서드에서 findViewById() 메서드를 사용하면 됩니다.
주의할 점은 반드시 setContentView() 메서드가 실행된 이후에 findViewById() 메서드를 실행해야 한다는 점입니다.

public class MainActivity extends Activity {

	...

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		textViewTest = (TextView)findViewById(R.id.textViewTest);
		buttonTest = (Button)findViewById(R.id.buttonTest);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) { ... }

}

이벤트 처리 #4. 이벤트 리스너

이벤트 리스너는 어디에서 생성해도 상관 없으나 이번 예제에서는 다른 멤버변수와 마찬가지로 onCreate 메서드 안에서 생성하겠습니다.
OnClickListener는 onClick() 메서드를 구현해야 합니다.
cListener = new OnClickListener까지만 입력한 후에 이클립스의 자동완성 기능(Ctrl+Space bar)을 사용하면 필요한 코드를 작성해 줍니다.
onClick 메서드 안에서는 파라미터인 v를 통해서 어떤 버튼이 클릭된 것인지를 확인하고 그에 맞게 코드를 실행합니다.
마지막으로는 cListener를 button에 OnClickLister로 지정해 줍니다.

public class MainActivity extends Activity {
	
	TextView textViewTest;
	Button buttonTest;
	OnClickListener cListener;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...
		
		cListener = new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				switch (v.getId()) {
				case R.id.buttonTest:
					textViewTest.setText("buttonTest가 클릭됨");
					break;
				default:
					break;
				}				
			}
		};

		buttonTest.setOnClickListener(cListener);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) { ... }

}

앱을 실행해 보면 다음과 같은 화면을 볼 수 있습니다.

이벤트09

버튼을 클릭하면 텍스트뷰에 새로운 문자열이 표시되는 것을 볼 수 있습니다.

이벤트10

이번 강좌에서는 안드로이드 앱 개발의 기초를 다루었습니다.
다음 강좌에서부터 본격적인 하이브리드 앱 개발을 다루겠습니다.

관련 포스트

하이브리드 앱 강좌 #1. 개발환경 준비, 설치

안드로이드 하이브리드 앱을 개발하기 위해 다음과 같은 것들을 준비해야 합니다.

기본적으로 필요한 것

기본적인 HTML 코딩 능력
기본적인 Java 코딩 능력
안드로이드 스마트폰
스마트폰-PC 연결 케이블

개발환경 준비 #0: 필요한 파일들

개발환경 준비 #1 ~ #3이 마치고 난 뒤에는 다음과 같은 파일들이 준비되어 있어야 합니다.
(32bit 윈도우, 삼성 안드로이드 스마트폰을 가지고 있는 경우)

다운로드 완료

그러면 각각의 파일을 준비하는 방법을 알아봅니다.

개발환경 준비 #1: ADT Bundle

예전에는 이클립스를 다운받고 ADT 플러그인을 추가하고 안드로이드 SDK Tool을 설치하고 이클립스에서 설정을 바꾸어 주는 등의 번거로운 과정이 필요했습니다.
이런 과정은 복잡한데다 시간도 오래 걸려서 안드로이드 개발을 처음 시작하는 사람들에게 일종의 장벽 역할을 했습니다.
그러나 이제는 이러한 과정 없이 ADT Bundle을 다운받아서 원하는 폴더에 압축을 풀기만 하면 됩니다.

다운받기 위해서는 아래의 링크를 클릭해서 Android Developers 홈페이지에 접속합니다.

Android Developers

ADT Bundle 다운로드

첫 화면 아래의 Get the SDK 링크를 클릭합니다.

ADT Bundle 다운로드

오른쪽의 Download the SDK 버튼을 클릭합니다.

ADT Bundle 다운로드

약관 내용에 동의한다는 체크를 클릭하고 자신의 운영체제에 따라 32비트 또는 64비트를 선택한 후에 Download the SDK ADT Bundle for Windows 버튼을 클릭합니다.
적절한 경로를 선택하고 다운로드를 시작합니다.

개발환경 준비 #2: JDK

안드로이드로 개발을 하기 위해서는 JDK가 필요합니다.
글을 작성하는 현재의 최신 Java SE Development Kit 버전은 7u25입니다.
아래 링크를 클릭하여 오라클 홈페이지의 JDK 다운로드 페이지에 접속합니다.

Java SE Downloads

JDK 다운로드

화면 중간의 Java DOWNLOAD 링크를 클릭합니다.

JDK 다운로드

다음 화면에서 Accept License Agreement를 체크한 뒤 32비트 윈도우를 사용중이라면 jdk-7u25-windows-i586.exe를, 64비트 윈도우를 사용중이라면 jdk-7u25-windows-x64.exe를 다운받습니다.

개발환경 준비 #3: USB 드라이버

개발된 어플을 안드로이드 스마트폰에서 테스트하기 위해서는 스마트폰 USB 드라이버가 설치되어 있어야 합니다.

삼성 스마트폰의 경우 통합 USB 드라이버를 아래 링크에서 제공합니다.

휴대폰/MP3 Player 지원센터

USB 드라이버 다운로드

위쪽의 통합 USB 드라이버 탭을 선택합니다.

USB 드라이버 다운로드

통합 USB 드라이버 버튼을 클릭하여 다운받습니다.

LG 스마트폰의 경우 USB Driver for Android를 아래 링크에서 제공합니다.

LG Mobile : 다운로드 센터

USB 드라이버 다운로드

목록에서 자신의 스마트폰을 선택합니다.

USB 드라이버 다운로드

그 다음 화면에서 USB Driver for Android 버튼을 클릭해서 다운받습니다.

설치 #1: ADT Bundle

별다른 설치 과정이 필요 없습니다.
다운받은 ADT Bundle 압축파일을 원하는 폴더에 압축을 풀면 설치가 끝납니다.

ADT Bundle 설치

설치 #2: JDK

다운받은 JDK 설치 파일을 실행하여 설치합니다.

JDK 설치

설치 #3: USB 드라이버

핸드폰을 PC와 연결하지 않은 상태에서 다운받은 USB 드라이버 설치 파일을 실행하여 설치합니다.
드라이버 설치가 끝난 뒤 핸드폰을 PC와 연결합니다.
설치 과정이 다시 한 번 자동으로 진행되고 난 뒤에 PC가 핸드폰을 인식합니다.

Eclipse 실행

모든 설치 과정이 끝난 뒤에는 실제 개발을 시작하기 위해 Eclipse를 실행해야 합니다.
앞서 설치 #1에서 설명한 대로 ADT Bundle의 압축을 풀고 나면 다음과 같은 폴더/파일를 확인할 수 있습니다.

ADT Bundle 설치 후

eclipse 폴더 내의 eclipse.exe 파일을 실행합니다.

Eclipse를 처음 실행할 경우 Workspace 경로를 지정하라고 하는 창이 뜹니다.

Workspace 선택

Workspace 폴더에는 앞으로 생성할 안드로이드 앱 프로젝트들이 저장됩니다.
따라서 이미 사용하고 있던 Workspace 폴더를 찾아서 지정하거나, 새로운 폴더를 생성하여 Workspace 폴더로 지정하면 됩니다.
Use this as the default and do not ask again을 체크하면 앞으로는 이 단계 없이 곧바로 Eclipse가 실행됩니다.

Eclipse를 처음 실행할 경우 Android SDK 사용 통계를 구글에 전송할 것인지를 묻습니다.

통계 전송

개인정보는 전송되지 않으며, Android SDK가 개선되는 데에 참여하기를 원하면 Yes를 선택하면 됩니다.
Finish 버튼을 클릭하여 닫고 난 뒤에 다음과 같은 Eclipse 화면을 볼 수 있습니다.

이클립스

그 이후의 과정은 이어지는 다음 글을 통해서 다룹니다.

관련 포스트