앱 제작 (1) 브레이브걸스 앱

안녕하세요 Loner입니다.

한달전에 유명 아이돌 브레이브걸스에 빠졌었고

내가 브레이브 걸스를 더 편하게 덕질하기 위한 앱을 만들었습니다.

아래가 그 결과물 입니다. 

https://drive.google.com/file/d/18F2rFng7_KkROC9iuxna7d-sRpg7KlgL/view?usp=sharing 

피어레스덕질앱_베타.apk

1. 앱 기능 설명

제작기간: 4일

 

1) 노래별 사진첩 

-> 미리 해당 노래앨범의 사진을 준비한다긴 보다 브레이브걸스의 활동사진을

노래별로 간직했으면 해서 넣어둔 기능입니다.

사용자가 임의로 앨범 사진을 삽입해서 브레이브걸스 활동 사진들을

노래 분류 별로 앱에다 저장해놓을 수 있습니다.

이렇게 앨범 리스트를 볼 수 있습니다.

해당 앨범을 누른 화면 입니다. 우측 상단 아래 버튼을 누르면

 

갤러리 화면이 뜹니다.

 

사진 하나 선택시 보고있는 앨범에 추가 됩니다.

 

 

2) 브레이브걸스 스케줄 캘린더 빠르게 보기

메인화면에 있는 버튼을 눌러서 언제든지 빠르게 스케줄을 확인할 수 있도록 적용했습니다.

단순 웹뷰입니다.

 

메인 화면 우측 하단에 이 작은 버튼을 누르면 바로

공식 카페의 캘린더 화면으로 이동합니다.

언제든지 빠르게 멤버들의 소식을 접했으면 해서 적용했습니다.

3) 브레이브걸스 공식 카페 빠르게 보기

->메인 하단 바 아이콘 클릭으로 브레이브 걸스 공식카페를 빠르게 볼 수 있습니다.

아이콘 클릭으로 간단하게 화면 이동

4) 브레이브걸스 갤러리 빠르게 보기

-> 3번과 마찬가지로 메인 하단 바 아이콘 클릭으로 디시인사이드 브레이브걸스 갤러리를 빠르게 볼 수 있습니다.

아이콘 이동으로 간단하게 화면 이동

3~4)

-> 사용자가 마지막으로 봤던 페이지가 저장됩니다. 예를들어

공식카페의 특정글을 보다가 갤러리로 잠깐이동하고

다시 공식카페 아이콘을 클릭하면 마지막으로 보던 페이지가 그대로 존재합니다.

 

5) 기타 문의 및 UI신경

-> 공식카페나 갤러리를 전체화면으로 언제든지 볼 수 있도록 하단바 왼쪽 위에 작은 아이콘을 클릭하면 

하단바가 사라지거나 보이게끔 사용 할 수 있습니다.

하단에 화살표 버튼을 누르면 

 

하단바가 사라집니다. 

-> 사이드 협업으로 만들 새로운 브레이브걸스앱 홍보, 

앱 제작자에게 email 보내기 기능

피어레스에게 푸쉬 보내기는 사용하지 않습니다.

 

ps. 바텀네비게이션 바와 drawer Naviagation Bar가 같이 있는 것은 머트리얼 디자인에서 권장하지 않지만

넣고 싶어서 넣음. 

 

ps2. 네비게이션 바의 icon text가 간단 명료 하기를 머트리얼 디자인에서 권장 하지만 이도 마찬가지로 무시

 

2. 앱 제작 과정

설계: 안드로이드 권장 아키텍처

사용라이브러리: ViewModel, Room ,Glide 등등..

 

 

??. 심플하게 제작된 앱이고, 추가 변경이 없을 앱인데 AAC로 진행한 이유?

-> 원래는 오랜기간 제작기간을 들여서 다른 브레이브걸스 팬들의 요구사항을 넣어서 수정을 하기 위해서 

유지보수를 고려해서 제작하는 기획이었기 때문입니다.  (현재는 버그 수정이나 작은 기능 추가 외에는

추가 기능 업데이트가 지원되지 않습니다.)

레이어 구성: model, repositroty, viewmodel, view

???. 추가 기능 제작 중단 이유?

-> 앱을 보시면 피어레스에게 푸쉬 보내기 기능이 작업 중단됨을 알 수가 있습니다.

왜냐하면 브레이브걸스를 좋아하는 개발자가 똘똘 뭉쳐서 새로운 앱을 만들고 있기 때문입니다.

해당앱은 ios, android를 모두 지원하는 앱으로 만들어집니다.

(제작 툴:Flutter)

 

2-1 디자인

 

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee 

Color Tool - Material Design

머트리얼 디자인 공식사이트에서 지원해주는 Color Tool로 Color 지정

Primary, primaryDark, PrimaryLight 3가지 주요 색상 추출 

머트리얼 디자인의 예제 화면들을 참고 해서 제작

 

 

 

2-2 앱의 실제 설계

(1) Model

-Entity 정의. 

비즈니스 로직을 실행해줄 Dao 정의. 

(2) Repository 

인터페이스를 따로 만들어서 각각역활을 두고 실제 구현 시 데이터 로직을 변경 할 수 있도록 설정 

 

(3) ViewModel

- Room에서 데이터를 가져오도록 설정 LiveData로 옵저빙 할준비 

- Repository는 당연히 ViewModelFactory를 통해 인자로 받는다.

- 비즈니스 로직에 관한 책임은 Repositroy에게 일임해서 ViewModel의 부담을 덜어준다.

- 위와 같이 설정하면 앱 아키텍처 가이드에 따라 Model에 따라 UI가 갱신된다.

-jackPack 의 좋은점으로 라이프사이클을 쉽게 관리할 수 있다는점이다. 뷰모델 스코프를 응용했다.

 

(4) View

-View는 ViewModel을 관찰합니다. 변화시 값을 받아옵니다.

 

(5) 데이터 바인딩 사용

-bindingAdapter를 함께써서 xml이 view의 역활을 상당 부분 맡도록 했다.

 

3. 기억에 남는 점 

- WebView를 제대로 사용해본 경험이 없었기 때문에 간단히 홈페이지 화면만 뛰우면 설정할게 없는줄 

알았는데 Ssl 에러 대비를 좀 해야했었음

 

- Fragment에서 디프리케이티드된 onActivityResult를 대신해서 registerForActivityResult를 사용

registerForActivityResult는 생명주기에 따라 잘 사용을 해줘야함. 

 

- Room에서 Qurey로 특정 item을 가져올 때 query함수 인자로 Key를 넣어줘야하기 때문에

아래와 같은 방법으로 라이브데이터를 활용함

@Query("SELECT * FROM Song WHERE idx = :key")
fun getSong(key:String): Song

 

//ViewModel

private var _songData = MutableLiveData<Song>()
  val songData: LiveData<Song>
      get() = _songData
        
               
fun getSong(idx: String) {
  viewModelScope.launch(Dispatchers.IO) {
   _songData.postValue(repo.getSong(idx))
  }
}

- 구글 예제코드 따라서 ViewModel의 LiveData의 값이 변환시 뷰의 클릭리스너가 실행되도록 해봄

 

-Room에서 Update 할때 따로 정의한 클래스가 Entity DB에업데이트 할때

아래와 같은 방식을 사용하면 됨

 

//커스텀 클래스
//imageList의 필드를 Song db에 업데이트 할 예정
@Entity
data class SongImageUpdate(
    @PrimaryKey
    val idx:String,
    @TypeConverters(TypeConverterImageList::class)
    val ImageList:List<String>
)

 

 //Dao
 //업데이터할 db를 지정한다. Song::class
 @Update(entity = Song::class)
 fun updateSongImageList(imageUpdate: SongImageUpdate)

위 함수 실행시 Song 테이블의 해당 key를 가진 Row가 Update됬다.

 

4. 정리

내가 만든 앱을 써서 쉽게 브레이브걸스 덕질을 할 수 있어서 매우 편리했다. 

앱은 개발지식 공부도 중요하지만 결국 이 도구들을 활용해 완성도 있는

제품을 만들어내는 것이 최종적인 목표라 생각한다. 

 

즉, 잘 만들어서 좋게 쓰는중이다~ 위 앱은 구글플레이에 따로 올리지 않았으니

위 링크를 통해서 다운받아 사용이 가능하다.