스위프트로 SwiftUI 방식의 아이폰 앱 개발: 14 비디오 재생 앱 만들기

작성자: 조광형

날짜: 2024년 11월 26일

소개

애플의 SwiftUI는 현대적인 사용자 인터페이스를 간소화하여 개발자가 앱을 신속하게 만들 수 있도록 도와주는 프레임워크입니다. 이 강좌에서는 SwiftUI를 사용하여 iPhone에서 비디오를 재생할 수 있는 앱을 만드는 방법을 배우게 됩니다. 이 앱은 사용자가 비디오를 검색하고 선택할 수 있으며, 원활한 재생 경험을 제공합니다.

필요한 도구와 환경

다음은 이 강좌에 필요한 도구와 환경입니다:

Xcode: 최신 버전의 Xcode를 설치합니다.
Swift: Swift 언어에 대한 기본 지식이 필요합니다.
iOS 기기 또는 시뮬레이터: 앱을 테스트할 수 있는 기기 또는 시뮬레이터가 필요합니다.

1. 프로젝트 설정

최신 버전의 Xcode를 열고 새로운 프로젝트를 만듭니다. 다음 단계를 따르십시오:

Xcode를 열고 “Create a new Xcode project”를 선택합니다.
“App” 템플릿을 선택하고 “Next”를 클릭합니다.
프로젝트 이름을 “VideoPlayerApp”으로 설정하고 다른 옵션을 채웁니다.
Interface에서 “SwiftUI”를 선택하고 “Life Cycle”에서 “SwiftUI App”을 선택합니다.
언어로 “Swift”를 선택하고 “Next”를 클릭합니다.
원하는 위치에 프로젝트를 저장합니다.

2. SwiftUI 기본 구조 이해하기

SwiftUI 앱은 struct를 사용하여 작성됩니다. 기본적으로 앱의 시작 지점은 VideoPlayerApp 구조체입니다. 아래 코드를 확인해보세요:

import SwiftUI

struct VideoPlayerApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

여기서 ContentView는 앱의 첫 번째 뷰입니다. 이 뷰에서 비디오 재생 기능을 구현할 것입니다.

3. 비디오 재생 위한 뷰 만들기

SwiftUI에서 비디오를 재생하기 위해 AVKit 프레임워크를 사용할 것입니다. 아래 코드를 ContentView.swift 파일에 추가합니다:

import SwiftUI
import AVKit

struct ContentView: View {
    @State private var player: AVPlayer?
    
    var body: some View {
        VStack {
            VideoPlayer(player: player)
                .frame(height: 300)
            
            Button("비디오 재생") {
                playVideo()
            }
            .padding()
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        if let url = URL(string: "https://www.example.com/video.mp4") {
            player = AVPlayer(url: url)
        }
    }
    
    func playVideo() {
        player?.play()
    }
}

위 코드에서 사용자는 ‘비디오 재생’ 버튼을 클릭하여 비디오를 재생할 수 있습니다. AVPlayer를 사용하여 비디오를 로드하고 재생합니다.

4. 비디오 URL 동적 처리하기

고정된 URL 대신 사용자가 입력한 URL을 통해 비디오를 재생할 수 있도록 기능을 추가해 보겠습니다. 이를 위해 사용자 입력을 받을 수 있는 간단한 텍스트 필드를 추가합니다:

struct ContentView: View {
    @State private var player: AVPlayer?
    @State private var videoURL: String = ""
    
    var body: some View {
        VStack {
            TextField("비디오 URL 입력", text: $videoURL)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            VideoPlayer(player: player)
                .frame(height: 300)
            
            Button("비디오 재생") {
                playVideo()
            }
            .padding()
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        if let url = URL(string: videoURL) {
            player = AVPlayer(url: url)
        }
    }
    
    func playVideo() {
        player?.play()
    }
}

이제 사용자는 텍스트 필드에 비디오 URL을 입력하고 버튼을 클릭하여 비디오를 재생할 수 있게 됩니다.

5. 비디오 재생 화면 개선하기

UI를 더욱 개선하여 앱의 전반적인 사용자 경험을 향상시킬 수 있습니다. 비디오 재생기가 화면 중앙에 위치하고, 이를 감싸는 레이아웃을 사용합니다:

var body: some View {
    VStack {
        TextField("비디오 URL 입력", text: $videoURL)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        
        VideoPlayer(player: player)
            .frame(height: 300)
            .cornerRadius(10)
            .shadow(radius: 5)
        
        Button("비디오 재생") {
            playVideo()
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
    .padding()
    .onAppear {
        setupPlayer()
    }
}

위의 코드는 비디오 플레이어에 그림자 효과를 추가하고 버튼을 스타일링하여 더 매력적인 UI를 만들어 줍니다.

6. 비디오 목록 추가하기

앱에 여러 비디오를 추가하여 사용자가 목록에서 선택할 수 있도록 만들어 보겠습니다. 비디오 URL을 배열로 정의하겠습니다:

struct ContentView: View {
    @State private var player: AVPlayer?
    @State private var videoURL: String = ""
    
    let videoURLs = [
        "https://www.example.com/video1.mp4",
        "https://www.example.com/video2.mp4",
        "https://www.example.com/video3.mp4"
    ]
    
    var body: some View {
        VStack {
            List(videoURLs, id: \.self) { url in
                Button(action: {
                    playVideo(url: url)
                }) {
                    Text(url)
                }
            }
            .padding()
            
            VideoPlayer(player: player)
                .frame(height: 300)
                .cornerRadius(10)
                .shadow(radius: 5)
        }
        .onAppear {
            setupPlayer()
        }
    }
    
    func setupPlayer() {
        player = AVPlayer(url: URL(string: videoURLs[0])!)
    }
    
    func playVideo(url: String) {
        player = AVPlayer(url: URL(string: url)!)
        player?.play()
    }
}

여기서 사용자는 비디오 목록에서 직접 비디오를 선택하여 재생할 수 있습니다.

7. 앱 개선 및 확장 기능

이제 기본 기능을 갖춘 비디오 재생 앱이 완성되었습니다. 다음은 앱을 개선할 수 있는 몇 가지 아이디어입니다:

비디오 검색 기능: 사용자가 원하는 비디오를 검색할 수 있는 기능을 추가합니다.
즐겨찾기 기능: 사용자가 좋아하는 비디오를 저장할 수 있도록 하고, 나중에 쉽게 접근할 수 있게 합니다.
재생리스트 기능: 유사한 비디오를 모아서 재생할 수 있는 리스트를 만듭니다.

소개