반응형 웹 디자인

반응형 웹 디자인(RWD)은 서버가 항상 모든 기기에 동일한 HTML 코드를 보내어 CSS를 사용해 기기의 페이지 렌더링을 조정하는 설정입니다. 모든 Googlebot 사용자 에이전트가 페이지와 애셋(CSS, 자바스크립트, 이미지)을 크롤링하도록 허용된 경우 Google 알고리즘은 이 설정을 자동으로 감지할 수 있습니다.

반응형 디자인은 모든 기기에 동일한 코드를 게재하고 화면 크기에 맞게 조정합니다.

요약

  • meta name="viewport" 태그를 사용하여 콘텐츠 조정 방법을 브라우저에 알립니다.
  • 자세한 문서는 웹 기초 사이트를 확인하세요.

meta name="viewport" 사용

페이지가 모든 기기에 맞춰 조정된다는 것을 브라우저에 알리려면 다음과 같이 문서의 헤드에 메타태그를 추가해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

메타 표시 영역 태그는 페이지의 크기와 배율을 기기 너비에 맞춰 조정하는 방법을 브라우저에 알립니다. 메타 표시 영역 요소가 없으면 모바일 브라우저가 기본적으로 페이지를 데스크톱 화면 너비로 렌더링합니다(대개 약 980px이지만 기기에 따라 다름). 그런 다음 모바일 브라우저는 글꼴 크기를 늘리고 화면에 맞춰 콘텐츠를 확장하거나 화면 내에 맞도록 콘텐츠의 일부만 표시하여 콘텐츠를 보기 좋게 조정합니다.

이로 인해 글꼴 크기의 일관성이 없어지게 되면 사용자가 콘텐츠와 상호작용하기 위해 두 번 탭하거나 손가락으로 확대해야 할 수 있습니다. 휴대기기에서 이 유형의 상호작용이 필요하면 Google에서는 이러한 페이지를 모바일에 최적화된 것으로 판단하지 않을 수 있습니다.

왼쪽은 메타 표시 영역 태그가 지정되지 않은 페이지입니다. 따라서 모바일 브라우저는 데스크톱 너비를 추측하여 화면에 맞게 페이지를 확장하므로 콘텐츠를 읽기 어렵게 됩니다. 오른쪽은 동일한 페이지에 기기 너비에 맞는 표시 영역 태그가 지정된 페이지로 모바일 브라우저가 페이지를 확장하지 않으며 콘텐츠가 읽기 쉽게 표시됩니다.

반응형 이미지에는 <picture> 요소를 포함시킵니다.

일반적으로 사이트가 Chrome 또는 Apple Mobile Safari 등 최신 브라우저에서 작동한다면 Google 알고리즘과도 잘 작동합니다.

반응형 디자인의 장점

다음과 같은 이유로 반응형 웹 디자인을 사용하는 것이 좋습니다.

  • 사용자가 단일 URL로 손쉽게 콘텐츠를 공유하고 연결할 수 있습니다.
  • 데스크톱/모바일 페이지의 존재를 알리지 않고도 Google의 알고리즘이 페이지에 정확하게 색인 생성 속성을 지정하는 데 도움이 됩니다.
  • 같은 콘텐츠에 여러 페이지를 유지하기 위한 엔지니어링 시간이 절약됩니다.
  • 모바일 사이트에 영향을 미치는 흔히 발생하는 실수의 발생 가능성이 감소합니다.
  • 기기에 최적화되어 있어 사용자에게 표시하기 위한 리디렉션이 필요하지 않으므로 로드 시간이 줄어듭니다. 또한 사용자 에이전트 기반 리디렉션은 오류가 발생하기 쉬우며 사이트의 사용자 환경을 저하할 수 있습니다(자세한 내용은 사용자 에이전트 감지 시 문제점 섹션 참조).
  • Googlebot이 사이트를 크롤링할 때 리소스가 절감됩니다. 반응형 웹 디자인 페이지에서는 콘텐츠의 모든 버전을 가져오기 위해 다른 Googlebot 사용자 에이전트로 여러 번 크롤링하는 것이 아니라 단일 Googlebot 사용자 에이전트가 페이지를 한 번만 크롤링하면 됩니다. 이러한 크롤링 효율성 향상으로 Google에서 사이트 콘텐츠의 색인을 더 많이 생성하고 최신 상태로 적절히 유지하는 데 도움을 줄 수 있습니다.

반응형 웹 디자인에 관심이 있는 경우 웹마스터 센터의 블로그 글을 확인하거나 웹 기초 사이트를 방문하세요.

자바스크립트

휴대기기에 최적화된 사이트 구축에 있어서 주의가 필요한 부분은 자바스크립트를 사용하여 서로 다른 기기의 사이트 렌더링과 동작을 조정하는 것입니다. 일반적으로 자바스크립트를 사용하여 페이지에 표시할 광고나 이미지 해상도를 결정하게 됩니다.

이 섹션에서는 자바스크립트 사용을 위한 다양한 접근 방법을 살펴보고 각 접근 방법이 반응형 웹 디자인 사용을 위한 Google의 권장사항과 어떻게 관련이 있는지 설명합니다.

일반 설정

모바일 사이트를 위해 자바스크립트를 구현하는 가장 흔한 방법은 다음과 같습니다.

  • 자바스크립트 적응성: 이 설정을 사용하면 모든 기기에 동일한 HTML, CSS, 자바스크립트 콘텐츠가 게재됩니다. 기기에서 자바스크립트가 실행되면 사이트의 렌더링이나 동작이 변경됩니다. 웹사이트에 자바스크립트가 필요하다면 Google에서는 이 설정을 권장합니다.
  • 통합 감지: 이 방식으로 구현하게 되면 웹사이트에서 자바스크립트와 서버 측 기기 기능 감지를 모두 사용하여 서로 다른 기기에 다른 콘텐츠를 게재합니다.
  • 동적 게재 자바스크립트: 이 설정에서는 모든 기기에 동일한 HTML이 게재되지만 기기의 사용자 에이전트에 따라 다른 자바스크립트 코드를 동적으로 게재하는 URL에서 자바스크립트가 게재됩니다.

다음은 각 설정과 관련된 자세한 설명입니다.

자바스크립트 적응성

이렇게 설정하면 URL은 모든 기기에 동일한 콘텐츠(HTML, CSS, 자바스크립트, 이미지)를 게재합니다. 자바스크립트가 기기에서 실행될 때만 사이트의 렌더링이나 동작이 변경됩니다. 이는 CSS 미디어 쿼리를 사용하는 반응형 웹 디자인의 작동 방식과 비슷합니다.

예를 들어, 페이지에서 모든 기기에 자바스크립트를 게재하는 외부 URL을 요청하는 <script> 요소가 포함된 동일한 HTML을 게재하는 경우 자바스크립트의 URL을 요청하는 모든 기기는 동일한 코드를 받습니다. 실행되고 나면 자바스크립트가 기기를 감지하고 페이지에서 어떤 부분을 조정할지 결정합니다(예: 데스크톱 대체 이미지나 코드 대신 스마트폰에 최적화된 이미지나 광고 코드 포함).

이 설정은 반응형 웹 디자인과 매우 밀접한 관련이 있으며 Google 알고리즘은 이 설정을 자동으로 감지합니다. 또한 페이지의 URL과 애셋이 콘텐츠를 동적으로 게재하지 않기 때문에 이 설정에는 Vary HTTP 헤더가 필요하지 않습니다. 이러한 장점 때문에 웹사이트에 자바스크립트를 사용해야 하는 경우 이 설정을 권장합니다.

통합 감지

통합 감지는 서버가 클라이언트에 있는 자바스크립트와 연계하여 기기의 기능을 감지하고 게재되는 콘텐츠를 변경하는 설정입니다.

예를 들어 기기가 데스크톱인지 스마트폰인지에 따라 사이트에서 콘텐츠 렌더링을 변경할 수 있습니다. 이때 웹사이트에서 화면 크기를 감지하고 이를 서버로 보내어 기기에 보낸 코드를 업데이트 또는 변경하는 자바스크립트를 포함시킬 수 있습니다. 일반적으로 자바스크립트는 감지된 기기의 기능을 쿠키에 저장하여, 다음번에 같은 기기를 이용하여 방문했을 때 서버에서 이를 감지합니다.

서버가 사용자 에이전트에 따라 다른 HTML을 반환하는 경우 통합 감지는 동적 게재 설정의 한 유형으로 간주됩니다. 자세한 내용은 모두 동적 게재 섹션에 설명되어 있으나 간단히 요약하자면 다른 HTML 콘텐츠를 다른 사용자 에이전트에 게재하는 URL이 요청되면 웹사이트에 'Vary: User-agent' HTTP 응답을 포함해야 합니다.

동적 게재 자바스크립트

이 설정에서는 요청하는 사용자 에이전트에 따라 다른 콘텐츠를 포함할 수 있는 외부 자바스크립트 파일을 포함하기 위해 <script> 요소가 포함된 동일한 HTML이 모든 기기에 게재됩니다. 즉, 자바스크립트 코드가 동적으로 게재됩니다.

이 경우 자바스크립트 파일을 'Vary: User-agent' HTTP 헤더와 함께 게재하는 것이 좋습니다. 이는 사용자 에이전트에 따라 자바스크립트가 다를 수 있음을 인터넷 캐시와 Googlebot에 알리는 신호이자, Googlebot에게 다른 Googlebot 사용자 에이전트를 사용하여 자바스크립트 파일을 크롤링하라는 신호입니다.