[TIL] Android 앱 개발 최종 : 포트폴리오 프로젝트 4

✏240228 수요일 TIL(Today I learned) 오늘 배운 것

📖 FireBase 사용시 고려해야할 점

• 원래 게시판 부분을 담당하기로 해서, FireStore와 Realtime Database 중에 어디에 게시판을 저장하면 좋을지 간단한 자료 조사를 진행했다.

• 가볍게 구글링을 했을 때, Realtime Database를 사용하여 게시판을 구현한 예시를 많이 보게 되었는데, 이 예시들은 전부 텍스트만 관리하고, 댓글 기능이 없이 바로 게시글을 읽을 수 있는 구현들이었다. 이번 프로젝트에서 만들어야 하는 게시판은 이미지 등록이 가능하고, 검 기능과 댓글 작성 후 읽기 또한 가능하기 때문에 Realtime Database 만으로 작성 시에는 코드가 너무 복잡해질 문제가 우려되었다.

• Realtime Database는 이미지를 저장하려고 할때 storage나 fireStore를 연계해서 저장해야한다. 이미지 자체를 저장하지 못하고, URL등의 메타 데이터만 저장할 수 있기 때문이다. 그리고 검색 기능을 구현하려고 할떄도, 복잡한 쿼리문을 제공하지 않기 때문에 조건문을 통해 원하는 정보를 가져오는 것이 쉽지 않다. 댓글 작성 시에도 데이터 구조가 점차 복잡하게 될 경우 코드 작성 시에 코드가 많이 복잡하고 더러워질 수 있다.

• FireStore는 위에 realtime database에서 언급한 단점들을 상쇄하기에 좋다. 이미지 자체를 바로 저장하고, realtime database보다 where문을 통한 상세한 쿼리문이 제공된다. 데이터를 관리하는 것도 컬렉션(폴더)-다큐먼트(문서)식으로 관리하기 때문에 댓글관리도 보다 쉬울 수 있다.
  하지만, realtime database 보다 조금 더 비싼 비용문제가 있었다.

• => 위의 두 자료를 가지고 팀원들과 상의를 해봤는데, 게시글 본문은 firestore를 쓰고 댓글만 realtimedatabase를 쓴다던지, 그냥 둘다 realtime으로 하고 storage로 이미지를 관리한다던지.. 등등 에 대해서 논의를 하다가 검색 때문이라도 fireStore를 사용하자는 쪽으로 말이 나왔을 때, 알고보니 fireStore의 where문으로도 원하는 검색 결과를 확실하게 가져오는데 문제가 있다는 것을 알게되었다. 게시글의 제목을 검색한다고 했을 때, 게시글 제목은 보통 문장형이기 때문에 조사가 붙는데, 단어만으로는 조사가 붙었을 때 검색이 되지 않는 문제가 발생할 수 있다는 것이다.
  => 이를 해결하기 위해 팀장님이 검색에 특화된 외부 데이터베이스 서비스를 함께 사용하는 방법을 찾아오셨는데, 내가 해결하기엔.. 시간 내에 완료하지 못할 가능성이 높아서 팀장님의 파트와 내 파트를 바꾸기로 했다. 팀장님도 하루 아침에 연결이 되는건 아니고 좀 더 여러 데이터베이스 서비스를 찾아보시면서 어떤 방법을 사용하면 좋을지 계속 공유해주시겠다고 했다. 그래서! 나는 게시판에서 프로필(마이페이지) 구현으로 담당이 변경되었다.
  
  

📖Profile UI 레이아웃 작업 1

• 담당이 변경된 후, 프로필 부분은 어쨌든 유저 정보가 있어야 기능 구현을 자세하게 할 수 있기 때문에, 로그인 부분을 담당하는 팀원과 속도를 맞추기 위해 레이아웃 그리는 작업 부터 들어갔다. 이번에는 피그마에 디자인이 완벽한 와이어프레임이 있기 때문에, 이를 바탕으로 최대한 똑같이 구현하는 것을 목표로 레이아웃을 그렸다.

• 이미지와 텍스트를 넣어서 프로필 정보를 구현하는 것은 당연히 문제가 없었는데, 탭 레이아웃을 통해 북마크아이템과, 작성한 게시글을 보여주기로 한 것에서 문제가 발생했다. 프로필에서 구현하고 싶은 모습은 탭 레이아웃의 탭에서 북마크아이템(몇개), 작성한 게시글(몇개) 이렇게 보여주는 형태였는데, 저 몇개. 를 표현하기 위해서 어떻게 해야할지 고민이었던 것이다.
  => 일단은 머티리얼 디자인에서 tabs 속성을 자세히 살펴보았더니, 뱃지에 대한 기능이 있었다. 알림 개수 같은 모습이긴 하지만 어쨌든 개수를 표시하는데에는 코드로 매번 세팅하고 눌러도 바로 사라지는게 아니라는 것을 알게 되어서 뱃지를 사용해보기로 했다.

   //xml에 있는 TabLayout과 뷰바인딩을 통한 연결
    val tabLayout = binding.tabProfile
    //탭레이아웃에서 0번째 탭을 getTabAt을 통해 가져오기
     val bookmarkedTab = tabLayout.getTabAt(0)
     //가져온 0번째 탭에 orCreateBadge를 통해 뱃지를 생성하여 숫자 할당
     bookmarkedTab?.orCreateBadge?.number = 30
     
     val badge = bookmarkedTab?.badge
     //badgeGravity를 통해 위치조정이 가능하다. 제공되는 위치가 한정적이다
     badge?.badgeGravity = BadgeDrawable.BOTTOM_END
     // 뱃지의 배경색 변경가능. 여기서 TRANSPARENT는 투명을 뜻함
     badge?.backgroundColor = Color.TRANSPARENT
     // 뱃지의 텍스트 색 변경가능
     badge?.badgeTextColor = Color.GRAY

  구현과정에는 어려운게 없었으나, 뱃지의 배경색, 뱃지텍스트색이 변경은 가능해도, 위치를 조정하는데에 상당히 제한적이라는 것을 알게되었다.

• 그리고 res에 있는 테마의 스타일을 통해서 탭레이아웃의 디자인을 변경할 때 <item name="tabIndicatorColor">로 인디케이터 색은 변경이 바로 적용되었는데, <item name="android:fontFamily">를 통한 폰트 변경이나 <item name="android:textSize"> 같은 textsize변경은 탭레이아웃 디자인에 적용이 되지 않았다. 탭 모양을 TabLayout.Secondary 모양으로 하기로 해서 parent="Widget.Material3.TabLayout.Secondary"를 이렇게 잡아서 텍스트 관련된 요소들이 적용이 안되었던 걸까? 테마를 이중? 삼중?으로 잡으면 고칠 수 있긴 있을 것도 같은데 어쨋거나 일단 뱃지가 위치가 제한적인 것과 더불어 텍스트를 가리는 치명적인 문제가 발생했기 때문에,
  => 리사이클러뷰 아이템에 스와이프 기능을 사용하면서 탭 자체를 넘기는 스크롤 기능을 끄기로 사전에 합의가 있었던 것이 기억나서, 모양만 탭레이아웃형태를 따라가고 그냥 버튼 형식으로 아이템을 오가는 모습으로 만들기로 팀원들께 설명을 드리고 합의를 보았다.

---

✏ 느낀 점

• 게시판 CRUD는 부담스럽긴 해도 이전에 자바로 만들어 본 경험이 있었어서 어떻게든 되겠지란 마음으로 해보겠다고 한거였는데, 외부.. 데이터베이스를 새로 연결해야한다? 그것도 연동으로 해야한다? 이건 확실히 지금의 내가 시간 내에 하기엔 여러가지 부분에서 부담이 너무 컸다. 팀장님이 선뜻 먼저 바꾸자고 해주셔서 감사하다.

• UI 구현은 오늘 또 결국 한번에 되는 일이 없다..ㅎㅎ 예전에 수준별 수업에서 클론 UI로 탭레이아웃을 만들어본 적이 있는데, 그때 이걸 이렇게 visvilty로 막 만들어도 되는지 고민이 많았는데, 결국 이번에도 그렇게 되어 버렸다.ㅎ 그때보다 심각해진건가? 그땐 탭레이아웃 위젯이라도 썼지.. 지금은 그냥 냅다 layout영역을 버튼으로 만든거니까..ㅎㅎ 중요한건 이부분이 마이페이지와 다른유저페이지 등 두어곳에서 사용된다는건데.. 포폴 코드니까.. 조금 뜯어봤을 떄 보고 어떻게 생각하시려나? 하는 ..ㅎㅎ 그런 걱정이 있긴하다. 음. 근데 고칠 수 있는거니까.. ...... 뭐 맘만 먹으면 고칠 수 있을 것같다. 아니면 튜터님을 방문해서 언제 한 번 조언을 구해봐야겠다.