[Android] 카카오뱅크 클론 코딩

✅GIT - 코딩 컨벤션, 브랜치 컨벤션, 커밋 컨벤션 지정

✅스플래시와 네비게이션 구현

카카오뱅크 클론 코딩을 하기에 앞서 GIT 관련 컨벤션을 정하고 스플래시와 네비게이션을 구현하였습니다.

스플래시를 XML, Compose 두가지 방식으로 구현할 수 있으나, 스터디를 컴포즈를 이용해 진행했으므로 컴포즈 형태로 구현했습니다. 

 

스플래시

//SplashScreen.kt

@Composable
fun SplashScreen(navController: NavController, modifier: Modifier = Modifier) {

    LaunchedEffect(Unit) {
    	//2.5초간 화면 정지 후 main 경로로 이동
        delay(2500) 
        navController.navigate("main") { 
        	//splash 경로를 네비게이션 백스택에서 제거하여 다시 돌아오지 않도록 함
            popUpTo("splash") {
            	//화면 자체를 백 스택에서 제거
                inclusive = true
            }
            //동일한 화면이 여러번 생성되지 않도록 함
            launchSingleTop = true
        }
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = MainYellow)
            .padding(16.dp),
        contentAlignment = Alignment.TopCenter
        ) {
        Column (
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier.padding(top = 100.dp)
        ){
            Image(
                painter = painterResource(id = R.drawable.symbol_kakaobank),
                contentDescription = "카카오뱅크 로고",
                modifier = Modifier.size(75.dp)
            )
            Spacer(modifier = Modifier.height(16.dp))
        }
    }

}

구체적인 설명은 주석을 참고해주세요! 

카카오뱅크의 symbol 이미지를 res -> drawable 파일 안에 png 형태로 저장한 뒤, 해당 이미지를 SplashScreen.kt에서 불러옵니다.

 

스플래시 실행 영상

 

*XML 방식으로도 구현해보았습니다. 진행 과정에는 문제가 없지만, 이미지 오류가 발생합니다. 

//res -> values -> themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.KakaoBank" parent="android:Theme.Material.Light.NoActionBar" />
    <style name="Theme.KakaoBank.SplashScreen" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">#fffae100</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/symbol_kakaobank</item>
        <item name="postSplashScreenTheme">@style/Theme.KakaoBank</item>
    </style>
</resources>

//res -> drawable -> symbol_kakaobank.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="150dp" android:viewportHeight="2000" android:viewportWidth="1600" android:width="120dp">
      
    <path android:fillColor="#1e1e1e" android:pathData="M1354.7,1000c148.9,-98.4 246.8,-267.4 245.3,-459.5C1597.9,238.9 1344.2,0 1042.6,0H60C26.8,0 0,26.8 0,60v1880c0,33.2 26.8,60 60,60h982.6c301,0 555.3,-238.9 557.4,-540.5 1.6,-192.1 -96.3,-361.6 -245.3,-459.5ZM868.4,1480h-220v-960h220v960Z" android:strokeWidth="0" android:scaleType="fitCenter"/>
    
</vector>

//build.gradle dependency
// Splash API
    implementation("androidx.core:core-splashscreen:1.0.0")

//AndroidManifest.xml
android:theme="@style/Theme.KakaoBank.SplashScreen">

 

새롭게 알게 된 내용

📍Splash 가 가장 첫 화면으로 지정되는 이유

NavHost(
    navController = navController,
    startDestination = "splash" // 첫 화면으로 "splash"를 지정
) {
    composable("splash") { SplashScreen(navController = authNavigator.navController) }
}

KakaoNavHost.kt에서 splash를 가장 첫 화면으로 지정 중

"splash" 경로와 연결된 컴포저블이 SplashScreen 함수로 설정됨

 

📍스플래시에서 메인 페이지로 리다이렉트 되는 과정

LaunchedEffect(Unit) {
    delay(2500) 
    navController.navigate("main") { 
        popUpTo("splash") {
            inclusive = true
        }
        launchSingleTop = true
    }
}

딜레이 이후 main 페이지로 이동

스플래시 또한 하나의 페이지이므로 네비게이션에서 '뒤로 가기' 버튼을 눌렀을 때 해당 페이지로 이동 가능

따라서 백스택에서 스플래시 제거 해줘야 함