[Swift] Xcode에서 동영상 재생과 웹 뷰 구현하기

승민·2024년 12월 1일

swift

iOS

목록 보기

11/12

알아야 할 점

본 문서는 iOS 프로그래밍 강의 내용을 중심으로 작성되었어요.
이전 내용을 모르면 이해가 어려울 수 있어요.
앞으로도 계속 내용을 추가할 예정이에요.

목적

iOS 앱 내에서 표시되는 Tab Bar를 통해 화면 전환 기능을 구현할 거에요.
Xcode를 통해 앱 내에서 동영상을 재생하는 기능을 구현할 예정이에요.
비슷한 방법을 통해 앱 내에서 웹페이지를 표시하는 방법도 구현할 예정이요.

학습 순서

Video Play → Web View → Cocoa Touch Class

1. `Video Play`

이전 시간에 만들었던 탭에서 동영상을 재생할 수 있도록 기능을 구현해볼게요.
다운로드 받은mp4 파일을 활용할 예정이에요.

1 - 1. `Cocoa Touch Class`

먼저 비디오 재생 기능을 구현하기 위해 새로운 파일을 생성해요.

그 다음 iOS 탭에서 Cocoa Touch Class를 선택해요.

Cocoa Touch Class를 선택하는 이유는 하단 3. Cocoa Touch Class에서 설명할게요.

그 다음에 다음과 같이 입력해줘요.

Class : VideoViewController
Subclass of : UIViewController

여기서 Class는 이름을 지정해주는 부분이에요.
Subclass of는 부모 클래스를 지정해주는 거에요.
부모 클래스의 경우 비디오 재생 기능을 구현할 예정이기 때문에 UIViewController 클래스를 상속 받아요.

따로 지정해줄 필요 없이 바로 Create를 눌러서 생성하면 돼요.

1 - 2. 영상 불러오기

이제 준비된 영상을 드래그해서 프로젝트 안에 넣어줘요.

드래그 시 나타나는 화면에서 다음 항목들을 활성화 해줘요.

Destination : Checked
Add to targets : Checked

Destination의 경우 요소를 복제한다는 뜻이고,
Add to targets의 경우 해당 프로젝트에 연결한다는 뜻이에요.
만약 체크하지 않으면 파일이 추가되어도 프로젝트에서 인식하지 못해요.

1 - 3. `View`와 `Controller` 연결하기

영상을 불러온 경우 위와 같이 수정해줘요.

Video Scene 스토리보드와 VideoViewController클래스를 연결하는 과정이에요.

우측 상단의 identity inspector에서 Custom Class 부분을 VideoViewController로 변경하면 Video Scene의 Item이 Video로 변경돼요.

위 그림에서는 이미 Video로 변경되어 있지만, Item으로 있다가 변경 후에 Video로 바뀌는 것이 맞아요.

1 - 4. 버튼 만들기

Video Scene을 선택한 다음 Command + Shift + L 단축키를 통해 Button을 선택해줘요.

Button을 드래그해서 화면에 옮겨주면 버튼 추가는 끝나요.

추가적으로 버튼을 선택해서 디자인을 해줄 수 있어요.

1 - 5. 비디오 재생

화면을 선택한 상태로 Ctrl + Command + Alt + Enter 단축키를 통해 Assistant editor을 열어줘요.
그리고 버튼을 선택한 다음 Ctrl + 드래그로 버튼을 연결해줘요.

드래그 후 나온 화면에서 다음과 같이 설정해줘요.

Connection : Action
Name : playVideo
Type : UIButton

나머지 설정은 그대로 하고 Connect로 연결해줘요.

여기까지 진행하고 정상적으로 동작하는지 한번 실행해서 확인해요.

하단 Tab bar의 표시와 동작이 정상적으로 실행되는 것을 알 수 있어요.
아직 화면 중앙의 Play 버튼은 기능을 구현하지 않았기 때문에 동작하지 않아요.

1 - 6. 코드 작성

이제 버튼 동작 시 비디오가 재생될 수 있도록 버튼 기능을 구현할게요.

import UIKit
import AVKit

class VideoViewController: UIViewController {

    @IBAction func playVideo(_ sender: UIButton) {
        guard let videoPath = Bundle.main.path(forResource: "APT", ofType: "mp4") else { return }
        let videoURL : URL = URL(filePath: videoPath)
        let player : AVPlayer = AVPlayer(url: videoURL)
        
        let playerController : AVPlayerViewController = AVPlayerViewController()
        playerController.player = player
        
        present(playerController, animated: true) {
            player.play()
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

1 - 7. 간략한 코드 설명

비디오 재생 관련 코드는 여러 클래스를 사용하기 때문에 기능에 대한 이해를 돕기 위해 각 요소에 대해 간략하게 설명할게요.

Bundle.main.path(forResource:ofType:)
해당 리소스가 번들 안에 존재하면 그 경로를 반환하고, 없으면 nil을 반환해요.
nil을 반환하기 때문에 guard let 구문을 사용하는 것이 좋아요.
- forResource : 파일 이름 (확장자 제외)
- ofType : 파일 확장자
URL(filePath:)
다양한 유형의 위치를 나타내는 객체
- filePath : 로컬 파일 시스템 경로
AVPlayer
미디어 파일의 URL을 받아서 그 파일을 재생할 수 있게 해요.
AVPlayerViewController
비디오 재생을 위한 UI를 제공하는 클래스로, AVPlayer 객체와 결합하여 비디오 콘텐츠를 표시할 수 있어요.
present
iOS에서 뷰 컨트롤러를 Modal로 표시할 때 사용하는 메서드에요.
실행되는 경우 현재 화면 위에 새로운 뷰 컨트롤러를 표시해서 상호작용 할 수 있게 해줘요.

1 - 8. 실행 확인

정상적으로 잘 실행되는 것을 확인할 수 있어요.

2. `Web View`

새로운 탭을 추가해서 위의 동영상 재생 기능과 비슷한 방법으로 앱 내에서 웹페이지를 표시하는 방법을 구현할거에요.

2 - 1. 새로운 탭 추가

좌측에 Main을 선택한 후에 Command + Shift + L 단축키를 통해 View Controller를 그래그해서 추가해줘요.

기존 Tab Bar Controller에서 새로 만든 View Controller로 Ctrl + 드래그를 통해 연결해줘요.
연결 시에 나타나는 화면에서는 view controllers를 선택해요.

2 - 2. `WebViewController` 만들기

똑같이 진행하면서 이름만 WebViewController로 변경하면 돼요.

Web Scene 스토리보드와 WebViewController클래스를 연결해줘요.
Custom Class는 WebViewController로 지정해줘요.

탭 바 아이콘을 선택한 후에 Title을 Web으로 지정하고 Image를 추가해줘요.

2 - 3. 버튼과 `WebKit View` 추가

Command + Shift + L 단축키를 통해 WebKit View를 추가해줘요.

같은 방식으로 Button도 추가해줘요.

드래그를 통해 위 그림과 같이 디자인을 해줘요.

2 - 4. 기능 연결

Ctrl + Command + Alt + Enter 단축키를 통해 Assistant editor을 열고 버튼을 선택 후 Ctrl + 드래그를 통해서 버튼을 추가해주고 값은 다음과 같이 지정해줘요.

Connection : Action
Name : goNaver
Type : UIButton

나머지 설정은 그대로 하고 Connect로 연결해줘요.

WebKit View도 똑같이 추가해줘요.
그러나 webView는 변수이기 때문에 다음 항목만 수정하고 연결해줘요.

name : webView

정상적으로 웹을 연결했다면 다음과 같은 오류가 나타날거에요.

해당 오류는 관련된 type을 찾을 수 없다는 오류로 WebKit을 Import 해주기만 하면 돼요.

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!
    @IBAction func goNaver(_ sender: UIButton) {
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

2 - 5. `WebViewController` 소스코드 입력

이제 다음과 같이 소스코드를 입력하고 정상적으로 실행되는지 확인해요.

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func goNaver(_ sender: UIButton) {
        // Naver URL 로드
        loadURL("https://m.naver.com")
    }

    // URL을 로드하는 함수
    private func loadURL(_ urlString: String) {
        guard let url = URL(string: urlString) else {
            print("Invalid URL: \(urlString)")
            return
        }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

정상적으로 잘 실행되는 것을 확인할 수 있어요.

2 - 6. `Code Refactoring`

기존에는 Naver 버튼을 눌러야지 네이버가 표시되었지만, 이제는 최초 실행 시에 블로그가 표시되게 만들거에요.
블로그가 표시된 후 Naver 버튼을 누르면 네이버로 이동하게 할게요.

import UIKit
import WebKit

class WebViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 초기 URL 로드
        loadURL("https://velog.io/@gsmin02/iOS10")
    }

    @IBAction func goNaver(_ sender: UIButton) {
        // Naver URL 로드
        loadURL("https://m.naver.com")
    }

    // URL을 로드하는 함수
    private func loadURL(_ urlString: String) {
        guard let url = URL(string: urlString) else {
            print("Invalid URL: \(urlString)")
            return
        }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

이렇게 Xcode를 통해 WebView를 나타내는 기능을 구현했어요.

3. `Cocoa Touch Class`

Xcode에서 새로운 파일을 만들 때, Cocoa Touch Class와 일반 Swift File의 차이점에 대해 알아볼게요.

3 - 1. `Swift File` vs. `Cocoa Touch Class`

먼저, Swift File은 말 그대로 코드만 담고 있는 파일이에요. 복잡한 앱을 만들 때, 주로 데이터 처리나 비즈니스 로직을 이곳에 작성해요. 하지만, 화면에 버튼을 넣고, 동영상을 재생하거나 웹페이지를 표시하기 위해서는 Cocoa Touch Class가 필요해요.

3 - 2. `Cocoa Touch Class`란?

Cocoa Touch는 iPhone, iPad와 같은 iOS 기기에서 앱을 만들 때 사용하는 프레임워크에요.

화면에 표시될 내용(버튼, 이미지, 동영상 등)을 관리하는 역할을 해요. 앱을 만들 때 UI(사용자 인터페이스)를 디자인하고 관리하는 데 필요해요.

Cocoa Touch Class를 사용하면, 이 UI 요소들을 쉽게 제어하고 이벤트를 처리할 수 있어요.

3 - 3. `Cocoa Touch Class`를 사용하는 이유

이 클래스는 화면의 구성 요소들(예: UIButton, UILabel, AVPlayerViewController 등)과 연결되어 쉽게 동작을 실행할 수 있어요.

동영상 재생 :
AVPlayerViewController라는 뷰 컨트롤러를 사용해야 해요. 이 뷰 컨트롤러는 Cocoa Touch Class를 사용해야만 제대로 화면에 표시되고, 동영상이 재생돼요.
웹 페이지 표시 :
WKWebView라는 웹 브라우저 뷰를 사용해야 해요. 이 역시 화면에 표시하려면 Cocoa Touch Class가 필요하죠.

3 - 4. 결론

앱 내에서 동영상을 재생하는 버튼을 만들다면, 버튼을 눌렀을 때 동영상이 재생되어야 해요. 그래서 버튼을 눌렀을 때의 동작이나 화면 전환을 관리하려면, Cocoa Touch Class인 UIViewController를 사용해야 하죠.

이 클래스 안에 버튼을 연결하고, 버튼을 눌렀을 때 동영상이 재생되도록 설정할 수 있어요.

반대로, 일반 Swift File이면 동영상 재생을 화면에 표시하는 기능을 만들 수 없어요. 왜냐하면, 이 파일은 UI와 연결되지 않기 때문이에요.

4. 정리

Tab Bar를 통해 앱에서 동영상 재생 기능을 구현했어요.
비슷한 방식으로 웹 페이지를 나타내는 기능도 구현했어요.
Cocoa Touch Class가 무엇인지, 왜 사용하는지 간단하게 알아봤어요.

출처 : Smile Han - iOS 프로그래밍 기초

승민

이전 포스트

[Swift] Xcode 앱 개발 시 옵셔널 언래핑 방법

다음 포스트

[Swift] Xcode에서 동영상 재생과 웹 뷰 구현하기

iOS

알아야 할 점

목적

학습 순서

1. `Video Play`

1 - 1. `Cocoa Touch Class`

1 - 2. 영상 불러오기

1 - 3. `View`와 `Controller` 연결하기

1 - 4. 버튼 만들기

1 - 5. 비디오 재생

1 - 6. 코드 작성

1 - 7. 간략한 코드 설명

1 - 8. 실행 확인

2. `Web View`

2 - 1. 새로운 탭 추가

2 - 2. `WebViewController` 만들기

2 - 3. 버튼과 `WebKit View` 추가

2 - 4. 기능 연결

2 - 5. `WebViewController` 소스코드 입력

2 - 6. `Code Refactoring`

3. `Cocoa Touch Class`

3 - 1. `Swift File` vs. `Cocoa Touch Class`

3 - 2. `Cocoa Touch Class`란?

3 - 3. `Cocoa Touch Class`를 사용하는 이유

3 - 4. 결론

4. 정리

[Swift] Xcode 앱 개발 시 옵셔널 언래핑 방법

[Swift] Auto Layout 설정과 프로젝트 가져오기

0개의 댓글

[Swift] Xcode에서 동영상 재생과 웹 뷰 구현하기

iOS

알아야 할 점

목적

학습 순서

1. Video Play

1 - 1. Cocoa Touch Class

1 - 2. 영상 불러오기

1 - 3. View와 Controller 연결하기

1 - 4. 버튼 만들기

1 - 5. 비디오 재생

1 - 6. 코드 작성

1 - 7. 간략한 코드 설명

1 - 8. 실행 확인

2. Web View

2 - 1. 새로운 탭 추가

2 - 2. WebViewController 만들기

2 - 3. 버튼과 WebKit View 추가

2 - 4. 기능 연결

2 - 5. WebViewController 소스코드 입력

2 - 6. Code Refactoring

3. Cocoa Touch Class

3 - 1. Swift File vs. Cocoa Touch Class

3 - 2. Cocoa Touch Class란?

3 - 3. Cocoa Touch Class를 사용하는 이유

3 - 4. 결론

4. 정리

[Swift] Xcode 앱 개발 시 옵셔널 언래핑 방법

[Swift] Auto Layout 설정과 프로젝트 가져오기

0개의 댓글

1. `Video Play`

1 - 1. `Cocoa Touch Class`

1 - 3. `View`와 `Controller` 연결하기

2. `Web View`

2 - 2. `WebViewController` 만들기

2 - 3. 버튼과 `WebKit View` 추가

2 - 5. `WebViewController` 소스코드 입력

2 - 6. `Code Refactoring`

3. `Cocoa Touch Class`

3 - 1. `Swift File` vs. `Cocoa Touch Class`

3 - 2. `Cocoa Touch Class`란?

3 - 3. `Cocoa Touch Class`를 사용하는 이유