FiveMovies Project (1)

우리 팀장님께서 FIGMA를 정말 잘 다루시고 덕분에 와이어 프레임 작업을 쉽게 구성했고 전체적인 UI 구성은 어느정도 끝마치기 수월했었다. FIGMA는 각각의 Label들의 속성값, 컬러, 다양한 구성요소들을 각 언어에 맞는 코드들로 보여주는 개발자 모드가 있었고 그로 인해 기술적 부분을 해결하는데 집중할 수 있었다.

나의 담당 업무는 영화 리스트를 뽑아오는 뷰를 구성하는 것과 영화 검색기능의 뷰를 구성하는 것이다. 큰 틀로 봤을 때, 데이터 구현을 맡은 팀원의 데이터를 받아와 collectionview cell에 데이터 받는 메서드를 구현하여 UI로 보여주기만 하면 되는 간단한 작업일 줄 알았다. 문제는 끊임없이 존재했다.

1. 상단 탭 메뉴의 구성

탭 메뉴를 구성하는 View Componant는 정말 여러가지 방법이 있다.
1. 가장 쉽다고 생각한 경우는 UITabBarController를 이용하는 것이다. 이 UI 컴포넌트로 구성할경우 자동으로 각 탭 마다의 viewcontroller을 자동으로 매칭시켜준다. 사실상, 코드로 구현해야할 일이 많이 사라지고 스토리보드만으로 직관적으로 구현이 가능하다. 그러나, 상단 탭에서의 위치가 불가능하기 때문에 기각했다.
2. UIPageViewController와 상단 탭을 UICollectionView를 .horizon으로 수직화 시켜서 구현하는 것이다. 이 방법은 정말 난이도가 높았다. 다만, 디자인 상의 만족도는 가장 좋았다. UIPageViewController은 옆으로 스크롤을 하면 view가 바뀔 수 있는 기능을 구현할 수 있다. 다만, 상단의 탭바 부분을 collectionview로 구성해야할 때 코드가 너무 많이 필요하고, 외부 라이브러리까지 이용해야 수월하게 구현되기 때문에 기각시켰다.
3. UI Segmented Control - 사실 상 내가 구현한 방법이다. UI를 상단, 중앙, 하단 등등 원하는 공간에 자유롭게 붙여넣는게 가능했고 각 세그먼트들을 클릭하면 각각에 view를 나오게 할 수 있었다. 우리가 구현할 세그먼트는 총 3개로 구성되어 있고 각자의 세그먼트는 UICollectionView로 리로드시켜 구현해주면 되었다.

2. UISegmentedControl 과 UICollectionView를 연결시키는 방법

세그먼트를 IBAction으로 등록하고 selectedSegmentIndex 메서드를 사용하여 각 세그먼트들이 사용할 때마다 액션이 취해지도록 틀을 잡았다. 그리고 각각의 세그먼트들을 switch문으로 묶고 default값을 처음 VC화면이 나올 때 나올 view로 구성을 했다. 그리고 각각의 세그먼트들을 누를때마다 호출이 제대로 되는지 확인하기 위해 프린트문을 입력하여 콘솔값에서 확인해주었다. 다행히 잘 돌아갔다.

3. UICollectionViewCell 설정

하나의 cell을 IBOutlet을 통해 UIImageView로 포스터 이미지, UILabel로 영화 제목을 구현하려고했다. 이제 구현된 데이터 모델로 api 통신을 하여 외부 주소에서 각종 데이터들을 받아와서 각각의 cell에 표시가 되면 끝이난다. posterPath로 외부 API에서 이미지를 받아오는 메서드도 구성을 해놨다. 다만, 빌드를 해도 각 셀들이 나타나지 않았다. 어디가 문제인지는 정확히 모르겠으나, CollectionView에서 cell을 불러오는 함수는 print를 통해 확인 결과 문제가 없었다. 이게 내일의 과제가 되지 않을까 싶다...

import UIKit

class MovieCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var movieName: UILabel!
    @IBOutlet weak var movieImage: UIImageView!
    
    var movie: MovieData.Movie?
    
    func setCell(_ _movie: MovieData.Movie) {
        movie = _movie
        
        self.movieName.text = _movie.title
        self.movieName.sizeToFit()
        
        if let posterPath = movie?.posterPath {
            loadImage(from: "https://image.tmdb.org/t/p/w500" + posterPath)
        }
    }
    
    private func loadImage(from urlString: String) {
        guard let url = URL(string: urlString) else {
            return
        }
        
        let task = URLSession.shared.dataTask(with: url) { [weak self] (data, response, error) in
            guard let data = data, error == nil else {
                return
            }
            
            DispatchQueue.main.async {
                self?.movieImage.image = UIImage(data: data)
            }
        }
        
        task.resume()
    }
    
}

API 너무 까다롭다. 내일 다시 복습하고 다시 적용해봐야할 것 같다