웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

반응형웹이란? 이해하기 그리고 예제 소스 코드보기

Last Modified : 2018-05-18 / Created : 2015-04-17
11,819
View Count

최근에는 어떤 웹사이트이든 반드시 고려하게되는 반응형웹(Responsive Web)!! 반응형웹이 무엇이고 어떻게 구현하는지... 왜 이토록 빨리 성장하고 인기있는 기술이 되었는지 알아보고자 합니다.




# 반응형웹(Responsive)이란?

반응형웹이란 Responsive + Web으로 말그래로 웹브라우저의 크기 변화에 따라서 웹인터페이스가 즉각적으로 반응하는 웹기술을 의미합니다. 디바이스가 작거나 큰 경우... 아니면 브라우저 크기를 조절해야하는 어떤 환경에서도 적절한 UI를 보여줄 수 있죠. 이런 이유로 요즘은 반응형웹 기술은 필수적인 요소가 되었습니다. 특히 웹퍼블리셔, UI 개발자의 경우 필수적으로 요구되는 부분 중 하나입니다. 기본 중에 기본이 아닐까 생각됩니다.


! 반응형웹 사용이 늘어나는 이유는

반응형웹이 인기를 끄는 이유는 디바이스(모바일 + 태블릿)가 다양해 지면서 지원해야 할 해상도 역시 매우 많기 때문입니다. 이처럼 모든 디바이스와 플랫폼 환경을 한꺼번에 적용할 수 있는 기술이 바로 반응형웹이라 할 수 있습니다. 어떠한 환경에서도 최적화된 디자인을 보여주는 것이 반응형웹이 가진 목적으로 생각하시면 될 것 같습니다. 만약 반응형웹이 없다면 각각의 환경, 디바이스에 따라 서로 다른 웹페이지를 만들어야하겠죠. 이를 좀 더 이해하기 쉽게 이미지를 통해 알아보도록 하겠습니다. 아래 이미지는 데스크탑에서 나타나는 화면입니다.

스크린샷 1) 데스크탑 좌우폭, Width - 1200px 이상

위 스크린샷은 똑 같은 웹페이지를 데스크탑에서 바라본 모습입니다. 만약 모바일에서 본다면 어떻게 나타날까요? 아래를 봐주세요. 아래 웹페이지는 동일한 웹페이지입니다.

스크린샷 2) 데스크탑 좌우폭, Width - 640px 이하
보시는 것처럼 모바일에 맞춰서 헤더와 바디의 레이아웃이 변경된 것을 볼 수 있습니다. 이처럼 반응형웹은 브라우저 또는 디바이스가 지원하는 최대 최소폭에 상관없이 어떤한 크기더라도 화면에 맞도록 디자인이 적용되어 보여주는 것이 핵심이라고 할 수 있습니다.


! 모바일 웹사이트를 따로 만들면 되지 않을까
모바일웹을 따로 만드는 사이트 역시 많이 존재합니다. 둘 다 장점과 단점이 존재합니다. 아무래도 모바일 웹사이트는 더 높은 완성도와 최적화가 가능하겠죠... 하지만 반응형은 모바일 페이지만 따로 만들 필요없이 다양한 환경들... 예를들어 랩탑, 데스크탑, 테블릿에 상관없이 구현될 수 있습니다. 그 이유는 다양한 환경에 최적화가 이루어지기 때문에 시간과 그리고 비용 등의 리소스 측면에서 상대적으로 우수하다 할 수 있습니다.



# 반응형웹 예제 보기

그렇다면 반응형웹은 어떻게 구현할까요? CSS를 사용하는 방법과 자바스크립트를 사용하여 구현이 가능합니다. 그 중에서도 반응형웹 페이지하면 CSS 미디어쿼리를 빼놓을 수 없습니다. 이상적인 부분은 CSS를 사용하여 구현하되 꼭 필요한 부분 요소에서만 스크립트를 이용하는 것이 좋을 것입니다. 아무래도 CSS의 Media query를 사용하는 것이 호환성, 개발 자원 등등을 고려할 때 더 효과적인 방법이라 하겠습니다. 또한 미디어쿼리의 장점은 문법이 간단하고 쉽다는 점입니다.


! CSS 적용예제

여기서는 간단하게 적용하는 방법을 예제를 통해서 알아봅니다. 아래는 몇 가지 디바이스를 고려하는 일반적인 예제소스이며 태블릿, 모바일 환경을 고려하는 CSS 미디어 쿼리입니다. 일단 어떻게 생겼는지부터 확인해봅니다.

@ responsive.css
@media all and (max-width: 1024px) and (min-width: 768px) {
  div {
    width: 60%;
  }
}

문법은 위와 같이 @media로 시작하는 {} 블럭 단위를 css에 추가하면 설정된 화면에서 그대로 나타나게됩니다. 이때 @media 다음의 all은 미디어 타입을 나타냅니다. 선택 가능한 미디어 타입은 아래의 4가지 입니다.

- all  (모든 미디어 타입에 적용됨)
- screen  (스크린 타입에 적용)
- print  (인쇄가 필요한 인쇄물에 맞추어 적용)
- speech (음성 합성기에 적용)

이를 각각 적용해보면 아래처럼 사용할 수 있겠죠.
@media all and (min-width: 768px) { ... }
@media screen (min-width: 768px) { ... }
@media print and (min-width: 768px) { ... }
@media speech and (min-width: 768px) { ... }

일반적으로 웹에 사용되는 미디어 타입의 경우 all 그리고 screen입니다. all보다는 screen이 더 많이 사용됩니다.


! Media query 옵션... 기능 사용방법

이제 다양한 디바이스의 width, height 등등 다양한 옵션을 설정하는 값들을 알아봅니다. 아래의 옵션들은 가장 많이 사용되는 미디어쿼리들 중 몇 가지입니다.

width
min-width
max-width
height
min-height
max-height
디바이스의 폭과 높이의 최대치에 따라 적용 여부를 결정함

orientation
디바이스의 landscape 등의 좌우 모두에 따라 설정할때 사용됨

aspect-ratio
좌우 비율에 따라 적용 여부를 설정함

resolution
밀도에 따라 사용되는데 특정 디바이스에만 맞추는 경우에 주로 사용됨

color
디바이스에 적용 가능한 색 단위 수에 따라 적용


위의 값들이 가장 많이 사용되게됩니다. 이들의 옵션을 조합하여 사용하게 되는데 이때 and, not, only 등을 사용합니다. 예를들면 모바일에 최적화하는 경우...
@media only screen and (max-width: 768px) and (min-width: 300px) {
  p { display: none; }
}

위 예제코드는 768 ~ 300 width 사이의  값을 가진  디바이스에 적용되는 css를 사용하기 위한 미디어 쿼리 예제입니다. 위 크기는 일반적으로 모바일 디바이스에 적용하기 위해서 실제로 많이 쓰이는 미디어쿼리 값입니다. 해당 크기의 디바이에 있는 p 태그는 display: none;이 적용되어 나타납니다.

@media only screen and (max-width:1920px) and (min-width: 1024px) {
  p { displayL none; }
}
이번 코드는 1920px에서 1024px로 일반적인 FullHD 데스크탑에서 태블릿까지 적용될 수 있을 것입니다.

보기에는 어려울 수 있으면 몇 번 하면 금방 익숙해지고 실제로 매우 간단합니다.



# 마치면서

반응형웹을 구현하는 방법에 대하여 알아봤으며 특히 미디어쿼리의 사용방법에 대하여 알아보았습니다. 최근에는 복잡한 반응형웹을 더 쉽게 구현할 수 있도록 여러가지 UI 컴포넌트 라이브러리가 존재합니다. 대표적으로 부트스트랩 역시 간단하게 반응형웹에 구현되도록 사용되죠.

이들 방법을 사용하면 복잡한 코드를 모르고도 쉽게 반응형웹 구현이 가능하지만 이를 이해하고 사용하는 것이 더 높은 수준의 웹어플리케이션 구현과 더 편리한 웹UI 구현에 도움이 될 것이라 생각합니다.

Previous

동시접속자 위젯을 달자! 추천사이트

Previous

웹퍼블리셔가 되기 위해 필요한 스킬과 영역 알아보기