하이브리드 앱 강좌 #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");
}

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

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

참고 자료

관련 포스트