적응 사이트 빌드 전략

오늘날의 웹 사이트는 광범위한 범위의 장치에서 사용되고 있으며, 곧 출시될 Windows 8에 최적화된 모든 새로운 태블릿 및 PC 제품에서 이런 경향은 더 가속화될 것입니다. 따라서 다양한 디스플레이 설정과 사용자 입력 방법에 적절하게 적응할 수 있는 웹 사이트가 가장 넓은 사용자층에 가능한 한 최고의 환경을 제공하게 됩니다. 여기서는 여러 Windows 8 장치 폼 요소 및 사용자 입력 방법에서 제대로 표시되고 원활하게 작동하는 사이트와 웹 앱을 빌드하는 데 도움이 되는 Internet Explorer의 기능 사용 전략에 대해 설명합니다.

적응 디자인의 전체 개요

이 문서의 독자는 반응형 웹 디자인(적응 디자인이라고도 함)에 대해 이미 알고 있을 수도 있습니다. 근본적으로 반응형 웹 디자인은 웹 사이트의 기능을 사용자가 사이트를 보고 있는 장치의 기능과 가능한 한 비슷하게 만들어서 사이트를 사용자에게 "적응시키는" 것입니다.— 반응형 디자인에는 CSS 스타일 시트 미디어 쿼리, 가변 그리드 기반 레이아웃 및 크기를 유연하게 조정할 수 있는 이미지 등의 기술이 포함되어 있어 다양한 장치와 브라우저에서 똑같이 잘 작동하는 풍부하면서도 유연한 디자인이 가능합니다. 반응형 디자인은 특정 화면 크기와 사용자 에이전트를 대상으로 하는 사이트 환경 빌드와는 대조적입니다. 이러한 웹 사이트는 모양도 좋지 않고 디자인이 직관적이지도 않기 때문에 사용자가 불만을 느끼고, 최악의 경우에는 사용할 수 없습니다.

2010년 Ethan Marcotte이 처음 사용한 반응형 디자인이라는 용어는 웹 커뮤니티에서 그 의미를 확장해 왔습니다. 즉, 이제는 사용자의 화면 크기, 연결 속도, 터치 기능 및 기타 장치 특성과 상관없이 적절하고 계획적인 환경을 제공하는 방법도 반응형 디자인에 포함됩니다.

일반적인 반응형 웹 디자인 리소스를 찾고 있는 경우 다음과 같은 많은 훌륭한 자료와 데모를 이용할 수 있습니다.

이 항목의 나머지 부분에서는 Internet Explorer에서 반응형 적응 웹 사이트 빌드를 지원하는 새 기능과 Internet Explorer 및 Windows 8 장치를 더 큰 적응 웹 사이트 디자인 계획에 맞추기 위한 전략에 대해 살펴봅니다.

적응 사이트 빌드를 위한 두 가지 고려 사항: 디스플레이 및 입력

웹 사이트의 사용자 환경은 방문자가 보는 콘텐츠의 내용뿐 아니라 방문자가 수행하는 작업도 포함합니다. 방문자에게 표시되는 콘텐츠, 방문자가 수행하는 작업과 사이트와의 상호 작용은 레이아웃 자체만큼 전반적인 사용성에서 중요한 역할을 수행합니다. 사용자가 궁극적으로 보는 화면 및 웹 사이트와 상호작용하는 방식은 사용하는 특정 장치의 디스플레이 설정과 입력 기능에 따라 많이 결정됩니다.

사용자층이 사용할 것으로 생각되는 모든 플랫폼을 디자인하고 테스트하는 것은 불가능하므로, 많은 사이트 소유자들은 시장에 출시된 일부 특정 "웹 플랫폼 + 장치" 조합을 대상으로 몇 개 버전의 사이트를 만드는 쪽을 선택해 왔습니다. 웹에 사용할 수 있는 많은 컴퓨팅 장치 중에서 웹 개발자로서 새로운 Windows 8 장치 에코시스템을 준비하기 위해 수행할 수 있는 작업은 무엇일까요? 답변은 사이트의 콘텐츠 전략, 개발 리소스 및 전체적인 목표에 따라 많이 다릅니다. 그러나 일반적인 목표가 가장 넓은 사용자층에 가능한 한 최고의 환경을 제공하는 것이라면 사용자층이 웹 콘텐츠를 찾아보고 사용할 때 이용하는 장치의 다양한 디스플레이 설정과 사용자 입력 기능을 모두 고려하는 것이 중요합니다. 레이아웃과 사용자 입력 처리는 전체 Windows 8 조작 디자인 상황에서 상호 관련이 있는 요소지만, 터치 지원이 반드시 특정 디스플레이 설정을 의미하지는 않으며, 그 반대의 경우도 마찬가지입니다. 예를 들면, 다음과 같은 개별 환경을 고려해 봅니다.

  • 터치 지원이 제공되지 않는 와이드스크린 노트북을 Windows 8로 업그레이드하면, 최소 너비에 맞게 크기가 조정된 새로운 Windows UI에서 Internet Explorer를 실행 중일 수 있으며 일반적인 모바일 장치와 유사한 뷰포트 너비로 표시됩니다.
  • 터치 지원이 제공되지 않는 노트북이 Windows 8로 업그레이드되면 많이 사용되는 터치 태블릿 장치와 유사한 화면 크기를 갖습니다.
  • 24인치 터치 화면을 가진 통합 Windows 8 PC는 Internet Explorer 10 같은 Windows 8 Windows 스토어 앱을 단독으로 실행할 수 있으며 마우스나 키보드 플러그인을 설치할 필요도 없습니다.

마찬가지로, Windows 8의 Internet Explorer는 두 가지 형태인 Windows UI의 Internet Explorer와 데스크톱용 Internet Explorer로 제공됩니다. 디스플레이 설정과 터치 설정 중 어느 것도 사용자가 검색에 사용 중인 Internet Explorer 환경을 확실히 나타내는 데 사용할 수 없습니다. Windows UI의 Internet Explorer는 320픽셀 최소 너비에서 호스트 장치 디스플레이 전체 너비까지 크기가 조정될 수 있으며, 데스크톱용 Internet Explorer는 (F11 키를 눌러) 전체 화면 모드로 전환하거나 전체 화면 모드를 해제할 수 있습니다. 터치 사용 하드웨어인 경우 두 환경 모두에 대해 터치 입력이 지원됩니다. 사용자가 데스크톱용 Internet Explorer 또는 Windows UI에서 Internet Explorer를 실행 중인지를 감지할 프로그래밍 방식은 없습니다.

일반적으로 사이트에 대한 브라우저 간 호환성을 최대한 보장하기 위해 가장 좋은 방법은 사용자에게 제공할 사이트 환경의 유형을 결정할 때 브라우저 대신 기능을 검색하는 것입니다. Windows 8의 두 가지 Internet Explorer 검색 환경에 대해 동일한 전략이 적용됩니다. Windows 8 장치 전반에서 잘 작동하도록 사용자에게 친숙한 레이아웃 및 터치 입력 향상(선택 사항)을 구현하기 위해 고려해야 할 두 가지 주요 사항과 같이 사이트 고객층이 사용하는 다양한 디스플레이 설정과 사용자 입력 방법을 사용하는 것이 유용합니다.

Windows 8 장치를 사용한 적응 사이트 디자인 전략

요약하면, Windows 8에서 Internet Explorer를 사용하여 적응 사이트를 빌드하기 위한 몇 가지 일반적인 모범 사례가 있습니다.

특정 브라우저 또는 장치 기능을 가정하는 대신 기능 검색을 사용합니다. Windows 8의 Internet Explorer는 두 가지 UI 환경을 가진 단일 웹 플랫폼이며, 사용자가 어떤 환경을 검색에 사용 중인지 감지하는 방법은 없습니다. 미디어 쿼리 및 터치 감지 방법을 사용하여 사용자의 디스플레이 설정 및 장치 입력 기능에 대한 정보를 확인합니다.

디스플레이 특성 및 장치 입력 기능에 맞게 사이트 환경을 조정합니다. 특정 뷰포트 너비 또는 너비 범위를 입력 기능 또는 제한과 동일시하는 디자인은 지양합니다. 대신 사이트의 레이아웃과 사용자 입력 처리를 고려하고, Windows 8 사용자층이 사용할 만한 다양한 화면 및 입력 방법의 조합을 염두에 두는 것이 더 좋습니다. 미디어 쿼리 및 미디어 쿼리 수신기를 사용하여 다양한 디스플레이 설정에서 사이트의 레이아웃과 스타일을 조정하고, CSS 장치 적응을 사용하여 자동 확대/축소 크기 조정을 다시 정의합니다. 터치 디자인 지침에 따라 Internet Explorer의 포인터 모델을 활용하여 마우스, 펜, 터치 및 멀티 터치 입력을 쉽게 처리하고 제스처 이벤트를 사용하여 사이트의 터치 환경을 향상합니다.

다양한 너비 및 입력 방법의 매트릭스로 테스트합니다. 적응 사이트를 디자인하고 빌드할 때 다음 다이어그램에 제안된 테스트 매트릭스 같이 적어도 하나의 기본 변수 집합과 조합에서 지속적으로 테스트합니다.

x를 사이에 두 개의 표. 뷰포트 너비 표에는 320픽셀, 768픽셀 및 1024+픽셀이 나열되어 있고, 입력 방법 표에는 마우스, 키보드, 터치 및 펜이 나열되어 있음

사이트가 여러 특정 형식으로 제공되는 경우 몇 가지 일반적인 추론에 따라 사이트를 표시하고 사용자에게 전환 옵션을 제공합니다. 시장에 출시된 특정 장치 클래스를 대상으로 여러 가지 사이트 버전을 이미 만든 경우 위의 표를 사용하여 기존 모바일, 태블릿 및 데스크톱 환경을 Windows 8 Internet Explorer의 다양한 뷰포트 크기 및 사용자 입력 방법에 매핑할 수 있습니다.

태블릿 및 데스크톱 환경에 동등한 기능이 있는 경우 터치 지원을 포함하는 태블릿 환경을 선택합니다. 또는 태블릿 및 데스크톱 환경 중에서 임의로 선택합니다. 또한 사용자에게 최상의 사이트 환경을 제공하려면 기본 환경에서 다른 형식으로 전환할 수 있는 옵션을 제공하세요.

관련 항목

디스플레이 및 레이아웃
장치 적응
장치 방향 이벤트
유연한 상자("플렉스박스") 레이아웃
그리드 레이아웃
미디어 쿼리 및 수신기
다중 열 레이아웃
화면 방향 API
입력 처리
터치 지원 사이트 구현

 

 

표시:
© 2014 Microsoft. All rights reserved.