하이브리드 앱 강좌 #4. 전자책형 앱

2013년 vs 2018년

5년 전에 이 블로그에서 하이브리드 앱 강좌를 시작했습니다.
개인적인 사정으로 중단했다가 이번에 기회가 되어 하이브리드 앱 강좌를 다시 시작하게 되었습니다.

5년 사이에 몇 가지 점이 달라졌습니다.
가장 대표적인 것은 안드로이드 버전의 변화입니다.
예전에는 젤리빈이 가장 최신 버전이었으나 지금은 오레오입니다.
또한 안드로이드 앱 개발도구도 달라졌습니다.
예전에는 이클립스가 많이 사용되었으나 지금은 안드로이드 스튜디오가 대세입니다.

이번 강좌부터는 안드로이드 스튜디오를 이용하여 내용을 작성하겠습니다.
JDK 10.0.1, Android Studio 3.1.2 를 기반으로 하였습니다.

시작하기 전에

전자책형 하이브리드 앱의 개념은 앞의 강좌 에서 설명한 것처럼, 앱 설치 파일 내부에 htm 파일을 포함시키는 것입니다.
웹페이지들을 제작하고 이것을 프로젝트의 assets 폴더에 넣은 뒤 .apk 파일에 포함시켜 배포합니다.
따라서 전자책형 앱은 다음과 같은 특징을 가지고 있습니다.

  • 별도의 서버를 운영할 필요가 없습니다.
  • 인터넷 접속을 필요로 하지 않습니다.
  • 페이지 전환 속도가 빠릅니다.
  • 파일 한 개가 변경되어도 매번 이를 플레이스토어에 업로드하여야 합니다.
  • apk 파일의 압축을 해제하면 assets 폴더의 html, javascript 코드가 그대로 노출됩니다.
    따라서 전자책형이라는 이름과 달리 전자책을 이런 식으로 개발해서는 안 됩니다.
  • 플레이스토어에 업로드할 수 있는 apk 파일크기는 100MB 용량 제한이 있습니다.
  • 반응형 웹사이트를 이용할 수 있습니다.

전자책형 앱은 다음과 같은 순서로 제작하겠습니다.

  1. 기본 준비
  2. 웹페이지 준비
  3. 웹페이지를 assets 폴더에 넣기

#1. 기본 준비

안드로이드 스튜디오에서 새로운 프로젝트를 생성합니다.
form factors and minimum SDK 에서는 Phone and Tablet 과 API 15: Android 4.0.3 (ICS) 을 선택합니다.
Add an Activity to Mobile 에서는 Empty Activity 를 선택합니다.
기본으로 들어있는 TextView를 지우고 WebView를 추가합니다.
추가한 WebView의 ID를 webViewMain으로 지정합니다.
다음 코드를 작성하여 초기화합니다.

public class MainActivity extends Activity {

    WebView webViewMain;

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

        webViewMain = (WebView) findViewById(R.id.webViewMain);
        WebSettings webSettings = webViewMain.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setDisplayZoomControls(false);
        webViewMain.setWebViewClient(new WebViewClient() {

        });
        webViewMain.setWebChromeClient(new WebChromeClient() {

        });
    }

    @Override
    public void onBackPressed() {
        if (webViewMain.canGoBack()) {
            webViewMain.goBack();
            return;
        }
        super.onBackPressed();
    }
}

 

#2. 웹페이지 준비

불러올 웹페이지를 제작합니다.
여기서는 빠른 진행을 위해 부트스트랩 홈페이지에 있는 starter template를 이용하도록 하겠습니다.

https://getbootstrap.com/docs/4.0/examples/starter-template/

인터넷 익스플로러를 이용하여 위의 링크에 접속해서 Ctrl+S 버튼을 눌러 index.htm으로 저장합니다.
(크롬에도 같은 기능이 있지만 버그가 있어서 제대로 작동하지 않습니다.)

그러면 index.htm 파일 및 index_files 폴더가 생성되는데 index.htm 파일을 열어 끝부분을 다음과 같이 수정해 줍니다.

<!DOCTYPE HTML>
<!-- saved from url=(0061)https://getbootstrap.com/docs/4.0/examples/starter-template/ -->
<!DOCTYPE html PUBLIC "" ""><HTML lang="en"><HEAD><META content="IE=11.0000" http-equiv="X-UA-Compatible">

...

<!-- Bootstrap core JavaScript
================================================== --> 
<!-- Placed at the end of the document so the pages load faster -->     
<SCRIPT src="index_files/jquery-3.2.1.slim.min.js"></SCRIPT>
<SCRIPT src="index_files/popper.min.js"></SCRIPT>
<SCRIPT src="index_files/bootstrap.min.js"></SCRIPT>
</BODY></HTML>

여기까지 하면 웹페이지 파일 준비가 끝난 것입니다.

#3. 웹페이지를 assets 폴더에 넣기

다음으로는 안드로이드 애셋 폴더를 만들어야 합니다.
안드로이드 스튜디오에서는 애셋 폴더를 기본적으로 생성해 주지 않으므로 직접 추가해야 합니다.
프로젝트 뷰 – app 우클릭 – New – Folder – Assets Folder를 클릭합니다.

기본값인 main을 그대로 두고 finish 버튼을 클릭하면 프로젝트 뷰에 assets 항목이 생긴 것을 확인할 수 있습니다.
윈도우 탐색기에서 앞에서 저장한 index.htm 파일 및 index_files 폴더를 한꺼번에 선택하고 Ctrl+C 를 눌러 클립보드에 복사해 둡니다.
프로젝트 뷰의 assets 항목을 선택하고 Ctrl+V 를 눌러 붙여넣기 합니다.
경로를 확인하는 창이 나오는데 그대로 두고 OK 버튼을 클릭합니다.

여기까지 되었다면 onCreate 메서드의 마지막 부분에 다음 코드를 추가하여 애셋에 저장된 페이지를 웹뷰로 불러옵니다.

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    webViewMain.loadUrl("file:///android_asset/index.htm");
}

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

이상으로 전자책형 하이브리드 앱 개발에 대해 예제를 통해 간단히 다루어 보았습니다.
다음 강좌에서는 하이브리드형 하이브리드 앱 개발 방법을 다루겠습니다.

참고 자료

관련 포스트

하이브리드 앱 강좌 #3. 웹브라우저형 앱

하이브리드 앱의 유형

하이브리드 앱에 대한 개념이 모호한 이유 중 하나는 하이브리드 앱이라 부를 수 있는 앱의 종류가 워낙 다양하기 때문입니다.
웹 앱을 웹뷰를 통해 네이티브 앱 속에 포장한다는 개념은 공통적이지만, 포장할 웹 앱을 가져오는 방법에 따라서 하이브리드 앱을 크게 3가지로 나누어 볼 수 있습니다.
(아래에 쓰인 용어들는 편의상 제가 자의적으로 붙인 이름입니다.)

  1. 웹브라우저형 앱
  2. 전자책형 앱
  3. 하이브리드형 앱

웹브라우저형 앱

웹브라우저형 앱은 웹브라우저처럼 매번 특정 URL에 접속해서 웹 앱(웹페이지)을 불러옵니다.
웹 앱은 자신이 개발한 웹사이트를 참조할 수도 있고, 타 웹사이트를 참조할 수도 있습니다.
네이버 모바일 페이지를 참조하는 네이버 앱이 전자에 해당합니다.

네이버 모바일

DC인사이드를 참조하는 여러 브라우저 앱들은 후자에 해당합니다(예: 하이브리드 DC).

하이브리드 DC

이런 종류의 앱은 오프라인 상태에서는 아무런 기능을 할 수 없습니다.

오프라인

심지어 제대로 코딩되지 않은 경우에는 모바일 앱이 접속하려는 웹 앱의 URL이 그대로 노출되기도 합니다.

URL 노출

애플 앱스토어 검수에서는 웹브라우저형 앱이 단지 모바일 페이지를 불러오는 것에 그칠 경우, 앱으로 만들지 말고 웹사이트의 북마크를 추가하라고 합니다.
따라서 이런 앱은 네이티브 앱에서만 사용 가능한 기능들을(푸쉬 알림, 카메라 등) 추가해야 합니다.

전자책형 앱

전자책형 앱은 앱 설치 파일 내부에 이미 htm 파일들이 포함되어 있습니다.
웹뷰를 통해 로컬 htm 파일을 불러오므로 웹 서버에 접속할 필요가 없습니다.
따라서 서버의 트래픽을 소모하지 않고, 오프라인 상태에서도 작동하고, 각 페이지를 로딩하는 시간이 짧다는 장점이 있습니다.
컨텐츠 제공을 주된 목적으로 하는 몇몇 앱들이 해당됩니다(예: jQuery Reference)

jQuery Reference

단점으로는 하나의 페이지를 업데이트 하더라도 어플을 새로이 마켓에 업로드해야 한다는 점입니다.
안드로이드 앱의 경우에는 수 시간 안에 업데이트되지만, iOS 앱의 경우에는 또 다시 검수 과정을 거쳐야 하므로 하이브리드 앱의 장점 중 하나를 잃게 됩니다.

애플 앱스토어 검수에서는 이런 앱이 단지 정해진 컨텐츠를 불러오는 것에 그칠 경우, 앱으로 만들지 말고 전자책을 만들라고 합니다.
따라서 이런 앱은 사용자와 상호작용하는 기능을 추가해야 합니다.
인터넷을 사용하지 않는 순수한 전자책형 앱은 찾기 어렵고, 대개는 상호작용 기능을 추가하기 위해 웹뷰를 통해 게시판을 보여주는 방식으로 제작됩니다.

하이브리드형 앱

하이브리드형 앱은 웹브라우저형 앱과 전자책형 앱의 장점을 결합하고 단점은 보완한 것입니다.
일부 기능들은 전자책형 앱으로 구현하고 나머지 기능들은 웹브라우저형 앱으로 구현하는 경우가 대표적입니다.
공통 자바스크립트, 이미지 파일 등은 앱 내부에서 불러오고, 나머지 컨텐츠는 웹을 통해서 가져오기도 합니다.
웹 앱에 처음 접속할 때에는 인터넷을 사용하지만, 다음부터는 캐시된 페이지를 보여주기도 합니다.

개요

이번 강좌에서는 하이브리드 앱의 유형 중 가장 단순한 웹브라우저형 앱을 제작하겠습니다.
앱의 이름은 `DC 도우미`이며, 이름대로 타 웹사이트(DC인사이드)를 참조하므로 따로 HTML, javascript 코딩은 하지 않습니다.
안드로이드 웹뷰 활용 강좌로 보아도 됩니다.

준비

앞 강좌에서 다룬 대로 이클립스에서 새 프로젝트를 생성합니다.
LinearLayout, WebView, Button을 배치하고 텍스트를 지정합니다.

레이아웃 배치

버튼 클릭 이벤트를 처리하기 위해 WebView와 Button에 id를 부여합니다.

id지정

기본 작업을 위한 소스는 다음과 같습니다.

public class MainActivity extends Activity {

	WebView webViewMain;
	Button buttonTitle, button1, button2, button3;
	OnClickListener cListener;

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

		webViewMain = (WebView) findViewById(R.id.webViewMain);
		buttonTitle = (Button) findViewById(R.id.buttonTitle);
		button1 = (Button) findViewById(R.id.button1);
		button2 = (Button) findViewById(R.id.button2);
		button3 = (Button) findViewById(R.id.button3);
		cListener = new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				switch (v.getId()) {
				case R.id.buttonTitle:
					buttonTitleClick();
					break;
				case R.id.button1:
					button1Click();
					break;
				case R.id.button2:
					button2Click();
					break;
				case R.id.button3:
					button3Click();
					break;
				default:
					break;
				}
			}
		};
		buttonTitle.setOnClickListener(cListener);
		button1.setOnClickListener(cListener);
		button2.setOnClickListener(cListener);
		button3.setOnClickListener(cListener);
		
	}

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

	void buttonTitleClick() { }

	void button1Click() { }

	void button2Click() { }

	void button3Click() { }
}

인터넷 퍼미션 추가

웹에 접속해야 하므로 `인터넷` 퍼미션을 사용해야 합니다.
이를 추가하기 위해서는 Project Explorer에서 AndroidManifest.xml을 더블클릭합니다.

퍼미션

Manifest 창 아래에서 Permission 탭을 선택합니다.

퍼미션

Add 버튼을 클릭합니다.

퍼미션

이 중에서 Uses Permission을 선택하고 OK를 클릭합니다.

퍼미션

Name 옆의 셀렉트 박스에서 android.permission.INTERNET 을 선택합니다.
Ctrl+S를 눌러 저장하면 반영된 것을 볼 수 있습니다.

이제 이 어플을 설치하려 하면 `네트워크 통신 – 완전한 네트워크 액세스`라는 권한이 필요하다는 메시지를 볼 수 있게 됩니다.
이러한 단계를 거치지 않은 경우, 인터넷이 되는 상황에서도 웹뷰에서는 웹페이지를 표시할 수 없다는 메시지만 나옵니다.

URL 불러오기

지금 상태에서 어플을 실행시킬 경우 웹뷰에서는 빈 화면만 볼 수 있습니다.
어플 실행이 마친 뒤에는 웹뷰에 홈페이지를 불러와야 합니다.
onCreate 메서드에 다음과 같은 코드를 추가하기만 하면 됩니다.

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...
		
		webViewMain.loadUrl("http://http://m.dcinside.com/list.php?id=programming");
	}

WebSettings

첫실행

이제 어플을 실행하여 작동해 보면 몇 가지 이상한 점들이 눈에 뜨입니다.
우선 자바스크립트가 작동하지 않습니다.
또한 페이지 줌인/줌아웃이 작동하지 않습니다.
이러한 문제점들을 해결하기 위해서는 WebSettings를 이용해야 합니다.

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...
		
		WebSettings webSettings = webViewMain.getSettings();
		webSettings.setJavaScriptEnabled(true);
		webSettings.setBuiltInZoomControls(true);
		webViewMain.loadUrl("http://http://m.dcinside.com/list.php?id=programming");
	}

setJavaScriptEnabled 메서드를 통해 javascript 실행을 허용할 수 있습니다.
setBuiltInZoomControls 메서드를 통해 화면 확대/축소를 허용할 수 있습니다.
그 이외에도 확대 축소를 할 때에 웹뷰 오른쪽 아래에 나타나는 돋보기 아이콘을 없애기 위해서는 setDisplayZoomControls(false)를 추가하면 됩니다.

WebViewClient 지정

현재 상태의 또 다른 문제점 중 하나는 링크를 클릭하면 웹뷰 안에서 열리지 않고 `작업을 수행할 때 사용하는 애플리케이션`을 선택하라고 하는 것입니다.

링크클릭

이러한 문제점은 WebView에 WebViewClient가 지정되어 있지 않기 때문입니다.
WebViewClient는 페이지 로딩 시작과 끝, 키입력 등의 여러 이벤트를 처리할 수 있도록 도와줍니다.
따라서 다음과 같은 코드를 추가하여 WebViewClient를 지정하면 WebView가 링크 클릭을 처리할 수 있게 됩니다.

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...
		
		WebSettings webSettings = webViewMain.getSettings();
		webSettings.setJavaScriptEnabled(true);
		webSettings.setBuiltInZoomControls(true);
		
		webViewMain.setWebViewClient(new WebViewClient() {
			
		});
		
		webViewMain.loadUrl("http://m.dcinside.com/list.php?id=programming");
	}

WebChromeClient 지정

또 다른 문제점은 My 갤러리 메뉴를 클릭하면 `로그인 후 이용가능합니다. 로그인하시겠습니까?` 라는 대화상자가 표시되어야 하지만 아무런 반응이 없다는 것입니다.
이러한 문제점은 WebView에 WebChromeClient가 지정되어 있지 않기 때문입니다.
WebChromeClient는 dialog, favicon, title, progress를 다루도록 도와줍니다.
따라서 다음과 같은 코드를 추가하여 WebChromeClient를 지정하면 WebView가 대화상자를 출력할 수 있게 됩니다.

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		...
		
		WebSettings webSettings = webViewMain.getSettings();
		webSettings.setJavaScriptEnabled(true);
		webSettings.setBuiltInZoomControls(true);
		
		webViewMain.setWebViewClient(new WebViewClient() {
			
		});
		
		webViewMain.setWebChromeClient(new WebChromeClient() {
			
		});
		
		webViewMain.loadUrl("http://m.dcinside.com/list.php?id=programming");
	}

Back 버튼 눌러서 뒤로가기

또 다른 문제점은 Back 버튼을 누르면 곧바로 어플이 종료된다는 점입니다.
onBackPressed 메서드를 재정의하여 webViewMain에서 뒤로가기가 가능할 경우 어플을 종료하지 않고 웹페이지 뒤로가기 기능을 실행하도록 하겠습니다.
메서드를 재정의할 때에는 직접 타이핑하는 것이 아니라 적절한 위치에 커서를 위치하고 Alt+Shift+S를 누르면 다음과 같은 컨텍스트 메뉴가 나옵니다.

자동완성 메뉴

여기에서 Override/Implement Methods 메뉴를 선택하면 다음과 같은 창이 나옵니다.

메서드 재정의 또는 구현

목록에서 onBackPressed를 선택하고 OK 버튼을 클릭하면 커서가 있던 위치에 다음과 같은 소스가 자동삽입됩니다.

public class MainActivity extends Activity {
	...

	@Override
	public void onBackPressed() {
		// TODO Auto-generated method stub
		super.onBackPressed();
	}

	...
}

앞에서 말한 기능을 구현하기 위해서는 onBackPressed 메서드 안에 다음과 같이 코드를 수정/추가하면 됩니다.

public class MainActivity extends Activity {
	...

	@Override
	public void onBackPressed() {
		// TODO Auto-generated method stub
		//super.onBackPressed();
		if (webViewMain.canGoBack()) {
			webViewMain.goBack();
		} else {
			finish();
		}
	}

	...
}

액션바 숨기기

또 다른 불편한 점은 불필요한 액션바가 큰 공간을 차지하고 있다는 것입니다.
이것은 어플의 테마를 수정하여 해결할 수 있습니다.
AndroidManifest.xml 파일을 연 뒤, Application 탭을 선택합니다.

테마 설정

Theme 옆의 Browse 버튼을 클릭합니다.

테마 설정

Resource Chooser 창에서 System Resources를 선택하고, 텍스트칸에 theme.light.not 정도를 입력하면 `Theme.Light.NoTitleBar`가 보입니다.
선택하고 OK 버튼을 누른 뒤 Ctrl+S를 눌러 저장하고 실행하면 다음과 같은 결과를 얻을 수 있습니다.

테마 설정

로딩 관련 처리

링크를 클릭하여 웹뷰에서 로딩이 시작되면 상단 버튼의 텍스트를 `로딩 중…`으로 바꾸고, 로딩이 완료되면 해당 웹페이지의 타이틀을 상단 버튼의 텍스트로 지정합니다.
이를 위해서는 앞서 웹뷰에 지정한 WebViewClient의 소스를 수정해야 합니다.
onCreate 메서드에서 다음과 같이 되어 있었던 원래의 소스에서,

		webViewMain.setWebViewClient(new WebViewClient() {

		});

자동완성 기능을 이용하여 onPageStarted, onPageFinished 메서드를 추가해서 다음과 같이 수정합니다.

		webViewMain.setWebViewClient(new WebViewClient() {

			@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				// TODO Auto-generated method stub
				super.onPageStarted(view, url, favicon);
			}
			
			@Override
			public void onPageFinished(WebView view, String url) {
				// TODO Auto-generated method stub
				super.onPageFinished(view, url);
			}
			
		});

onPageStarted 메서드에서는 상단 버튼의 텍스트를 `로딩 중…`으로 변경합니다.

			@Override
			public void onPageStarted(WebView view, String url, Bitmap favicon) {
				// TODO Auto-generated method stub
				super.onPageStarted(view, url, favicon);
				buttonTitle.setText("로딩 중...");
			}

onPageFinished 메서드에서는 상단 버튼의 텍스트를 웹뷰에 로딩된 페이지의 타이틀로 변경합니다.

			@Override
			public void onPageFinished(WebView view, String url) {
				// TODO Auto-generated method stub
				super.onPageFinished(view, url);
				buttonTitle.setText(webViewMain.getTitle());
			}

버튼 클릭 이벤트 처리

글쓰기 버튼은 button2이고, 앞에서 이를 클릭하면 button2Click 메서드가 실행되도록 코딩했습니다.
이 버튼을 클릭하면 글쓰기 링크로 연결되도록 합니다.
방법은 onCreate에서 홈페이지를 불러올 때와 동일합니다.

	void button2Click() {
		webViewMain.loadUrl("http://m.dcinside.com/write.php?id=programming&mode=write");
	}

새로고침 버튼은 button3이고, 앞에서 이를 클릭하면 button3Click 메서드가 실행되도록 코딩했습니다.
이 버튼을 클릭하면 자바스크립트 함수를 호출해야 합니다.
loadUrl 메서드를 사용한다는 점은 동일하지만, 앞에 `javascript:`를 붙여야 한다는 점이 다릅니다.

	void button3Click() {
		webViewMain.loadUrl("javascript:location.reload();");
	}

이를 응용하면 메시지 창을 띄우거나, 특정 element의 스타일을 변경하는 작업이 가능합니다.
예를 들어 button1Click 메서드를 다음과 같이 코딩하고 실행한 뒤 button1을 클릭하면 다음과 같이 특정 div를 감출 수 있습니다.

	void button1Click() {
		webViewMain.loadUrl("javascript:document.getElementsByTagName('div')[2].style.display='none';");
	}

실행 후 버튼을 클릭한 결과는 다음과 같습니다.

javascript 실행

이런 방법은 무궁무진하게 활용될 수 있지만, 이를 자세히 다루는 것은 본 강좌의 범위를 벗어납니다.
보다 자세한 내용을 알기 위해서는 HTML5, CSS, jQuery 등에 관한 좋은 강좌들을 참고하세요.

이런 과정으로 작성된 어플은 다음 링크에서 설치할 수 있습니다(구글 플레이 스토어).

DC 도우미

이상으로 웹브라우저형 하이브리드 앱 개발에 대해 예제를 통해 간단히 다루어 보았습니다.
다음 강좌에서는 전자책형 하이브리드 앱 개발 방법을 다루겠습니다.

관련 포스트

하이브리드 앱 강좌 #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 화면을 볼 수 있습니다.

이클립스

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

관련 포스트

하이브리드 앱 강좌 #0. 서론

안드로이드 앱을 만들려던 어떤 웹개발자의 이야기

PHP를 주로 사용하고 HTML, javascript를 이용하여 웹사이트를 개발해 본 적이 있는 개발자가 있습니다.
스마트폰이 널리 보급되고 모바일 환경이 확대되면서 모바일 앱을 개발할 필요성을 느낍니다.
인터넷으로 “안드로이드 개발 강좌” 등을 검색해보지만 설치 과정부터 복잡함을 느낍니다.
우여곡절 끝에 안드로이드 개발환경 준비를 마치고 첫 어플리케이션을 만들어보지만 실행조차 쉽지 않습니다.
흰 바탕에 검은 글씨로 Hello, World만 덩그러니 출력된 첫 어플리케이션에서 디자인과 기능을 발전시켜 보려 하지만 곳곳에서 에러가 발생합니다.
빌드가 된 이후에 실행해도 “어플리케이션이 응답하지 않습니다”라는 메시지가 나오면 해결방법을 몰라 당황스럽기만 합니다.
에러 수정을 포기하고 어플리케이션을 새로 만드는 과정을 반복하다 보면 짜증이 납니다.
이대로 앱 개발을 포기하기는 싫어 학원이나 책을 알아보다가 지쳐 모바일 앱 개발은 당분간 미루기로 합니다.
어느날 “하이브리드 앱”이라는 개념을 알게 되고 인터넷에서 강좌를 검색해 봅니다.
그러나 제대로 된 자료가 부족하고 심지어 하이브리드 앱의 개념 설명조차 제대로 되어 있지 않습니다.
강좌 대신 학원, 카페 홍보로 끝나는 블로그글만 잔뜩 나옵니다.
그러다가 어디에선가 하이브리드앱의 성능이 떨어진다는 내용을 보고 난 뒤에는 마지막 남은 의욕마저 상실합니다.

하이브리드 앱의 개념

모바일 앱은 개발 방식에 따라 네이티브 앱, 웹 앱, 하이브리드 앱으로 나누어 볼 수 있습니다.

네이티브 앱은 게임과 메신저 앱 등을 비롯한 대부분의 앱에 해당됩니다.
통화, 푸쉬 알림, GPS, 카메라, 진동, 녹음, 저장공간 활용 등 모바일 기기에서 지원하는 기능을 전부 사용할 수 있습니다.
실행 속도도 빠르고 앱스토어, 플레이스토어 등에 업로드해서 배포할 수 있습니다.
인터넷이 사용 가능하지 않은 환경에서도 일부 기능을 작동할 수 있습니다.
개발 기간이 오래 걸리고 개발 비용도 많이 필요합니다.

Instagram
인스타그램: 네이티브 앱

웹 앱은 일반적인 모바일 웹사이트를 의미합니다.
각종 포털 사이트, 커뮤니티 사이트, SNS 사이트 등을 예로 들 수 있습니다.
통화, 푸쉬 알림 등의 기능을 직접 사용할 수 없습니다.
실행 속도는 빠르지만 인터넷 접속 속도에 영향을 받습니다.
앱스토어, 플레이스토어 등에 업로드해서 배포할 수 없고 즐겨찾기(책갈피) 기능으로 홈 화면에 추가해서 접속할 수는 있습니다.
인터넷이 사용 가능하지 않은 환경에서는 사용할 수 없습니다.
네이티브 앱에 비하여 짧은 기간에 개발할 수 있고 개발 비용도 상대적으로 저렴합니다.

네이버
네이버 모바일 홈페이지: 웹 앱

하이브리드 앱은 이러한 네이티브 앱과 웹앱의 중간에 위치합니다.
웹 앱을 웹뷰를 통해 네이티브 앱 속에 포장한 것이라고 보면 됩니다.
대개는 웹브라우저 어플처럼 웹뷰(Webview)가 화면의 대부분을 차지하고 있는 형태입니다.
개발자는 특정한 웹페이지만 보여주는 웹브라우저와, 거기에서 보여줄 웹페이지를 개발하면 됩니다.
네이티브 앱의 카메라, 통화 등 네이티브 앱에서 사용할 수 있는 기능을 사용할 수 있습니다.
실행 속도는 기본적으로 네이티브 앱, 웹앱에 비해서 느리지 않지만, 게임 등에 필요한 고성능의 그래픽을 제공하기는 비효율적입니다.
인터넷이 사용 가능하지 않은환경에서도 일부 기능을 작동할 수 있습니다.
개발 기간과 비용은 네이티브 앱과 웹 앱의 중간 정도입니다.

Financial Times
Financial Times: 하이브리드 앱

위의 내용을 도표로 정리하면 아래와 같습니다.

native-hybrid-web
출처: http://www.scribd.com/doc/50805466/Native-Web-or-Hybrid-Mobile-App-Development

다양한 플랫폼 지원(X축)과 모바일 기기의 기능 활용(Y축) 정도에 따라 도식화하면 아래와 같습니다.

native-v-hybrid
출처: http://www.icenium.com/blog/icenium-team-blog/2012/06/14/what-is-a-hybrid-mobile-app-

하이브리드 앱으로 개발하는 것이 유리한 경우

모든 경우에 하이브리드 앱으로 개발하는 것이 적절한 것은 아닙니다.
다음과 같은 어플은 하이브리드 앱으로 개발하는 것이 좋습니다.

  • Android, iOS, Blackberry, WindowsPhone 등의 여러 모바일 플랫폼에서 작동하는 어플
  • GPS, 카메라, 통화 등의 모바일 기기 기능을 사용하는 어플
  • 인터넷 접속이 안 되는 상황에서도 작동하는 어플
  • 네이티브 앱에서만 얻을 수 있는 고성능의 그래픽이 필요하지 않은 어플

하이브리드 앱 개발 시 주의할 점

하이브리드 앱 개발은 기본 이상의 안드로이드 앱 개발 능력과 기본 이상의 웹페이지 개발 능력이 필요합니다.
즉 Java, CSS, HTML, javascript 등을 어느 정도는 할 줄 알아야 합니다.

하이브리드앱은 단순한 웹브라우저가 아닙니다.
단지 특정 웹사이트를 보여주기 위해서라면 굳이 앱을 개발할 필요가 없고, 개발하더라도 앱스토어의 검수를 통과할 수 없습니다.
웹사이트의 접근성을 높이기 위한 목적이라면 다음과 같이 즐겨찾기를 홈화면에 추가하도록 안내하면 됩니다.

홈에 바로가기 추가

홈에 추가된 바로가기

하이브리드앱을 쉽게 개발하기 위해서는 jQueryMobile이나 SenchaTouch 등의 자바스크립트 프레임웍을 사용하여 웹페이지를 개발하고 이를 PhoneGap, Appcelerator, Appspresso 등으로 포장하는 방법을 택하게 됩니다.
그러나 이러한 방식으로 개발할 경우 성능의 저하가 나타나고, 특히 스크롤을 할 때에 두드러집니다.
따라서 본 강좌에서는 이러한 프레임웍을 사용하지 않고 하이브리드앱을 만드는 방법을 다룹니다.

하이브리드 앱 개발 강좌

강좌는 다음과 같은 순서대로 진행하겠습니다.

#1. 개발환경 준비, 설치

#2. 안드로이드 앱 개발의 기초

#3. 웹브라우저형 앱

#4. 전자책형 앱

#5. 하이브리드형 앱

…(계속)…

참고 자료

관련 포스트