ChatGPT를 하이브리드 앱으로 만들자

스마트 폰으로 ChatGPT를 자주 사용하는데 매번 인터넷에 들어가 ChatGPT에 접속하는 게 귀찮아졌다.

안드로이드 웹뷰를 이용해 간단히 ChatGPT 앱을 만드는 방법을 공유하고자 한다.

1. 프로젝트 생성

원하는 앱 이름을 작성한뒤 Empty Activity로 프로젝트를 생성하자

2. xml 설정

자동으로 생성된 activity_main.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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. MainActivity 작성

package com.example.chatgpt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.KeyEvent
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {

    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webview)

        // javascript를 활성화 시킨다.
        webView.settings.javaScriptEnabled = true

        // 웹뷰 클라이언트 설정
        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                // 웹 페이지 로딩 완료시 호출되는 메서드를 작성할 수 있다.

            }
        }
        /**
         * 구글 계정으로 GPT에 로그인 해야하는 경우 추가하는 코드
         * WebView에서 Google OAuth를 실행하였을 때 발생하는 오류이다.
         * 이 코드는 Chrome 브라우저의 User Agent 문자열을 나타낸다.
         * 이를 사용하여 WebView의 User Agent를 변경하면,
         * 구글 OAuth 절차에서 구글 서버가 WebView를 신뢰할 수 있게 되어
         * 인증 과정이 성공적으로 진행될 수 있다.
         */
        webView.settings.userAgentString = "Chrome/56.0.0.0 Mobile"

        // 웹 페이지 로드
        webView.loadUrl("https://chat.openai.com/")

        /**
         * 뒤로가기 버튼 이벤트 처리
         * 아래의 코드가 없을 경우 뒤로가기를 누를 때 앱에서 나가지는 상황이 발생한다.
         * 아래의 코드에서 webView.setOnKeyListener를 사용하여 WebView에서 키 이벤트를 수신하고
         * 뒤로가기 버튼이 눌렸을 때  WebView가 이전 페이지로 이동할 수 있는지 확인한 후 webView.goBack()을 호출한다.
         */
        webView.setOnKeyListener { _, keyCode, event ->
            if (keyCode == KeyEvent.KEYCODE_BACK && event.action == KeyEvent.ACTION_UP && webView.canGoBack()) {
                webView.goBack()
                return@setOnKeyListener true
            }
            return@setOnKeyListener false
        }
    }
}

4. 권한 추가

AndroidManifest.xml에 아래 권한을 추가한다.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

5. 타이틀 바 삭제

타이틀바를 삭제해서 화면을 더 크게 사용하자.
res/values/themes/themes.xml에서
style 태그를 NoActionBar로 수정한다.

<style name="Theme.ChatGPT" parent="Theme.MaterialComponents.DayNight.NoActionBar">

6. 프로젝트 실행

프로젝트를 실행하고 계정 로그인을 진행하면

아래와 같이 GPT가 잘 나오는 모습을 볼 수 있다.