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

(번역) CSS flex box 3분만에 배우기

이 글을 통해 CSS flexbox 레이아웃의 가장 중요하고 기본적인 컨셉을 배웁니다.

 

The container and the item

  • flex box 레이아웃에서 가장 중요한 컴포넌트 두 개는 container(파랑)items(빨강) 입니다.
  • 이 컴포넌트들을 이용하여 예제를 설명하겠습니다.

수평 레이아웃

  • container 에 아래와 같이 CSS 를 줍니다.
.container {
display: flex;
}
  • 위 결과는 아래와 같습니다.
flex-2
여기서 주의할 점은 items 는 전혀 손대지 않고도, 수평축을 따라 알아서 정렬됩니다.

 

수직 레이아웃

  • 위 이미지를 보면, 중심축은 수평축이고 교차축은 수직축입니다.
  • 아래처럼 flex-direction: column 을 추가하면 이 두 개의 축을 전환할 수 있습니다.
.container {
display: flex;
flex-direction: column;
}
flex-3
이제 중심축은 수직축이고, 교차축이 수평입니다. 따라서 위처럼 items 가 수직으로 정렬되어 쌓입니다.

 

Justify content and Align items

  • items 을 다시 수평으로 만들려면, flex-directioncolumn 에서 row 로 바꾸면 됩니다.
  • 축을 이해해야하는 중요한 이유는 justify-contentalign-items 와 같은 속성들은, 중심축과 교차축에 기준하여 items 을 정렬하기 때문입니다.
  • justify-content 를 이용하여 items 들을 중심축의 중앙에 정렬해봅니다.
.container {
display: flex;
flex-direction: row;
justify-content: center;
}

flex-4

  • 이제, align-items 를 이용하여 교차축의 중앙에 정렬해봅니다.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

flex-5

  • justify-contentalign-items 의 속성 값은 아래와 같습니다.

justify-content:

  • flex-start(default)
  • flex-end
  • center
  • space-between
  • space-around

align-items:

  • flex-start(default)
  • flex-end
  • center
  • baseline
  • stretch

Items

  • 축에 따른 전체적인 정렬 말고도, 각각의 아이템에 CSS 효과를 줄 수 있습니다.
  • 아래는 align-self 속성을 이용하여 첫 번째 item 의 위치를 조정한 것입니다.
.item1 {
align-self: flex-end;
}
/* align-self 는 align-item 속성과 같은 옵션 값들을 가집니다. */

flex-6

Conclusion

  • 위의 3가지 컨셉이 CSS flex-box 를 이해하는데 있어 가장 중요하고 응용하는데 사용된다.
  • 이 글의 원문은 여기를 참고하세요.