[뭅챠! 개발일지] DAY 1 : 프로젝트 기획, 초기 세팅, 회원가입 화면 만들기

Deah (김준희)·2024년 6월 4일
TMDbiOSopen API개발일지뭅챠영화진흥위원회
0

🎬 뭅챠(MOVCHA) 개발일지

목록 보기
1/7
post-thumbnail

안녕하세요. Deah 입니다.

저는 평소 영화나 드라마 보는 것을 아주 좋아하는데요!
iOS 공부를 시작하면서 Open API를 활용해 미디어 관련 앱을 구현할 수 있는 기회가 생겨서 좋아하는 왓챠 피디아의 화면 구성이나 UI, 대표 색상들을 따라해보며 저만의 미디어 플랫폼 구현 과정을 기록해보려 합니다.

이번 프로젝트에서는 스토리보드 사용 없이 코드로 화면을 만들고, 네트워크 통신을 통해 클라이언트와 서버가 요청-응답을 하는 것, 그리고 서버의 응답 값으로 화면에 데이터를 구성하는 내용들이 주된 학습 포인트가 될 거 같습니다.


✨ 작업일시: 2024-06-04 (Tue)

프로젝트 기획 📋

왓챠 아니고 뭅챠!

시중에는 이미 미디어 관련 앱이나 OTT 플랫폼이 너무 많기 때문에 프로젝트를 시작하려 할 때 다양한 프로젝트 이름을 생각했었습니다. *플릭스, **플레이, ***플러스, *빙, *이브, *튜브, **의 서재 등으로 제가 좋아하는 앱들과 원하는 단어를 붙여 다양하게 발음해봤는데 (ㅋㅋ) 아무래도 짧고 굵게 임팩트를 가져가기에는 3글자 미만이 가장 좋더라구요.

그렇게 MOVIE(무비) + WATCHA(왓챠)를 합친 MOVCHA(뭅챠)가 탄생했습니다. 🎉

대표 색상 가져오기

왓챠에는 왓챠(WATCHA)와 왓챠 피디아(WATCHA PEDIA) 두 종류의 앱이 있습니다.

두 앱 중에서 어떤 분위기를 더 가져가야 할까 생각해보니 왓챠는 아무래도 스트리밍 플랫폼이기 때문에 사용하는 색상들이 어두운 분위기라고 느껴졌습니다.

Open API를 사용하면 영상 스트리밍보다 검색을 통한 결과 노출 등의 정보 전달성 구성이 더 알맞다고 생각했기 때문에 왓챠의 묵직하고 어두운 분위기보다 왓챠 피디아의 밝고 통통한 분위기를 살려서 가는 게 좋겠다고 판단되어 왓챠의 공식 홈페이지에 있는 BI 가이드라인에서 대표 색상과 로고 분위기(?) 정도를 차용했습니다. 😉

왓챠 BI 사용하기
왓챠 브랜드 가이드 라인

대표 기능 생각해보기

  • 일별 박스오피스 조회
  • 인기 영화 리스트
  • 인기 드라마 리스트
  • 영화인 상세 정보 조회

박스 오피스 순위와 영화/드라마의 트렌딩은 미디어 앱이라면 당연하게 제공되어야 하는 콘텐츠이기에 꼭 들어가야 하는 기능입니다. 그리고 개인적으로 주연 배우, 연출 뿐 아니라 세부적으로 영화에 참여한 모든 영화인을 검색할 수 있는 기능이 있으면 좋겠다고 생각했습니다.

이런 생각을 한 이유는 제가 영화를 볼 때 엔딩 크레딧이 끝날 때까지 영화관에 앉아 여운을 즐기는 편이기 때문인데요(?) 올라가는 크레딧을 확인하면서 작은 역할에 함께한 배우부터, 각 파트의 감독, 스탭들의 구성을 꼭 눈여겨 봅니다.

제가 크레딧을 보는 이유는 영화라는 예술에 대한 예의이기도 하지만 혼자만의 놀이 때문이기도 합니다!ㅋㅋ

연출을 맡은 대표 감독님을 제외한 각 분야의 감독님들, 예를 들어 촬영 감독, 음악 감독, 음향 감독, 미술 감독 등 감독님 정보들을 우연히 알게되는 경우를 제외하고는 최대한 정보가 없는 상태로 상영관에 들어가 영화를 보면서 유추해보는 스스로와의 게임인데요.🤓 마지막 크레딧을 보며 제 예상과 작업한 감독님이 일치하는지 확인해보는 재미가 아주 쏠쏠하답니다.

그리고 이런 정보 확인을 좋아하다보니 단순히 영화에 관련된 대표 정보만 노출하는 것보다 검색 기능을 통해 영화인에 대한 상세 정보 조회를 할 수 있는 기능을 추가로 넣고 싶었습니다.

프로젝트에서 사용할 API

영화진흥위원회

  • 일별 박스오피스
  • 영화인 상세 정보

https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do

TMDb

  • Trending
  • Credit
  • Search
  • Genres
  • ...

https://www.themoviedb.org/?language=ko


프로젝트 초기 세팅 🪔

상수화 할 데이터 구조 잡아놓기

// MARK: 문자열 데이터
struct Text {
    // 대표 타이틀
    struct Title {
        static let movcha = "MOVCHA"
        static let home = "홈"
    }
}

// MARK: Image 이미지
// 시스템 이미지
struct SystemImage {
    static let home = UIImage(systemName: "house.fill")
    static let front = UIImage(systemName: "chevron.right")
    static let back = UIImage(systemName: "chevron.backward")
    static let down = UIImage(systemName: "chevron.down")
}

// MARK: Color 컬러
struct Color {
    struct Primary {
        static let black = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0)
        static let white = UIColor.white
        static let pink = UIColor(red: 1, green: 0.0196, blue: 0.3451, alpha: 1.0)
        static let gray2 = UIColor.systemGray2
        static let gray4 = UIColor.systemGray4
        static let gray6 = UIColor.systemGray6
        
    }
}

대략 이런 식으로 문자열, 이미지별, 컬러별로 접근할 수 있도록 구조를 잡았습니다.


코드로 TabBarController 만들기

  • SceneDelegate.swift
    SceneDelegate 안에서 탭 바 컨트롤러를 만들고 네비게이션 컨트롤로 생성한 홈 뷰 컨트롤러를 연결해주어 홈 탭을 만들었습니다.
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
    guard let _ = (scene as? UIWindowScene) else { return }
        
    // MARK: TabBar Controller 탭 바 컨트롤러
    let homeViewController = UINavigationController(rootViewController: HomeViewController())
        
    let controllers = [homeViewController]
        
    let tabBarController = UITabBarController()
    tabBarController.setViewControllers(controllers, animated: true)
        
    if let items = tabBarController.tabBar.items {
        items[0].title = Text.Title.home
        items[0].image = SystemImage.home
    }
        
    tabBarController.view.backgroundColor = .systemBackground
    tabBarController.tabBar.tintColor = Color.Primary.pink
    window?.rootViewController = tabBarController
}

참고자료
https://velog.io/@sun02/iOS-UITabBarController-코드로-작성하기


회원가입 화면 만들기 👤

회원가입 화면 연결하기

let signUpViewController = UINavigationController(rootViewController: SignUpViewController())

    let controllers = [homeViewController, signUpViewController]

    let tabBarController = UITabBarController()
    tabBarController.setViewControllers(controllers, animated: true)

    if let items = tabBarController.tabBar.items {
        items[0].title = Text.TabBar.home
        items[0].image = UIImage(systemName: SystemImage.home)

        items[1].title = Text.TabBar.signUp
        items[1].image = UIImage(systemName: SystemImage.signUp)
    }
}

SceneDelegate에서 SignUpViewController를 만들고 탭 바에 연결!

UI 구성하기

let titleLabel = UILabel()

let emailField = UITextField()
let passwordField = UITextField()
let nicknameField = UITextField()
let locationField = UITextField()
let recommendField = UITextField()

let signUpButton = UIButton()

let addInfoLabel = UILabel()
let addInfoSwitch = UISwitch()
titleImg.snp.makeConstraints { make in
	make.top.equalTo(view.safeAreaLayoutGuide).offset(32)
	make.centerX.equalTo(view)
}
        
emailField.snp.makeConstraints { make in
  make.top.equalTo(titleImg.snp.bottom)
  make.centerX.equalTo(view)
  make.size.equalTo(CGSize(width: 300, height: 40))
}
.
.
.

필요한 뷰 객체들을 불러와주고 SnapKit을 통해 레이아웃을 잡아주었습니다.

결과물

(사실 처음 UI는 이게 아니었는데 수정 전 화면을 캡쳐해둔 것이 없어서 수정된 버전으로 대체합니다 ㅎ_ㅎ)

profile
Deah (김준희)
기록 중독 개발자의 기록하는 습관

0개의 댓글