저의 개발 고민들이 담겨있는
작업 공간입니다.
Portfolio
Project : MyAirbnb
-
담당 핵심 기능 영상
숙소 검색(필터) 및 좋아요 기능
숙소 검색 및 예약 기능
실시간 채팅 기능
-
개요 : 기존 Airbnb 앱 서비스를 기반으로 같은 형태의 서비스를 만들어보는 클론 프로젝트
-
개발 기간 : 2019.07.01 - 08.09
-
참여 인원 : iOS 3명, 백 엔드 3명, 프론트 엔드 4명
-
개발 목표 : MVP - 숙소 필터 및 검색 기능, 숙소 예약 기능, 호스트와 유저 간 실시간 채팅 기능
추가목표 - 숙소 좋아요 및 저장 기능, 트립 카테고리, 레스토랑 카테고리
-
개발 완성도 : MVP 100% 구현, 추가목표 50% 구현 완료
-
담당 구현 파트
-
런칭화면, 메인페이지, 숙소(Luxe, Plus, 일반 숙소) 페이지, 숙소 검색페이지, Custom SearchBar, 숙소 저장페이지,
여행 일정 페이지, 메시지 페이지 -
SearchBar와 필터(캘린더, 인원) 를 이용한 숙소 검색 기능, 숙소 예약 기능
-
숙소 좋아요 기능, 예약된 숙소를 바탕으로 한여행 일정 표시 기능
-
숙소 호스트와 사용자 간 실시간 메시지 기능
-
FSCalendar 오픈소스 캘린더 UI 및 기능 개선
-
-
사용 기술 & 라이브러리 : Swift, FSCalender 오픈소스, Starscream, Kingfisher, NVActivityIndicatorView, Snapkit, AVFoundation, GitHub, Slack, Zenhub
-
Github Link : https://github.com/AlexLee365/MyAirbnb
-
전체 시연 영상 : https://www.youtube.com/watch?v=K0blwUTsPTI
-
고민 & 구현 방법
1. TableView에 유동적으로 데이터 및 화면을 구성시키기 위한 데이터 설계
Q. 고민 : TableView에 데이터와 UI를 고정시키는 것이 아니라, 언제든 변동될 수 있도록 설계 할 수 있을까?
S. 해결 : MainView에 쓰일 데이터를 MainViewData라는 구조체로 따로 정의하고, 그 안에서 쓰일 데이터들을
MainViewDataProtocol을 채택하게 하여 여러 데이터를 각각의 CellStyle로 함께 묶어주었습니다.
R. 결과 : TableView에 뿌려줄 배열의 요소 순서를 바꿔주거나 빼거나 더해주는 것만으로 화면구성을 바꿔줄 수 있었고,
유지보수성과 재활용성을 크게 증가시킬 수 있었습니다.
2. 여러 개의 API 요청에 대한 Response를 모두 받아오기 위한 방법 & 데이터를 받아오는 시간을 줄이기 위한 방법
Q. 고민 : 여러 개의 비동기 처리에 대해 모두 종료된 시점을 어떻게 잡을 수 있을까?
여러 개의 데이터를 받아오는 시간을 어떻게 줄일 수 있을까?
S. 해결 : 여러 개의 비동기 처리를 DispatchGroup으로 관리하여 Group이 모두 종료되는 시점을 잡을 수 있었습니다.
데이터간 우선순위를 선정하여 중요한 데이터들부터 호출하였고, 메인화면에 바로 필요하지 않은 데이터들은 그 이후 호출되도록
설계하였습니다. 예를 들어, 검색할때 보여지는 도시 리스트 데이터는 사용자가 앱을 다운받고 처음 실행하여 로그인할 때
1차적으로 받아놓아 UserDefault에 저장해놓고 활용하였고, 앱을 다시 실행할 때 중요한 데이터 호출 이후에 갱신하는 형식으로 설계하였습니다.
R. 결과 : 필요한 API 호출에 대한 응답을 확실히 모두 받은 후에 다음 작업을 진행할 수 있었고, 데이터를 받아오는 데 걸리는 시간을 크게
감소시킬 수 있었습니다.
3. 데이터를 받아오는 시간을 채우기 위한 방법
Q. 고민 : 숙소를 검색하거나 컨트롤러를 이동할 때 새로운 데이터를 호출해야 하는데, 그 공백들을 어떻게 채울 수 있을까?
S. 해결 : 사용자 경험의 관점에서 최대한 유연한 앱을 만들고자 애니메이션을 최대한 활용했습니다. 또한 PlaceHolderView를 따로
만들어 지금 어떤 작업이 진행되고 있는지 대한 최소한의 데이터를 먼저 보여주어 사용자가 불편함을 느끼지 않도록
구현하였습니다.
시작 화면
SearchBar 검색 화면
Luxe숙소 상세 페이지
일반숙소 상세 페이지
R. 결과 : 사용자에게 지금 어떤 동작이 일어나고 있는지 좀 더 명확하게 보여줄 수 있었고, 부드럽고 동적인 흐름으로 데이터 호출과
화면이동을 구성할 수 있었습니다.
4. 모든 컨텐츠에 달린 좋아요 버튼을 효율적으로 구현하기 위한 방법
Q. 고민 : 숙소, 트립, 레스토랑 등 여러 카테고리의 컨텐츠에 달린 좋아요 버튼을 어떻게 효율적으로 구현할 수 있을까?
S. 해결 : UIButton을 상속받은 LikeButton 클래스를 만들어 각각의 컨텐츠 고유 번호와 컨텐츠 타입을 가지게 하여 그 속성값을 가지고
서버에 POST, DELETE 하도록 구현하였습니다.
