투게덕 - [ MVVM 패턴 안드로이드 프로젝트 ]

2024.1 ~ 2024.2 2달간 소프티어 부트캠프의 안드로이드 파트에 참여했다. 직무 교육 후 1달 동안 백엔드와 안드로이드 파트간 협업하여 프로젝트를 진행했는데, 간단하게 작업 내용과 회고를 기록으로 남기려 한다.

 

 

GitHub 참조

GitHub - softeerbootcamp-3rd/Team8-8LISADE: 소프티어 부트캠프 3기 8팀 8LISADE팀 repository입니다.

 

 

---

1. 프로젝트 소개 

1) 기획 의도

먼저 간단하게 프로젝트를 소개하자면, 투게덕은 지방에 거주하고 있지만 수도권에서 열리는 다양한 콘서트 및 행사에 참여하고 싶은 지방 덕후들을 위해 수요 응답형으로 셔틀을 제공해주는 서비스이다. ( 기획서 참조 )

사용자는 행사별로 다른 사용자가 개설해 놓은 노설들을 보고 원하는 출발지가 있으면 해당 노선의 좌석을 예매할 수 있고, 원하는 출발지가 없다면 본인이 출발지를 지정해서 노선을 개설할 수 있다.

행사 목록 확인      노선 목록 확인      노설 개설

 

 

---

2) 기술 스택

안드로이드 파트는 나와 팀원분 모두 이번에 안드로이드가 처음이었다. 그래서 자연스럽게 직무교육 기간 동안 사용했던 코틀린과 xml, Retrofit과 OkHttp를 사용하게 되었고, 의존성 주입을 위한 Hilt, 화면 이동으로는 Jetpack Navigation, 로그인 시 sessionId를 저장해놓기 위해 Jetpack DataStore를 사용했다. 그리고 안드로이드에서 아키텍쳐 패턴으로 널리 쓰이는 MVVM 패턴을 적용해서 프로젝트를 진행했다. 

 

 

 

---

2. 작업 내용

1) 예약 현황 탭

여기서는 본인의 예약 현황을 리스트 형태로 확인할 수 있다. 페이징 라이브러리를 이용해 한 번에 20개씩 받아오도록 했으며, 바인딩 어댑터를 이용해 모집 현황 별로 글자 색이 다르게 출력되도록 했다.

 

 

더미 데이터가 부족해서 실행 시 확인이 어려운데, 아래 사진처럼 모집 현황(모집중-모집완료-출발확정-운행완료) 4가지에 따라서 글자 색이 다르게 출력되도록 해 사용자 입장에서 구분이 쉽도록 하였다!

 

 

 

---

2) 예약 상세 내역

예약 현황 탭에서 항목을 클릭하면 예약 상세 내역페이지로 이동한다. 

 

기사가 배치되기 전이라면 기사정보칸에는 아래처럼 뜨게 될 것이다.

 

여기서도 바인딩어댑터를 이용해 모집 현황(모집중-모집완료-출발확정-운행완료)에 따라 타이틀 옆에 다른 디자인의 태그가 출력되도록 해 사용자가 쉽게 알아보도록 했다.

모집 현황 별로 다른 디자인의 태그가 출력

또한 이 페이지에서는 휴대폰 화면이 작으면 정보가 잘릴 수 있는 점을 고려하여, 스크롤이 되도록 했다.

 

 

 

---

3) 모바일 티켓

예약 상세 페이지에서 티켓 확인을 클릭하면 모바일 티켓 페이지로 이동한다. 여기에서는 예약한 노선의 티켓을 확인할 수 있다.

예약한 노선 정보(노선 ID, 좌석 번호)를 바탕으로 입장 시 필요한 QR을 생성한다.

 

 

---

4) 좌석 선택 화면 & 좌석 배치도

메인 화면에서 행사를 클릭하면 -> 1. 다른 사용자가 개설해놓은 노선을 선택해서 버스 좌석을 예매하거나 / 2. 원하는 노선이 없을 경우 출발지를 선택해서 노선 개설 후 버스 좌석을 예매할 수 있다.

** 좌석 선택 시 다양한 인승의 버스(27인승, 45인승 등)의 좌석 배치도를 출력하기 위해 커스텀 뷰를 이용해 구현했다. 자세한 부분은 아래 포스팅 참조
https://yunyj99.tistory.com/468

Android - [ 좌석 선택 커스텀 뷰 ]

 

좌석 선택 화면

 

 

그리고 모바일 티켓 페이지에서 '좌석 배치도' 버튼을 클릭하면 본인이 예약한 좌석의 위치를 확인할 수 있는 다이얼로그가 출력된다.

좌석 위치 확인은 좌석 선택 커스텀 뷰를 재활용해 이용했다.

좌석 배치도 다이얼로그

 

 

---

5) 노선 결제 화면 & 결제 완료 화면

좌석을 선택하면 노선 결제 화면으로 넘어온다. 여기서 콘서트 일정, 노선 출/도착 장소와 시간 정보, 버스 정보, 선택한 좌석과 가격 정보 등을 확인할 수 있다.
마찬가지로 이 페이지에서도 휴대폰 화면이 작으면 정보가 잘릴 수 있는 점을 고려하여 스크롤이 되도록 했다.

 

결제 완료 시 아래 페이지로 넘어온다. 여기서 홈으로 이동하거나, 결제한 예약 상세 내역으로 바로 이동할 수 있다.

결제 완료 페이지에서 뒤로가기 선택 시 바로 이전의 결제 화면이 아니라 더 전의 노선 선택 화면으로 이동하도록 했다.

 

---

6) OkHttpInterceptor

우리 프로젝트에서 대부분의 페이지는 로그인이 필수이다. 요청 시 마다 헤더에 sessionId 값을 보내는게 번거롭게 느껴져, OkHttpInterceptor를 이용해 api요청 시 마다(로그인 api 제외) 데이터스토어에 저장된 sessionId 값을 불러와 헤더에 실어 보내도록 했다.

 

 

그리고 api 요청 시 받아오는 응답에서 status, message, result 값을 받아오는데 우리 프로젝트에서는 result 값, 즉 필요한 데이터만 활용하고 있었다. 처음엔 BaseResponse 데이터 클래스를 만들고 받아오는 응답 데이터를 모두 BaseResponse로 감싸고 result 값만 사용하는 방식으로 했는데, 번거롭게 이렇게 사용할 필요가 없다는 생각이 들어 Interceptor를 이용해 api 요청으로 response를 받을 때 마다 데이터를 가공하여 필요한 result 값만 반환받도록 했다.

 

  

---

3.  느낀점

나는 이번 프로젝트를 진행하기 전에 협업에 중점을 두고 작업했으면 좋겠다고 생각했다. 전에 팀 프로젝트를 진행했을 때 백엔드 개발자끼리 하다 보니 기능별로 파트를 나누고 풀스택으로 담당해서 했었는데, 그렇다 보니 작업 기간 동안 개인의 개발에 집중해서 작업하게 되었고 마지막에 완성된 결과물을 봤을 때 내가 작업한 부분만 잘 알겠고 다른 분들이 담당한 기능을 잘 모르겠는 부분이 많았다... 그래서 내가 참여한 프로젝트인데 전반적으로 프로젝트에 대한 이해도가 떨어진다는 생각이 들어서, 이번에는 팀원들간의 협업과 소통에 조금 더 중점을 두고 진행하면 좋겠다 싶었다.

안 그래도 소프티어를 진행하며 공통 교육 시간에 멘토님들께서 협업의 중요성을 많이 강조해 주셔서 이 부분에 신경을 많이 썼던 것 같다. 우리 팀은 매일 아침 그룹 스크럼을 통해 현재 개발 상황과 전날 일상을 가볍게 공유했고, 매일 4시 반에는 리프레쉬 산책 시간을 통해 친밀감을 쌓고 마치기 전에는 그룹 회고를 통해 그날의 작업 상황을 공유했다.

낯을 많이 가리는 성격이라 지금 생각해보면 처음 이틀간은 좀 많이 어색했던 기억이 난다...ㅋㅋ 그래도 하루종일 같이 붙어서 작업하고 산책 시간에 개발 외에 서로에 대해서 얘기해 보는 시간을 가졌다 보니 생각보다 빨리 친해질 수 있었다. 지금 돌아보면 확실히 팀원들간에 친밀감이 생긴 후에 의견 제시나 의사 소통이 훨씬 원활했던 것 같다. 그리고 한 달간 하루종일 붙어서 작업하고 서로 소통을 많이 하다 보니 저번 프로젝트 경험과 비교했을 때, 이번 프로젝트에서 스스로 프로젝트에 대해 이해도가 훨씬 높은 것 같다고 느낀다. 프론트단에서 어떤 식으로 동작이 되고 어느 부분은 아직 미완인지 알고 있고, 백엔드에서도 정확히 어떤 식으로 구현을 했는지는 모르지만 어느 부분에서 어려움이 있었는지, 어떻게 해결했는지 등의 상황을 이해할 수 있었다. 팀원과의 소통에 집중하자는 처음의 목표를 잘 이룬 것 같아서 뿌듯하다.

 

2달간의 짧은 기간인데다가 안드로이드를 처음 해보는거라 잠을 줄여가며 공부하고 시간을 들여도 생각한만큼 해내기가 쉽지 않아서 속상했던 날도 있지만, 지금 생각해보면 열심히 노력하는 주변 사람들을 보면서 2달간 나도 정말 열심히 살았던 것 같다. 혼자였으면 짧은 기간에 이렇게까지 성장할 수 없었을 것 같다. 최종 프로젝트를 진행하며 마지막 주에는 데모 영상 촬영을 해야하는데 api 구현이 마무리가 안되어서 다같이 밤 새고 영상을 촬영했던 날도 있다. 정신적으로도 신체적으로도 많이 지치기도 했지만 좋은 팀원들을 만나서 한 달 동안 너무 즐겁게 작업했던 것 같다.

한 달간 함께 고생한 팀원들에게 너무 감사하고, 나는 앞으로도 노력해야 할 날이 많이 필요하다고 느낀다. 나의 앞 날도 화이팅이다.

 

---