[Responsive] 레티나(Retina) 디스플레이

레티나(Retina) 디스플레이 

• 정의 : 애플(Apple)이 정의한 고해상도 디스플레이 브랜드명
• 레티나 기준 : PPI(Pixels Per Inch), 즉 1인치당 픽셀 수가 약 300 이상,
  사람이 일반적인 거리(약 30~40cm)에서 볼 때 픽셀 단위가 눈에 보이지 않을 정도면 레티나라고 함

---

레티나 디스플레이를 고려한 퍼블리싱

UI 개발 시 직접 레티나 디스플레이를 조작하진 않지만,이 디스플레이 환경을 고려해 퍼블리싱 대응 작업을 해야 함

1. 고해상도 이미지 대응 (srcset, @2x, SVG)

 

[Responsive] 반응형 이미지 - 레티나(Retina) 이미지

2. CSS 1px이 깨지는 현상

• border: 1px 얇은 선이 흐릿하거나 사라지는 현상
• border: 1px 대신 box-shadow, transform: scaleY() 등 사용 고려
• DPR에 따라 0.5px 대응 (단, 일부 브라우저 지원 여부 확인)

.border {
  border-bottom: 1px solid #000;

  @media (min-resolution: 2dppx) {
    border-bottom: 0.5px solid #000;
  }
}

3. 텍스트가 작아 보이거나 번지는 현상

• 고해상도에서 폰트가 작게 느껴지는 경우, 모바일 폰트 크기 소폭 증가 고려
• 텍스트가 번지는 경우 text-rendering: optimizeLegibility 적용

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

4. CSS 도형(삼각형, 원형 등)의 테두리 깨짐 현상

• border나 border-radius 도형이 들쭉날쭉할 경우 SVG 대체 고려
• 또는 transform: scale() 활용해 더 선명하게 표현

.arrow {
  transform: scale(1.01);
  transform-origin: center;
}

5. 애니메이션 끊김 (고해상도에서 FPS 저하) 현상

• transform, opacity 등 GPU 가속 속성 우선 사용
• 복잡한 애니메이션에는 will-change, translateZ(0) 사용

.card {
  will-change: transform;
  transition: transform 0.3s ease;
}

6. 뷰포트 설정 확인

• 반드시 뷰포트 설정,  없으면 모바일 브라우저가 확대된 화면처럼 보여서 해상도 계산이 틀어짐

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7. 이미지 외 그래픽 요소 해상도 확인

• 배경에 쓰이는 그라디언트, 도형, 아이콘 등도 레티나 디스플레이에서 깨끗하게 보이는지 확인
• 비트맵 이미지 외에도 CSS만으로 만든 요소들도 확인 필요

8. 테스트 환경 확인

• 크롬 DevTools → 디바이스 모드로 DPR 2~3 디바이스에서 시뮬레이션 테스트
• 실제 아이폰/갤럭시 등 실기기로 테스트
• window.devicePixelRatio 값으로 현재 DPR 확인

console.log(window.devicePixelRatio); // 1, 2, 3 등 출력

---

✓ 관련 mixin 리소스 별도 확인