[swift/iOS] 회원가입 페이지 만들기(2) - View Controller, Object Library, UILabel, UITextField, Filled Button

대략적인 UI를 만들어보자

이전 포스팅에서 적어두었던 요소를 다시 한번 불러오고 확인해보면 아래와 같다

회원가입 페이지에 들어갈 요소

1. 아이디

2. 비밀번호

3. 이메일

4. 친구 초대 추천인 아이디

5. 휴대폰 번호

6. 휴대폰 번호 인증버튼

7. 휴대폰 번호 인증번호 입력창

8. 약관 전체 동의 체크버튼 및 텍스트

9. 약관 필수 동의 체크 버튼 및 텍스트
10. 약관 선택 동의 체크 버튼 및 텍스트

11. 약관 자세히 버튼 눌러서 상세 내용 확인
12. 마지막 회원가입 버튼

회원가입 페이지에 들어갈 기능

1. 아이디 최소 글자수 조건 확인(6글자이상, 영어, 숫자만 사용)

2. 비밀번호 필수 조건 확인(8글자이상, 영어필수, 숫자필수, 특수문자필수 충족)

3. 이메일 형식 확인

4. 형식에 맞지 않는 부분은 타이핑 하면서 실시간으로 textField 아래에서 알려주기

5. 휴대폰 번호 인증버튼을 누르면 인증번호 입력창이 아래 나오고, 타이머 보여주기

6. 전체 동의 체크 버튼을 누르면 필수+선택 체크박스가 다 체크되게

7. 약관의 자세히 버튼을 눌러서 페이지 팝업

8. 회원가입에서 각 조건들 충족여부 확인해서 alert 띄우기

 

 

요소와 기능들을 보고 대략적으로 사용할 객체들은 아래와 같다

유저들에게 값을 입력받을 Text Field

Text Field를 설명하고 여러 정보들을 보여줄 Label

여러 박스로 사용될 View

다양한 버튼들 Button

 

화면 구성하기

Project Navigator에서 main 파일(Main.storyboard)을 선택하면 View Controller가 보인다

 

Label을 추가하기

Xcode 오른쪽의 플러스버튼(+)을 클릭하면 Object Library 창이 뜬다

command + shift + L 단축키를 사용해서도 열 수 있다

command + shift + option + L 단축키를 사용하면 사라지지 않는 Object Library를 열 수 있다

 

Object Library에서 왼쪽에 보이는 Label을 드래그해서 view controller 위에 놓아주면 추가할 수 있다

 

Label의 text를 아이디로 바꾸기

Label을 클릭 후 화면 오른쪽 inpectors 창에서 5번째 Attributes inspector 탭으로 이동한 후 Text Plain 아래 공간에 "아이디"라고 입력하면 text가 바뀐다

인스펙터 창은 command + option + 0 으로 켜고 끌 수 있으며

command + option + 5 을 누르면 attributes inpector 로 한번에 이동한다

attributes inspector 화면

"label"에서 "아이디"로 바뀐 Label

Text Field 추가하기

label을 추가한 것처럼 Object Library를 띄워서 Text Field도 같이 추가해보자

아이디 Label 밑에 Text Field를 위치시킨 후 command + R 을 눌러서 시뮬레이터를 켜보자

아이디와 Text Field가 만들어진 것을 확인할 수 있다

 

같은 방식으로 비밀번호, 이메일, 휴대폰번호, 휴대폰번호 인증번호, 친구 초대 추천인 아이디를 입력할 수 있는 Label과 Text Field를 만들자 text Field 밑에는 형식이 잘못된 경우에 알려줄 수 있는 label도 넣어주자

Object Label을 띄워서 객체들을 계속 드래그 앤 드랍 해도 되고, 객체들을 선택한 후 복사 붙여넣기 해도 된다

text field 를 선택해서 크기도 어느 정도 조정해주면 아래와 같은 화면이 된다

위 이미지에는 없는데 아이디 TextField아래에도 "아이디가 입력되지 않았습니다" label을 넣어주었다

 

Text Field 아래 적혀있는 label들은 사이즈를 13으로 설정했는데 Attributes Inspector 탭의 Font에서 설정할 수 있다

빌드를 했을때 화면이 꾸겨져 나온다면 시뮬레이터 설정을 iPhone11으로 바꿔보자

화면 상단의 시뮬레이터 기기 명을 클릭하면 바꿀 수 있다

 

Button 추가하기

Object Library를 열어서 Button을 휴대폰번호를 입력할 Text Field 옆에 만들어보자

Button의 Attributes Inspector창에서 Title 아래 Text Field 창에 "인증"이라고 입력하면 버튼의 Title(텍스트)가 바뀐다

 

하단에 약관 동의를 위한 버튼들을 넣어주자

iOS에서는 체크박스를 별도로 제공하지 않기 때문에 button을 조금 수정해서 만들어야 한다

[약관 전체 동의하기] 버튼은 Button의 title을 "약관 전체 동의하기"로 변경해주고 색깔 표시를 위해 Foreground를 Black Color로 설정하고 왼쪽 정렬을 위해 control - Alignment를 leading으로 설정했다
checkbox이미지는 별도로 넣어줄 수도 있지만 애플의 SF symbol을 사용하기위해 image에 checkmark.square 를 검색해서 넣어주었다

 

그 아래 필수와 선택 체크 버튼들도 같은 방식으로 색깔 설정, image(checkmark)를 넣어주고 정렬했다

 

인증 버튼의 색상도 검정으로 변경

 

Filled Button 추가하기

 

맨 마지막 가입하기 버튼을 위해 object Library 에서 Filled Button을 추가해준다

그냥 Button을 사용해도 상관 없지만 학습차원에서 다양하게 사용해보려고 한다

 

Attributes inspector에서 title을 "가입하기"로 바꾸어주었고, Background를 Black으로 설정

 

 

마무리

필수, 선택 버튼 오른쪽에 자세히 버튼만 추가로 더 넣어주었고 전체적인 모습은 위와 같다

 

 

 

다음 포스팅에서는 기능을 조금씩 더 살펴보고 UI를 다듬어볼 예정이다