작성자:
다른 콘텐츠들을 효과적으로 감추면서 무언가를 전체 화면으로 보여주는 것은 뛰어난 사용자 경험을 창출하는 특별한 능력이 되었습니다.
우리에게 웹 브라우저의 설정을 변경하여 툴바를 감추게 하는 등의 가이드를 제공하였던 웹 사이트들을 기억해 보세요. 단지 약간의 사용자 경험이 증가했을 수도 있습니다. 어쩌면 저만 그렇게 생각할 수도 있겠네요… 🙂
어느 쪽이든 간에 얼마 전 우리는 웹 브라우저들로부터 전체화면 기능을 지원 받게 되었습니다. 웹 브라우저에서 사용자가 현재 웹 사이트를 전체화면으로 볼 수 있게 된 것입니다. 하지만 더 낳은 사용자 경험을 위해서는 웹 개발자인 우리는 전체화면 기능을 우리 스스로 작동시키기를 원합니다. 전체 웹 사이트 또는 단지 특정 요소를 말이죠.
이제 우리는 그렇게 할 수 있습니다!
전체화면 요청
이제 우라는 requestFullScreen이라는 메소드를 사용 할 수 있습니다. 현재까지 FireFox, Google Chrome 그리고 Safari에서 지원하고 있고 전체화면을 작동시키기 위해서 아래의 코드가 필요합니다.
W3C 명세의 W3C 전체화면 표준 API를 보면, 모든 메소드에서 Fullscreen 단어의 s가 소문자인 반면에 Firefox, Chrome 그리고 Safari에서는 S가 대문자입니다.
위의 코드를 설명하면, 문서의 최상위 요소(예를 들어, HTML 문서의 <html> 요소) 참조를 얻은 후 전체화면으로 보이도록 하였습니다. 마찬가지로 video와 같은 특정한 요소의 참조를 얻어 전체화면으로 보여 줄 수도 있습니다.
전체화면 취소
만약 전체화면 상태를 취소하고 싶으면 아래의 코드와 같이 취소 메소드를 해당 문서 요소에서 호출하면 됩니다.
W3C는 전체화면을 취소하는 메소드 명을 exitFullscreen로 하여 ‘전체화면에서 나감’이라고 하지만 기존 웹 브라우저에서는 cancelFullScreen으로 하여 ‘전체화면 취소’라고 메소드명을 정한 것을 알아두세요.
전체화면 상태 변화 감지
우리는 사용자가 전체화면을 취소하는 것과 같은 행위를 알 수 있으면 좋을 것입니다. 그래서 우리에게는 fullscreenchange 이벤트가 있습니다. 해당 이벤트는 전체화면으로 보여지길 원하는 요소(element)나 문서(document) 둘 다 적용할 수 있습니다. 단지 전체화면 상태를 감지하고 변경될 때 아래처럼 작성하면 됩니다.
전체화면 스타일링
CSS에는 전체화면 요소들을 스타일링하기 위한 많은 가상 클래스(pseudo-class)들이 있습니다. 가장 믿을 만한 것은 full-screen이고 문서나 요소가 전체화면 상태에 있을 때 자동적으로 발생하게 됩니다.
W3C는 ‘full’과 ‘screen’ 두 단어 사이에 하이픈을 사용하고 있지 않다는 것에 주의하세요.
오직 Firefox 브라우저만이 전체화면으로 될 요소의 넓이와 높이를 100%로 적용된다는 점을 언급해야겠습니다. 이는 꼭 필요하다고 생각됩니다. 위의 CSS처럼 덮어 쓰일 수도 있습니다.
키 입력과 전체 화면
보안 이유로 전체화면 상태에서 대부분의 키보드 입력은 막혔습니다. 하지만 Google Chrome에서는 아래와 같이 키보드 지원을 요청 할 수 있습니다.
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
위 코드는 Safari에서는 작동되지 않습니다.
Firefox에서는 어떻게 하면 사용자의 보안 위험 없이 키보드 입력을 지원할 수 있는 다양한 방법들을 찾고 있습니다. 아직 아무도 구현하지는 않았지만 한 가지 제안으로 특정 알림을 사용자에게 보여주는 requestFullscreenWithKeys 메소드가 있습니다.
웹 브라우저 지원 여부
이 기능은 Firefox 버전 10부터 지원하였고 Google Chrome은 버전 15, Safari는 5.1 이후부터 지원해 왔습니다.
전체화면 API를 가지고 놀아보기!
여러분이 가지고 놀 수 있는 전체화면 API 데모가 있습니다. 모든 코드는 GitHub에 Fullscreen repository에 있습니다.
원저자: Robert Nyman – 원문으로 가기
댓글이 없습니다.