[UI/GUI] 고밀도 해상도 (Retina Display)

 

01 비트맵과 벡터 동작원리

• Bitmap : 화질 깨짐.
  • 예제:
  • 800px bitmap 파일 이미지를 100px로 줄이면 700px에 대한 데이터가 손실 됨.
  • 그래서 800px로 다시 이미지를 늘리게 되면 손실된 데이터는 복구되지 않기 때문에 화질이 깨짐.
• Vector : 화질 깨지지않음.
  • photoshop의 smart object .
  • 파일을 늘리면 x와 y path 들의 좌표 이동이기 때문에 화질이 깨지지 않음.
• svg  : vector 파일로 내보내는 확장자.

 

 

 

 

 

02 모바일 해상도 종류

http://classroom.remaincast.kr/uigui/mobile-resolution/

http://classroom.remaincast.kr/uigui/mobile-resolution/

 

• iPhone 해상도
  • 320
  • 375
  • 414

 

 

• Samsung Galaxy 해상도
  • 360
  • 412

 

 

 

• 주요 디바이스 해상도

 

 

 

 

 

03 레티나(고밀도 해상도)

 

 

 

 

 

 

04 고밀도 해상도의 원리와 장점

4배 (x)   2배 (o) 작아졌다!

 

 

• 장점 : 파일이선명!

오른쪽이 더 선명!

 

 

 

 

 

05 mdpi, xhdpi, xxhdpim xxxhdpi