[Trouble Shooting] 로딩 상태 관리 - splash screen이슈

[sgoldenbird]

🐞 문제 상황 (Problem Description)

앱 진입 시 꽤 오래 흰 화면이 보이며 UX 관점에서도 이질감을 줄 수 있는 초기 화면 전환 문제가 있었다.
이를 보완하기 위해 splash screen을 만들어 초기 로딩 상태 또는 새로고침 상태일 때 띄우기로 했다.
처음에는 index.html에서 직접 static splash screen을 띄우는 방식으로 초기 로딩 화면을 구현했지만,
이 방식은 React 앱 외부에서 동작하며, React Router 기반의 페이지 구조와 분리되어 있어 구조적으로 어색하고 유지보수에 불리한 점이 있었다.

---

💻 환경 정보 (Environment)

• 브라우저: Chrome 123
• 프론트엔드 프레임워크: React 19, Vite 사용
• 배포 환경: 배포 전
• API 서버: fandom-k-api.vercel.app(외부 REST API, 수정 불가)

---

🔍 발생 원인 분석 (Investigation)

• index.html에 splash screen을 두면 로딩 시점은 빠르지만, 해당 로직이 React 앱과 완전히 분리되어 동기화가 불가능함
• 특히 현재 프로젝트는 React Router를 사용하고 있어, 라우팅 완료 후 보여지는 뷰와 splash 화면의 타이밍 조율이 어려움
• react-router를 통해 routing 처리를 하고 있는데 관련 코드가 index.html에 동떨어져있는 것도 좋아보이지 않음
• 또 React 상태와 연동해 splash 화면을 제어하고자 했으나, 기존 방식은 React 마운트 이전 시점이라 접근 불가
• 흰 화면이 보이는 원인은 React 앱 초기 로딩 시간과 splash 화면 제거 타이밍 간의 비동기 차이로 인한 것

---

🛠 시도해본 해결 방법 (Attempts)

시도 내용	결과
index.html에서 splash screen 구성	React 외부에서 동작하므로 상태 기반 제어 불가, 코드 분리 문제, 반면 빠르게 적용
React 상태 기반 splash screen 구현	상태로 로딩 관리 가능, 라우팅 흐름과도 자연스럽게 연동됨
splash 제거 타이밍을 navState === 'idle' 기준으로 처리	Router 완료 시점과 정확히 연동 가능
초반 흰 화면 대신 background color 지정	완전한 해결은 아니지만 사용자 관점에서 이질감 감소

---

✅ 최종 해결 방법 (Final Solution)

• React 상태 기반 방식으로 변경.
  초반에 흰 화면이 나타나고, 별이 굴러가다 끝남에도 react-router를 통해 routing 처리를 하고 있는데 관련 코드가 index.html에 동떨어져있는 것이 좋아보이지 않고, 이후에도 splash 관련 동작을 상태나 로딩 흐름과 연계하려면 React 내부에서 통합 관리하는 편이 유지보수에 용이하다고 판단
• splash 화면을 index.html에서 제거하고, React 내부 상태 기반으로 관리
• main.jsx에서 App을 바로 렌더링 하고 App.jsx에서는 splash screen의 상태를 true로 줘서 App이 마운트 되면 splash screen이 바로 보이게 하고 useNavigation()훅으로 가져온 navState가 idle이 되면 splash screen이 꺼지는 로직을 구현
• 기존의 App역할은 Root.jsx를 생성해 Root가 수행
• 하지만 만약 조금이라도 빠르게 로딩 화면을 보여주어야 하고 흰 화면을 보여주지 않는것의 우선순위가 높다면 index.html + App에서 로딩 제공을 하는것이 적절할 것 같음
• 그러나 실제로 새로운 사이트에 들어가면 흰 화면이 보이는 것은 자연스러운 동작이고, SPA특성상 초기 흰 화면이 나타나는 현상은 완전히 해결되지는 않았지만, body background 색상을 splash 화면과 동일하게 지정하여 전환 이질감을 최소화

결과적으로 구조적으로 더 일관되고 유지보수 가능한 방식으로 전환되었고, 사용자 입장에서도 덜 어색한 초기 화면 흐름을 제공

splash.mp4

---

💡 알게 된 점 (Lessons Learned)

• React를 사용한다면 React 상태 기반으로 통합하는 것이 코드 구조상 명확하고 확장에도 유리하다는 것을 체감했다.
• index.html에서 splash를 처리하면 빠르게 보여줄 수는 있지만, React 앱이 준비되지 않아도 동작할 수 있어 상태 동기화나 제거 타이밍 조절이 어렵다. (DOMContentLoaded 이벤트가 react의 앱이 준비되었다는 의미는 아니다. 따라서 React 앱이 준비되지 않아도 실행될 수 있다.)
• 로딩 흐름을 사용자 경험만으로 판단하기보다 유지보수성과 구조적 통합성도 함께 고려해야 한다는 점을 배웠다.
• 실제로 많은 사이트에서도 최초 진입 시 흰 화면이 보이는 것은 자연스러운 흐름이므로, 이를 억지로 숨기기보다는 전반적인 초기 렌더링 속도를 줄이는 것이 더 중요한 방향일 수 있다.

---

📚 래퍼런스

• https://www.saurabhmisra.dev/react-router-splash-screen/