내 PC의 애뮬레이터나 테스트용 디바이스, 내 핸드폰에서 모두 문제없이 보였던 이미지들이 몇몇 기종에서는 해상도가 좋지 않게 보여진다고 했다. 이와 관련된 내용으로 팀장님은 PixelRatio 참고해서 공부해보라 하셨다.
이전에 PixelRatio내용을 읽어봤지만, 픽셀밀도 dp , px -> dp로 변환? 같은 내용들이 있어서 UI/UX 디자인 이론과 실무책에서 해상도와 밀도 부분을 읽어봤다.
반응형 디자인
해상도는 화면에서 이미지를 몇 개의 픽셀로 표현하는지를 나타내는 지표이기 때문에 많은 픽셀로 표현할 수록 이미지를 더 세밀하게 표현할 수 있고, 우리는 해상도가 좋다고 표현한다.
픽셀은 화면을 구성하는 최소 단위로 절대단위이다.
디자이너는 보통 지정된 사이즈의 아트보드에서 절대적인 px단위로 작업을 하지만, 프론트엔드 개발자의 경우 여러 디바이스에서도 동일하게 보여줘야 하기 때문에 px단위를 쓰면 곤란하다. 동일한 사이즈(px)의 이미지라도 해상도가 다른 디바이스에 따라 크기가 다르게 보이기 때문이다.
그래서 이러한 문제를 해결해주기 위해 어떤 화면에서도 동일한 사이즈로 보이도록 iOS는 pt 안드로이드에서는 dp 단위를 사용하기로 했다.
따라서 해상도가 다른 여러 디바이스 환경에서 동일한 위치에, 동일한 크기로 보이도록 퍼블리싱해주기 위해서는 dp를 적용해야 하고 실제 코드에서 쓰이는 px단위로 전환할 수 있어야 한다.
하지만, PixelRatio를 활용하지 않고 리액트 네이티브에서 반응형 디자인을 할 수 있는 방법을 찾았다.
다운샘플링
한편, 해상도가 좋아져도 이미지가 흐릿하게 보이는 경우가 있는데 이는 아이폰 6+의 비율이 이전까지의 아이폰과 달라지면서 나타난 현상으로 이미지를 표시하기 위해 해상도를 낮추는 다운샘플링으로 이미지의 크기 조정을 한 것이다.
아이폰6+, 6s+, 7+, 8+의 비율이 다른 디바이스보다 약간 작아서 발생한 것으로 아이폰만 해당된다.
다운샘플링 해결방법 찾아오기
