유럽 배낭여행에서 느낀 Offline Web App 의 무한한 성장가능성

10월 한 달간 유럽 배낭여행을 하면서 느낀 Offline Service 에 대해서 생각을 정리해보았습니다.

  • 초당 10MB 가 넘는 데이터를 무리 없이 제공하는 한국에 있다 보니 자연스럽게 인터넷이 느린 사용자의 입장에서 생각을 하지 않고, 한국의 빠른 인터넷 속도 기준으로 어플리케이션을 제작해왔다.
  • Software 분야에서는 한국이 결코 후진국이라는 말이 있고, 나 또한 그렇게 믿고 있었지만, 내가 경험하고 본 유럽의 현황은 사실 우리나라 보다 더 뒤처져 있는 것 같았다.
  • 느린 통신사 data 망과 길거리에서 찾아보기 힘든 Public Wifi 는 현지인들이 지하철에서 핸드폰보다는 책이나 신문을 더 보게 하고, 관광지에 놀러 온 여행객들은 Google Trips 처럼 offline 에서도 작동하는 앱을 사용하기보다, 언제나 그래왔듯이 꾸준히 지도를 펼쳐가며 방향을 잡고 주민들에게 물어보며 장소를 찾아가는데 한 몫을 한다.
  • 물론, Google Trips 앱이 나온 지가 얼마 되지 않았고, 사람들에게는 Google Map 보다 관광 지도로 보는 것이 더 편하고 익숙하겠지만. 대다수를 위한 서비스를 하기 위해서는, 그 대다수가 선호하는 방식을 알고 있어야 하고, 그 패턴을 분석해서 보다 더 나은 서비스를 제공할 수 있는 통찰력이 필요하다는 생각이 들었다. 그리고 이러한 안목으로 서비스를 개발해 나가는 것이 세상을 더 편리하게 하는 Software Engineer 가 함양해야 할 자세가 아닐까?
  • 어플리케이션 성능을 최대한 최적화 해서 빠른 사용자 경험을 제공한다고 하더라도, 인터넷이 느린 국가에서는 사실 그렇게 의미가 많지 않은 작업이라고 생각이 든다. 그렇기 때문에 구글에서도 Progressive Web App 이라는 새로운 Web Application 개념으로, 보다 더 많은 사용자들이 Offline Service 로 혜택을 볼 수 있게끔, Web 기술을 발전시켜 나가고 있는 게 아닐까 라는 생각이 들었다.
  • Offline Web Service Era 가 도래할만한 충분한 배경과 현실이 있는 세상이다. Offline Service 부분에 좀 더 집중해서 나처럼 배낭 여행하는 여행객들과 현지인들이 편하게 여행하고, 지하철에서도 충분히 자기가 원하는 서비스들을 offline 으로 제공받는데 도움이 되었으면 좋겠다.

To be continued after this backpacking trip..

Advertisements

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

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

서론

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

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

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

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

이미지 압축 하기 (Use compression)

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

image_3
– 이 것도 역시 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 에 대해 더 알고 싶으시면 여기를 참고하세요!
  • 빠르고 사용자 친화적인 웹 사이트에 대해 더 알고 싶으면 이 책을 참고하세요.