1. 문제
웹 브라우저에서 뒤로가기를 누르거나 새로고침을 하면 페이지를 찾을 수 없다는 에러 화면이 나타납니다.
하나의 화면 안에서 모든 게 처리되는 최신 웹(SPA) 구조를 일반 서버가 제대로 이해하지 못해 발생하는 문제입니다.
2. 왜 필요한가
사용자는 앱처럼 부드럽게 동작하는 웹 환경을 기대하기 때문입니다.
조금만 화면 전환이 부자연스럽거나 에러가 발생하면 서비스의 전문성에 대한 신뢰가 급격히 무너집니다.
3. 기대효과
모바일 앱과 똑같이 매끄럽고 빠른 화면 전환이 가능해져 웹 사용자의 이탈률이 크게 줄어듭니다.
어떤 경로로 접근하든 항상 올바른 화면이 즉시 표시되어 쾌적한 브라우징 경험을 선사합니다.
4. 구현 방향
트래픽을 안내하는 웹 서버(Nginx)가 새로고침 요청을 똑똑하게 가로채어, 빈 화면 대신 메인 페이지 뼈대를 띄워주도록 설정합니다.
백엔드 서버와 프론트엔드 화면 로딩 규칙을 깔끔하게 정리하여 충돌을 없앴습니다.
location / {
root /var/www/flutter_web;
index index.html;
# SPA 새로고침 시 404 방지, 메인 index.html로 우회
try_files $uri $uri/ /index.html;
}
5. 비즈니스 가치
앱 설치를 부담스러워하는 잠재 고객을 웹에서 쉽게 확보할 수 있어, 마케팅 유입 효율이 극대화됩니다.
웹에서의 완벽한 경험은 앱 다운로드로 이어지는 가장 강력한 미끼가 됩니다.