[Project/iOS] 8색조 - BirdCinema 영화 예약 앱

이번에 했던 프로젝트 회고를 해보려고 합니다!

우선 24.04.22~ 24.04.27 1주일 동안 팀 프로젝트를 진행했고 4명이서 디자인, 설계, 개발, 발표까지 진행했습니다.

순탄하게 잘 마무리한 것 같아 뿌듯하고 팀원들 운이 굉장히 좋았던 것 같습니다.

지난 1주 간의 프로젝트 과정을 기록해보고자 합니다.

 

🕊️ 프로젝트 소개

• 팀명 : 8색조🕊️
• 프로젝트명: Bird Cinema

이번 팀명과 프로젝트는 제가 제안했던 이름이 선정되었습니다! ㅎㅎ

새를 좋아하지 않지만 이름들이 귀엽고 마음에 들었답니다🕊️💜

 

• 협업: GitHub, Notion, Slack, Figma
• 기술 스택 : Xcode, Swift

프로젝트 깃허브 링크는 아래 첨부해 뒀습니다.

https://github.com/yyujnn/BirdCinema

GitHub - yyujnn/BirdCinema: 영화 예약 앱 프로젝트

 

 

개발 설계

프로젝트를 시작하기 앞서 SA를 작성하는 시간을 가졌습니다.

 

필수 구현 기능

• 로그인 / 회원가입
• 영화 목록 page (TabBar의 첫 번째 화면)
  • 영화 이미지들은 좌우 스크롤 가능 (CollectionView)
  • TMDB API 사용
• 영화 상세 page
  • 영화를 클릭 시 이동
  • 영화 정보를 함께 보여주기
• 영화 예매 입력 page
  • 상세 페이지에서 입력하기 버튼 클릭 시 이동
  • 예매를 위해 입력할 것들 입력 가능하도록 구성
  • 결제하기 버튼을 누르면 결제 내역이 마이페이지에서 보이도록 구현
• 영화 검색 page (TabBar의 두 번째 화면)
  • 검색창에 텍스트를 입력하면 해당 텍스트가 포함된 영화를 표시 (CollectionView)
• 마이 page (TabBar의 세 번째 화면)
  
  • 나의 필요한 계정 정보를 표시
  • 예매한 영화 내역 확인

 

작업 규칙

브랜치 이름 규칙과 커밋 메세지 규칙과 푸시 규칙도 시작 전에 정했습니다.

커밋 메세지 규칙이 있으니 어떤 내용을 작업했는지 바로 알 수 있고 커밋 히스토리가 깔끔해서 좋았습니다.

깃허브와 친해지는 과정은 저번 프로젝트에서 충분히 경험해 봐서 그런지 이번에는 큰 고비 없이 규칙도 정해두고 작업할 수 있었습니다.

와이어 프레임

와이어 프레임은 피그마에서 레퍼런스를 참고해서 그렸습니다.

배경색과 포인트 컬러는 팀장님이 의견을 내주셨는데 아주 예쁩니다!

 

팀 약속

• 매일 오전 10시: 작업 계획 회의
• 매일 오후 8시: 작업 내용 공유 및 회고

매일 하루의 계획 및 작업 내용을 공유하는 시간을 가졌습니다.

 

 

개발 진행 과정

👩🏻‍💻 나의 역할

• 영화 예매 페이지 구현
• 마이 페이지 구현
• 페이지 데이터 연결
• 찜하기 기능 구현

 

1) Login & Sign In

이메일과 비밀번호를 받아 로그인할 수 있는 로그인 및 회원가입 페이지입니다.

저는 마이페이지에서 로그인한 이메일 정보를 불러오도록 구현했습니다!

 

 

2) Home

메인페이지에서 TMDB API에서 불러온 영화 정보들을 확인할 수 있습니다!

저는 메인 화면에서 탭바 컨트롤러를 적용해서 이동할 수 있게 구현했습니다.

또한 컬렉션뷰를 선택했을 시 상세페이지로 이동하는 로직과 컬렉션 뷰 안의 예매하기 버튼을 선택했을 시 예매 페이지로 이동하는 로직을 작성했습니다!  

컬렉션뷰를 선택했을 시에는 delegate의 didSelectItemAt 메서드를 활용해서 화면 전환 및 데이터 전달을 진행했습니다.

뷰 안의 버튼을 통해 이동하는 로직은 처음에 어려움이 있었지만 버튼의 액션 메서드에서 클로저를 호출하는 방식으로 해결했습니다!

이때 cellForItemAt에서 셀에 클로저를 전달하여 영화 정보가 전달되도록 구현했습니다.

중복 코드가 많아졌다는 단점이 있지만 해결 방법은 추후에 고민해 봐야겠습니다..!

 

 

3) Detail

선택한 영화의 정보를 확인하는 디테일 페이지입니다.

저는 마지막 날에 시간이 조금 남아 찜하기 기능을 도전해 보았습니다!

팀원분이 만들어둔 예매하기 버튼에 찜하기 버튼을 추가해서 addTarget을 통해 데이터를 저장하는 로직을 작성했습니다.

 

또한 찜하기를 누른 후 다시 화면을 이동했을 때 하트의 색상이 변경되지 않는 어려움이 있었는데
제가 비동기 작업의 시간을 고려하지 않고 UI 업데이트를 진행했던 문제점이었습니다!
시점을 잘 파악하지 못했는데 DispatchQueue.main.async로 비동기 작업으로 데이터를 받아온 후 버튼의 UI를 구성하는 작업을 하도록 UI 업데이트 시점을 변경해서 해결했습니다.

 

4) Reservation

선택한 영화를 예매하는 page입니다.

이 화면은 제가 구현했는데 UIDatePicker를 사용하여 날짜를 선택하고 컬렉션뷰를 통해 시간 선택 셀을 구성하였습니다!

수량 버튼을 통해 수량 조절 및 총금액이 업데이트되도록 구현하고 날짜, 시간, 인원 중 하나라도 선택을 안 하면 결제버튼을 누르지 못하도록 제한했습니다.

UI를 참고할 레퍼런스가 부족했지만 제 마음에는 들도록 구현한 것 같습니다ㅎㅎ

 

5) Search

탭바의 두 번째 화면인 검색 page입니다.

이 화면은 제가 구현한 부분이 없어서 SearchBar delegate에 대한 공부가 필요할 것 같습니다!

 

6) My Page

탭바의 세 번째 화면인 마이 page입니다.

이 화면도 제가 구현하였는데 로그인 정보와 결제하기 버튼을 통해 예매한 영화나 찜한 영화를 확인할 수 있도록 했습니다!

테이블뷰로 섹션을 나누어 각각 원하는 내용을 표시하도록 구성했습니다.

또한 어디서든 탭을 클릭했을 때 데이터가 업데이트 되도록 viewWillAppear를 사용했습니다.

 

프로젝트 구조

프로젝트 구조는 다음과 같이 MVC패턴을 활용했습니다.

 

프로젝트 기간

프로젝트 설계 후 3일 정도는 맡은 페이지에 대한 기능을 최대한 구현하는 시간을 가졌습니다.

또한 필수 구현이 완료된 후 추가 기능 구현 및 디테일 수정을 진행했습니다.

기간 내에 완료되고 주말에는 리드미까지 예쁘게 수정하는 작업을 했는데 결과적으로 칭찬을 받아서 뿌듯했습니다!

 

최종 시연 영상

https://www.youtube.com/watch?v=-2Fh_SXVbxI

최종 구현 내용이 담긴 영상입니다.

 

KPT 회고

👨🏻‍💻 튜터님 피드백

• 브랜치 및 커밋 메세지 규칙 정해둔 부분 칭찬.
• 팀프로젝트는 협업을 하는 연습 > 스토리보드 머지.. 장점단점!! 실제로 겪어보고 해결해 보면 체득할 수 있음. 내가 겪은 문제까지 같이 회고하고 정리해 두기!
• 모델에 따라 역할분담을 잘해주신 것이 인상 깊었습니다! 모델이 바뀌었을 때 side effect 고려.
• 같은 코드가 반복되는 것을 어떻게 정리하면 좋을지 > generic으로 어떻게 정리할 수 있을지 고민해 보기
• KPT 회고 > 앞으로 어떻게 해야 할지 잘 짚고 넘어간 것이 매우 좋음.
• github readme 정리를 잘했음! 포폴로 활용하기 위해서는 리드미를 꼭 꼭 꼭 미리미리미리 정리하기!!

이번에도 코코종 튜터님의 피드백에 칭찬받은 부분은 뿌듯하고 더 수정하고 성장해야 할 부분을 고민할 수 있었습니다!

 

💜Keep

• 미리 데이터 전달을 위한 데이터 구성을 협의하여 문제없이 로직 연결이 잘 된 점
• Git 관리 규칙을 지켜 가독성이 높아진 점
• 각자의 뷰 컨트롤러를 각자 관리하니 merge conflict 발생이 현저히 줄어든 점

 

💜Problem

• 비동기 작업의 시간을 고려하지 않고 UI 데이터 업데이트를 진행한 점
• 구현 기능이 많고 복잡할수록 코드의 흐름을 따라가기 어려웠던 점
• 중복 코드가 다수 확인되어 복잡하고 가독성이 떨어지는 점

 

💜Try

• 중복 코드를 최소화하고 효율적인 구조로 개선하기
• 코드의 세부적인 흐름 파악과 브레이크 포인트를 사용한 디버깅 연습하기

 

💬 Feel

여러 기능을 시도해 보면서 성장할 수 있었습니다!

UI도 기능도 전부 예쁘게 잘 된 것 같아 뿌듯한 프로젝트였습니다.

이번 프로젝트는 팀장과 발표를 맡지 않아 조금 편한 마음으로 개발에 집중할 수 있었습니다!

팀장님이 발표를 잘해주셔서 프로젝트가 잘 마무리되었던 것 같습니다. 최고~

또한 각자 맡은 부분을 다들 잘해주셔서 기간 내에 순탄하게 문제없이! 마무리되었던 것 같아 팀원분들에게 감사합니다.

다음 프로젝트도 파이팅입니다!👏🏻👏🏻👏🏻