프론트엔드에서 앱 첫 로딩 시 빈 화면 문제 해결하기

앱을 처음 열었을 때 하얀 화면만 덜렁 보이면 좀 썰렁하잖아? 사용자한테 좋은 첫인상을 주고 싶어서, 앱 아이덴티티를 살릴 만한 걸 넣어봤지.

시도와 함정

처음에는 앱 초기에 빈 화면에 우리 정령 '리엘이'가 나와서 인사하고, 성장 바도 보여주는 기능을 넣어보려고 했어.

<!-- initial_screen.html -->
<div class="splash-screen">
  <img src="/assets/riel_greeting.png" alt="리엘이 인사">
  <div class="progress-bar-container">
    <div class="progress-bar" style="width: 0%;"></div>
  </div>
</div>

근데 이게 생각보다 쉽지 않더라. 리엘이가 나타나기 전에 화면이 잠깐 비어버리는 문제가 계속 발생했어. 마치 리엘이가 나타날 타이밍을 못 잡는 것처럼 말이야.

// App.vue
<script setup>
import { ref, onMounted } from 'vue';
import RielGreeting from './components/RielGreeting.vue';
const showRiel = ref(false);
const growthProgress = ref(0);
onMounted(() => {
setTimeout(() => {
showRiel.value = true; // 리엘이를 보여주자!
}, 500); // 0.5초 뒤에 나타나게
const interval = setInterval(() => {
if (growthProgress.value < 100) {
growthProgress.value += 10;
} else {
clearInterval(interval);
}
}, 200);
});
</script>
<template>
<div id="app">
<div v-if="!showRiel" class="initial-blank-screen"></div>
<riel-greeting v-if="showRiel" :progress="growthProgress" />
</div>
</template>
<style>
.initial-blank-screen {
width: 100%;
height: 100vh;
background-color: white; /* 하얀색 배경 */
}
</style>

분명 showRiel 값을 true로 바꾸고 있는데도, 렌더링 전에 잠깐 하얀 화면이 보이는 거야. setTimeout으로 딜레이를 줬는데도 말이지.

원인

알고 보니 Vue의 반응형 시스템과 컴포넌트 렌더링 순서 문제였어. v-if="!showRiel" 조건 때문에 riel-greeting 컴포넌트가 마운트되기 전에 빈 화면이 잠깐 렌더링되고, 그 후에 showRiel이 true로 바뀌면서 riel-greeting이 나타나는 방식이었던 거지. setTimeout은 렌더링 자체를 막아주진 못하더라.

해결

해결책은 간단했어. 빈 화면을 따로 두는 대신, riel-greeting 컴포넌트 자체가 초기에는 빈 화면처럼 보이도록 만들고, 데이터가 준비되면 내용을 보여주도록 수정한 거야.

<!-- components/RielGreeting.vue -->
<script setup>
import { computed } from 'vue';
const props = defineProps({
progress: Number
});
const progressBarWidth = computed(() => ${props.progress}%);
</script>
<template>
<div class="riel-container">
<div v-if="progress === 0" class="riel-placeholder">
<!-- 로딩 중에는 빈 화면처럼 보이게 -->
</div>
<template v-else>
<img src="/assets/riel_greeting.png" alt="리엘이 인사" class="riel-image">
<div class="progress-bar-wrapper">
<div class="progress-bar" :style="{ width: progressBarWidth }"></div>
</div>
</template>
</div>
</template>
<style scoped>
.riel-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* 기본 배경색 */
}
.riel-placeholder {
width: 100%;
height: 100%;
background-color: white; /* 초기에는 하얀색 */
}
.riel-image {
width: 150px;
height: 150px;
margin-bottom: 20px;
}
.progress-bar-wrapper {
width: 200px;
height: 10px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #4CAF50;
transition: width 0.3s ease-in-out;
}
</style>

// App.vue (수정된 부분)
<script setup>
import { ref, onMounted } from 'vue';
import RielGreeting from './components/RielGreeting.vue';

const growthProgress = ref(0);

onMounted(() => {
  const interval = setInterval(() => {
    if (growthProgress.value < 100) {
      growthProgress.value += 10;
    } else {
      clearInterval(interval);
    }
  }, 200);
});
</script>

<template>
  <div id="app">
    <riel-greeting :progress="growthProgress" />
  </div>
</template>

이제 riel-greeting 컴포넌트 자체에서 progress 값에 따라 내용을 보여줄지 말지를 결정하게 했어. progress가 0일 때는 riel-placeholder가 렌더링돼서 하얀 화면처럼 보이고, progress가 올라가면서 리엘이 이미지와 성장 바가 나타나는 거지.

결과

• 사용자에게 앱 첫 로딩 시 친근한 캐릭터 '리엘이'가 인사하는 경험을 제공했어.
• 앱의 아이덴티티를 강화하는 시각적인 요소를 추가했지.
• 더 이상 로딩 중에 텅 빈 화면을 보여주지 않아.

정리 — 같은 함정 안 빠지려면

• [ ] Vue에서 컴포넌트 렌더링 순서와 v-if 동작 방식을 정확히 이해하고 있는지 확인하자.
• [ ] setTimeout이 렌더링 자체를 막는 것이 아니라, 콜백 함수 실행 시점을 늦추는 것임을 기억하자.
• [ ] 초기 화면 로딩 시 빈 화면이 보이는 문제는, 해당 컴포넌트 자체에서 로딩 상태를 관리하고, 데이터가 준비될 때까지 placeholder를 보여주는 방식으로 해결하는 게 좋더라.
• [ ] 캐릭터나 상징적인 요소를 활용해 앱의 첫인상을 매력적으로 만드는 것을 고려해보자.