Android

---

Android 가이드 문서는 아래 조건을 기준으로 작성되었습니다.

• 사용언어 : Kotlin

  • 해당 가이드는 코틀린 언어를 기반으로 작성되었습니다.

• 아키텍쳐 : ViewBinding

  • 해당 가이드는 ViewBinding(뷰결합) 아키텍처로 작성되었습니다.

  • findViewByld 형식의 아키텍처를 사용하시는 경우, 자체적인 샘플 코드의 수정이 필요할 수 있습니다.

// build.gradle (:app)
android {
  // ...
  buildFeatures {
      viewBinding true
  }
  // ...
}

---

1단계: Activity 레이아웃 파일 생성

res/layout 경로에 런처를 실행할 Activity 레이아웃 파일을 생성합니다.

파일명, 컴포넌트명, 속성값은 샘플로 작성된 명칭으로 수정하셔도 무방합니다.

<!-- res/layout/activity_launcher.xml -->

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".LauncherActivity">

    <WebView
        android:id="@+id/webViewLauncher"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

AndroidManifest.xml 파일의 <application></application> 태그 내 런처 WebView Activity를 추가합니다.

• 게임은 세로모드 해상도에 최적화 되어 screenOrientation 값을 portrait 으로 고정해주세요.

<!-- AndroidManifest.xml -->
<application ...>
    <!-- 추가 -->
    <activity
        android:name=".LauncherActivity"
        android:screenOrientation="portrait"
        android:theme="@style/Theme.{projectName}.NoActionBar"
        tools:ignore="LockedOrientationActivity" /> 
</application>

---

2단계: Activity 내 WebView 설정 추가

1. Javascript Interface 선언

런처 ↔ 클라이언트 앱 간의 통신을 위해 우리는 Javascript Interface 선언이 필요합니다.

이와 관련된 내용은 [안드로이드 개발자 사이트]를 참고 할 수 있습니다.

Javascript Interface 추가 코드

• addJavascriptInterface 선언 시 name 값을 BlpLauncher 로 설정해야 합니다.

binding.webViewLauncher.apply {
    // JavascriptInterface 추가
    addJavascriptInterface(
        ExampleWebAppInterface(this@LauncherActivity),
        "BlpLauncher"
    )
}

ExampleWebAppInterface 클래스 내부에 아래 케이스 function들을 선언합니다.

Interface function	Description
closeLauncher()	런처의 Back 버튼 UI 클릭 시 (뒤로가기 처리)
launcherLoaded()	런처의 로드가 완료된 후 추가적인 처리 필요 시 사용
timerMissionComplete()	타이머 미션 완료 후 추가적인 처리 필요 시 사용
giftReceived()	육성완료 후 추가적인 처리 필요 시 사용

// 블리피 Launcher Web <-> App 인터페이스 규격
class ExampleWebAppInterface(private val mContext: Context) {
    @JavascriptInterface
    fun closeLauncher() {
        // 런처 뒤로가기 > 런처 종료
        (mContext as Activity).finish()
    }
    
    @JavascriptInterface
    fun launcherLoaded() {
        // 런처의 로드가 완료된 후 추가적인 처리 필요 시 사용
    }
    
    @JavascriptInterface
    fun timerMissionComplete() {
        // 타이머 미션 완료 후 추가적인 처리 필요 시 사용
    }
    
    @JavascriptInterface
    fun giftReceived() {
        // 육성완료 후 추가적인 처리 필요 시 사용
    }
}

2. WebView 기본 설정 추가

런처가 WebView 내에서 정상적인 동작을 하려면 몇가지 기본 설정이 필요합니다.

• WebView에 로드한 런처 자바스크립트 코드가 정상적으로 허용되도록 javaScriptEnabled 값을 true 로 설정해주세요.

• 런처에서는 Storage 영역을 사용하기에 domStorageEnabled 값을 true 로 설정해주세요.

binding.webViewLauncher.settings.apply {
    javaScriptEnabled = true    // 자바 스크립트 허용
    domStorageEnabled = true    // storage enabled (스토리지 사용하여 dom 가져올 수 있도록 함)
}

3. WebView URL 로드

Activity가 실행되었을 때 onCreate() 안에서 런처 호출 URL 을 WebView에 로드합니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

    binding.webViewLauncher.apply {
        // WebView에 런처 호출 URL을 로드
        loadUrl("런처 호출 URL")
    }

    // ...
}

---

3단계: onDestroy() 설정

Activity가 종료될 때 onDestroy() 라이프 사이클이 수행됩니다. 이 때 WebView 인스턴스를 초기화 하고 Destroy 하여 메모리 누수를 방지합니다.

런처 WebView가 포함된 Activity 뿐만 아니라 이 후 추가적으로 WebView Activity를 생성할 경우 다음과 같이 onDestroy() 처리를 넣어주는 편이 좋습니다.

// WebView 초기화 및 destroy - 메모리 누수 방지
override fun onDestroy() {
    super.onDestroy()
		
    binding.webViewLauncher.apply {
        clearCache(true)
        clearHistory()
        loadUrl("about:blank")
        removeAllViews()
        destroy()
    }
}

개발에 대한 추가 설명이 더 필요하신가요?

"[Client Admin] 로그인 → 오른쪽 하단 채널톡 위젯" 클릭 후 개발 카테고리에 문의 남겨주시면 기술 개발팀에서 확인 후 연락드리겠습니다.

---

4단계: 화면 전환 설정

1. AndroidManifest 설정

Activity별 <intent-filter></intent-filter> 내부 data-element에 scheme 와 host 설정을 추가해주세요.

<!-- AndroidManifest.xml -->
...
<activity
    android:name=".{ActivityName}"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.Example.NoActionBar"
    android:exported="true"
    tools:ignore="LockedOrientationActivity">
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:host="{host}"
            android:scheme="{scheme}" />
    </intent-filter>
</activity>
...

자세한 설명은 [Manifest data-element] 를 참고합니다.

2. queryString을 통한 데이터 얻기

scheme , host 값 외 queryString을 사용하여 Activity에서 원하는 데이터를 사용할 수 있습니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    binding = ActivityWebviewBinding.inflate(layoutInflater)
    setContentView(binding.root)

    // URI query string 데이터 값 추출
    val intent = intent
    if (Intent.ACTION_VIEW == intent.action) {
        val uri: Uri? = intent.data

        // 딥링크 내 queryString형태로 정의한 parameter key로 value를 얻습니다.
        val paramValue: String? = uri?.getQueryParameter("parameter key")
    }

    ...
}

개발에 대한 추가 설명이 더 필요하신가요?

"[Client Admin] 로그인 → 오른쪽 하단 채널톡 위젯" 클릭 후 개발 카테고리에 문의 남겨주시면 기술 개발팀에서 확인 후 연락드리겠습니다.