개념
RN(React Native)에서 이미지 파일 이름에 @2x, @3x 같은 suffix(접미사)가 붙어 있는 건 화면 밀도(screen density / pixel ratio) 에 따라 최적화된 이미지를 자동으로 선택하기 위한 iOS 스타일의 asset scaling 방식이다. 같은 1cm 크기의 아이콘이라도, 최신 폰에서는 더 많은 점(픽셀)을 찍어서 부드럽게 보여주는 역할을 한다.
쉽게말해 같은 이미지인데, 기기 화면이 얼마나 촘촘한지(ppi)에 따라 선명하게 보이도록 여러 크기 버전을 준비하는 것이다. Metro bundler가 빌드할 때 자동으로 기기에 맞는 걸 골라준다.
왜 필요할까?
옛날 모니터나 저가형 폰은 1px이 눈에 보일 정도로 입자가 굵었다. 하지만 요즘 나오는 '레티나 디스플레이(Retina)'나 최신 갤럭시 폰은 픽셀이 너무 작아서 눈에 안 보일 정도로 촘촘하다.
- 기본 png 파일 : 1픽셀 공간에 점 1개를 찍는 저해상도
- @2x png 파일 : 1픽셀 공간에 가로세로 2개씩, 총 4개의 점을 찍음. (고해상도, 아이폰 8 등)
- @3x png 파일 : 픽셀 공간에 가로세로 3개씩, 총 9개의 점을 찍음 (초고해상도 - 아이폰 15 Pro, 갤럭시 S24 등)
만약 최신 폰(3x)에서 기본 이미지(1x)를 쓰면, 시스템이 억지로 이미지를 늘려서 보여주기 때문에 가장자리가 흐릿하고 뭉개져 보인다.
사용 예시
1. 파일 구조
project/
├── src/
│ └── components/
│ └── Button.js
└── assets/
└── images/
├── check.png ← 1x (기본, 100×100 px)
├── check@2x.png ← 2x (200×200 px)
└── check@3x.png ← 3x (300×300 px)2. 코드
import React from 'react';
import { Image } from 'react-native';
const MyComponent = () => (
<Image
source={require('../assets/images/check.png')} // ← @2x/@3x 자동 선택됨
style={{ width: 100, height: 100 }} // ← 논리적 크기 (dp/point 단위)
/>
); 3. 동작 원리
- RN이 앱이 실행된 핸드폰의 화면 밀도를 확인한다.
- require('./logo.png')를 보고 자동으로 가장 적합한 크기의 이미지 파일.png를 가져와서 보여준다.
- 만약 구형 폰이라면 logo@2x.png나 logo.png를 가져온다.
4. 주의 사항
1. style에 width/height 꼭 지정
지정 안 하면 @3x 이미지가 3배 크게 렌더링된다. (픽셀 단위로 해석되기 때문).
항상 { width: 100, height: 100 }처럼 논리적 크기 (point/dp)로 줘야 모든 기기에서 동일하게 보인다.
2. Android에서도 동작
iOS 방식(@2x/@3x)이지만 RN은 Android에서도 동일하게 지원.
(Android 네이티브는 mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi 폴더지만, RN은 @2x/@3x로 통합 처리 → 편함)
3. 최적화 추천 (2026년 기준)
대부분의 경우 1x + @2x + @3x 세트만 준비하면 충분하다. 번들 크기 줄이고 싶으면 @3x만 준비하고 Metro가 다운스케일하게 해도 된다. 하지만 SVG나 vector 이미지를 쓰면 이 문제 자체가 사라지긴한다.
피그마를 쓰는 디자이너에겐 아이콘 줄때 ios/android 포맷으로 1x, 2x, 3x 사이즈별로 다 뽑아서 전달해달라고 요청하면 된다.
