[swift/iOS] 회원가입 페이지 만들기(1) - 요소와 기능 확인, 프로젝트 만들기, 다크모드 지원 설정, 세로모드 고정, iPad 지원 여부 설정, iOS버전 설정

회원가입 페이지를 만들어볼 예정이다

 

페이지에 들어갈 요소와 기능부터 생각을 해보자

 

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

1. 아이디

2. 비밀번호

3. 이메일

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

5. 휴대폰 번호

6. 휴대폰 번호 인증버튼

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

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

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

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

이메일 인증도 받을 수 있고, 더 단축시킬 수 도 있겠지만 현실적인 수준에서 골라보았다

이제 기능을 조금 더 구체적으로 생각해보자

 

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

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

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

3. 이메일 형식 확인

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

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

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

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

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

 

+ 세로모드 고정

+ 다크모드 지원X

+ iOS 버전 15로 설정

+ iPad 지원 여부 설정

 

어느정도 설정하고 만들 부분을 고려했으니 프로젝트 만들기 시작!

 

프로젝트 만들기

Xcode 실행 후 Create a new Xcode project 선택

 

iOS 플랫폼 - App 으로 기본 선택

 

Product Name : signUpTest 

Organization : com.xxxx
프로덕트 네임과 Organization을 자유롭게 설정한 후 우측 하단 next 클릭

그 다음 화면에서 프로젝트를 저장할 폴더를 자유롭게 설정하자
폴더를 선택하면 프로젝트의 General 설정 화면이 나오게 된다

 

iOS 개발 버전 설정하기, iPad 지원 여부 선택하기

general 설정 페이지 2번째 box에 Deployment Info에서 개발 버전과 iPad, Mac Appstore의 지원 여부를 선택할 수 있다
일단 iPhone에만 체크를 했고(pad 공식 지원하지 않고 iphone 버전을 확대해서 사용할 수 있도록 하는 설정임)

iOS 버전을 15로 설정했

 

참고로 애플 개발자 페이지에서 iOS와 iPadOS 사용 현황에 대해서 확인해볼 수 있다

2022년 7월 12일 기준으로 약 89%의 사용자가 15 버전을 사용하고 있음

https://developer.apple.com/kr/support/app-store/

 

다크모드 지원하지 않기

개발 편의를 위해서 다크모드를 지원하지 않도록 설정하려고 한다

왼쪽 Project Navigator에서 Info.plist 을 클릭한 후 

Information Property List에 마우스를 올리면 나타는 플러스버튼(+)을 클릭

Appearance 키를 입력해주고 Value에 Light를 입력하면 설정이 완료된다

 

참고로 소스코드에는 Appearance가 아니라 UIUserInterFaceStyle로 표시가 됨

<key>UIUserInterfaceStyle</key>
<string>Light</string>

 

세로모드 고정, 가로모드 지원하지 않기

다시 general 설정 페이지로 돌아가자

ipad 지원 여부를 설정했던 Deployment Info 박스에서 Device Orientation을 Portrait만 체크

추가로 설정을 더 해줘야 하는데..

General 탭이 아니라 Build Settings 설정 탭으로 이동해야 한다

 

Info.plist Values 박스에서

Supported Interface Orientations (iPhone) 행의 오른쪽 값을 더블 클릭한 후 UIInterfaceOrientationLandscapeLeft 와 UIInterfaceOrientationLandscapeRight 을 마이너스버튼(-)을 눌러서 삭제하면 설정 끝 

 

 

 

다음 포스팅에서는 view controller에 view 객체들을 채워볼 예정이다