모바일 최적화가 매출에 미치는 영향 (실제 데이터 기반)

// 페이지 로드 시간 측정
const measureLoadTime = () => {
    const navigationTiming = performance.getEntriesByType('navigation')[0];
    const loadTime = navigationTiming.loadEventEnd - navigationTiming.startTime;
    
    // Google Analytics에 데이터 전송
    gtag('event', 'page_load', {
        'event_category': 'Performance',
        'event_label': 'Load Time',
        'value': Math.round(loadTime)
    });
};

interface IImageOptimization {
    src: string;
    width: number;
    height: number;
    quality?: number;
}

// 반응형 이미지 컴포넌트
const ResponsiveImage: React.FC<IImageOptimization> = ({
    src,
    width,
    height,
    quality = 75
}) => {
    return (
        <Image
            src={src}
            width={width}
            height={height}
            quality={quality}
            loading="lazy"
            sizes="(max-width: 768px) 100vw, 50vw"
        />
    );
};

/* 터치 타겟 크기 최적화 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    margin: 4px;
}

/* 터치 피드백 */
.touch-target:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

// 성능 메트릭 측정
const measureCLS = () => {
    new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
            if (!entry.hadRecentInput) {
                const cls = entry.value;
                console.log(`CLS: ${cls}`);
            }
        }
    }).observe({entryTypes: ['layout-shift']});
};

interface IMobileUXCheck {
    touchTargetSize: boolean;
    fontReadability: boolean;
    contentWidth: boolean;
    interactionFeedback: boolean;
}

const checkMobileUX = (): IMobileUXCheck => {
    return {
        touchTargetSize: checkTouchTargets(),
        fontReadability: checkFontSizes(),
        contentWidth: checkContentWidth(),
        interactionFeedback: checkFeedback()
    };
};