나만의 안드로이드 앱 만들기(초보자 편) - UI (6-6)

이번 편은 UI 입니다.

 

전체 코드는 다음과 같습니다.

https://github.com/tmvlke/SimpleDutch/tree/22bff04ce892503bce7c4e8f081557289f5d4a62/app/src/main/kotlin/wskim/aos/simpledutch/ui

 

큰 틀은 다음과 같습니다.

- feature

- navigation

- theme

 

feature 는 실제 화면을 정의하는 부분입니다.

 

이 프로젝트는 MVI 라는 디자인 패턴을 사용하고 있고, 그에 따른 구조를 취하고 있습니다.

 

MainScreen.kt 은 실제 화면을 구성하는 부분이고, MainContract 는 뷰모델의 속성을 정의하는 부분, MainViewModel 은 뷰의 행동을 정의하는 부분입니다.

 

이 포스팅에서 이 부분을 상세하게 설명하기에는 설명이 너무 길어질 수 있어서 추후 개발 시 좀 더 상세하게 설명드리겠습니다.

 

navigation 에서는 화면들의 구조를 정의하고 있습니다.

 

이번 프로젝트는 싱글 엑티비티를 사용하고 있으며, NavGraph.kt 가 가장 중요한 역할을 수행하고 있습니다.

 

page 안에는 feature 에서 정의한 화면을 하나의 페이지로써 정의하기 위한 컴포저블들이 모여 있습니다.

MainTabEnum 은 메인 안에 탭이 어떤 것들로 구성되어 있는지를 정의하고 있습니다.

NavGraph.kt 는 인앱의 페이지가 실제로 어떤 것들이 있는지를 정의하고 있으며, 인터렉션 등도 정의하고 있습니다.

PageEffect.kt는 NavGraph.kt 에서 사용할 인터렉션을 정의하고 있습니다.

PageList.kt 는 NavGraph.kt 에서 정의할 페이지 이름을 정의하고 있습니다.

PageMoveActions.kt 는 NavGraph.kt 에서 정의한 페이지로 이동하기 위한 액션을 정의하고 있습니다.

ScreenBundleUtils 는 이동할 페이지에 값을 전달하기 위한 기능을 정의하고 있습니다.

 

 

앱이 실행되면 MainActivity 를 실행하게 되는데 그때 NavGraph.kt 를 통해 앱의 화면이 유저에게 노출되게 됩니다.

 

이 파일들을 이용해서 페이지를 추가할때 PageList.kt 에 추가할 페이지를 정의하고 NavGraph.kt 에 실제로 등록하면서 페이지를 만들고 하는 일련에 과정들이 있는데 이 부분 또한 추후 개발 시에 좀 더 상세하게 설명드리겠습니다.

 

마지막으로 theme은 처음 안드로이드 프로젝트를 compose 로 생성하면 만들어주는 기본 디렉터리입니다.

 

인앱에서 사용되는 색상과 테마, 폰트 스타일 등을 정의하고 있습니다.

 

여기까지의 기초 구조를 기반으로 앱을 실행하면 다음과 같은 화면을 확인 하실 수 있습니다.

 

여기까지 기초 구조에 대한 소개를 마치려고 합니다.

 

기초 구조는 개발이 숙달됨에 따라 개발자마다 본인 스타일로 얼마든지 커스터마이징이 가능한 부분입니다.

 

제가 설계한 기초 구조도 그 중 하나의 방법론이며, 정답은 아닙니다.

 

단 개발에 갓 입문하신 분들이라면 어느정도는 유의미한 개발을 하시는데 도움이 되시지 않을까 하는 생각입니다.

 

다음 편 부터는 이 빈껍데기 앱에 화면 및 기능을 추가해보도록 하겠습니다.

나만의 안드로이드 앱 만들기(초보자 편) - 페이지 구성 (7)

 

감사합니다.