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

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

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

참고 자료

관련 포스트

SNUH 인턴 도우미

소개

서울대학교 병원 인턴의 생활을 돕기 위한 어플을 개발했습니다.
배달 밥집, 술기 요령 등에 관한 정보를 제공합니다.

구글 플레이 스토어에 있는 링크는 아래와 같습니다.

SNUH 인턴 도우미

용량은 382KB이고, 안드로이드 2.3.3(진저브레드) 이상에서 작동합니다.

밥집

배달 밥집을 서울대병원 본원(대학로), 분당서울대병원, 보라매병원, 국립암센터로 나누어 보여줍니다.

밥집

한 병원을 선택하면 그 주변에 있는 배달 밥집 목록을 볼 수 있습니다.
한식, 중식, 일식, 패스트푸드 등으로 분류하여 나열합니다.

대학로

밥집을 선택하면 기본적인 정보와 함께 배달 가능한 메뉴의 목록과 가격을 볼 수 있습니다.
각각의 메뉴를 터치하면 붉은색으로 강조됩니다.
화면 아래에는 해당 밥집의 전화번호 버튼이 있어서 전화를 걸 수 있습니다.

감골집

화면 상단의 술기 버튼을 터치하면 술기 메뉴로 이동합니다.
인턴에게 필요한 각종 술기들을 분류하여 나열합니다.

술기

혈관 및 주사 분류에 해당하는 술기들입니다.
터치하면 상세 보기로 이동합니다(2013년 5월 16일 현재 미완성).

혈관 및 주사

화면 상단의 설정 버튼을 터치하면 환경설정 메뉴로 이동합니다.
어플을 시작할 때에 처음으로 보여줄 화면을 지정할 수 있습니다.
그 이외에는 어플 및 개발자 정보를 볼 수 있습니다.

설정

개발에 관해

이 어플을 개발하려는 계획은 올해 초부터 있었습니다.
그러나 그 동안에는 바빠서 시간을 내기가 어려웠습니다.

본격적으로 개발을 시작한 것은 5월이 되어서입니다.
많은 시간을 투자하지 못하고 틈틈이 잠을 줄여가며 개발한 어플이기 때문에 완성도가 높지는 않습니다.

깔끔한 디자인을 제공하기 위해 하이브리드앱으로 구현했습니다.
하이브리드앱이지만 성능 최적화를 위해 폰갭이나 jQueryMobile 등은 사용하지 않았고 무료 모바일 웹 템플릿과 jQuery를 사용하였습니다.

웹사이트를 PHP+MySQL로 개발한 뒤에, 이를 htm 파일로 생성하여 안드로이드 어플의 assets 폴더에 넣었습니다.
안드로이드 어플에서는 해당 htm 파일을 불러오는 방식으로 작동합니다.

웹어플과 다른 점은 플레이스토어에서 어플을 다운로드하는 과정 이외에는 네트워크를 사용하지 않는다는 점입니다.
따라서 인터넷 접속을 포함하여 아무런 권한을 필요로 하지 않습니다.
또한 인터넷 속도가 느리거나 접속이 불안정한 상황에서도 제대로 작동한다는 장점이 있습니다.

웹뷰에 정의된 addJavascriptInterface 메서드를 사용하여 htm 파일과 어플간의 상호작용도 가능합니다.
개별 밥집의 htm 파일을 웹뷰에 불러온 경우에, 화면 아래에 전화번호 버튼이 생성되는 것이 한 가지 예입니다.

아직은 초기 단계이기 때문에 구현되지 않은 기능이 많고 불안정합니다.
앞으로 지속적으로 피드백을 받아 업데이트할 예정입니다.
현재는 안드로이드 버전으로만 개발된 상태이고, 반응이 좋을 경우 iOS용으로도 개발할 것입니다.

관련 포스트