보기 - FOUC(Flash of Unstyled Content) 현상

목록으로 메인으로

흰색 배경이 잠깐 보이는 현상은 FOUC(Flash of Unstyled Content)라고 불리는 현상입니다. 브라우저가 HTML을 위에서 아래로 읽으면서 CSS와 JS를 처리하는데, 테마를 결정하는 자바스크립트가 DOMContentLoaded 이후나 body 하단에서 실행되면 브라우저는 이미 기본값(흰색 배경)으로 화면을 한 번 그린 상태이기 때문입니다.

이를 해결하려면 테마 감지 스크립트를 <head> 섹션의 가장 윗부분에 배치하여 브라우저가 화면을 그리기 전에 테마 속성을 주입해야 합니다. 또한 요청하신 대로 다크모드의 텍스트 명도를 낮추어 눈의 피로를 줄였습니다.

수정된 코드 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enzycept Plus Solution - Trend Analysis</title>

    <script>
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            document.documentElement.setAttribute('data-theme', savedTheme);
        })();
    </script>

    <style>
        /* 기본 변수 설정 */
        :root {
            --bg-color: #ffffff;
            --text-color: #212529;
            --header-bg: #f8f9fa;
            --border-color: #dee2e6;
            --card-bg: #ffffff;
        }

        /* 2. 다크모드 색상 최적화 (명도 조절) */
        [data-theme="dark"] {
            --bg-color: #0d1117;
            /* 텍스트 명도를 #e0e0e0에서 #b0b8c1로 낮춰 눈부심 방지 */
            --text-color: #b0b8c1; 
            --header-bg: #161b22;
            --border-color: #30363d;
            --card-bg: #1c2128;
        }

        /* 배경색 깜빡임 방지를 위한 초기 설정 */
        html, body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        /* ... 기존 스타일 유지 ... */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        /* (나머지 CSS 생략 - 기존과 동일) */
    </style>
</head>
<body>
    <script>
        // 3. 테마 적용 및 토글 함수 최적화
        function applyTheme(theme) {
            const root = document.documentElement;
            const btn = document.getElementById('themeBtn');

            root.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);

            if (theme === 'dark') {
                btn.textContent = '☀️ Light Mode';
                updatePlotTheme('dark');
            } else {
                btn.textContent = '🌙 Dark Mode';
                updatePlotTheme('light');
            }
        }

        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            applyTheme(newTheme);
        }

        // 페이지 로드 시 버튼 상태와 차트 테마 동기화
        document.addEventListener('DOMContentLoaded', function() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            applyTheme(currentTheme);
        });

        // (Plotly 관련 스크립트 및 나머지 유지)
    </script>
</body>
</html>

주요 변경 사항 설명

깜빡임 차단 (Head Script):
<head> 태그 안에서 스타일 시트가 로드되기 직전이나 직후에 즉시 실행되는 스크립트를 넣었습니다.
document.documentElement.setAttribute('data-theme', ...)를 호출하면 브라우저가 첫 번째 픽셀을 그리기(Paint) 전에 이미 data-theme 속성이 적용되므로 흰색 배경이 나타나지 않습니다.
텍스트 명도 조절:
기존 --text-color: #e0e0e0는 순백색에 가까워 다크모드에서 대비가 너무 강할 수 있습니다.
수정된 코드에서는 --text-color: #b0b8c1 (부드러운 회색조 파란색)을 사용하여 가독성은 유지하면서 눈의 피로도를 낮췄습니다.
배경색 동기화:
:root와 [data-theme="dark"]에 정의된 --bg-color를 html과 body 태그에 즉시 적용하여 스타일이 로드되는 순간부터 다크모드 배경이 보이도록 설정했습니다.

상세 정보

생성일: 2025-12-28
수정일: 2025-12-28

이 아이템이 링크하는 문서

링크된 문서가 없습니다.

이 아이템을 참조하는 문서

참조하는 문서가 없습니다.

액션

수정

공유 & 관리

복제

FOUC(Flash of Unstyled Content) 현상