[모바일소프트웨어💐/앱프론트] Find your bloom! Bloom Blooth 후기🩷

https://github.com/Bloom-booth/BloomBooth

GitHub - Bloom-booth/BloomBooth: 2024-2학기 모바일소프트웨어 3팀 < 🌷Bloom Booth📸> 프로젝트

시작에 앞서

2024-2학기에는 모바일소프트웨어라는 전공수업을 수강했습니다. 해당 수업은 중간고사 전까지는 기본적인 이론 + 팀빌딩, 중간고사 이후부터는 팀프로젝트를 중심으로 진행됩니다. 안드로이드 스튜디오에서 코틀린을 이용한 앱 개발을 목표로 하며 백엔드는 파이어베이스를 이용하는 형식이었습니다.
 
솔룩스에서 스프링부트를 이용한 백엔드 개발을 하고 있지만, 프론트엔드도 경험해보고 싶어서 해당 수업을 수강했습니다. 아무래도 코틀린이라는 언어 자체가 자바와 유사해서 당시 제 상황(회장 2개 + 20학점 수강 중)에서 가장 부담이 덜 되는 프론트엔드이기도 했습니다. 저는 동기와 함께 2명이서 팀을 짜서 프로젝트를 진행했습니다.   
 

주제 선정 및 기획 구체화

주제는 동기가 평소부터 하고 싶었던 주제가 있다고 해서 빠르게 선정했습니다. 바로 🌼포토부스 리뷰 앱 🌼 입니다.  앱스토어 등을 확인해 보았는데, 저희가 생각한 기능을 중점으로 구현한 앱은 없는 것 같아 금방 확정 지었습니다.
 
디자인을 해야 했는데, 저희 둘 다 백엔드로 디자인에 크게 관여한 적이 없어서 부담이 조금 있었습니다. 제가 일단 디자인을 했고, 동기가 다듬어서 최종본을 만들었습니다!

디자인 경험 없는 대학생 두 명의 눈물이 담긴 피그마...

 

개발 과정

본격적인 개발에 들어가기 전에 제가 ERD를 디자인했습니다. 

백엔드를 따로 하지 않아서 단순한 구조로 나왔습니다.

파이어베이스를 본격적으로 사용해 본 건 이번이 처음인데 생각보다 제공해 주는 기능이 많아서 편하게 구현할 수 있었습니다!
 

🌼스플래시 및 회원가입, 로그인

🩷 스플래시

스플래시 자체는 실행되자마자 처음 실행되고 약간의 딜레이 후 바로 다음 화면으로 넘어가면 됩니다. 사실상 구현할 것이 별로 없어서 금방 끝냈습니다.
 
🩷 회원가입, 로그인, 로그아웃

회원가입, 로그인을 위해서는 파이어베이스의 Authentication을 사용했습니다. 저는 아래 두 링크 덕분에 금방 설정할 수 있었습니다. 
https://it-of-fortune.tistory.com/40

안드로이드 Firebase Cloud Firestore database 생성, 연동, 사용법

https://gh-coding.tistory.com/4

(최신버전) Firebase와 Android Studio 연동하여 로그인, 회원가입 어플 만들기! 🚀

회원가입을 진행할 때 파이어스토어의 user 컬렉션에 필요한 데이터를 저장해 주었습니다.

 

🌼리뷰 작성 및 수정

🩷 리뷰 작성

처음에는 세 개의 액티비티로 나눠서 표시하려고 했으나 사용자에게 오히려 혼선을 줄 수 있을 것 같아서 하나의 액티비티로 통합하고, 스크롤을 내리는 형태로 수정했습니다.

 

부스 별점, 텍스트 후기, 부스 개수 기록, 악세서리 개수 기록, 악세서리 상태 기록, 보정 기록, 사진 등록이 가능합니다. 리뷰는 별점이 필수 항목이며 다른 항목은 선택적으로 기재 가능하도록 했습니다.

 

🩷 리뷰 수정

마이페이지에서 내 리뷰 > 리뷰 항목 내 리뷰 수정하기 버튼을 클릭하면 작성한 리뷰를 수정할 수 있습니다. 이때 기존에 작성한 내용(이미지 포함)을 전부 가져와 화면에 표시하며, PATCH 형태로 수정이 발생한 부분에만 수정이 발생하도록 코드를 작성했습니다.

 

🌼마이페이지

🩷 로그아웃, 회원 탈퇴

로그아웃은 파이어베이스에서 제공하는 기능을 사용했습니다. 탈퇴의 경우에는 파이어스토어에서 user 컬렉션에서 해당하는 문서를 찾아서 지운 후에 Authentication에서 지우는 형태로 진행했습니다. 사용자가 작성한 리뷰의 경우에는 작성자 정보를 바꿔서 사용자가 탈퇴하더라도 탈퇴한 사용자의 리뷰는 삭제되지 않도록 했습니다. 삭제한 사용자의 리뷰에 대해서는 닉네임이 알수없음으로 표시되도록 처리했습니다.

 

🩷 개인정보 수정하기

이메일은 변경 불가하며, 비밀번호와 닉네임 변경이 가능합니다. 변경 시에는 회원가입 시 진행했던 것과 동일하게 검증 절차를 거칩니다. 비밀번호 변경이 발생할 경우 변경 성공 후 로그아웃 처리됩니다. 

 

🩷 북마크 조회

내가 북마크한 가게를 확인할 수 있습니다. 가게명을 클릭하면 가게 상세보기 페이지로 이동하고, 꽃을 클릭하면 북마크가 삭제됩니다.

 

🩷 내 리뷰 조회

내가 작성한 리뷰를 볼 수 있습니다. 수정일 최신순으로 표시되며, 수정 및 삭제가 가능합니다.

 

 

회고 - 개발 ver

이번에 개발을 하면서 단순 기능 구현뿐만 아니라 클린코드로 코드를 작성할 수 있도록 의식적으로 노력했습니다. 상속을 이용했고, 싱글톤 패턴도 사용해 봤습니다!

 

🌼상속 이용

리뷰 작성과 수정에서 모두 이미지를 처리하지만, 두 기능의 요구 사항이 다릅니다. 리뷰 수정에서는 사용자가 이전에 등록한 이미지를 가져오는 기능뿐만 아니라, 작성 시처럼 새 이미지를 등록하는 기능도 필요합니다. 이를 위해 ImageAdapter를 리뷰 작성용으로 설계하였고, ReviewEditImageAdapter가 이를 상속받아 수정 시 필요한 기능을 추가하도록 구현하였습니다!

class ReviewEditImageAdapter(
    images: MutableList<String>,
    private val deletedImages: MutableList<String>,
) : ImageAdapter(images, { position -> }, { imageUrl -> }) {

    fun addNewImage(newImageUrl: String) {
        addImage(newImageUrl)
    }

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        super.onBindViewHolder(holder, position)

        holder.binding.deleteButton.setOnClickListener {
            val imagePath = images[position]
            if (imagePath.startsWith("http")) {
                deletedImages.add(imagePath)
            }
            images.removeAt(position)
            notifyItemRemoved(position)
        }
    }
}

 

🌼싱글톤 패턴 이용

Firebase 인증 객체(FirebaseAuth)를 전역적으로 관리하고 재사용하기 위해 Kotlin의 object 선언을 활용하여 싱글톤 패턴을 적용했습니다!

import com.google.firebase.auth.FirebaseAuth

object FirebaseAuthManager {
    val auth: FirebaseAuth = FirebaseAuth.getInstance()
}

 

 

마무리

학기 중부터 써서 약 2달 가까이 쓴 글입니다. 팀원 모두가 백엔드 지망이다 보니 프론트엔드가 주가 되는 프로젝트였음에도 불구하고 백엔드 개발하듯이 진행되었던 것 같습니다. 하루종일 안드로이드 스튜디오를 켜놓고 앱을 실행하며 코드를 작성하다 보니 컴퓨터가 갑자기 꺼지거나 멈추는 일도 종종 있었습니다. 그래도 결과를 바로바로 눈으로 확인할 수 있어 좋았고, 휴대폰을 연결해서 휴대폰으로 앱을 실행해 보던 첫 기억은 못 잊을 것 같습니다.

 

시스템 구조도, 사용자 매뉴얼 등을 작성하면서 프로젝트의 큰 그림을 여러 방면에서 파악할 수 있어서 좋았습니다. 프로젝트의 더욱 작세한 내용은 최상단의 깃허브 링크에서 전부 확인하실 수 있습니다.

내 첫 앱프론트 프로젝트 안녕👋