[230315] 코드로 UI 짜기 'Netfilx Log-in' #1 | TIL

학습 목표

• 스토리보드에서 벗어나 코드만으로 UI 완성하기
• 넷플릭스 로그인 화면 UI 구현하기
• 얼럿 창 하나라도 구현하고 오늘을 마무리하기

기본 설정

인스턴스를 생성하여 배경 색을 변경하려는 의도

다만 여기서 중요한 점은 컬러를 지정했다고 바로 반영되는 것이 아니다.

메모리에 올려놓았을 뿐이고 실제로 보여지지 않는 상태라는 것이다.

그렇다면 실제로 보여지기까지 위해서는 어떤 코드를 추가해야할까.

addSubview를 사용한다.

그리고 하는 김에 viewDidLoad가 더러워지지 말라고 makeUI 함수로 빼서 저장해두었다.

해당 코드를 추가해서 메모리에만 올라간 view를 실제 사용자에게 보여지게 할 수 있다.

스토리보드의 경우에는 addSubview가 자동으로 실행되었을 뿐이다.

그치만 사용자에게 보이긴하는데 위치가 정확히 잡혀있지 않은 상태이다.

이제는 코드로 오토 레이아웃을 잡는 방법에 대해 알아보자.

이메일 입력 텍스트 뷰 설정 & 오토 레이아웃 설정

오토 레이아웃

가장 먼저 기본값을 꺼줘야한다.

까먹고 false로 설정하지 않으면 아래에서 아무리 구속을 잡아도 의미없다.

그리고 equalTo가 있는 옵션을 선택해서 구속을 잡으면 되는데 좌 우 상 하 설정에서는 반드시 '어디에서부터?'를 충족시켜야한다.

하지만 마지막 height의 경우에는 높이가 몇인데? 만 충족하면 된다.

그리고 반드시 마지막에 isActive를 true로 설정해야만 해당 구속이 정상적으로 잡힌다.

오토레이아웃을 포함한 makeUI()가 잘 작동한 모습

번외) 클로저의 실행문

보다보니 지금이야 코드가 몇 줄 안되지만 나중에 생성할 레이블이 많아지면 감당이 안될 것 같다.
현업에 종사하는 지인에게 물어보니 보통 인스턴스 생성할 때 클로저의 실행문 타입으로 선언해서 기본 설정값을 담는다고 한다.

스토리보드 상 @IBOutlet 으로 선언되던 것을 클로저의 실행문 형태로 변경

이렇게 사용하면 장점이 되는 것은 makeUI()가 훨씬 코드가 적어질뿐더러,

해당 클로저 내부에서 설정을 바로 확인할 수 있어 가독성이 좋아진다.

훨씬 짧아진 makeUI()

이렇게 관리하면 훨씬 깔끔해진다.

이메일 안내 문구 설정

private var로 선언한 안내 문구 클로저.

딱히 기본적인 설정이라 설명할 것은 없는 것 같다.

텍스트, 폰트, 컬러 설정을 했을 뿐이다.

스택 뷰 만들기

세 가지를 결합하여 스택 뷰를 생성하였다.

기존 스토리보드 방식과 크게 다르지 않아보인다.

다만 클릭 몇 번이면 완성할 수 있었던 설정들이 직접 입력해서 지정해주어야한다는 점에서 쉽지만 까다로웠다.

비밀번호 재설정 버튼

스택 뷰와는 별도로 지정해주었다.

나보다 실력이 좋은 개발자라면 아마 이쯤와서 private lazy var에 대해서 뭐하나 싶었을 수도 있을 것 같다.

@objc 를 사용하기 위해 private var로 선언하고 이후에 셀렉터를 사용하기 위함이었는데

그렇다. 연동되었는지 보려는 목적도 있었고 이게 쓰고싶었다.

그렇게 되었다.

ViewController.self를 쓰자니 objc 사용이 안되고... 결국 lazy var를 사용하니 저 노란 경고문이 사라지긴 했다는 것.

weak로 변하면서 가능해진 것 같았다.

그런데 말입니다.

문제 발생

그런데 다 좋은데 왜 버튼입력이 들어오면 분명 print("reset!")을 찍어놨는데 프린트될 생각을 안한다.

해결을 위한 노력

우선 Xcode가 시키는대로 ViewController.self를 넣어보았다.

@objc를 빼라는 경고문이 추가로 들려왔고 빼고 그냥 func로 사용해봐도, 권한 없어도 접근이 가능한

static func를 써봐도 비밀번호 재설정 버튼을 누르면 종료되곤했다.

이후로 @objc도 넣어보고 빼보고 self도 함수달아보고 ViewController 넣어보고 무슨 짓을 해도 안되더라.

진짜 내가 스펠링을 틀렸나싶어서 모든 곳에 passwordResetButton 이 이름을 복사 붙여넣기 했다.

갑자기 왜 색이 바뀌지?

원래 passwordResetButton 이 이름이 하얀색으로 표기되어있었다. 같은 작업을 한 곳에서 혼자 하얀색인건 누가 봐도 이상한데도 나는 오타없으니까 하면서 그냥 넘어갔다.

근데 갑자기 복붙을 하니까 기적같이 전부 다 초록색으로 변했다. 링크가 드디어 된거다.

내가 진짜 스펠링을 틀렸나싶어서 cmd + z로 돌아가봤다. 근데 스펠링이 바뀐 것도 없다.

그냥 온 세상이 억까를 했다.

챗 지피티의 도움도 빌려볼까했는데 리셋 버튼이 텍스트필드 뒤로 숨었다는 얘기만 하고있었다.

기본적으로 제공해주는 자동 레이아웃도 끄고 얼마나 꼼꼼하게 설정했는데 그럴리가요

스펠링을 틀린거면 차라리 스스로 머리 한 대 때리고 정신차리고 말텐데 틀린 스펠링없이 괜히 연동이 안되어있던게 세상 너무 억울하다.

분노의 리셋 광클. 일단 잘 된다.

이메일 입력 및 비밀번호 입력 구현

이메일 입력창의 배경이 될 텍스트 뷰이다.

addSubview라는 기능을 처음 사용해보았다.

어떤 것이 먼저 add되었는지에 따라서 TextField가 안눌릴수도 있으니 주의해야한다고 한다.

비밀번호 입력창의 배경이 될 텍스트 뷰이다.

비밀번호도 마찬가지로 addSubview를 사용해서 창을 여러 개 만들었다. 사실 스택 뷰보다 위에 기술했어야 하는 부분인데

아까 재설정 버튼이 안눌리면서 뒤늦게 작성하게 되었다...

아무튼 그래서 이메일과 비밀번호를 입력받을 수 있게 된 모습은

놀랍게도 글자가 겹쳐보이는 매직이다.

비밀번호는 일부러 별별별로 가려지도록 설정해놓았는데 잘 적용되어 기분이 좋다.

글자가 겹친 채로 사라지지 않는 건 사실 잘못된 것은 아니고 의도한 것이다.

플레이스홀더를 입력이 시작될 때 지우는 방법은 써봤지만 넷플릭스와 똑같이 위로 밀려나면서 작게 표기되는 애니매이션을 사용하고싶다.

이건 나중에 시간이 나면 구현해보는 것이 좋겠다.

+ 로그인 버튼도 구현이 안되어있는데 이메일과 비밀번호 칸이 지금처럼 모두 입력이 들어와있는 상태라면

로그인 버튼을 넷플릭스의 상징 빨간색으로 변경해보고싶다.

Alert 얼럿

오늘 너무 해보고싶었던 작업인데 오랫동안 헤매이느라 이제서야 다룰 수 있게 되었다.

얼럿이 뭐냐면 대충 알림창이다.

다른 스타일도 가능하다

 

그런데 내가 원한 스타일은 전자와 같아서 오늘은 앞의 스타일대로 완성해냈다.

 

코드 전체적인 진행은 생각보다 단순하다

필요한건 단 세 가지.

UIAlertController, 선택지만큼의 상수와 그 선택지에 맞는 alert.addAction, present 구현

나는 확인과 취소만 넣을거라 각 두 가지만 들어가있다.

 

오늘은 여기까지 구현 완료!

다음에 이어서 끝까지 완성해보자.