Kotlin으로 안드로이드 앱에서 유튜브 영상 재생하기 — 단계별 완전 가이드

Kotlin으로 안드로이드 앱에서 유튜브 동영상 재생하기

이 튜토리얼에서는 Kotlin을 사용해 안드로이드 애플리케이션 안에서 유튜브(YouTube) 동영상을 재생하는 방법을 단계별로 살펴봅니다. RecyclerView와 WebView를 조합하면 여러 개의 유튜브 영상을 목록 형태로 스크롤하며 감상할 수 있는 화면을 비교적 쉽게 구현할 수 있습니다.

전체 과정은 총 7단계로 진행되며, 각 단계의 코드를 그대로 따라 하면 완성된 예제를 만들 수 있습니다.

1단계 — 새 프로젝트 생성

Android Studio에서 File → New Project 메뉴로 이동한 후, 필요한 모든 정보를 입력하여 새 프로젝트를 생성합니다.

2단계 — 메인 레이아웃 작성

res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="2dp"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

3단계 — MainActivity 구현

src/MainActivity.kt에 다음 코드를 추가합니다. 유튜브 iframe 임베드 코드를 문자열로 만들어 리스트에 담은 뒤, 이를 어댑터에 전달하는 구조입니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.util.*
class MainActivity : AppCompatActivity() {
    private lateinit var recyclerView:RecyclerView
    private var youtubeVideos = Vector<youTubeVideos>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.setHasFixedSize(true)
        recyclerView.layoutManager = LinearLayoutManager(this)
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
      ".youtube.com/embed/X7SiuQxhAjg\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
      ".youtube.com/embed/KyJ71G2UxTQ\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
      ".youtube.com/embed/y8Rr39jKFKU\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
     ".youtube.com/embed/8Hg1tqIwIfI\" frameborder=\"0\" allowfullscreen></iframe>"))
        youtubeVideos.add(youTubeVideos("<iframe width=\"100%\" height=\"100%\" src=\"https://www" +
      ".youtube.com/embed/uhQ7mh_o_cM\" frameborder=\"0\" allowfullscreen></iframe>"))
        val videoAdapter = VideoAdapter(youtubeVideos)
        recyclerView.adapter = videoAdapter
    }
}

4단계 — VideoAdapter 클래스 작성

영상 목록을 각 항목의 WebView에 바인딩할 어댑터 클래스를 생성하고 아래 코드를 작성합니다. WebView에서 자바스크립트를 활성화하고 WebChromeClient를 지정해 주는 것이 핵심입니다.

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebChromeClient
import android.webkit.WebView
import androidx.recyclerview.widget.RecyclerView
class VideoAdapter internal constructor(private val youtubeVideoList: List<youTubeVideos>) :
RecyclerView.Adapter<VideoAdapter.VideoViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): VideoViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.video_view, parent, false)
        return VideoViewHolder(view)
    }
    override fun onBindViewHolder(holder: VideoViewHolder, position: Int) {
        holder.videoWeb.loadData(youtubeVideoList[position].videoUrl!!, "text/html", "utf-8")
    }
    inner class VideoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var videoWeb: WebView = itemView.findViewById(R.id.webView)
        init {
            videoWeb.settings.javaScriptEnabled = true
            videoWeb.webChromeClient = object : WebChromeClient() {
            }
        }
    }
    override fun getItemCount(): Int {
        return youtubeVideoList.size
    }
}

5단계 — youTubeVideos 데이터 클래스 작성

영상 URL을 보관할 간단한 데이터 클래스를 생성합니다.

class youTubeVideos(var videoUrl: String?) {
}

6단계 — video_view.xml 레이아웃 작성

RecyclerView의 각 항목으로 사용할 레이아웃 리소스 파일(video_view.xml)을 만들고 아래 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="180dp">
</WebView>

7단계 — AndroidManifest.xml 설정

유튜브 영상을 불러오려면 네트워크 통신이 필요하므로 인터넷 권한을 반드시 선언해야 합니다. androidManifest.xml에 아래 코드를 반영합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.q11">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 버튼을 클릭하세요. 실행 대상으로 본인의 모바일 기기를 선택하면, 기기 화면에 유튜브 영상 목록이 표시되고 각 항목을 탭하여 영상을 바로 재생할 수 있습니다.

마무리 및 참고 사항

이 예제는 WebView의 iframe 임베드 방식을 사용하기 때문에 별도의 유튜브 API 키 없이도 동영상을 재생할 수 있다는 장점이 있습니다. 다만 상용 서비스를 개발할 때는 YouTube Android Player API나 YouTube Data API v3를 함께 검토하는 것이 좋으며, WebView 방식은 자동재생 정책이나 기기 성능에 따라 일부 제약이 있을 수 있다는 점을 참고하시기 바랍니다.