레티나 디스플레이 대응법(CSS Sprite 기법을 곁들인)

썸네일

🚀  레티나 디스플레이 물먹은 듯한 이미지 해결법

---

우선 해결법에 들어가기 앞서 반응형으로 해결하는 방법도 있는데 그것은 추후에 업데이트할 것이다.(나중에 보시는 분들은 이미 업데이트돼 있을지도!!) 먼저 다룰 방법은 이미지의 사이즈를 2배로 늘려서 원사이즈로 사용하는 것이다. 예를 들자면 64 x 64 인 이미지를 다운로드하여서 32 x 32 사이즈로 사용하는 방법이다. like 유압프레스 근데 이것만 하기엔 재미없으니까 이미지 sprite 기법도 함께 사용해보겠다.

 

1. CSS Sprite 기법 (Image Sprite 기법)

 

먼저 sprite 기법을 살펴보자 웹사이트를 만들면 여러 이미지 파일을 사용하게 되는데 이 때 여러 가지의 이미지를 하나의 이미지 파일 안에 배치해서 이미지 로드 부담을 줄이는 방법이다. 말로만 들어서 모르겠나요~? 바로 사진 보여드립니다.

sprite 이미지

위의 이미지는 로고들을 모아놓은 sprite 이미지이다. 요런 이미지를 사용해서 background-position을 사용해서 원하는 이미지를 사용할 수 있다.

 

이런 이미지를 왜 쓰냐면 브라우저가 HTML과 CSS를 읽을 때 위에서 아래로 읽게 되는데 이미지 스프라이트를 사용하지 않는다면 쭈욱 읽다가 엇 이미지다 로드해야지~ 하다가 또 쭉 읽다가 이미지다 로드해야지~ 하는데 이미지 스프라이트를 사용하면 한 번 부르면 그 뒤로 이 이미지 스프라이트를 사용하는 요소들의 이미지는 로드하지 않기 때문에 이미지 로드 부담을 줄이게 된다. 즉, 페이지 로딩 시간이 빨라진다는 얘기다.

 

여기서 잠깐 그럼 내가 사용하는 모든 이미지 다 하나의 이미지 스프라이트로 만들어서 사용하면 되는거 아니야??? 하겠지만 군대 다녀온 사람은 알 것이다. 적당히 잘해야 한다. 너무 과하게 한다면 스프라이트 이미지 자체의 용량이 커져서 오히려 더 좋지 않은 결과를 일으킬 수 있고 스프라이트 기법의 가장 큰 단점은 수정이 어렵다는 점이다. 같은 사이즈의 이미지라면 그대로 덮어 씌우면 되겠지만 10px이라도 차이가 난다면 background-position 수정에 만약에 옆에 이미지가 붙어 있다면 그 이미지 수정 또 옆의 이미지 수정;;; 퇴사할게요 하게 된다.

 

그러니 스프라이트 이미지는 주로 오랫동안 변하지 않을 것들에 주로 사용하면 된다. 예를 들면 로고나, 버튼들이 있다.

 

스프라이트 이미지 생성기 : https://www.toptal.com/developers/css/sprite-generator/

 

2. 레티나

 

레티나가 뭔가요?? 한다면 혹시 핸드폰 기종이.. 아 아이폰이 아니시군요? 그럼 혹시 패드.. 아이패드? 아 없으시군요~ 그럼 혹시 맥..? 에라잇; 아이폰과 아이패드 맥 등 애플 제품에 들어가는 디스플레이, 정확한 의미로는 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름이다.

 

아니 이렇게 좋은 디스플레이인데 왜 물먹은 것처럼 이미지가 쫌 뿌옇게 보이나요??

 

그 이유는 보통 디스플레이의 pixel ratio가 1이라면 레티나 디스플레이는 pixel ratio가 2이다. 이 말인즉슨 보통 디스플레이에 내가 css로 100px 100px인 이미지를 준다면 픽셀 밀도가 2배인 레티나 디스플레이에는 50px 50px 짜리로 들어오는 게 맞는데 여기서 css가 고집이 세서 그냥 100px 100px로 해!! 하면서 원래 50px 50px 인 애를 쭉 늘려놔서 조금 흐리게 보이는 것이다. 여기서 디바이스가 실제 처리할 수 있는 화소의 기본 단위를 물리 픽셀이라고 하고, css에서 표현하는 화소의 기본 단위를 논리 픽셀이라고 하는데 물리 픽셀과 논리 픽셀의 차이가 발생하면서 물먹은 이미지처럼 보이게 되는 것이다.

 

해결방법은 위에 말했다시피 2배의 이미지를 준비하면 되는 것이다.

 

사실 뭔가 거창하게 스프라이트 이미지는 뭔가 새로운 해결 방법이 있는 것처럼 말했는데 사실 똑같다. 로고를 예를 들면 각각 2배 크기인 이미지를 준비해서 스프라이트 이미지를 생성하는데 여기서 주의할 점 패딩이 default 값이 10인데 이 값도 2배로 늘려주어야 한다. 20으로 늘려주고 생성한 다음 그 생성된 이미지를 url에 넣고 가장 키포인트는 원래 사이즈로 만들었던 스프라이트 이미지 크기를 background-size로 주면 해결된다.