전체 화면 경험 만들기

사용자가 몰입도 높은 전체 화면 웹사이트를 쉽게 만들고 웹상의 모든 것과 마찬가지로 이를 위한 몇 가지 방법이 있습니다. '설치된 웹 브라우저'를 지원하는 브라우저가 늘고 있는 오늘날 웹 앱' 전체 화면을 실행하는 환경입니다.

앱 또는 사이트를 전체 화면으로 구현

사용자나 개발자가 웹 앱 전체 화면을 구현하는 방법에는 여러 가지가 있습니다.

  • 사용자 동작에 응답하여 브라우저에 전체 화면 요청
  • 홈 화면에 앱을 설치합니다.
  • 주소 표시줄을 자동으로 숨겨서 가상으로 전체 화면 구성

사용자 동작에 응답하여 브라우저에 전체 화면 요청

모든 플랫폼이 동일하지는 않습니다. iOS Safari에는 전체 화면 API가 없지만 Android의 Chrome에서는 사용할 수 있습니다. Firefox 및 IE 11 이상에서만 제공됩니다. 빌드하는 대부분의 애플리케이션은 JS API 및 전체 화면 사양에서 제공하는 CSS 선택자. 주요 전체 화면 환경을 빌드할 때 주의해야 할 JS API는 다음과 같습니다.

  • element.requestFullscreen() (현재 Chrome, Firefox, IE에서 프리픽스됨) 요소를 전체 화면 모드로 표시합니다.
  • document.exitFullscreen() (현재 Chrome, Firefox, IE에서 프리픽스됨. Firefox는 cancelFullScreen()를 대신 사용) 전체 화면 모드를 취소합니다.
  • document.fullscreenElement (현재 Chrome, Firefox, IE에서 프리픽스됨) 요소가 전체 화면 모드에 있으면 true를 반환합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

앱이 전체 화면일 때 브라우저의 UI 컨트롤을 더 이상 사용할 수 없음 사용할 수 있습니다. 이렇게 하면 사용자가 경험해 볼 수 있습니다 포워드와 같은 표준 탐색 컨트롤이 없습니다. 뒤로 새로고침 버튼인 이스케이프 해치가 없습니다. 그것은 이 시나리오를 수용하는 것이 중요합니다. CSS 선택자를 사용하면 브라우저가 전체 화면 모드

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

위의 예는 약간 부자연스럽습니다. 주변의 모든 복잡성을 숨겼습니다. 공급업체 접두사를 사용하면 됩니다.

실제 코드는 훨씬 더 복잡합니다. Mozilla 에서 전체 화면을 전환하는 데 사용할 수 있는 매우 유용한 스크립트를 만들었습니다. 따라서 보시다시피 공급업체 접두사 상황이 복잡하고 번거로울 수 있습니다. 코드를 약간 단순화하더라도 아래는 여전히 복잡합니다.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

우리 웹 개발자들은 복잡한 것을 싫어합니다. 개발자가 사용할 수 있는 멋진 상위 수준의 추상 API입니다. Sindre Sorhus의 Screenfull.js 모듈입니다. 이는 약간 다른 두 JS API와 공급업체 접두사를 하나로 통합합니다. 일관성 있는 API를 제공합니다.

Fullscreen API 도움말

문서를 전체 화면으로 전환
<ph type="x-smartling-placeholder">
</ph> 본문 요소의 전체 화면
그림 1: 본문 요소의 전체 화면

body 요소를 전체 화면으로 사용한다고 생각하는 것이 당연하지만, 웹킷 또는 블링크 기반 렌더링 엔진에서는 본문 너비를 모든 요소를 포함하는 가장 작은 크기로 있습니다. (Mozilla Gecko는 괜찮습니다.)

<ph type="x-smartling-placeholder">
</ph> 문서 요소의 전체 화면
그림 2: 문서 요소의 전체 화면

이 문제를 해결하려면 본문 요소 대신 문서 요소를 사용하세요.

document.documentElement.requestFullscreen();
동영상 요소를 전체 화면으로 구현

동영상 요소를 전체 화면으로 만드는 방법은 다른 요소를 전체화면으로 전환하는 방법과 요소를 전체 화면으로 사용할 수 있습니다. 동영상에서 requestFullscreen 메서드를 호출합니다. 요소가 포함됩니다.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

<video> 요소에 컨트롤 속성이 정의되지 않은 경우 전체 화면이 되면 사용자가 동영상을 제어할 방법이 없습니다. 이 동영상을 래핑하는 기본 컨테이너를 사용하여 컨트롤을 포함해야 합니다.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

이렇게 하면 컨테이너와 컨테이너 이미지를 결합하고 CSS 의사 선택기를 사용하여 객체를 반환할 수 있습니다 (예: 'goFS' 버튼 숨기기).

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

이 패턴을 사용하면 전체 화면이 실행되는 시점을 감지하고 적절한 사용자 인터페이스를 사용해야 합니다. 예를 들면 다음과 같습니다.

  • 시작 페이지로 돌아가는 링크 제공
  • 대화상자를 닫거나 뒤로 이동하는 메커니즘을 제공합니다.

홈 화면에서 페이지 전체 화면 시작

사용자가 전체 화면으로 이동할 때 전체 화면 웹페이지를 실행하는 것은 불가능합니다. 브라우저 공급업체는 모든 페이지가 로드될 때마다 전체 화면 경험을 제공한다는 것을 잘 알고 있습니다. 매우 번거롭기 때문에 전체 화면으로 전환하려면 사용자 동작이 필요합니다. 공급업체는 사용자가 '설치'하도록 허용합니다. 설치 과정이야말로 사용자가 웹 브라우저에서 앱을 실행하길 원한다는 신호를 있습니다.

주요 모바일 플랫폼에서는 매니페스트 파일을 포함할 수 있습니다.

iOS

iPhone이 출시된 이후로 사용자는 웹 앱을 설치하여 전체 화면 웹 앱으로 실행할 수 있습니다.

<meta name="apple-mobile-web-app-capable" content="yes" />

content가 yes로 설정된 경우 웹 애플리케이션이 전체 화면 모드로 실행됩니다. 그렇지 않은 경우에는 그렇지 않습니다. 기본 동작은 Safari를 사용하여 웹을 표시하는 것입니다. 있습니다. 웹페이지를 전체 화면 모드로 표시할지 여부를 결정할 수 있습니다. window.navigator.single 읽기 전용 부울 JavaScript 속성을 사용하여

<ph type="x-smartling-placeholder"></ph> Apple

Android용 Chrome

최근 Chrome 팀은 브라우저에 다음 작업을 수행하도록 지시하는 기능을 구현했습니다. 사용자가 홈 화면에 추가하면 페이지를 전체 화면으로 실행할 수 있습니다. 그것은 iOS Safari 모델과 유사합니다.

<meta name="mobile-web-app-capable" content="yes" />

웹 앱에 애플리케이션 바로가기 아이콘을 추가하도록 설정할 수 있습니다. 앱이 전체 화면 '앱 모드'로 실행되도록 합니다. 사용 Android용 Chrome '홈 화면에 추가' 메뉴 항목을 찾습니다.

<ph type="x-smartling-placeholder"></ph> Chrome

더 나은 옵션은 웹 앱 매니페스트를 사용하는 것입니다.

웹 앱 매니페스트 (Chrome, Opera, Firefox, Samsung)

웹 애플리케이션용 매니페스트 간단한 JSON 파일로 개발자가 영역에서 앱이 사용자에게 표시되는 방식을 사용자가 앱 (예: 모바일 홈 화면)을 볼 것이라고 기대하고 사용자가 실행할 수 있는 기능, 더 중요한 것은 실행 방법을 결정하는 것입니다. 미래에는 매니페스트를 통해 앱을 훨씬 더 잘 제어할 수 있게 되지만, 지금 당장은 우리는 앱을 출시하는 방법에만 집중하고 있습니다 특히 다음에 주의해야 합니다.

  1. 브라우저에 매니페스트 정보 알리기
  2. 실행 방법 설명

매니페스트를 생성하고 사이트에 호스팅하면 앱을 포함하는 모든 페이지에서 다음과 같이 링크 태그를 추가하기만 하면 됩니다.

<link rel="manifest" href="/manifest.json" />

Chrome은 Android용 버전 38 (2014년 10월)부터 매니페스트를 지원함 웹 앱이 설치되었을 때 표시되는 방식을 제어할 수 있습니다. 홈 화면에 추가하는 방법 (short_name, name, icons 속성을 통해) 및 사용자가 시작 아이콘을 클릭하면 start_url, display, orientation)을 입력합니다.

아래는 예시 매니페스트입니다. 카테고리에 포함될 수 있는 모든 항목을 합니다.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

이 기능은 완전히 점진적인 기능이며, 이를 통해 더 효과적이고 기능을 지원하는 브라우저 사용자를 위한 통합 환경을 제공합니다.

사용자가 홈 화면에 사이트나 앱을 추가하면 앱처럼 취급할 수 있습니다. 즉, 사용자가 광고를 클릭할 수 있도록 제품 방문 페이지가 아닌 앱의 기능을 평가합니다. 예를 들어 사용자가 앱에 로그인해야 하는 경우 있습니다.

유틸리티 앱

대부분의 유틸리티 앱은 이 기능의 이점을 즉시 누릴 수 있습니다. 이러한 경우 다른 앱과 마찬가지로 독립형으로 실행하고 싶을 것입니다. 광고를 게재할 수 있습니다. 앱이 독립적으로 실행되도록 하려면 웹에 추가하세요. 앱 매니페스트:

    "display": "standalone"
게임

대부분의 게임은 매니페스트의 이점을 즉시 활용할 수 있습니다. 방대한 대부분의 게임이 전체 화면으로 실행되기를 원하며 방향을 설정할 수 있습니다.

수직 스크롤러나 플래피 버드 같은 게임을 개발 중이라면 게임이 항상 세로 모드로 표시되는 것이 좋습니다.

    "display": "fullscreen",
    "orientation": "portrait"

반면 퍼즐 게임이나 X-Com과 같은 게임을 만드는 경우에는 게임에서 항상 가로 방향을 사용하길 원할 것입니다.

    "display": "fullscreen",
    "orientation": "landscape"
뉴스 사이트

대부분의 경우 뉴스 사이트는 순수한 콘텐츠 기반 환경입니다. 대부분의 개발자 당연히 뉴스 사이트에 매니페스트를 추가할 생각은 하지 않습니다. 매니페스트 시작할 항목 (뉴스 사이트의 첫 페이지)을 정의하고 실행하는 방법 (전체 화면 또는 일반 브라우저 탭)입니다.

선택은 여러분에게 달려있습니다. 또한 사용자가 경험해 볼 수 있습니다 사이트에 Chrome OS로 로드하는 데 필요한 browser로 설정하면 됩니다.

    "display": "browser"

뉴스 사이트가 대다수의 뉴스 중심 앱처럼 느껴지도록 만들고 싶다면 사용하고 UI에서 웹과 유사한 모든 Chrome을 제거함으로써 디스플레이를 standalone로 설정하면 됩니다.

    "display": "standalone"

주소 표시줄을 자동으로 숨기기

'가짜 전체 화면'이 가능합니다. 다음과 같이 주소 표시줄을 자동으로 숨깁니다.

window.scrollTo(0, 1);
드림

이 방법은 매우 간단합니다. 페이지가 로드되고 브라우저 표시줄에 방해하지 마세요. 안타깝게도 표준이 되어 있지 않고 지원됩니다. 여러 가지 별난 문제를 해결해야 합니다.

예를 들어 사용자가 페이지를 방문할 때 브라우저에서 해당 위치로 다시 이동합니다. window.scrollTo를 사용하면 이 작업이 재정의되어 있습니다. 이 문제를 해결하려면 마지막 위치를 극단적인 사례를 처리합니다 (예: 사용자가 페이지가 여러 개의 창으로 열림).

UX 가이드라인

전체 화면을 활용하는 사이트를 구축할 때는 알아야 할 잠재적인 사용자 환경 변화의 수 사용자가 좋아할 만한 서비스를 구축할 수 있어야 합니다.

탐색 컨트롤에 의존하지 않음

iOS에는 하드웨어 뒤로 버튼 또는 새로고침 동작이 없습니다. 따라서 사용자가 종속되지 않고 앱을 탐색할 수 있도록 합니다.

실행 중인 기기가 전체 화면 모드인지 설치 모드인지 감지할 수 있습니다. 모든 주요 플랫폼에서 쉽게 사용할 수 있습니다

iOS

iOS에서는 navigator.standalone 불리언을 사용하여 사용자가 홈 화면에서 실행되지 않는지 확인할 수 있습니다

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

웹 앱 매니페스트 (Chrome, Opera, 삼성)

설치된 앱으로 실행하면 Chrome이 실제 전체 화면에서 실행되지 않음 document.fullscreenElement가 null을 반환하고 CSS 선택자를 반환합니다. 작동하지 않습니다.

사용자가 사이트에서 동작을 통해 전체 화면을 요청하면 표준 CSS 의사 선택기를 비롯하여 전체 화면 API를 사용할 수 있습니다. 다음과 같이 전체 화면 상태에 반응하도록 UI를 조정합니다.

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

사용자가 홈 화면에서 사이트를 실행하는 경우 display-mode 미디어 웹 앱 매니페스트에 정의된 것으로 설정됩니다. 만약 다음과 같습니다.

@media (display-mode: fullscreen) {
}

사용자가 애플리케이션을 독립형 모드로 실행하면 display-mode는 미디어 쿼리는 standalone입니다.

@media (display-mode: standalone) {
}

Firefox

사용자가 사이트를 통해 전체 화면을 요청하거나 다음에서 앱을 실행할 때 전체 화면 모드에서는 전체 화면 상태에 반응하도록 UI를 조정할 수 있는 CSS 의사 선택기 다음과 같습니다.

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

IE에서는 CSS 의사 클래스에 하이픈이 없지만, 그 외에는 Chrome 및 Firefox

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

사양

사양의 철자는 IE가 사용하는 구문과 일치합니다.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

사용자를 전체 화면 환경에 유지

전체 화면 API는 때로는 약간 까다로울 수 있습니다. 브라우저 공급업체는 사용자를 전체 화면 페이지에 고정하여 가능한 한 빨리 전체 화면이 종료됩니다. 즉, 인코더-디코더 아키텍처를 여러 페이지에 걸쳐 있는 전체 화면 웹사이트가 표시되는 이유는 다음과 같습니다.

  • window.location = "http://example.com"를 사용하여 프로그래매틱 방식으로 URL을 변경하면 전체 화면이 종료됩니다.
  • 사용자가 페이지 안의 외부 링크를 클릭하면 전체 화면이 종료됩니다.
  • navigator.pushState API를 통해 URL을 변경해도 전체 화면 환경으로 제공됩니다.

사용자를 전체 화면 환경으로 유지하려면 다음 두 가지 옵션이 있습니다.

  1. 설치 가능한 웹 앱 메커니즘을 사용하여 전체 화면을 실행합니다.
  2. # 프래그먼트를 사용하여 UI 및 앱 상태를 관리합니다.

#syntax를 사용하여 URL (window.location = "#somestate") 업데이트 및 window.onhashchange 이벤트를 수신 대기하면서 브라우저의 자체 애플리케이션 상태의 변경사항을 관리하며 사용자가 이를 사용할 수 있도록 허용하는 하드웨어 뒤로 버튼 또는 프로그래밍 방식의 간단한 뒤로 버튼 제공 다음과 같이 기록 API를 사용합니다.

window.history.go(-1);

사용자가 전체 화면으로 전환할 시점을 선택하도록 허용

웹사이트에서 무언가를 하는 것만큼 사용자를 귀찮게 하는 것은 없습니다. 있습니다. 사용자가 사이트로 이동할 때 속임수로 사용자를 속이지 마세요. 전체 화면

첫 번째 터치 이벤트를 가로채서 requestFullscreen()를 호출하지 마세요.

  1. 짜증 나.
  2. 브라우저는 향후 언젠가 사용자에게 앱이 전체 화면을 차지할 수 있습니다.

앱을 전체 화면으로 실행하려면 사용자 경험을 제공합니다

홈 화면에 앱을 설치하라는 스팸을 사용자에게 보내지 마세요.

설치된 앱 메커니즘을 통해 전체 화면 환경을 제공하려는 경우 사용자를 배려하는 것이 중요합니다

  • 조심하세요. 배너 또는 바닥글을 사용하여 사용자에게 있습니다.
  • 메시지를 닫더라도 다시 표시하지 마세요.
  • 사용자가 첫 방문 시에는 사용자가 앱을 설치할 때 서비스에 만족합니다 설치 후에 추가 메시지를 표시해 보세요 도움이 될 수 있습니다
  • 사이트를 정기적으로 방문하지만 앱을 설치하지 않는 사용자는 향후 앱을 설치할 가능성이 낮습니다. 계속 스팸을 보내지 마세요.

결론

완전히 표준화 및 구현된 API는 없지만, 사용자 환경을 개선할 수 있는 환경을 만들어 사용자의 전체 화면을 활용할 수 있습니다.

의견