Planfit onBoarding 페이지 클론 코딩 회고

현재 서비스 중인 Planfit이라는 앱의 onBoarding페이지를 클론 코딩해 보았습니다.

지금까지 클론코딩을 할 때는 강좌나 책 등을 보며 해당 프로젝트를 클론코딩을 했었는데 이번에는

https://wwit.design/2023/07/24/planfit/

Lifeplus

해당사이트를 참고하여 만들었습니다.

 

화면만 보고서는 해당 화면이 어떻게 돌아가는지 알 수 없었습니다. 그래서 해당 앱을 설치하고 어떻게 돌아가는지 관찰 후에 해당 화면의 흐름을 다이어그램으로 만들었습니다.

다이어그램을 만들다 보니 wwit에 나오는 Planfit페이지는 iOS 환경에서의 이미지라는 것을 알게 되었습니다. 그렇다고 안드로이드 기기에서의 모드화면을 캡처하고 해당 화면 구현하기에는 시간이 들기에 우선 사이트에서 보여주는 화면을 가지고 개발을 시작하였습니다.

 

이 흐름에 따라 어떤 방식으로 만들어야 할지 규칙을 정하였습니다.

 

1. 모든 화면은 한 개의 액티비티(PlanfitOnBoardingActivity)에서 돌아간다.
2. 화면의 이동은 Navigation으로 대체한다
3. SelectInfo는 SelectInfoFragment에서 담당하며 SelectInfoFragment의 NavHostFragment에서 SelectInfo의 전환이 일어난다
4. CleanArchitecture의 구조로 개발
5. DI의 경우 Hilt를 사용
6. Local의 저장은 DataStore를 이용

이 정도의 규칙을 정하고 개발을 시작하였습니다. 

 

결과물

https://github.com/PotatoMeme/Android-UI-Test/tree/dev/screen/planfit

Android-UI-Test/screen/planfit at dev · PotatoMeme/Android-UI-Test

 

 

느낀 점

왜 많은 개발사에서 상용화 중인 서비스를 운영했던 개발자를 원하는지 알게 되었습니다. 어느 정도 규모의 앱의 경우 그만큼 코드의 양은 많기 때문에 그만큼 유지보수를  위해 디자인 패턴이 구조화 패턴, Convention 등 많은 규칙을 중요시합니다. 이번 코드에서는 MVVM이나 Clean Architecture, Hilt를 이용하여 코드의 양을 줄였지만 43개의 kotlin코드 56개의  Res파일을 사용하였습니다. 온보딩에서만 이 정도였지만 이후 홈이나 운동시작하기 분석, 커뮤니티, 마이페이지 등의 화면들을 구현할 때면 코드가 더 많아집니다. 그렇기에 또 한 번 유지보수의 중요성을 느꼈습니다. 

 

이번에는  Clean Architecture, Hilt를 사용하였기에 각자의 책임을 Presentation, Domain, Data로 나누어 관리를 하였고 필요에 따 Hilt를 이용하여 의존성 주입을 받아 손쉽게 책임을 분리하고 사용할 수 있었습니다. 이전의 구글앱아키택처에 비해서 UseCase로 분리하고 Domain이 최상위 레이어이기 때문에 도메인에 맞게 개발을 하여 코드의 통일성을 가지게 된 것 같습니다. 그래서 개발을 할 때도 이전의 코드를 복사하여 비슷한 패턴을 화면을 동작시켰습니다.

한동안 유지보수나 관련 패턴들에 관해서 공부를 했었는데 이번에 그 영향을 느낀 것 같습니다. 다음프로젝트에는 모듈화를 적용하여 개발해 보는 것도 재미있을 것 같습니다.

 

부족했던 점으로는 개발을 하다 보니 비슷한 곳이 많아 이전에 작성한 내용을 복붙 하여 해당화면 맞게 구현하였습니다. 그만큼 겹치는 곳도 많다는 것이므로 해당화면을 구현을 interface나 부모클래스 상속을 통하여 코드의 통일성을 높이고 코드의 양의 줄일 수 있을 것 같았습니다.  다음에는 이러한 부분을 해결하여 좀 더 좋은 프로젝트로 만들수 있으면 좋을 것 같습니다.