1. 개발 목표
React Native 앱에서 사용자가 업로드한 배경 이미지를 가로 스크롤 형태의 썸네일 카드로 보여주는 기능을 구현하려고 했다.
이미지는 AWS S3에 저장되어 있으며, 백엔드에서 URL을 내려받아 프론트에서 <Image /> 컴포넌트로 표시하는 구조다.
2. 문제 발생: 이미지가 로드되지 않음
기능 구현 후 테스트를 진행했을 때, 백엔드에서 받은 S3 이미지 URL로는 테스트 화면에서는 정상 표시되는데,
정작 BackgroundList 컴포넌트 내 썸네일에서는 이미지가 보이지 않는 현상이 발생했다.
그러나 같은 URL을 **단독 테스트 화면(ImageTestScreen)**에서 넣어 로드하면
정상적으로 선명하게 이미지가 나타났다.
→ 결론
문제는 **URL(백엔드/S3/CORS)**이 아니라 BackgroundList 내부의 구조적인 문제라고 확신.
3. 처음 시도한 것들 (모두 실패)
- URL 문자열이 잘못 되었는지 확인
- 백엔드 스트리밍 URL로 변경 테스트
- CORS 설정 재확인
- S3 public-read 권한 재설정
- RN Image 캐시 초기화
- resizeMode="contain" 등 조정
- 강제 border두어 이미지 영역 확인
하지만 이미지가 보이는 경우는 단독 테스트 화면뿐이었다.
4. 원인 추적: 썸네일 CSS 스타일 확인
BackgroundList에서 문제의 CSS는 아래와 같았다.
// 각 이미지 카드
card: {
width: 120,
height: 170,
backgroundColor: "rgba(255,255,255,0.1)",
borderRadius: 10,
marginRight: 12,
overflow: "hidden",
alignItems: "center",
paddingTop: 8,
},
// 이미지 썸네일
thumbnail: {
width: "100%",
height: 110,
borderRadius: 10,
backgroundColor: "rgba(255,255,255,0.05)",
},5. 문제의 핵심: CSS 레이아웃 구조였다
이미지 로드가 실패한 것이 아니라
“보이지 않을 만큼 너무 작게 잘려서 렌더링되고 있었다.”
원인은 다음과 같음:
(1) width: "100%"는 부모(card)의 실제 width(120px) 그대로임
React Native에서는 "100%"가 웹과 동일하게 부모의 너비를 의미한다.
즉:
- card width: 120px
- thumbnail width: "100%" → 120px
따라서 이미지는 width에서 문제가 없었다.
(2) height: 110px이 너무 작고, card 내부 요소가 많음
card의 전체 height는 170px인데,
그 내부에는 다음 요소들이 존재한다.
- paddingTop: 8
- thumbnail height: 110
- URL 텍스트 높이 약 15~20
- 삭제 버튼 높이 약 30
이 값들을 합하면:
즉, 카드의 거의 전체 공간을 차지하며
썸네일이 아래 요소들과 겹치거나 잘려서 보이는 영역이 극도로 작아짐.
(3) overflow: "hidden" 때문에 이미지가 조금이라도 삐져나오면 완전히 잘려버림
thumbnail은 borderRadius가 있고,
그 위에 overflow: "hidden"이 적용된 부모(card)가 있음.
따라서:
- width/height 계산이 조금이라도 틀어지면
- 이미지가 카드 밖으로 삐져나오면서
- 보이지 않는 상태처럼 된다.
실제로는 로드됐지만
1~2px 정도만 남아서 거의 안 보인 것.
(4) 결과적으로 이미지가 로드되었지만 시각적으로는 “로딩 실패처럼 보인” 상황
따라서 문제는 이미지 로드 실패가 아니라
UI 레이아웃 문제로 인해 화면에 표시되지 않은 것.
6. 해결 방법
썸네일 크기를 다음과 같이 수정:
thumbnail: {
width: 120,
height: 150,
borderRadius: 10,
backgroundColor: "#333",
}이렇게 하고 나니
이미지가 아래처럼 선명하게 카드 안에 꽉 차서 보였음.
7. 왜 width: "100%"일 땐 안 보이고, width: 120일 때는 보이는가?
정확한 원인은 다음과 같다.
- "100%"는 부모(card)의 너비(120px) 그대로라서 사실 동일함
- 문제는 width=100% 때문에 height + overflow + padding + card 레이아웃 충돌에 의해 이미지가 잘려 보였던 것
- 썸네일 height가 110px이면, 이미지가 카드 내부 요소들과 겹쳐 실제 표시되는 공간이 매우 작음
- 결국 이미지가 로드되었지만 “눈에는 안 보이는 상태”가 되었던 것
React Native에서 width: "100%"는 레이아웃 엔진을 다시 작동시켜 내부 요소 배치를 바꾸기 때문에,
height의 실제 표시 영역에도 간접적으로 영향을 끼친다.
8. 최종 결론
문제는 이미지 URL, S3, 백엔드, fetch가 아니라 순수하게 CSS 레이아웃 문제였다.
시각적으로 로딩 안 되는 것처럼 보였던 이유는:
- 썸네일의 height가 너무 작았고
- card의 overflow: hidden 때문에 이미지가 잘려 나갔으며
- 카드 내부 요소들과의 레이아웃 충돌로 실제 visible 영역이 너무 작아졌기 때문.
결국 이미지 자체는 정상적으로 불러와지고 있었고
보이지 않아서 착각한 것뿐이었다.
📌 직접 확인하려면?
borderWidth: 2,
borderColor: "red",다음 css코드를 추가하면 이미지가 어떻게 렌더링 되는지 눈으로 확인 가능하다.
앞으로 url, console.log 다 잘 뜨는데 이미지 로드가 안된다면 css를 의심해보자...