1. 프로젝트 개요

오토레이아웃과 다양한 UI 컴포넌트를 활용하여 회원가입 절차를 위한 화면과 기능을 구성해봅니다.

또, 내비게이션 인터페이스와 모달을 활용하여 화면전환을 해봅니다.

왜 이 프로젝트를 할까?

많은 애플리케이션에서 활용해 볼 수 있는 회원가입 절차를 구현해 볼 수 있습니다.

물론 모든 애플리케이션에서 활용하기엔 조금 복잡한 절차들이지만 내비게이션 인터페이스와 모달을 이해할 수 있습니다.

여러 화면에서 공유해야 하는 데이터를 어떻게 관리할 수 있을지 고민해 볼 수도 있습니다.

또, 디자인 패턴을 작게나마 실질적으로 구현해 봄으로써 몇몇 디자인 패턴에 대한 이해를 증진할 수 있습니다.

프로젝트 가이드

2. 프로젝트 상세스펙

[화면 1 - 로그인 화면]

• 화면구성
  • 아이디와 패스워드를 입력하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
  • 상단에는 사이트와 관련된 이미지를 보여주며, 그 아래에는 로그인 버튼과 회원가입 버튼이 있습니다.
    
• 기능
  
  • 로그인 버튼은 눌러도 아무 반응이 없으며 회원가입 버튼을 누르면 화면2로 전환됩니다.
    
    

[화면 2 - 회원가입 화면 (기본정보)]

• 화면구성
  • 상단 오른쪽에는 아이디, 패스워드, 패스워드 확인을 하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
  • 상단 왼쪽에 이미지뷰가 있고, 그 아래에는 자기소개를 위한 텍스트뷰가 위치합니다.
  • 텍스트뷰 아래의 왼쪽에는 '취소'버튼이 위치하며, 그 오른쪽에는 '다음'버튼이 위치합니다.
    
    
• 기능
  • 상단 왼쪽의 이미지뷰를 탭하면 UIImagePickerController가 뜨고, 이미지를 간단히 편집해 프로필 사진으로 선택할 수 있습니다.
    • 프로필 이미지뷰는 정사각형이며, 이미지뷰 내부에 보이는 이미지는 이미지 원래의 비율을 유지합니다.
  • 화면 중간의 텍스트 뷰에서 자기소개를 작성할 수 있습니다.
  • 화면 왼쪽 하단의 '취소' 버튼을 누르면 모든 정보가 지워지고 이전 화면1로 되돌아갑니다.
  • 사용자가 모든 정보를 기입한 상태가 아니라면 화면 오른쪽 하단의 '다음' 버튼은 기본적으로 비활성화되어있으며, 프로필 이미지, 아이디, 자기소개가 모두 채워지고, 패스워드가 일치하면 '다음' 버튼이 활성화됩니다.
    
    

[화면 3 - 회원가입 화면 (부가정보)]

• 화면구성
  • 화면 상단에는 전화번호를 입력할 수 있는 텍스트 필드가 있습니다.
  • 텍스트 필드 하단에는 선택한 생년월일을 표시할 수 있는 레이블이 있으며 그 하단에는 날짜를 선택할 수 있는 피커가 있습니다.
  • 피커 하단에는 '이전', '취소', '가입' 버튼이 위치합니다.
    
    
• 기능
  • 사용자가 모든 정보를 기입한 상태가 아니라면 '가입' 버튼은 기본적으로 비활성화되어있습니다. 전화번호와 생년월일이 채워지면 '가입' 버튼이 활성화됩니다. 또, 활성화된 '가입' 버튼을 선택하면 화면1로 되돌아가고, 가입한 아이디가 화면1의 아이디 필드에 입력되어있습니다.
  • '이전' 버튼을 누르면 현재 정보를 저장해두고 화면2로 돌아가며, '취소' 버튼을 누르면 모든 정보가 지워지고 화면1로 돌아갑니다.
  • 전화번호 필드를 누르면 숫자키패드가 올라옵니다.
  • 생년월일 선택은 UIDatePicker를 활용합니다.
    • UIDatePicker의 숫자가 바뀌면 생년월일 레이블에 즉각 반영됩니다.
      

[Singleton 구현]

• 애플리케이션 구현에 필요한 싱글턴 인스턴스를 생성하여 활용합니다.
  • 싱글턴 클래스 이름은 UserInformation으로 합니다.
    

3. 평가기준표

[빌드/실행]

1. 빌드/실행
   • 프로젝트가 오류없이 컴파일 가능하며, 빌드 후 실행 가능합니다.
     
     

[애플리케이션]

1. 오류
   • 애플리케이션이 동작 도중 오류로 종료되지 않습니다.
     
     
2. 아이콘
   • 제공한 에셋을 사용하여 해당 이미지의 아이콘이 홈화면에 표시됩니다.
     
     
3. 오토레이아웃
   • 다양한 기기의 가로/세로 모드에서 모두 콘텐츠를 정상적으로 확인 가능합니다.
     ※ 오토레이아웃을 활용하여 다양한 화면 상황에 대비합니다.
     
     

[Swift 언어]

1. 소스코드
   • Swift API 가이드라인에 따라 코드를 작성합니다.
     • 타입(클래스, 구조체, 열거형 등) 이름, 메서드(함수) 이름, 프로퍼티 이름, 변수 & 상수 이름
     • 중괄호, 소괄호의 열림 닫힘의 줄바꿈을 일관성 있게 작성합니다.
     • 필요없는 코드나 소스파일을 남겨두지 않습니다.
       
       
2.  옵셔널
   • 매개변수 등을 통해 전달된 옵셔널을 강제로 추출하는 것을 지양합니다.
     
   • 'guard', 'if let' 등 옵셔널 바인딩을 통해 옵셔널을 안전하게 사용합니다.
     
     
3. 기능 분리
   • 모든 기능을 한 메서드나 타입에 몰아 작성하지 않습니다.
   • 기능에 따라 적절하게 타입 또는 메서드를 분리하여 작성합니다.
     
     

[Singleton]

1. Singleton
   • 필요한 싱글턴 인스턴스를 생성하여 활용합니다.
   • 싱글턴 클래스의 이름은 UserInformation 으로 합니다.