▶Web design :: responsive full background image 예제코드 뜯어보기
이 글에서는 브라우저의 크기에따라 배경이미지가 자동으로 조절되는 효과가 어떤 기능을 통해 이루어지는지에대해 살펴보려고 한다. 이를 살펴보기위해서, sixrevision.com 에서 제공하는 'responsive full background image'에 대한 데모사이트와 그에 대한 내용을 바탕으로 코드 하나하나를 뜯어보며 그 그 기능에 대해 정리해보고자 한다.
전체 뷰포트(viewport)를 다루는 background-size 속성에 대한 cover 값을 사용한다.
cover 값은 브라우저가 자동으로 background image의 너비(width)와 높이(height)를 확장할 수 있도록 하는 css의 기능이다.
모바일 디바이스에 적합한 작은 사이즈의 배경이미지를 제공하기위해 미디어쿼리 기능을 사용한다.
이것은 선택사항이며, 미디어쿼리를 이용해 모바일디바이스에는 배경이미지파일의 축소버전을 적용한다.
이를 통해 '페이지 로딩속도 향상'이라는 결과를 기대할 수 있다.
이 사이즈라면 우리가 고려해야하는(현재 시장에 출시된 디바이스들) 디스플레이크기에도 빈 공백없이 출력가능한 크기이다. 이런 점은 분명 강점이라고 할 수 있지만, 반대로 단점도 존재한다. 이미지파일이 크기가 큰만큼, 용량도 커지는 점을 감수해야하기 때문이다. 위 이미지의 용량은 1.8MB에 달한다.
고해상도 이미지를 배경으로 사용함으로써, 시각적인 아름다움은 효과적으로 강조할 수 있겠지만, 그와함께 따르는 로딩에대한 부담에 대해 생각해보면 어떤 상황을 놓고봐서도 개발자 입장에서보면 반갑지 않은 일이다. 특히 이 것은 모바일 디바이스에서 더욱 문제가 심각해지게 된다.
세계최고 수준의 네트워크 환경을 갖추고있는 우리나라의 경우, 다른나라에 비해 상대적으로 이에대한 부담이 덜 할 수 있겠지만, 많은 경우에서 모바일의 경우와 그 외의경우는 네트워크 연결속도와 연결의 품질면에서 상당한 차이를 보인다. 따라서 우리는 이글에서, 고해상도이미지를 전체 모든 상황에 적용하는 것이아니라, 모바일디바이스의 경우에는 작은 사이즈의 이미지를 적용할 것이다.
HTML
예제에서 우리는 배경이미지를 HTML내 <body>요소에 항상 적용할 것이다. 이를 통해 이미지는 항상 브라우저의 뷰 포트(viewport)를 커버할 수 있게 된다. 또한, 이러한 기술은 페이지내의 블록레벨요소(block level element)에도 기능하게 된다. 예를들어 'div'나, 'form'요소등이 여기에 해당한다.
[클릭하시면 확대해서 볼 수 있습니다.]
만약 블록레벨요소의 container의 너비(width)와 높이(height)가 반응형일 경우, 배경이미지는 항상 container를 완전히 커버할 수 있도록 확장된다.
CSS
앞서 살펴보았던 HTML내 <body>요소에 적용할 스타일에 대한 내용을 살펴보자.
[클릭하시면 확대해서 볼 수 있습니다.]
생각했던 것 보다 CSS에서 살펴볼 것들은 많지않다. 다만, 부분부분마다 꼭 기억해야할 내용들이 포함되어있다. 여기에 대한 자세한 내용은 사진 안에 별도 의 주석처리를 통해 확인해볼 수 있다.
background-size : cover
이 옵션설정이 배경이미지의 콘테이너 크기에 따라 지속적으로, 그리고 자동으로 배경이미지의 크기(너비, 높이)를 조절 해준다. 이 예제를 제공하고있는 sixrevisions.com에서는 이 코드에 대해 "마법이 일어나는 곳이다."라고 표현했을 정도다.
background-size : cover의 기능은 무엇일까?
우선, 이에대한 내용은 이전글에서 한번 다룬 바 있다. 이에대해서는 아래 링크를 통해 확인해볼 수 있다. 그러나, 이미 그 글을 봤거나, 새창을 열기가 너무나 귀찮은 사람들을 위해 여기에 'background-size: cover'에 대한 설명을 적어두고자 한다.
background-size : cover의 기능
속성 값을 cover로 지정하면 배경 이미지의 가로/세로 길이 모두 요소 보다 크다라는 조건하에 가능한한 배경이미지를 작게 조절한다. 이때 가로/세로 비율도 유지된다. 결국, 배경이미지의 크기는 항상 요소의 크기보다 크거나 같다.
예제코드를 뜯어보기
여기서부터는 sixresion.com에서 제공하고있는 데모사이트의 기능과, 그와관련된 CSS속성 및 특성에 대해서 한줄 한줄 뜯어보려고한다. 사실 앞서 CSS코드 내용을 살펴보았겠지만, 정말 길지가 않다. (아마도 이 데모사이트가 이러한 특성을 강조하기위한 형태로 페이지가 구성되어있기 때문일 것이다.) 덕분에 강력한 인내심 없이도 쉽게쉽게 살펴볼 수 있다.
background-position : center center
이 코드는 배경이미지가 항상 가운데있도록(좌, 우측으로 쏠리지않도록) 뷰포트의 중앙에 스케일링 축(Scailing axis)을 설정하는 부분이다.
background-attachment : fixed;
이 코드는 스크롤 막대가 표시되는 경우를 고려하여 적용되는 개념이다. '스크롤막대가 표시되는 경우'란, 전체 컨텐츠의 높이가 뷰포트의 높이보다 클 경우를 말한다. 이러한 경우에 이 코드를 선언함으로써 사용자가 스크롤막대를 위아래로 이동하더라도 배경이미지는 스크롤에 영향을 받지 않고 고정적으로 머물러있게끔 할 수 있다.
(사용자가 스크롤링 하고있는지를 체크하는 것은 너무나 번거로운 일이다.)
LOAD SOME CONETENT
데모 페이지에는 'LOAD SOME CONTENT'기능이 포함되어있다. 이것은 앞서 설명한 'background-attachment'속성이 'fixed'로 설정되어있을때만 스크롤기능과 함께 화면에 출력되도록 한다.
[클릭하시면 확대해서 볼 수 있습니다.]
Shorthand css notation
정확히 말하면, 이것은 데모페이지나 기타 관련 기능에 대한 설명은 아니다. 데모페이지와 튜토리얼을 만든사람이 함께 설명하고 있어 나도 이글에 포함하기로 했다. 'shorthand css notation'이라는 이름그대로 이것은 css 코드를 작성할때 한줄에 하나씩 작성하는 것이아니라 한줄에 모든 속성을 작성하는 '코드작성법 중 하나'라고 말할 수 있다. 강조하고 싶은것은 이 방법은 어디까지나 선택이라는 것이다.
[클릭하시면 확대해서 볼 수 있습니다.]
shorhand CSS notaition의 방법으로 데모페이지의 CSS코드를 작성하면 위 사진과 같은 형태를 띄게 된다. sixresion.com의 데모페이지와 튜토리얼을 제작한사람은 이러한 방법을 (특히 이경우에는 배경이미지에 대한 속성들을)하나로 모아서 작성해주면 코가독성이나 코드정리의 효율성면에서 좋다고 소개하고 있다.
옵션 : 작은 화면을 위한 미디어쿼리(Media Query)
모바일기기와 같이 작은 디스플레이를 고려하여, 데모페이지에서 활용한 기술은 '미디어쿼리(Media Query)'이다.
[클릭하시면 확대해서 볼 수 있습니다.]
데모페이지에서는 배경이미지가 768x505 픽셀에 이르기까지 원래크기의 이미지를 조정하여 사용하고 'Smust.it'을 활용해 몇바이트를 잘라냈다. 이러한 방법을 거치면 배경이미지파일의 크기는 1741KB에서 114KB로 무려 93%나 감소하게 된다.
114KB의 용량으로 작아진 배경이미지가 '저퀄리티'일까 걱정할 필요는 없다.
제작자는 이정도의 이미지퀄리티라면 모바일에서 볼경우 초기에 고려했던 순수한 미적요소들을 표현하는데 무리가 없다고 설명하고있다. 이러한 설명에도 의구심이 든다면, 직접 가지고있는 모바일 기기로 데모페이지에 접속해보는 것도 나쁘지 않다. 직접 자신의 눈으로 확인하고 왜 이 기능을 적용하고있는지에 대해 이해를 마친 후, 코드를 뜯어볼지를 결정해도 좋다.
미디어쿼리이용시 주의사항
미디어쿼리 기능은 이미 많은 페이지에서 적용하고 있는 "꽤 유명한"기능이다. 그러나 이 또한 우리눈이 만족할만큼의 결과를 제공하고있지는 못한다. 데모페이지에서 찾아볼 수 있는 미디어쿼리의 단점은 브라우저의 창 크기를 조정하는 과정에서 볼 수 있다. 예를들어 기본화면에서 1200x640 으로, 또는 그 반대로 이르기까지 브라우저 창크기를 조정하다보면 작은이미지에서 큰이미지로(또는 그 반대로) 로드하는 동안에 깜빡임을 볼 수 있을 것이다.
'시각화 > 사이트' 카테고리의 다른 글
| ▶ 배경이미지 크기를 조절하는 방법 : CSS의 background-size property에 대하여 (0) | 2015.07.12 |
|---|---|
| 사이트 : 대학알리미 - 올바른 대학관련 데이터를 확인하는 곳 (0) | 2015.06.20 |
| ▶웹 개발지식 :: 부트스트랩(Bootstrap)이란? (0) | 2015.05.19 |
| ▶SITE :: 웹콘텐츠 기획사례 - 뉴욕타임즈의 네일샵 관련 기사 분석 (0) | 2015.05.13 |
| ▶데이터시각화사이트 :: 플로잉데이터 Flowingdata.com - 비주얼라이즈디스 (0) | 2014.04.20 |