스플래시 화면 최적화: 네이티브 스플래시 화면 제거 및 Capacitor 스플래시 화면 개선

android/app/src/main/java/com/lovable/zellyfinance/MainActivity.java

@@ -11,7 +11,7 @@ public class MainActivity extends BridgeActivity {
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         
-        // 스플래시 화면 처리를 위한 추가 초기화 코드
+        // Capacitor 스플래시 화면 플러그인 등록
         registerPlugin(SplashScreenPlugin.class);
     }
 }

android/app/src/main/res/drawable/splash_screen.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@color/ic_launcher_background" />
+    <item>
+        <bitmap android:src="@drawable/splash" android:gravity="center" />
+    </item>
+</layer-list>

android/app/src/main/res/values/styles.xml

@@ -17,8 +17,10 @@
 
 
     <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
-        <item name="android:background">@drawable/splash</item>
+        <item name="android:background">#00000000</item>
         <item name="android:statusBarColor">@color/ic_launcher_background</item>
         <item name="android:windowFullscreen">true</item>
+        <item name="android:windowDisablePreview">false</item>
+        <item name="android:windowContentTransitions">true</item>
     </style>
 </resources>

capacitor.config.ts

@@ -11,10 +11,14 @@ const config: CapacitorConfig = {
   },
   plugins: {
     SplashScreen: {
-      launchShowDuration: 2000,
+      launchShowDuration: 1000,
-      backgroundColor: "#f2f2f2",
+      launchAutoHide: true,
-      androidScaleType: "CENTER_CROP",
+      androidSplashResourceName: "splash",
-      showSpinner: false
+      splashFullScreen: true,
+      splashImmersive: true,
+      showSpinner: false,
+      androidScaleType: "CENTER_INSIDE",
+      backgroundColor: "#FFFFFF"
     },
     Keyboard: {
       resize: "body",

src/App.tsx

@@ -1,6 +1,7 @@
 
 import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { SplashScreen } from '@capacitor/splash-screen';
 import './App.css';
 import Login from './pages/Login';
 import Register from './pages/Register';
@@ -20,8 +21,6 @@ import PaymentMethods from './pages/PaymentMethods';
 import Settings from './pages/Settings';
 import { BudgetProvider } from './contexts/BudgetContext';
 import PrivateRoute from './components/auth/PrivateRoute';
-import { SplashScreen } from '@capacitor/splash-screen';
-
 // 전역 오류 핸들러
 const handleError = (error: any) => {
   console.error('앱 오류 발생:', error);
@@ -73,12 +72,40 @@ class ErrorBoundary extends React.Component<
 }
 
 function App() {
-  // 앱 시작 시 스플래시 화면 초기화
+  // 앱 로딩이 완료되었을 때 스플래시 화면을 숨김
   useEffect(() => {
-    // 스플래시 화면 표시 시간 설정 (3초)
+    // 웹뷰 콘텐츠가 완전히 로드되었을 때만 스플래시 화면을 숨김
-    setTimeout(() => {
+    const onAppReady = async () => {
-      SplashScreen.hide();
+      try {
-    }, 3000);
+        // 1초 후에 스플래시 화면을 숨김 (콘텐츠가 완전히 로드될 시간 확보)
+        setTimeout(async () => {
+          try {
+            await SplashScreen.hide();
+            console.log('스플래시 화면 숨김 성공');
+          } catch (err) {
+            console.error('스플래시 화면 숨김 오류:', err);
+          }
+        }, 1000);
+      } catch (err) {
+        console.error('앱 준비 오류:', err);
+      }
+    };
+    
+    // 앱 준비 함수 실행
+    onAppReady();
+    
+    // 추가 보호장치: 페이지 로드 시 다시 실행
+    const handleLoad = () => {
+      setTimeout(() => {
+        SplashScreen.hide().catch(() => {});
+      }, 1000);
+    };
+    
+    window.addEventListener('load', handleLoad);
+    
+    return () => {
+      window.removeEventListener('load', handleLoad);
+    };
   }, []);
 
   return (