[iOS] FLO 앱 개발 일지 #1. MVVM 패턴과 Data Binding

프로그래머스 과제관에 FLO 뮤직 플레이어 iOS 앱 연습 과제가 있어서, 이를 개발하면서 적용한 것이나 발생했던 이슈들에 대해서 정리해보도록 할게요! 해당 앱을 개발하기로 한 이유는 다음과 같습니다.

1. 정해진 앱의 개발 환경, 화면 구성 요소, 기능 요구사항에 맞춰 개발하기 위해서
2. 비교적 작은 규모의 앱에서 MVVM 패턴을 적용해보기 위해서
3. 부스트코스 1강에서 학습한 음악 플레이어의 연장선으로 학습하기 위해서

 

🎵 Demo 영상 (iPhone 11, iOS14.5)

Demo images

---

 

✔︎ FLO 앱의 음악 재생 화면에서 MVVM 패턴 적용하기

💡 MVVM 패턴의 기본 룰
1. View (View Controller)는 View Model 을 가지고, View Model 은 Model 을 가진다.
2. View Model 은 입출력을 처리하고 UI 가 요구하는 로직을 처리하는 역할만 가진다.
3. View Model 은 UI를 수정할 수 없으며, UIKit 등의 라이브러리에 독립적이다.
* View 와 View Model 사이에 데이터 변경을 알려줄 수 있는 방법이 Data binding 이다.
* Data binding 은 MVVM 패턴 뿐 아니라, 다른 패턴에서도 적용될 수 있다.

 

• MVVM 패턴은 기존 MVC 패턴에서 거대해진 ViewController 의 역할을 덜어줄 수 있는 패턴이다.
• 음악 재생 화면인 Player View 는 Player View Model 을 갖고, Player View Model 은 Music model 을 가진다.
• Player View 에서 초기 UI 와 Player 를 설정하기 위해 Player View Model 에 데이터 바인딩을 적용한다.
• 이 때, listener 와 bind 함수를 갖는 Observable 클래스를 구현해 데이터 바인딩을 적용했다.
• Player View 에서 음악 재생 시간이 변경될 때마다 UI 를 업데이트하기 위해 Music Player 에 데이터 바인딩을 적용한다.
• 이 때, AVPlayer.addPeriodicTimeObserver(forInterval: queue: using:) 메소드를 이용해 데이터 바인딩을 적용했다.

 

MVVM 패턴으로 구분한 앱의 구성

 

💡 Observable 클래스를 이용한 데이터 바인딩(Data Binding)

• 데이터 바인딩은 앱의 UI와 UI가 표시하는 데이터 사이를 연결해 데이터의 변경을 알려줄 수 있는 방법이다.
• 데이터 바인딩을 적용하기 위해 listener 와 bind 함수를 갖는 Observable 이라는 클래스를 구현했다.
• 데이터 바인딩을 적용하고 싶은 프로퍼티를 Observable 인스턴스로 만들고, bind 함수를 통해 listener 를 전달하면 된다.
• 이후 Observable 인스턴스의 value 프로퍼티가 변경될 때 마다 listener 가 호출된다.
• 여기서 listener 는 value 가 변경될 때마다 호출되는 클로져이다.

class Observable<T> {
    
    typealias Listener = (T) -> Void
    var listener: Listener?
    
    func bind(_ listener: Listener?) {
        self.listener = listener
        listener?(value)
    }
    
    var value: T {
        didSet {
            listener?(value)
        }
    }
    
    init(_ value: T) {
        self.value = value
    }
}

 

✔︎ 음악 재생 화면의 View - View Model 간 Data binding 적용하기

• 음악 재생 화면의 뷰인 Player View Controller 와 Player View Model 의 music 프로퍼티에 데이터 바인딩을 적용했다.
• viewModel 의 music 프로퍼티를 Observable 클래스의 인스턴스로 생성한다.
• viewController 에서 bind 함수를 통해 listener 를 전달한다. -- 초기 UI 설정, AVPlayer 설정 작업을 하는 클로져
• viewModel.fetchMusic() 함수를 통해 네트워킹 작업 완료 후 model.value 를 변경한다. -- APIManager 클래스를 이용함.
• model.value 값이 변경되게 되면 위의 listener 함수가 호출되고, 지정한 작업들이 수행되게 된다.

1) View Model 에서 Observable 인스턴스 생성하고, value 가 변경되는 과정

class PlayerViewModel {
    
    // MARK: - Singleton
    static let shared = PlayerViewModel()

    // MARK: - Properties
    var apiManager: APIManger
    var music: Observable<Music>
    var imageData: Data
    
    // Other properties and methods ...
    
    // MARK: - Methods
    func fetchMusic() {
        apiManager.getMusic { (music) in
            print("fetch music ::", music.title)
            self.apiManager.loadImageData(url: music.image) { (image) in
                self.imageData = image
                self.music.value = music
                self.getLyrics()
            }
        }
    }
}

2) View Controller 에서 bind 를 수행하며 listener 전달하는 과정

class PlayerViewController: UIViewController {
    
    // MARK: - Properties
    var player = MusicPlayer.shared
    var viewModel = PlayerViewModel.shared
    var timeObserver: Any?
    
    // Other properties and methods ...
    
    // MARK: - View Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        addGestureLyricsLabel()
        bindViewModel()
    }
    
    // MARK: - Custom method
    func bindViewModel() {
        viewModel.music.bind({ (music) in
            DispatchQueue.main.async {
                self.initializeUI()
                self.initializePlayer()
            }
        })
        viewModel.fetchMusic()
    }
}

 

✔︎ 음악 재생 화면의 View Controller 와 Music Player 간 데이터 바인딩 적용하기

• 음악이 재생됨에 따라 현재 재생 시간, slider 의 값 변경, 가사 변경 등의 UI 업데이트가 필요하다.
• Player View 에서 음악 재생 시간이 변경될 때마다 UI 를 업데이트하기 위해 Music Player 에 데이터 바인딩을 적용한다.
• 이 때, AVPlayer.addPeriodicTimeObserver(forInterval: queue: using:) 메소드를 이용해 데이터 바인딩을 적용했다.

1) Music Player 클래스에서 Observer 를 등록하고 해제할수 있는 함수를 추가한다.

class MusicPlayer {

    // MARK: - Singleton
    static let shared = MusicPlayer()
    
    // MARK: - Properties
    var player = AVPlayer()
    var isPlaying: Bool = false
    
    // Other properties and methods ...

    func addPeriodicTimeObserver(forInterval: CMTime, queue: DispatchQueue?, using: @escaping(CMTime) -> Void) -> Any {
        player.addPeriodicTimeObserver(forInterval: forInterval, queue: queue, using: using)
    }
    
    func removeTimeObserver(token: Any) {
        player.removeTimeObserver(token)
    }
}

2) Player View Controller 에서 위의 함수를 호출해, 시간이 변할때마다 수행할 클로져를 전달한다.
-- 시간이 1초씩 변할 때마다 현재 시간, slider 값 변경, 가사 변경 등 UI 업데이트가 수행된다.

class PlayerViewController: UIViewController {
    
    // MARK: - Properties
    var player = MusicPlayer.shared
    var viewModel = PlayerViewModel.shared
    var timeObserver: Any?

    // Other properties and methods ...
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        playPauseButton.isSelected = player.isPlaying
        addObserverToPlayer()
    }

    func addObserverToPlayer() {
        timeObserver = player.addPeriodicTimeObserver(forInterval: CMTime(seconds: 1, preferredTimescale: 1), queue: DispatchQueue.main) { time in
            self.updateTime(time: time)
        }
    }
}

---

 

songda515/FLO

참고 링크 / 학습 자료

• MVVM 패턴과 Observable 클래스 구현에 대한 Medium 글 / --> 이를 번역한 포스팅
• FLO 앱 과제를 진행한 다른 분의 개발일지
• 부스트코스 1장 음악 플레이어 만들기
• 패스트캠퍼스 애플뮤직 st 앱 만들기

다음 개발 일지

• [iOS] FLO 앱 개발 일지 #2. TableView 로 가사 화면 개발하기