프론트엔드
네트워크 기반 Compose Preview가 안보인다면?
두줄요약
네트워크 기반 Compose Preview에서 이미지가 보이지 않는 원인을 분석하고 해결 방법을 공유했습니다. LocalInspectionMode로 프리뷰 환경을 감지해 기본 이미지를 렌더링하도록 개선했습니다.
문제 상황
- 네트워크 기반
YDSImage를 사용하는 Compose Preview에서 이미지 영역이 비어 보이는 현상 YDSAvatar등 이를 포함한 컴포넌트까지 프리뷰 품질 저하
원인 분석
AsyncImage가 네트워크로 이미지를 비동기 로딩하는 구조- Preview 환경에서는 네트워크 요청이 불가해 상태가
Empty에서 벗어나지 않음 - 결과적으로
Box내부에 렌더링될 UI가 없어 빈 화면 노출
해결 방법
LocalInspectionMode.current로 Preview 환경 감지- Preview 모드에서는 네트워크 로딩을 건너뛰고 기본 이미지 렌더링
customDefaultImage또는DefaultImage를 표시해 안전한 디폴트 UI 구성
적용해볼 점
- Preview 의존 컴포넌트에 IDE 환경 분기 추가
- 네트워크 리소스가 필요한 UI의 프리뷰 대체 화면 마련
- 디자인 시스템 공통 컴포넌트의 프리뷰 품질 점검