이 페이지는 Cloud Translation API를 통해 번역되었습니다.

전체 화면 경험 만들기

Google은 몰입형 전체 화면 웹사이트와 애플리케이션을 쉽게 만들 수 있는 기능을 갖추고 있지만, 웹의 다른 기능과 마찬가지로 몇 가지 방법이 있습니다. 전체 화면을 실행하는 '설치된 웹 앱' 환경을 지원하는 브라우저가 늘어남에 따라 이는 특히 중요합니다.

앱 또는 사이트를 전체 화면으로 표시

사용자 또는 개발자가 웹 앱 전체 화면을 만드는 방법에는 여러 가지가 있습니다.

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

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

모든 플랫폼이 똑같지는 않습니다. iOS Safari에는 전체 화면 API가 없지만 Android, Firefox, IE 11 이상의 Chrome에서는 지원됩니다. 개발자가 빌드하는 대부분의 애플리케이션은 전체 화면 사양에서 제공하는 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는전체 화면을 전환하는 데 사용할 수 있는 매우 유용한 스크립트를 만들었습니다. 보시다시피 공급업체 프리픽스 상황에서는 지정된 API에 비해 복잡하고 번거롭습니다. 아래의 코드를 약간 단순화하더라도 여전히 복잡합니다.

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 도움말

문서를 전체 화면으로 표시

본문 요소를 전체 화면으로 보는 것은 당연한 생각이지만, WebKit 또는 Blink 기반 렌더링 엔진을 사용하는 경우 모든 콘텐츠를 포함할 수 있는 가장 작은 크기로 본문 너비를 줄이는 이상한 효과를 볼 수 있습니다. (Mozilla Gecko는 괜찮습니다.)

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

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.standalone 읽기 전용 불리언 자바스크립트 속성을 사용하여 웹페이지를 전체 화면 모드로 표시할지 결정할 수 있습니다.
사과

Android용 Chrome

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

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

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

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

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

웹 애플리케이션용 매니페스트는 사용자가 앱을 볼 것으로 예상되는 영역 (예: 모바일 홈 화면)에서 사용자에게 앱이 표시되는 방식을 제어하고, 실행할 수 있는 항목과 실행 방법을 지시할 수 있는 간단한 JSON 파일입니다. 향후 매니페스트를 통해 앱을 더욱 세부적으로 제어할 수 있지만, 지금은 앱을 실행할 수 있는 방법에만 집중하고 있습니다. 특히 다음에 주의해야 합니다.

브라우저에 매니페스트에 관해 알리기
실행 방법 설명

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

<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"

게임

대부분의 게임은 즉시 매니페스트의 이점을 누릴 수 있습니다. 대부분의 게임은 전체 화면으로 실행하고 특정 방향을 지정하려고 합니다.

세로 스크롤러나 Flappy Birds와 같은 게임을 개발 중이라면 게임을 항상 세로 모드로 두는 것이 좋습니다.

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

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

    "display": "fullscreen",
    "orientation": "landscape"

뉴스 사이트

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

선택은 개발자에게 달려 있으며 사용자가 환경에 액세스하는 방식에 따라 달라집니다. 사이트에 있을 것으로 예상되는 모든 브라우저 Chrome을 사이트에 표시하려면 디스플레이를 browser로 설정합니다.

    "display": "browser"

대부분의 뉴스 중심 앱에서 뉴스 사이트를 앱처럼 취급하고 UI에서 웹과 유사한 Chrome을 모두 삭제하려면 display를 standalone로 설정하면 됩니다.

    "display": "standalone"

주소 표시줄 자동 숨김

다음과 같이 주소 표시줄을 자동으로 숨겨 '가짜 전체 화면'을 만들 수 있습니다.

window.scrollTo(0, 1);

이는 매우 간단한 방법입니다. 페이지가 로드되고 브라우저 표시줄에 사용 중지하라는 메시지가 표시됩니다. 안타깝게도 이 방식은 표준화되지 않았으며 제대로 지원되지 않습니다. 여러 가지 단점도 해결해야 합니다.

예를 들어 사용자가 페이지로 다시 돌아가면 브라우저에서 페이지의 위치를 복원하는 경우가 많습니다. window.scrollTo를 사용하면 이 재정의가 재정의되어 사용자에게 불편을 줍니다. 이 문제를 해결하려면 localStorage에 마지막 위치를 저장하고 특이한 사례 (예: 사용자가 페이지를 여러 창에서 연 경우)를 처리해야 합니다.

UX 가이드라인

전체 화면을 활용하는 사이트를 빌드하는 경우, 사용자가 좋아할 만한 서비스를 구축하기 위해 알아야 할 잠재적 사용자 환경 변경사항이 많이 있습니다.

탐색 컨트롤을 사용하지 마세요.

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

모든 주요 플랫폼에서 전체 화면 모드로 실행되는지 설치 모드로 실행되는지 쉽게 감지할 수 있습니다.

iOS

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

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

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

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

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

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 의사 선택기를 포함한 모든 표준 전체 화면 API를 사용할 수 있습니다.

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
}

사용자를 전체 화면 경험 유지

Fullscreen API는 때로 세심한 작업이 필요할 수 있습니다. 브라우저 공급업체는 사용자가 전체 화면 페이지에 머무르게 하고 싶어 하지 않으므로 최대한 빨리 전체 화면에서 벗어나는 메커니즘을 개발했습니다. 즉, 여러 페이지를 아우르는 전체 화면 웹사이트를 빌드할 수 없는 이유는 다음과 같습니다.

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

사용자를 전체 화면 환경에 머무르게 하려면 다음 두 가지 옵션이 있습니다.

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

#syntax를 사용하여 URL (window.location = '#somestate')을 업데이트하고 window.onhashchange 이벤트를 수신 대기하면 브라우저의 자체 기록 스택을 사용하여 애플리케이션 상태의 변경사항을 관리하거나, 사용자가 하드웨어 뒤로 버튼을 사용하도록 허용하거나, 다음과 같이 기록 API를 사용하여 간단한 프로그래매틱 뒤로 버튼 환경을 제공할 수 있습니다.

window.history.go(-1);

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

사용자가 가장 성가시게 하는 것은 웹사이트에서 예상치 못한 작업을 실행하는 것입니다. 사용자가 사이트로 이동할 때 속임수로 전체 화면으로 유도하려고 해서는 안 됩니다.

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

짜증 나.
브라우저는 나중에 언젠가 사용자에게 앱이 전체 화면을 차지하도록 허용할지 묻는 메시지를 표시할 수 있습니다.

앱을 전체 화면으로 실행하려면 각 플랫폼의 설치 환경을 사용해 보세요.

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

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

신중하게 생각하지 마세요. 배너나 바닥글을 사용하여 사용자에게 앱을 설치할 수 있다고 알립니다.
사용자가 메시지를 닫으면 다시 표시하지 않습니다.
처음 방문한 사용자는 서비스가 만족스럽지 않으면 앱을 설치하려고 할 가능성이 낮습니다. 사이트에서 긍정적인 상호작용이 발생한 후에 설치 메시지를 표시해 보세요
사이트를 정기적으로 방문하지만 앱을 설치하지 않는 사용자는 나중에 앱을 설치할 가능성이 낮습니다. 계속 스팸을 보내지 마세요.

결론

완전히 표준화되고 구현된 API는 없지만 이 문서에 제공된 가이드 중 일부를 사용하면 클라이언트에 관계없이 사용자의 전체 화면을 활용하는 환경을 쉽게 빌드할 수 있습니다.