반응형 웹Responsive Web Design
반응형 웹은 하나의 페이지가 PC · 태블릿 · 스마트폰 등 방문자 화면의 너비에 맞춰 글자 배치와 이미지 크기를 스스로 바꿔 보여 주도록 만드는 방식이에요.
쉽게 말하면
PC에서 가로로 세 칸씩 나란히 보이던 상품 목록이 스마트폰에서는 한 칸씩 세로로 쌓여 보인다면, 그 사이트는 반응형 웹으로 만들어졌을 가능성이 커요. 반응형 웹 사이트는 기기마다 페이지를 따로 만들지 않아요. 페이지 하나가 화면 너비를 읽고, 그 너비에 맞게 배치를 바꿔요.
어디서 나온 말인가요
반응형 웹이라는 말은 2010년 5월 25일 웹 디자이너 이선 마콧(Ethan Marcotte)이 웹 디자인 매체 A List Apart에 쓴 글 'Responsive Web Design'에서 나왔어요. 이 글은 화면 너비에 따라 늘고 줄어드는 격자, 크기가 바뀌는 이미지, 화면 조건에 따라 다른 디자인 규칙을 적용하는 CSS 미디어 쿼리를 함께 쓰는 방법을 소개했어요(A List Apart 발행인 제프리 젤드먼의 소개 글).
왜 중요한가요
구글은 스마트폰 크롤러로 읽은 모바일 버전의 페이지를 기준으로 사이트를 색인하고 순위를 정해요. 이 방식을 모바일 우선 색인이라고 해요. 구글은 모바일 사이트를 만드는 방법으로 반응형 웹 · 동적 게재 · 별도 URL 세 가지를 들고, 이 가운데 반응형 웹을 권해요. 구글이 밝힌 이유는 반응형 웹이 만들고 관리하기 가장 쉬운 방식이라는 점이에요(구글 검색 센터).
큐샵에서는
큐샵으로 만든 사이트는 반응형 웹과 모바일 최적화를 기본으로 지원해요.
헷갈리는 말
| 헷갈리는 말 | 뜻 | 반응형 웹과 다른 점 |
|---|---|---|
| 별도 모바일 사이트 | PC용 페이지와 모바일용 페이지를 서로 다른 주소(m.mystore.com 등)로 따로 두는 방식 | 반응형 웹은 주소 하나 · 페이지 하나로 모든 기기에 대응하고, 별도 모바일 사이트는 기기별로 페이지와 주소가 나뉘어요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
