React Native 이미지 리소스 관리, 디바이스는 많고 해상도는 다양하다

🎯 결론 먼저 요약

1️⃣ PNG + @1x / @2x / @3x + require() 패턴

React Native는 이미지 해상도를 자동으로 선택해주는 구조를 가짐.
아래처럼 이미지를 require()로 불러오기만 해도 디바이스 DPI에 맞춰 @2x, @3x 리소스를 알아서 사용해줌.

// assets/images/back.png, back@2x.png, back@3x.png

export const IMAGE_ASSETS = {
  BACK_ICON: require('../assets/images/back.png'),
};

<Image
  source={IMAGE_ASSETS.BACK_ICON}
  style={{ width: 24, height: 24 }}
/>

2️⃣ 아이콘은 해상도별로, 큰 이미지는 한 장만

아이콘 같은 작은 리소스는 @1x, @2x, @3x를 다 준비하는 게 좋음.
특히 고해상도 디바이스에선 @1x만 있으면 흐릿하게 보이기 쉬움.

반면, 큰 배경 이미지나 일러스트는 @2x 사이즈 정도의 PNG 한 장이면 충분한 경우가 많음.
이유:

• @3x까지 만들면 용량이 많이 늘어남

• 화면 전체에 꽉 차는 이미지라 약간 흐려져도 티가 덜 남

• WebP로 변환하면 더 용량을 줄일 수 있음

3️⃣ 실무 기준 이미지 사이즈 예시

4️⃣ 앱에서 이미지를 처리하는 두 가지 방식

React Native에서 이미지를 다루는 방식은 크게 두 가지임:

✅ 1. 번들 포함 방식 (PNG + @1x/@2x/@3x + require())

• 이미지를 앱에 직접 포함함

• require()로 불러오면 디바이스 해상도에 따라 자동으로 적절한 이미지가 선택됨

• 오프라인에서도 항상 로딩됨

✅ 2. CDN 또는 네트워크 이미지 방식 (<Image source={{ uri: ... }} />)

• 서버나 CDN에서 이미지를 불러옴

• 앱 용량을 줄일 수 있고, 업데이트 없이도 이미지 교체 가능

• 단, 네트워크 상태에 따라 품질과 안정성 이슈가 생김

5️⃣ 내가 선택한 방식: PNG + @1x / @2x / @3x + require()

이번 프로젝트에서는 require() 방식의 정적 이미지 번들링을 선택함.
그 이유는 다음과 같음:

🚫 네트워크 의존은 위험하기 때문임

• 오프라인에선 이미지가 로딩되지 않을 수 있음

• 느린 네트워크에선 로딩 지연이 생기고 UX 품질 저하됨

• CDN 오류나 서버 변경 시 앱 UI 자체가 깨질 수 있음

• 보안상 이미지가 외부에서 조작될 가능성도 존재함

그래서 앱 UI를 구성하는 핵심 리소스는 반드시 번들에 포함시키는 게 안정적이라고 판단했음.

✅ 실무 기준에서의 장점 요약

• @2x, @3x까지 준비하면 고해상도 대응도 완벽함

• 오프라인에서도 일관된 UI를 보장할 수 있음

• 캐싱, 속도 모두 안정적

• require() 기반이기 때문에 타입 안정성도 확보됨

✅ 마무리

아이콘은 해상도별로, 큰 이미지는 넉넉하게 한 장만
실무에선 이 전략이 성능, 유지보수, UX 품질을 동시에 만족시키는 가장 현실적인 선택이라고 생각함