[Project] NETFLIX 디자인의 영화 예매 앱 구현

 

 

오랜만의 컴백 컨텐츠는 바로바로~ 지난 일주일간 진행했던 영화 예약 앱 프로젝트,

N2FLIX에 대한 내용입니다!

왜 N2FLIX냐! 하면... 팀원들의 MBTI에 모두 공통적으로 N이 들어가서 그렇답니다 허허...

어쩌다보니 팀장 역할을 수행하게 되었는데, 프로젝트 KPT(Keep, Problem, Try) 때 같은 멤버로 또다른 프로젝트를 하고 싶을 정도로 분위기도 좋고, 팀원 모두가 본인의 역할을 충실히 수행해주셔서 좋은 결과물을 얻을 수 있었습니다.

 

 

와이어 프레임 및 디자인

---

앱에 필요한 페이지는 다음과 같이 구성했습니다

• 로그인 / 회원가입 페이지
• 영화 목록 페이지 (메인화면)
• 영화 정보 상세 페이지
• 예매 페이지
• 개봉예정작 페이지
• 찜한 영화 페이지
• 마이페이지

Figma를 이용해 디자인 및 시스템 아키텍처를 팀원들과 함께 어떤 사용자 경험을 제공할 수 있는지에 대한 의견을 일치시키고 나서 프로젝트에 돌입하였습니다.

Information Architeture

 

 

로그인 / 회원가입 기능

---

 

제가 맡은 로그인 / 회원가입 페이지는 코드 베이스로 구현 했습니다.

다만, 복잡한 회원가입 과정을 싫어하는 사람(난가...?)을 위해 기존에 등록되어 있지 않은 계정으로 로그인을 시도할 경우 회원가입이 되도록 만들었습니다!

가장 먼저, 사용자의 Email과 PW를 입력받는 TextField와 로그인 버튼('다음')을 스택 뷰 안에 넣고, AutoLayout을 잡아 주었습니다.

 

SignUpView.swift

// MARK: - email 입력 텍스트 뷰
    private lazy var emailTextFieldView: UIView = {
        let view = UIView()
        view.backgroundColor = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        view.layer.borderWidth = 2
        view.layer.borderColor = #colorLiteral(red: 0.2757139802, green: 0.2757139802, blue: 0.2757139802, alpha: 1)
        view.layer.cornerRadius = 5
        view.clipsToBounds = true
        view.addSubview(emailTextField)
        view.addSubview(emailInfoLabel)
        view.addSubview(emailClearButton)
        return view
    }()
    
        private lazy var pwTextFieldView: UIView = {
        let view = UIView()
        view.frame.size.height = 48
        view.backgroundColor = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        view.layer.borderWidth = 2
        view.layer.borderColor = #colorLiteral(red: 0.2757139802, green: 0.2757139802, blue: 0.2757139802, alpha: 1)
        view.layer.cornerRadius = 5
        view.clipsToBounds = true
        view.addSubview(pwTextField)
        view.addSubview(pwInfoLabel)
        view.addSubview(pwClearButton)
        view.addSubview(pwSecureButton)
        return view
    }()
    
        // MARK: - 다음(로그인 진행) 버튼
    lazy var loginButton: UIButton = {
        let button = UIButton(type: .custom)
        button.backgroundColor = .clear
        button.layer.cornerRadius = 5
        button.layer.borderWidth = 1
        button.layer.borderColor = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
        button.setTitle("다음", for: .normal)
        button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
        button.isEnabled = false
        return button
    }()
    
    // stack view
    private lazy var stackView: UIStackView = {
        let stview = UIStackView(arrangedSubviews: [emailTextFieldView, pwTextFieldView, loginButton])
        stview.spacing = 20
        stview.axis = .vertical
        stview.distribution = .fillEqually
        stview.alignment = .fill
        return stview
    }()
    
    // MARK: - AutoLayout
    private func stackViewConstraints() {
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: centerYAnchor),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 30),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -30),
            stackView.heightAnchor.constraint(equalToConstant: textViewHeight*3 + 40)
        ])     
    }

 

 

그리고 Text 입력을 시작할 때와 입력을 끝냈을 때, Textfield에 있는 문구의 폰트 크기와 AutoLayout을 재설정하도록 해 실제 넷플릭스의 로그인 페이지 같은 방식을 구현했습니다.

 

SignUpView.swift

    // MARK: - Extension
extension SignUpView: UITextFieldDelegate {
    
    // textfield 편집 시 문구가 위로 올라가면서 크기를 작게 만들고 오토레이아웃 재설정
    func textFieldDidBeginEditing(_ textField: UITextField) {
        
        if textField == emailTextField {
            emailTextFieldView.backgroundColor = #colorLiteral(red: 0.2972877622, green: 0.2973434925, blue: 0.297280401, alpha: 1)
            emailTextFieldView.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
            emailInfoLabel.font = UIFont.systemFont(ofSize: 11)
            emailInfoLabelCenterYConstraint.constant = -13
        }
        
        if textField == pwTextField {
            pwTextFieldView.backgroundColor = #colorLiteral(red: 0.2972877622, green: 0.2973434925, blue: 0.297280401, alpha: 1)
            pwTextFieldView.layer.borderColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
            pwInfoLabel.font = UIFont.systemFont(ofSize: 11)
            pwInfoLabelCenterYConstraint.constant = -13
        }
        
        UIView.animate(withDuration: 0.3) {
            self.stackView.layoutIfNeeded()
        }
    }
    
    // textfield 편집 종료 시 설정
    func textFieldDidEndEditing(_ textField: UITextField) {
        
        if textField == emailTextField {
            emailTextFieldView.backgroundColor = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
            if emailTextField.text == "" {
                emailTextFieldView.layer.borderColor = #colorLiteral(red: 0.2757139802, green: 0.2757139802, blue: 0.2757139802, alpha: 1)
                emailInfoLabel.font = UIFont.systemFont(ofSize: 16)
                emailInfoLabelCenterYConstraint.constant = 0
            }
        }
        
        if textField == pwTextField {
            pwTextFieldView.backgroundColor = #colorLiteral(red: 0.2, green: 0.2, blue: 0.2, alpha: 1)
            if pwTextField.text == "" {
                pwTextFieldView.layer.borderColor = #colorLiteral(red: 0.2757139802, green: 0.2757139802, blue: 0.2757139802, alpha: 1)
                pwInfoLabel.font = UIFont.systemFont(ofSize: 16)
                pwInfoLabelCenterYConstraint.constant = 0
            }
        }
        
        UIView.animate(withDuration: 0.3) {
            self.stackView.layoutIfNeeded()
        }
    }

 

 

그 외에는, 내용을 일괄 삭제하는 버튼 및 PW Secure 기능 토글 버튼을 추가하고,

SignUpVC.swift에 로그인 로직을 구현하고 나서, 이메일과 비밀번호에 대한 Validation을 적용했습니다.

 

UserDataManger.swift

    // id validation : @ 앞에 알파벳, 숫자, 특수문자가 포함될 수 있고 @ 뒤에는 알파벳, 숫자, 그리고 . 뒤에는 알파벳 2자리 이상
    func isValidEmail(email: String) -> Bool {
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        let emailTest = NSPredicate(format: "SELF MATCHES %@", emailRegEx)
        return emailTest.evaluate(with: email)
    }
    // pw validation : 소문자, 대문자, 숫자 8자리 이상
    func isValidPassword(pwd: String) -> Bool {
        let passwordRegEx = "^[a-zA-Z0-9]{8,}$"
        let passwordTest = NSPredicate(format: "SELF MATCHES %@", passwordRegEx)
        return passwordTest.evaluate(with: pwd)
    }

 

적용 화면

로그인

 

 

 

[나머지 페이지 내용은 추가 업로드 예정입니다.]

---