오늘날 출시되는 거의 모든 스마트폰, 태블릿, 프리미엄 노트북은 2배(@2x)에서 3배(@3x) 이상의 고밀도 레티나(Retina) 디스플레이를 채택하고 있습니다. 본 가이드에서는 디자이너와 프론트엔드 엔지니어가 반드시 알아야 할 해상도별 에셋 규격과 네이밍 자동화 노하우를 제시합니다.
1. CSS 픽셀과 디바이스 물리 픽셀의 관계
웹과 앱 디자인에서 24px로 정의된 아이콘은 2x 디스플레이에서는 실제로 48px × 48px의 물리적 픽셀을 사용하여 화면에 그려집니다. 따라서 원본 에셋이 1x(24px)로만 준비되어 있다면 픽셀을 2배로 강제 확대 렌더링하면서 가장자리가 흐릿해지는 블러링이 발생합니다.
2. 파일명 접미사(Suffix) 명명 표준
logo.png: 1.0x 표준 규격 (100%)logo@1.5x.png: 1.5x HDPI 규격 (150%)logo@2x.png: 2.0x 레티나 규격 (200%)logo@3x.png: 3.0x 슈퍼 레티나 규격 (300%)