[프로젝트] 애블바디_0708 :: 온보딩/Splash

Android에서 진행하는 Compose Camp, Wanted에서 하는 프리온보딩 챌린지에서 Compose에 대해 배우긴 했지만 제대로 공부하지 않았다. 그래서 한 번 정리해야겠다 생각은 하고 있었는데 이 프로젝트를 하면서 공부도 할 겸 Compose를 쓰기로 결정했다.

🥎Jetpack Compose

구글에서는 개발자들이 쉽게 모범적인 코드를 작성하고 보일러 플레이트 코드는 줄일 수 있도록 라이브러리 모음을 제공하는데 이것을 Jetpack 이라고 합니다.
Compose는 선언형 UI 개발을 가능하게 하는 안드로이드 프레임워크입니다.
한 마디로 Compose는 개발자들이 편하게 UI 개발하라고 만든 툴킷입니다.

💪선언형 프로그래밍

• 명령
  "헬로우 월드 텍스트 적어줘!" 라는 식의 말을 하듯이 선언을 한다.
  구현 방법은 신경쓰지 않고 무엇을 만들지 명령을 내리는 방식입니다.

//글자 "hello Word "
Text("hello Word")

---

• UI 상태 지정
  파라미터안에서 지정할 수 있다.

Text(
    ntext = "나만의 운동 스타일을 찾다\n애블바디",
    style = TextStyle(
    fontSize = 12.sp,
    lineHeight = 35.sp,
    fontFamily = FontFamily(Font(R.font.noto_sans_cjkr_black)),
    fontWeight = FontWeight(400),
    color = SmallTextGrey,
    )
)

💪기존의 방식

xml에다가 UI 속성을 정의를 하고, Class에서 프로그래밍으로 정의를 함

이 과정에서 불필요한 반복 코드 (보일러 플레이트 코드)가 매우 많이 생성되고, 사람이 직접 로직을 만들면서 생기는 작은 실수들, 버그 및 불필요한 작업 시간이 매우 소요됨.

💪Compose를 쓰는 이유

1) Compose는 Kotlin으로 제작된 UI 제작 도구
2) Compose는 불필요한 보일러플레이트 코드가 줄어듬
3) Compose는 직관적인 코드로 UI를 만들 수 있음
4) Class에서 실시간 미리보기 지원

🥎코드 작성

• 안드로이드 공식 문서 참고(아래 이미지 클릭 시 이동)
  

1. 설정

• 앱 모듈의 build.gradle 파일에서 다음 종속 항목을 사용

dependencies {
    val nav_version = "2.5.3"

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

2. 시작하기

• NavController
  
  NavController는 Navigation 구성요소의 중심 API로, 스테이트풀(Stateful)이며 앱의 화면과 각 화면 상태를 구성하는 컴포저블의 백 스택을 추적합니다.
  
  컴포저블에서 rememberNavController() 메서드를 사용하여 NavController를 만들 수 있습니다.

val navController = rememberNavController()

3. NavHost 만들기

• 각 NavController를 단일 NavHost 컴포저블과 연결해야 합니다. NavHost는 구성 가능한 대상을 지정하는 탐색 그래프와 NavController를 연결합니다. NavHost를 만들려면 이전에 rememberNavController()를 통해 만든 NavController뿐만 아니라 그래프의 시작 대상 경로도 필요합니다.

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { Profile(/*...*/) }
    composable("friendslist") { FriendsList(/*...*/) }
    /*...*/
}

4. 컴포저블로 이동

• 탐색 그래프에서 구성 가능한 대상으로 이동하려면 navigate 메서드를 사용해야 합니다. navigate는 대상의 경로를 나타내는 단일 String 매개변수를 사용합니다.

navController.navigate("friendslist")

4. 프로젝트에서 쓴 코드

• splash_screen가 1초동안 실행됐다가 main_screen으로 이동

@Composable
fun Navigation(){
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "splash_screen"){
        composable("splash_screen"){
            LogoImage()
            LaunchedEffect(key1 = true){
                delay(1000L)
                navController.navigate("main_screen")
            }
        }
        composable("main_screen"){
            IntroScreen()
        }
    }
}

🌝 정리

하루가 지났을 때는 그냥 xml로 할까 생각해서 팀원한테 물어봤는데 쓰다보면 compose가 편할 거라고 해서 끝까지 해보기로 했다.

마지막엔 어떤 잘생긴(?) 외국인 유튜버가 찍어놓은 강좌보고 구현해보고 gpt한테도 물어보면서 구현할 수 있었다.

오랜만에 써보는 Compose라서 그런지 엄청 헷갈렸고 splash 화면 하나만 구현하는데도 이틀정도 걸린 것 같다 😅