Modern HTML5 web pages (pages) often change various elements of their documents dynamically to provide rich functionality to users interactively. As users interact with a document via events, the combination of HTML, CSS, and JavaScript dynamically changes the document layout, which is the arrangement of the document elements visualized to the users. Web pages change their layouts not only to support user interaction but also to react to different screen sizes being used to run the pages. To support diverse devices with different screen sizes using a single web page document, developers use Responsive Web Design, which enables web page layouts to change when the sizes of the underlying devices change. While such dynamic features of web pages provide powerful experiences to users, they also make development of web pages more difficult. Even expert developers find it difficult to write HTML5 web pages correctly. In this paper, we first define the problem that functionalities of HTML5 web pages may become unusable due to layout changes, and propose a technique to detect the problem automatically. We show that our implementation detects such problems in real-world HTML5 web pages.
웹 애플리케이션은 사용자에게 풍부한 사용성을 제공하기위해 애플리케이션을 구성하는 객체를 실행중에 바꾸기도한다. 웹 애플리케이션에서 레이아웃은 사용자에게 객체를 보여줄 때 객체들이 배치되는 방식을 말하는데, 사용자가 이벤트를 통해 웹 애플리케이션과 상호작용함에따라 레이아웃이 동적으로 바뀔 수 있 다. 웹 애플리케이션은 HTML, CSS, 그리고 자바스크립트를 이용하여 레이아웃의 동적인 변화를 정의한다. 이와 같은 동적인 레이아웃 변화를 통해 웹 애플리케이션은 사용자와 상호작용 할 수 있을 뿐만 아니라, 웹 애플리케이션이 실행되는 기기의 다양한 화면 크기에도 대응할 수 있다. 실행 중인 기기의 크기에 반응하도 록 웹 애플리케이션을 설계할 수 있는데, 이와 같은 디자인 방식을 반응형 웹 디자인이라고 부른다. 반응형 웹 디자인을 이용하면 하나의 웹 애플리케이션을 여러가지 크기의 기기에서 실행하면서도 각각의 크기에 적합한 레이아웃을 제공할 수 있다. 그러나 이러한 동적인 레이아웃 변화를 이용하면 웹 애플리케이션에서 좋은 사용자 경험을 제공할 수 있지만, 개발자가 웹 애플리케이션을 유지, 관리하기 어려워진다. 숙련된 개발자들조차도 반응형 웹 애플리케이션을 올바르게 작성하기 어려워한다. 이 논문에서는 우선 동적인 레이 아웃 변화에의해 이벤트 객체를 사용자가 접근할 수 없게 되는 문제를 정의하고, 이 문제를 자동으로 탐지할 수 있는 기법을 제안한다. 우리는 실험을 통해 실제 반응형 웹 애플리케이션에서 문제를 자동으로 탐지할 수 있음을 확인했다.