1. 이미지 스트라이프 기법
이렇게 생긴 로고들의 집합을 다들 본 적이 있을거다.
나 역시 맨 처음 이런 로고뭉치(?)들을 봤을 때 어떻게 사용해란거지..? 하나하나 편집해서 뜯어야하나? 고민했던 적이 있었다.
그러나 이 이미지는 바로 웹에서 이미지를 효율적으로 사용하고, 이미지를 불러오는 용량을 줄이기 위해서 프론트엔드 개발자가 직! 접! 이미지를 합쳐서 사용하는 이미지라는 사실!!
- 실제 네이버 화면 이미지 -
네이버 화면에서 개발자도구를 사용하여 들어가보면 이렇게 로고들이나, 이모티콘 등을 모아놓고 스프라이트 기법을 사용하고있다.
이러한 이미지들은 어떻게 만들고, 또 어떻게 사용해야 할 지 알아보자.
- 이미지 뭉치 만들기
https://www.toptal.com/developers/css/sprite-generator/
위 링크를 들어가서 합치고싶은 이미지들을 여러개를 업로드하면 간단히 만들어진다.
choose files를 클릭하고, 넣고싶은 아이콘을 드래그해서 여러개 선택하고 넣어준다.
그럼 이렇게 화면이 뜨는데 여기서 오른쪽에 있는 파일이 바로 우리가 쓸 이미지 뭉치들이다. 그럼 이 뭉치들을 사용하려면 네이버로고가 저 이미지중에서 어느 위치에 있는지를 알아야하는데, 그걸 알려주는게 바로 오른쪽의 코드이다.
- padding, 정렬방법 선택하기
살짝 위로 올려보면 이렇게 패딩과 정렬 방법을 선택할수도 있다.
이런식으로 편한 방법으로 설정해서 사용하면 되는데 일단 기본값인 binary tree로 설정하여 이어서 사용해보자.
- background 이미지 입히기
이 버튼의 앞부분에 카카오 이미지를 넣기위해 가상요소를 만들어 준다.
.kakao::before{
content: '';
background-image: url(./img/sprites.png);
background-position: -10px -10px;
float: left;
width: 28px;
height: 28px;
포지션 또한 사이트에서 알려준대로 입력하면 깔끔하게 들어간 모습을 볼 수 있다.
2. 레티나
레티나란?
Apple이 2010년에 iPhone 4를 공개하면서 처음으로 사용한 용어다. iPhone 4는 DVGA(960 x 640)의 해상도를 가진 3.5인치 크기로 출시되었는데 326 PPI라는 당시로서는 몇 안 되는 고밀도 디스플레이였다. Apple은 이를 두고 300 PPI가 넘을 경우 사람의 눈으로는 픽셀이 보이지 않는다는 뜻에서 Retina 디스플레이라는 새로운 마케팅 용어로서 이를 묘사했다. (나무위키)
이와같이 레티나란 일정 수준 이상의 고밀도 디스플레이를 의미하며, Apple이 사용하는 마케팅 용어이다. 이미지 스프라이트 기법과 같이 이미지를 웹에서 사용하는 경우 가끔 이미지가 선명하지 않고 물먹은 듯 흐리게 표현되는걸 볼 수 있다.
이를 해결하는 방법이 바로 '레티나'이다.
레티나의 원리는 2배~4배한 이미지를 축소해서(고밀도로) 웹에 표시함으로써 이미지가 더욱 선명하게 나타내도록 하는 기법이라고 생각하면된다.
- 이미지 파일 준비하기
우선 레티나를 적용하기 위해서는 2종류의 이미지가 필요하다. 피그마상에서 1배수와 2배수를 모두 다운해서 준비하자.
2. 제너레이터 돌리기
https://www.toptal.com/developers/css/sprite-generator/
먼저, 우리가 사용할 2배수 이미지를 제너레이터를 통해 스프라이트 해주어 다운로드 받아준다. 결론적으로 우리는 2배수의 이미지를 사용하면서, 1배수의 위치값을 사용할 것이다.
그 다음으로 1배수의 이미지를 스프라이트 해주는데 주의할 것이 있다.
- 이미지의 패딩은 2배수의 절반으로 해준다.
- 2배수 이미지와 같은 순서로 이미지를 넣어준다.
주의점을 안지키면 나중에 하나하나 눈으로 맞춰가며 수정해야한다 매우 귀찮으니 꼭 지키자
- 1배수 이미지 크기 확인하기
위에서 다운받은 1배수 이미지의 크기를 속성에서 확인해보면 76*76인것을 볼 수 있다.
자 이제 레티나를 위한 준비물은 모두 마련됐으니 코드에다 적용해보자!
- 코드 적용
- 1 ) url로 백그라운드 이미지 연결해주기 ( 2배수 스프라이트 사용 )
- 2 ) backgroud-size에 위에서 구했던 1배수 이미지 사이즈 입력하기
( 우리는 2배수 이미지를 1배수 크기로 압축시켜서 선명한 출력을 할 것이기 때문 )
- 3 ) background-position에 맨 처음 구했던 1배수의 position을 가져온다.
이렇게 만들게 된다면, 1배수로 적용했을 때 보다 더 선명해진 로고를 볼 수 있을 것이다.
이미지 스프라이트 기법을 사용하지 않고 일반 로고를 만들때도 이렇게 레티나원리를 적용해주면 더욱 선명하게 구현할 수 있다.
일반 로고에 레티나 적용해보기
위 예시는 위니브 로그인 페이지 클론코딩을 하다 생긴 문제점이다.
작게 봤을때는 큰 차이를 못느낄 지 모르겠지만 확대해보면 위니브 로그인 화면의 로고가 흐린 것을 볼 수 있다. 여기에 레티나 기법을 적용하여 4배수한 로고를 다운받은 후, 다시 적용해보았다.
로고가 확실히 깨끗해진 것을 볼 수 있다.
'레티나' 라는 생소한 용어를 들으며, 이미지 스프라이트 기법을 함께 적용시키다보니 매우 어려운 기법이라는 생각이 들 수 있지만 단순히 생각해보면 레티나는 아주 간단한 원리이다.
우리가 보통 그림판에서 사진을 불러올때 작은 이미지를 크게 키워서 나타내면 픽셀이 깨지며 흐리게 표현되지만, 큰 이미지를 작게 나타내면 원본 그대로 선명하게 나타나는 것을 생각해보면 이해하기 쉬울 것이다.
따라서 레티나는 고화질의 이미지를 원본손상없이 축소하여 출력하는 기법이기 때문에 2배수의 이미지를 등록하고 1배수의 사이즈처럼 축소시켜주는 것이다.
하지만 이미지를 선명하게 뽑겠다고 무리하게 고화질의 이미지를 다운받아 축소시켜 적용하는 것은 웹 효율을 오히려 더 악화시킬 수 있기 때문에 로고와 같이 작은 이미지들을 선명하게 하고싶을 경우 2~4배수를 이용하는것이 좋을 것 같다.
