---

AS-IS

1. opacity: 0 설정
2. new Image() 프리로드
3. onload 대기
4. el.src 적용
5. opacity: 1 전환 (150ms)

TO-BE

이미지 Lazy Loading Alt 텍스트 깜빡임 개선 구현

📖 개요

Header 컴포넌트의 로고 이미지 lazy loading 시 발생하는 alt 텍스트 깜빡임 현상을 해결하여 사용자 경험을 개선했습니다.

🚀 주요 개선사항

1. 프리로딩(Preloading) 패턴 적용

기존의 직접 이미지 로드 방식에서 백그라운드 프리로딩 방식으로 변경했습니다.

Before (기존 방식)

el.src = el.dataset.img || '';
el.onerror = () => {
    // 에러 처리
};

문제점: src 설정과 동시에 alt 텍스트가 화면에 표시됨

After (개선된 방식)

const preLoader = new Image();
preLoader.src = el.dataset.img || '';

preLoader.onload = () => {
    el.src = preLoader.src;  // 캐시된 이미지 즉시 표시
    el.style.opacity = '1';
};

preLoader.onerror = () => {
    // 에러 처리 후 표시
    el.style.opacity = '1';
};

개선점: 이미지가 완전히 로드된 후에만 실제 DOM 요소에 적용

2. 부드러운 전환 효과 적용

사용성 향상을 위해 적절한 전환 시간을 설정했습니다.

// 초기 설정
el.style.opacity = '0';
el.style.transition = 'opacity 0.15s';  // 150ms 부드러운 전환

전환 시간 선택 이유:

• 150ms: 너무 빠르지도 느리지도 않은 자연스러운 속도
• 사용자가 로딩을 인지하되 답답함을 느끼지 않는 최적의 시간
• 모바일 환경에서도 부드러운 사용자 경험 제공

🔧 기술적 구현 세부사항

프리로딩 동작 원리

1. 백그라운드 로딩: new Image() 객체가 메모리에서 이미지를 미리 다운로드
2. 캐시 활용: 브라우저 캐시에 저장된 이미지를 실제 DOM 요소에 즉시 적용
3. 즉시 표시: el.src 설정 시 이미 로드된 이미지가 즉시 렌더링

시각적 효과 개선

// 로드 전: 투명 상태로 숨김
el.style.opacity = '0';
el.style.transition = 'opacity 0.15s';

// 로드 완료: 부드럽게 나타남
el.style.opacity = '1';

📊 사용자 경험 개선 효과

Before (기존)

After (개선 후)

🎯 적용 범위

• 대상 컴포넌트: Header.vue의 로고 이미지
• 디렉티브: v-lazy 사용하는 모든 이미지 요소에 자동 적용
• 호환성: 기존 코드 변경 없이 자동으로 개선 효과 적용

📈 성능 고려사항

• 메모리 사용: 임시 Image 객체 사용으로 미미한 메모리 증가
• 네트워크: 이미지 다운로드는 기존과 동일 (프리로딩으로 중복 다운로드 없음)
• 렌더링: 브라우저 캐시 활용으로 오히려 더 빠른 표시

✅ 테스트 결과

• Header 로고 이미지의 alt 텍스트 깜빡임 현상 완전 해결
• 0.15초의 자연스러운 페이드인 효과로 사용성 향상
• 기존 v-lazy 디렉티브 사용법 그대로 유지
• 다양한 네트워크 환경에서 안정적 동작 확인

🔍 기술적 장점

1. 비침투적(Non-intrusive): 기존 코드 수정 없이 자동 적용
2. 캐시 최적화: 브라우저 캐시를 효율적으로 활용
3. 에러 처리: 기존 에러 처리 로직 그대로 유지
4. 성능 친화적: 추가 네트워크 요청 없이 UX 개선

---