나만의 안드로이드 앱 만들기(초보자 편) - UI (6-6)
이번 편은 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)
본 편부터 실질적인 앱 개발을 진행 해볼 예정입니다. 큰 맥락에서의 작업은 다음과 같습니다. 메인의 홈 탭을 구성합니다. 현재 진행 중인 더치페이의 총합을 표시합니다. 더치 페이 추가 가능
victorywskim.tistory.com
감사합니다.
