Overview

프로젝트 인원 및 개발 파트

  • 2명
  • 프로젝트 리더로 제가 전체 구조부터 시작해 프로젝트에 필요한 모든 커스텀 뷰나 프로토콜을 개발했으며, 다른 1명은 마이페이지를 개발했습니다.

개발 기간

  • 2019.06 ~ 2019.09

배운 점

  • FCM을 기반으로한 Push Notifications, 인앱 처리 방법.
  • 카메라를 통한 촬영 및 촬영된 이미지 편집 방법.

어려웠던 점

  • Framework
    • Notifications, AVFoundation 등 처음 써보는 Framework의 정석적인 방법을 배우기 위해 시간을 많이 소요했다.
  • 커스텀 UI
    • 토스트, 플로팅 탭바, 캘린더 등 커스텀 UI 구현에 시간을 많이 소요했다.

사용 라이브러리

  • Alamofire
  • Crashlytics
  • Fabric
  • Firebase/Analytics
  • Firebase/Core
  • Firebase/Messaging
  • GoogleAnalytics
  • IQKeyboardManagerSwift
  • JTAppleCalendar
  • Kingfisher
  • KingfisherWebP
  • RealmSwift
  • SwiftyJSON

기능 정의

인트로 화면

1 - 화면

  • 로고에 2초간 애니메이션을 적용합니다.

서비스 이용 권한 안내 화면

1 - 화면

  • 필수적 접근 권한에 대한 안내 화면을 보여줍니다.
  • 확인 버튼이 있습니다.

2 - 기능

  • 확인 버튼을 누르면 필수 접근 권한에 접근을 합니다.
  • 권한이 허용되지 않은 경우 iOS의 설정 화면으로 이동합니다.
  • 앱이 실행될 때마다 권한을 확인하여 같은 과정을 반복합니다.

로그인 화면

1 - 화면

  • 이메일, 비밀번호를 입력하는 텍스트필드가 있습니다.
  • 로그인, 아이디/비밀번호 찾기, 회원가입 버튼이 있습니다.

2 - 기능

  • 로그인시 계정의 이메일 인증 여부, 계정 승인 여부, 자동 로그인 상태인지 체크합니다.
  • 자동 로그인 상태라며 로그인 화면을 생략합니다.

아이디/비밀번호 찾기 화면

1 - 화면

  • 휴대폰 번호, 인증번호를 입력하는 텍스트필드가 있습니다.
  • 전송 버튼이 있습니다.
  • 인증 확인 버튼이 있습니다.

2 - 기능

  • 전송 버튼을 누르면 입력된 휴대폰 번호로 인증번호를 발송합니다.
  • 가입된 회원 여부를 확인합니다.
  • 가입된 회원인 경우 인증번호를 발송하고 3분안에 입력하지 않으면 이전 화면으로 이동합니다.
  • 인증번호를 바르게 입력한 경우 다음으로 이동합니다.

아이디 확인/비밀번호 변경 화면

1 - 화면

  • 이전 화면에서 찾은 이메일을 보여줍니다.
  • 비밀번호 변경 버튼이 있습니다.
  • 로그인 버튼이 있습니다.

2 - 기능

  • 비밀번호 변경 버튼을 누른 경우 비밀번호 변경 페이지로 이동합니다.
  • 로그인 버튼을 누르면 로그인 화면으로 이동합니다.

비밀번호 변경 화면

1 - 화면

  • 새로운 비밀번호, 비밀번호 확인 텍스트필드가 있습니다.
  • 변경완료 버튼이 있습니다.

2 - 기능

  • 변경완료 버튼을 누르면 입력된 비밀번호의 유효성을 체크한 후 변경완료 페이지로 이동합니다.

변경완료 화면

1 - 화면

  • 변경완료를 안내하는 화면을 보여줍니다.
  • 로그인 버튼이 있습니다.

2 - 기능

  • 로그인 버튼을 누르면 로그인 화면으로 이동합니다.

회원가입 화면

1 - 화면

  • 커뮤니티 / 그룹 선택, 통신사 본인인증 버튼이 있습니다.
  • 아이디(이메일) 입력 텍스트필드가 있습니다.

2 - 기능

  • 커뮤니티 / 그룹을 선택하는 화면으로 이동합니다.
  • 커뮤니티 / 그룹과 이메일을 입력하지 않으면 통신사 본인인증을 할 수 없습니다.
  • 통신사 인증이 완료되면 다음페이지로 이동합니다.

회원가입 확인 화면

1 - 화면

  • 커뮤니티 / 그룹, 아이디, 이름, 성별, 생년월일, 휴대폰번호를 확인할 수 있습니다.
  • 닉네임, 비밀번호, 비밀번호 확인 텍스트 필드가 있습니다.
  • 서비스 이용약관, 개인정보 보호방침, 약관 동의 및 회원가입 신청 버튼이 있습니다.

2 - 기능

  • 닉네임 중복을 체크합니다.
  • 비밀번호 유효성을 체크합니다.
  • 서비스 이용약관, 개인정보 보호방침 버튼을 누르면 각 상세 페이지로 이동합니다.
  • 회원가입 신청 버튼을 누르면 모든 유효성 체크 후 로그인 화면으로 이동합니다.

메인 화면

1 - 화면

  • 홈, 카테고리, 마이픽스, 마이페이지 탭이 있습니다.
  • 검색, 알림목록 버튼이 있습니다.
  • 위시픽 게시판 이동, 물품 등록 플로팅 버튼이 있습니다.
  • 배너, 베스트픽, 물품 리스트가 있습니다.
  • 대여중인 물품은 대여중을 표시합니다.
  • 카테고리 전체보기 버튼이 있습니다.

2 - 기능

  • 배너를 누르면 각 배너 타입에 맞는 화면으로 이동합니다.
  • 베스트픽을 누르면 각 태그에 맞는 검색 결과 화면으로 이동합니다.
  • 물품을 누르면 물품 상세화면으로 이동합니다.
  • 검색 버튼을 누르면 검색 화면으로 이동합니다.
  • 알림 목록 버튼을 누르면 알림 목록 화면으로 이동합니다.
  • 위시픽 버튼을 누르면 위시픽 게시판으로 이동합니다.
  • 물픔등록 버튼울 누르면 물품등록 화면으로 이동합니다.
  • 물품의 하트 버튼을 누르면 찜 목록에 추가합니다.
  • 카테고리 전체보기를 누르면 해당 카테고리 대분류 화면으로 이동합니다.

검색 화면

1 - 화면

  • 검색어 텍스트필드가 있습니다.

2 - 기능

  • 검색을 누르면 키워드를 포함하는 모든 상품 검색 결과 화면으로 이동합니다.

알림 목록 화면

1 - 화면

  • 알림 목록이 있습니다.

2 - 기능

  • 알림 목록을 선택하면 해당하는 목록에 맞는 상세 화면으로 이동합니다.

물품등록 화면 - 1

1 - 화면

  • 카테고리, 중분류 선택 화면이 있습니다.
  • 브랜드 입력, 물품명 입력, 옵션 / 상세설명, 태그, 사용시, 반납시 주의사항 텍스트필드가 있습니다.

2 - 기능

  • 카테고리, 중분류는 정해진 것에서만 선택할 수 있습니다.
  • 브랜드, 물품명 입력은 자동완성을 지원합니다.
  • 태그에는 공백 입력이 불가합니다.
  • 태그 텍스트필드의 수정이 종료되면 자동으로 태그가 추가됩니다.
  • 필수항목이 모두 입력되어야 다음으로 이동 가능합니다.

물품등록 화면 - 2

1 - 화면

  • 대여함 선택, 대여불가일 선택, 이전, 다음 버튼이 있습니다.
  • 1일 대여료, 중고가 입력 텍스트필드가 있습니다.

2 - 기능

  • 대여함 선택 버튼을 누르면 대여함 선택 팝업이 나타납니다.
  • 대여불가일 선택 버튼을 누르면 대여불가일 지정하는 캘린더 화면이 나타납니다.
  • 1일 대여료는 500원 단위로만 입력 가능합니다.
  • 필수항목이 모두 입력되어야 다음으로 이동 가능합니다.

물품등록 화면 - 3

1 - 화면

  • 등록할 뭄품을 찍은 썸네일 화면이 있습니다.
  • 이전, 업로드 버튼이 있습니다.

2 - 기능

  • 썸네일을 누르면 카메라로 이동합니다.
  • 이미지는 최소 2장 이상 등록해야 합니다.
  • 업로드 버튼을 누르면 물품을 등록 신청합니다.

카메라 화면

1 - 화면

  • 카메라 프리뷰 화면이 있습니다.
  • 썸네일이 있습니다.
  • 삭제, 촬영, 완료 버튼이 있습니다.

2 - 기능

  • 썸네일을 누르면 사진을 찍은 경우 찍은 사진을 확인합니다.
  • 선택삭제가 가능해집니다.
  • 촬영버튼이 비활성화 됩니다.
  • 썸네일을 누르고 사진을 찍지 않은 경우 카메라 프리뷰 화면이 활성화됩니다.
  • 선택삭제가 불가능해집니다.
  • 촬영버튼이 활성화됩니다.
  • 촬영한 이미지가 2장 이상인 경우 완료 버튼을 누를 수 있습니다.

카테고리 화면

1 - 화면

  • 모든 카테고리내 상품 갯수를 표시합니다.

2 - 기능

  • 카테고리를 누르면 각 카테고리 상품을 분류하여 표시합니다.
  • 각 카테고리를 누르면 카테고리 모아보기 화면으로 이동합니다.

카테고리 모아보기 화면

1 - 화면

  • 중분류 버튼이 상단에 나열됩니다.
  • 각 중분류에 해당하는 상품들이 나열됩니다.

2 - 기능

  • 중분류 버튼을 누르면 해당 중분류 상품을 받아옵니다.
  • 물품을 선택하면 각 물품 상세 화면으로 이동합니다.

물품 상세 화면

1 - 화면

  • 내 상품인 경우 우측 상단에 더보기 버튼이 있습니다.
  • 더보기 버튼으로 수정, 삭제가 가능합니다.
  • 내 상품인 경우 대여중이 아닌 경우에 전시, 미전시 상태 변경이 가능합니다.
  • 대여중인 상품인 경우 대여기간을 확인할 수 있습니다.
  • 메인 이미지와 썸네일 이미지가 있습니다.
  • 선택된 이미지가 아닌 경우 alpha값이 변경됩니다.
  • 메인 이미지를 스와이프하거나 썸네일을 선택하며 메인 이미지를 변경할 수 있습니다.
  • 상품의 상세 정보를 확인할 수 있습니다.
  • 물품 소유자의 닉네임, 평점 등 정보를 확인할 수 있습니다.
  • 최하단에 물품의 카테고리에 해당하는 물품 리스트를 나열합니다.

2 - 기능

  • 내 상품인 경우 수정, 삭제가 가능합니다.
  • 내 상품인 경우 전시, 미전시 상태 토글이 가능합니다.
  • 대여중인 상품의 경우 대여기간 확인이 가능한 캘린더를 볼 수 있습니다.
  • 위로 스크롤하는 경우 하단 버튼뷰가 사라집니다. 아래로 스크롤하는 경우 나타납니다.
  • 찜버튼을 누르면 찜 목록에 추가합니다.
  • 카테고리 전체보기를 누르면 카테고리 모아보기 화면으로 이동합니다.

마이픽스 화면

1 - 화면

  • 사용 중, 내 대여상점 목록이 있습니다.
  • 대여의 상태(요청, 승인, 수납대기, 수납, 대여 중, 반납보관, 반납회수, 완료, 에러 등)에 따라 각기 다른 화면을 보여줍니다.

2 - 기능

  • 각 대여의 상세 화면으로 이동합니다.

마이픽스 상세 화면

1 - 화면

  • 대여의 상태에 따라 반납사진 촬영, 확인 버튼, 고객센터, 대여취소, 확인, 대여함 번호 확인 버튼 등 전부 다른 화면을 보여줍니다.

2 - 기능

  • 각 버튼이 활성화된 경우 그에 맞는 동작을 해야합니다.