Retina vs 비레티나 디스플레이

TL;DR

• Retina(DPR ≥ 2): 같은 CSS 크기에서도 더 촘촘한 물리 픽셀 → 선명하고 매끈.
• 비레티나(DPR = 1): 1 CSS px = 1 물리 픽셀 → 얇은 선/곡선/섀도에 톱니·얼룩이 보일 수 있음.
• UI 구현 시 반픽셀(예: 1.5px)·섀도 중첩·원형 보더+섀도 조합은 비레티나+Safari에서 특히 취약.

---

기본 개념

• DPR(Device Pixel Ratio): CSS 픽셀 1개를 표현하는 물리 픽셀 수.
• 비레티나: DPR = 1 → 1 CSS px = 1 물리 px
• 레티나: DPR = 2(또는 그 이상) → 1 CSS px = 2×2 물리 px
• 표현 차이
• 레티나: 고밀도라 텍스트·아이콘 가장자리, 얇은 라인이 매끈.
• 비레티나: 동일 CSS 두께라도 물리 픽셀이 적어 계단 현상/깜빡임/얼룩 가능.

---

빠른 비교

• DPR
• 레티나: 2 이상
• 비레티나: 1
• 시각 품질
• 레티나: 선명, 앤티앨리어싱 우수
• 비레티나: 얇은 라인/원형/섀도에서 노이즈 가능
• 대표 환경
• 레티나: 맥북 내장 디스플레이, 최신 고해상도 모니터
• 비레티나: 24~27인치 FHD 외장 모니터(일부 LG 등), 저해상도 패널
• 문제 빈도
• 레티나: 낮음
• 비레티나: 높음(특히 Safari + 100% 이외 줌/스케일 조합)

---

개발/디자인 영향과 가이드

• 테두리/링 두께
• 반픽셀(예: 1.5px)은 비레티나에서 반올림되어 들쑥날쑥하게 보일 수 있음.
• 가능한 정수 px(1px 또는 2px) 로 통일.
• 섀도(hover/focus halo)
• ring(box-shadow 기반) + 커스텀 box-shadow 중첩은 Safari에서 아티팩트 유발.
• 가능하면 outline/별도 레이어로 분리하거나 섀도 레벨을 단일화.
• 원형+보더+섀도
• 둥근 요소에 얇은 보더/섀도 결합은 비레티나에서 톱니가 두드러질 수 있음.
• 보더를 정수 px, 섀도 blur/spread 값을 과도하게 작게 하지 않기.
• 중앙 점(라디오 인디케이터)
• 컨테이너/점 크기를 짝수 px로 맞추고, 변환(translate(-50%, -50%)) 시 반픽셀 정렬이 생기지 않게 조합.
• 아이콘/이미지
• 벡터(SVG) 우선. 비트맵은 @1x/@2x 제공.
• 줌/스케일
• 브라우저 줌은 100% 기준으로 테스트. OS 스케일(예: 125%)과 혼합 시 재현성 변동.

---

환경 감지/테스트

DPR 확인

window.devicePixelRatio; // 1이면 비레티나, 2 이상이면 레티나

고밀도 전용 CSS 적용

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* 레티나 전용 스타일 */
}

QA 체크리스트

• 1x 외장 모니터와 2x(레티나) 모두에서 확인.
• 브라우저 줌 100% 고정 후 검증.
• 얇은 라인/원형/섀도 요소에서
• 반픽셀 사용 여부
• 섀도 중첩 여부
• 정수 px 보더/링 사용 여부
• 짝수 px 크기 정렬 여부 점검.

---

문제 사례와 대응 팁

• 사례: 비레티나+Safari에서 라디오/체크박스의 링과 hover 섀도가 깨져 보임.
• 원인: 반픽셀 링(1.5px), 섀도 중첩, 원형+섀도 조합의 앤티앨리어싱 한계.
• 대응:
• 링/보더 정수 px로 변경.
• hover/focus 섀도 중첩 최소화(outline 또는 단일 섀도).
• 내부 점/컨테이너 짝수 px 크기 유지로 반픽셀 방지.
• 1x 외장 모니터에서 재현 후 조정값 확정.