camstudy-android

프로젝트 개요

코로나19가 유행하던 때 캠 스터디를 진행하는 과정에서 번거로움을 느꼈습니다. 구글 미트와 같은 화상 회의 시스템에 접속하고 공부 타이머를 설정하여 화면 공유를 해야했습니다.

이러한 문제를 해결하고자 내장된 공부 타이머와 함께 캠 스터디를 진행할 수 있으면서, 공부할수록 성장하는 가상의 작물을 통해 학습 동기부여를 제공하는 서비스를 개발했습니다.

"공부하는 농부" 프로젝트는 시간, 공간에 제약 받지 않고 공부하는 모습을 실시간으로 공유하며 몰입도를 높일 수 있는 서비스입니다. 디자인 시스템을 구축했으며, 소켓 및 HTTP API 서버와 통신을 구현했습니다.

마주한 이슈

동시에 여러 HTTP API를 호출할 때의 속도 문제

• 문제: 하나의 페이지에서 여러 API를 호출해야하는 경우 속도가 느린 문제
• 원인: 의존성이 없는 API 호출을 순차적으로 호출함
• 해결: Coroutine의 async 함수를 이용해 병렬로 호출하도록 수정하여 약 32%(1.6초 -> 1.1초) 속도 개선

이미지 캐시 문제

• 문제: 사용자 프로필 이미지를 캐시하는 경우 프로필 이미지를 업데이트 했을 때 이전에 캐시된 이미지가 보임
• 원인: 캐시된 이미지와 업데이트된 이미지의 URL이 동일하기 때문에 캐시된 이미지가 보임
• 해결: 사용자가 프로필 이미지 URL에 timestamp 값을 추가하여 해결

디자인 시스템 구축

• 문제: 앱의 디자인 일관성 향상 및 재활용성을 높이기 위해 디자인 시스템을 구축해야하는 상황
• 해결
  • 디자인 시스템 모듈을 분리하여 비즈니스 로직을 의존하지 않도록 설계
  • 하위 컴포넌트를 전달하는 컴포지션 방식을 활용하여 컴포넌트의 유연성 향상

스크린샷

홈	공부방

랭킹	작물

셋업

• Firebase에서 google-services.json 파일을 받아 앱 모듈에 놓는다.
• Firebase에 SHA 키를 등록한다.
• local.properties에 각종 비밀 값들을 설정한다.
• 빌드 후 실행

아키텍처

크게 :app, :core, :feature 모듈로 나누어져 있습니다. 각 :feature 모듈 내부에는 :ui, :data 모듈이 존재하며, 필요한 경우 :domain 모듈을 분리했습니다.

기술

• Dagger, Hilt
• Orbit(MVI)
• Retrofit2, OkHttp3
• Mediasoup, Socket.io
• Coil
• Compose, Compose Destinations
• Paging3
• JUnit4