(번역) 웹 개발에서 img 태그 다루는 법

이 글은 Don’t ruin your 라는 미디엄 글을 번역한 것입니다.

서론

• 개발자와 디자이너에게 있어서 최고의 사용자 경험을 제공하는 것은 가장 중요한 일입니다.
• 더 나은 사용자 경험을 위해서 중요한 한 부분을 차지하는 것은 Image 인데요.
• 대부분의 개발자들은 이런 이미지에 대해서 src 속성을 추가하는 것과 크기 조절하는 것 외에는 크게 신경쓰지 않습니다.
• 이번 가이드에서는 이미지 사용에 있어 흔한 문제들을 살펴보고, 해결하는 방법에 대해서 알아보겠습니다.
• 참고 : 이미지 사용에 있어서 대표적인 문제점들을 여기에 올려 두었습니다. 같은 이미지가 사용되었으니, 다른 유형들을 확인할 때 강력 새로고침으로 캐쉬를 비워주세요.

이미지 용량 줄이기 (Cut images down to size)

• 웹 동작방식에 대해서 간단히 얘기 드리면,
  1. 웹 브라우저에 접속하면 HTML 페이지가 웹 브라우저로 전송됩니다.
  2. 브라우저는 이 HTML 페이지가 갖고 있는 모든 자원들(Javascript, stylesheet, images)을 다운받아야 합니다.
  3. 각 자원들을 로드하기 위해서는 시간이 소요되고, 파일이 클수록 이 시간이 길어집니다.
• 우리는 종종 Javascript 파일을 압축하여 더 작은 파일로 만드는데요. Image 도 동일하게 해줘야 합니다.
• 여기서 이미지의 쓸데없는 용량 낭비를 막는 방법 중 한 가지는 이미지의 픽셀 크기를 조절하는 것입니다. 이미지가 쓸데 없이 클 필요는 없으니까요.
• 예를 들어, 당신이 사용하려는 웹사이트의 이미지가 960px 인데, 이미지 파일의 실제 너비는 1800px 이면 로딩시간이 필요이상으로 지체가 됩니다. 특히나, 느린 인터넷을 사용할 때는 이 고통이 더 극심해지죠.
• 이미지의 실제 치수를 알 때에는 Sketch 나 Affinity Designer 를 이용하여 이미지 크기를 재 조정 할 수 있습니다.
• 더 가시적인 사례로 예를 들어보겠습니다.

– 위 그림에서, 브라우저에서 사용할 이미지의 크기는 960px 인데, 여기서 사용되는 이미지 파일의 실제 너비는 5183px 입니다. 적절한 크기의 이미지를 사용하게 되면, 크기가 90% 감소 / 로딩시간은 6초 향상 됩니다. 이 도표는 사실 인터넷의 속도에 따라 천차만별이 됩니다. 느릴 인터넷 일수록 더 차이가 많이 날 것입니다.

이미지 압축 하기 (Use compression)

• 이미지 치수를 줄여서 파일 크기를 줄일 수도 있지만, 압축을 이용해서 더 줄일 수 있습니다.
• 이미지 압축은 이미지 파일의 크기를 줄이고, 이미지의 품질을 살짝 저하시킵니다.
• 이미지 압축은 metadata, embedded thumbnails, color profiles 등의 불필요한 값들을 제거해줍니다.
• 맥 사용자의 경우 ImageOptim 프로그램으로 이미지 압축을 할 수 있고, Grunt 나 Gulp 같은 task runner 를 활용하여 프로젝트 빌드시에 이미지 압축을 자동화 할 수도 있습니다.
• 아래 그림은 압축한 이미지로 크기를 13% 줄이는 모습입니다.

– 이 것도 역시 Wifi가 아닌 3G 와 같은 느린 인터넷에서는 더 많이 차이가 나겠죠?

미디어쿼리로 반응형 이미지 적용 (Use media queries to make images responsive)

• 앞 두 단계에서 이미지 파일을 줄였지만, 나은 사용자 경험을 위해서 저희가 더 해야 할 일은 이미지를 반응형으로 만드는 것입니다.
• 종종 반응형 이미지를 제공하지 않아, 사용자가 일일이 브라우저 스크롤을 왼쪽 오른쪽으로 움직여 이미지를 확인해야 하는 사이트가 있습니다. 이런 사이트는 사용자 비친화적인 사이트로 분류됩니다.
• 미디어쿼리를 사용하여 브라우저가 특정 크기가 되면, max-width: 100% 와 같이 이미지 치수를 조절하세요.
• 이 예제 를 보시면 반응형 이미지가 항상 브라우저의 크기에 맞춰지기 때문에 사용자가 이미지 확대나 축소를 할 필요가 없어집니다.

예술 감독한테 물어보세요 (Ask an art director)

• 앞 단계들에서 축소한 이미지들은 대개 저희가 원하는 품질을 가지고 있지 않습니다.
• 위 예제 에서 사용된 사진 속 뉴욕 엠파이어 스테이트 빌딩은 브라우저의 크기가 작아졌을 때, 거의 알아보기가 힘듭니다.
• 이럴 때 picture 나 source 같은 HTML5 태그를 이용하여 이미지의 부분을 자르거나 변경합니다. 이를 예술 감독 이라고 합니다.
• 위 태그는 사용된 미디어쿼리에 따라 브라우저에게 어떤 이미지를 요청하고 사용할 지를 알려줍니다.
• 이 예제 를 확인해보시면, 브라우저 사이즈에 따라 다른 이미지를 요청하게 되는 걸 볼 수 있습니다.

서비스워커로 캐싱하기 (Use service workers to cash in on caching)

• 반응형 디자인은 상대적으로 새로운 컨셉입니다. 어떤 디스플레이를 사용하든 웹사이트를 이쁘게 보이게 해야하죠.
• 그런데, 요즘은 웹 사이트를 마치 Native Apps 처럼 느끼게 해주는 새로운 트렌드가 나왔습니다.
• 이 트렌드를 Progressive Web Apps 이라고 하고, 인터넷 연결 없이도 웹사이트가 돌아가게 해주는 Service Worker 를 포함하고 있죠.
• 이러한 PWA 가 이미지에게 의미하는 바는 뭘까요? 사이트 접속 시 자주 업데이트 되지 않는 로고나 기타 정적인 이미지는 캐쉬 되는 것이 성능 관점에서 효율적입니다. 캐쉬가 된 파일들은 Client 브라우저에 저장됩니다.
• 캐쉬를 하게 되면, 이후에 사용자가 웹 사이트에 접속할 때 HTTP 요청을 날리기 전에 먼저 캐쉬를 확인합니다.
• 보통 캐쉬를 활용하는 것이 HTTP 요청보다 더 빠르기 때문에, 로딩시간이 더 빨라집니다.
• 그리고, 이미지를 캐쉬하였기 때문에 인터넷 연결 없이도 이미지를 사용할 수 있습니다.
• Service Worker는 브라우저와 인터넷 사이의 Middleware 역할을 하는 강력한 기술 입니다.

접근성이 높은 이미지 만들기 (An accessible image is a friendly image)

• <img /> 태그를 사용할 떄, alt 속성을 꼭 사용합니다.
• 눈이 안보이는 시각 장애인 분들의 경우, 웹 페이지의 내용을 확인할 때. 스크린 리더 라는 도구를 활용합니다.
• 이 도구는 이미지를 스캔할 때, alt 속성을 확인하죠. 따라서, alt 속성을 지정하지 않으면 이미지를 그냥 무시하고 지나갑니다.
• 이런 이유로, 이미지에 alt 속성을 넣는 것은 시각 장애인 분들에게 친화적인 사이트가 됩니다.

결론

• Service Worker 에 대해 더 알고 싶으시면 여기를 참고하세요!
• 빠르고 사용자 친화적인 웹 사이트에 대해 더 알고 싶으면 이 책을 참고하세요.