반응형 웹
반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트를 의미한다. 즉, 브라우저(스크린)의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미하며, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이기도 하다.
반응형 웹은 위의 예시처럼 하나의 URL을 기반으로 화면이 바뀐다. 만약 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 반응형 웹이라고 부르지 않는다.
탄생 배경
과거의 웹 사이트들은 데스크탑을 통해서 이용하는 경우가 대부분이었지만, 전자기기의 발전으로 인해 태블릿, 스마트폰 등 다양한 기기에서 웹에 접속할 수 있게 됨에 따라 여러 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되었다. 이런 불편함을 해결하기 위해 반응형 웹이 탄생하게 되었다.
모바일 퍼스트(mobile first)
반응형 웹에서 빼놓을 수 없는 개념으로, 사용자 경험(UX)를 디자인 할 때 모바일일 경우를 최우선으로 초점을 맞춰 디자인하는 전략을 의미한다. 현재는 데스크탑 유저보다 모바일 유저가 공유하는 정보가 훨씬 많기 때문에, 이를 위해 모바일을 기반으로 한 UX를 우선적으로 디자인해야 한다는 것이다. 반응형 웹은 스마트폰에서 시작해 태블릿, PC까지 모든 디바이스를 지원할 수 있기 때문에 모바일 퍼스트 측면에 있어서도 중요하다.
반응형 웹의 장단점
장점
- 효율적인 유지 보수
하나의 컨텐츠에 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되어 유지보수가 효율적이다. 웹 페이지의 내용 수정 역시 하나의 페이지에서만 적용해도 동일하게 반영되고, 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다. 또한 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험 할 수 있다.
- 검색엔진 최적화(SEO) 유리
하나의 URL을 기반으로 화면만 바뀌므로 PC용 URL과 모바일용 URL이 같아 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
단점
- 사이트의 속도 저하
모바일 전용 사이트에 비해 PC 접속 환경까지 고려하여 만들어졌기 때문에 무겁고, 읽어야 할 소스들이 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결이 된다. 로딩 속도, 이미지 리사이징의 문제로 성능 저하가 생길 수 있으며, 실제로 사용하지 않은 자원을 전송 받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
- 웹 브라우저 호환성 문제
현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다. 이런 문제 때문에 디자인의 자유도가 떨어지며, 100% 맞춤 디자인이 어렵다는 점이 발생한다.
미디어 쿼리
미디어 쿼리는 CSS2.1 부터 적용된 단말기 종류에 따라 각기 다른 스타일을 적용시키는 미디어 타입에서 발전된 CSS3 기능으로, 미디어 타입보다 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있게 되었다. 미디어 쿼리는 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있어 반응형 웹 디자인의 핵심이다.
미디어 쿼리 적용법
<link>태그 속성을 이용한 적용법
<link
href="css파일이름.css"
media="screen and (min-width: 400px) and (max-width: 1000px)"
rel="stylesheet"
>
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style><link>태그나 <style>태그 사용 시 media 속성을 사용해 조건을 지정하여 해당 조건을 만족할 때만 해당 CSS를 사용하게 할 수 있다.
CSS 파일 또는 태그에서 직접 작성
body {
color: black;
}
@media screen (max-width: 400px) {
body {
color: red;
}
}CSS 파일이나 태그 내에서 직접 미디어 쿼리를 작성해 해당 미디어 쿼리 조건을 만족할 때 스타일을 적용시키는 방법이다.
미디어 쿼리 구문
@media 미디어 타입 (조건(너비 및 높이)) {
/* CSS 입력 부분 */
}미디어 타입: 코드가 어떤 미디어(디바이스)를 위한 것인지 브라우저에게 알려준다. 다양한 타입이 있으나 실무에서는all,print,screen정도를 주로 사용하며, 그 중에서도 대부분screen을 사용한다.all: 모든 미디어 타입
print: 프린터
screen: 컴퓨터 화면
speech: 스크린 리더
조건(너비 및 높이): 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일을 적용한다. 일반적으로 가장 많이 사용하는 조건은 뷰포트 너비이며, 이외에도 방향성을 조건으로 추가 할 수도 있다.min-width: 브라우저의 최소 너비
max-width: 브라우저의 최대 너비
orientation: 스크린의 가로 모드/세로모드
복잡한 미디어 쿼리
미디어 쿼리를 결합하거나 쿼리 목록을 만드는 식으로 미디어 쿼리를 좀 더 깊이 있게 사용할 수도 있다.
논리곱(and) 미디어 쿼리
and를 사용해 미디어 기능을 합칠 수 있다. 아래의 예시는 뷰포터의 너비가 400px 이상이면서 장치가 가로 모드인 경우 동작하는 미디어 쿼리이다.
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}논리합(or) 미디어 쿼리
콤마,로 분리해 미디어 쿼리의 조건 중 하나를 만족 시킨다면 CSS 스타일을 적용할 수 있다. 아래의 예시는 뷰포트의 너비가 600px 이상이거나 장치가 가로 모드인 경우 동작하는 미디어 쿼리이다.
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}부정(not) 미디어 쿼리
not연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용시킨다. 아래의 예시는 장치가 세로 모드인 경우에 동작하는 미디어 쿼리이다.
@media not all and (orientation: landscape) {
body {
color: blue;
}
}Uploaded by N2T