[논문 리뷰] Modular Responsive Web Design using Element Queries

Lucas Wiener, Tomas Ekholm외 1명|arXiv (Cornell University)|2015. 11. 04.

Web Data Mining and Analysis참고 문헌 3인용 수 5

한 줄 요약

이 논문은 요소 쿼리(element queries)를 구현하여 컴포넌트가 전역 뷰포트가 아니라 로컬 컨테이너 크기에 맞춰 적응할 수 있도록 해, 모듈식 반응형 웹 디자인을 가능하게 하는 오픈소스 자바스크립트 라이브러리 ELQ를 제안한다. 효율적인 요소 크기 변경 감지 기술을 활용함으로써 ELQ는 이전 방법 대비 최대 37배 빠른 성능 향상을 달성하면서도 표준 HTML, CSS, 자바스크립트와 완전히 호환되어 진정으로 재사용 가능한 반응형 컴포넌트를 구현할 수 있다.

ABSTRACT

Responsive Web Design (RWD) enables web applications to adapt to the characteristics of different devices such as screen size which is important for mobile browsing. Today, the only W3C standard to support this adaptability is CSS media queries. However, using media queries it is impossible to create applications in a modular way, because responsive elements then always depend on the global context. Hence, responsive elements can only be reused if the global context is exactly the same, severely limiting their reusability. This makes it extremely challenging to develop large responsive applications, because the lack of true modularity makes certain requirement changes either impossible or expensive to realize. In this paper we extend RWD to also include responsive modules, i.e., modules that adapt their design based on their local context independently of the global context. We present the ELQ project which implements our approach. ELQ is a novel implementation of so-called element queries which generalize media queries. Importantly, our design conforms to existing web specifications, enabling adoption on a large scale. ELQ is designed to be heavily extensible using plugins. Experimental results show speed-ups of the core algorithms of up to 37x compared to previous approaches.

연구 동기 및 목표

• 현재 반응형 웹 디자인에서 전역 뷰포트에 의존하는 CSS 미디어 쿼리에만 기반한 모듈성이 부족한 문제를 해결하기 위해.
• 반응형 컴포넌트가 로컬 컨테이너 컨텍스트에 따라 적응하도록 하여 다양한 레이아웃 간의 재사용성을 향상시키기 위해.
• 기존 웹 표준(HTML, CSS, 자바스크립트)을 준수하여 광범위한 호환성과 도구 지원을 확보하기 위해.
• 요소 크기 변경 감지를 고성능으로 구현하여 반응형 규칙의 효율적인 런타임 평가를 가능하게 하기 위해.
• 실제 적용에 적합하고 확장 가능하며 프로덕션 수준의 구현을 제공하기 위해.

제안 방법

• CSS 미디어 쿼리를 요소 쿼리로 확장하여, 스타일 규칙이 대상 요소의 컨테이너 크기에 따라 조건부로 적용되도록 한다.
• 효율적이고 브라우저 최적화된 감지 메커니즘을 사용해 요소 크기 변경 이벤트를 관찰하는 경량 자바스크립트 라이브러리(ELQ)를 구현한다.
• 확장성과 기존 프레임워크 및 도구와의 통합을 지원하기 위해 플러그인 아키텍처를 채택한다.
• 배치 처리와 최적화된 이벤트 처리를 통해 크기 변경 감지 중 계산 오버헤드를 줄인다.
• 이전 브라우저(예: IE8)와의 호환성을 유지하고 표준 CSS 문법을 지원하여 원활한 도입을 보장한다.
• 요소의 크기가 변경될 때 이를 감지하고 관련된 요소 쿼리의 재평가를 트리거하는 메커니즘을 도입한다.

실험 결과

연구 질문

• RQ1 전역 뷰포트에 결합되지 않고도 다양한 레이아웃 간에 진정으로 재사용 가능한 반응형 컴포넌트를 만들 수 있는가?
• RQ2 기존 웹 표준과 도구 생태계와 완전히 호환되면서도 요소 쿼리를 구현할 수 있는가?
• RQ3 요소 크기 변경 감지를 향상시켜 풀링 기반 또는 이벤트 기반 접근 방식보다 훨씬 높은 성능을 달성할 수 있는가?
• RQ4 기존의 미디어 쿼리 기반 코드베이스를 최소한의 변경으로 요소 쿼리 기반으로 이관할 수 있는가?
• RQ5 요소 쿼리는 레이아웃의 동적 변화(예: 메뉴 재배치)를 유도하면서도 반응형 동작을 손상시키지 않는가?

주요 결과

• ELQ는 이전 방법 대비 핵심 크기 변경 감지 알고리즘에서 최대 37배 빠른 성능 향상을 달성하여 대규모 애플리케이션에서 성능을 크게 향상시켰다.
• 부트스트랩 프레임워크를 요소 쿼리 기반으로 이관하기 위해 스타일 관련 코드의 약 0.6%만 수정하면 되어 이관 오버헤드가 매우 낮음을 입증했다.
• ELQ는 인터넷 익스plorer 8를 포함한 주요 브라우저를 모두 지원하여 광범위한 호환성과 프로덕션 준비성을 확보했다.
• 라이브러리가 반응형 모듈이 로컬 컨테이너 크기에 맞춰 적응하도록 하여 전역 뷰포트에서 분리함으로써 모듈성을 복원했다.
• ELQ의 요소 쿼리는 요소의 크기 변경이나 재배치와 같은 동적 레이아웃 변화에 반응할 수 있어, 반응형 동작을 손상시키지 않는다.
• 표준 HTML, CSS, 자바스크립트와 완전히 백워드 컴пат리블하여 컴iles나 커스텀 문법 없이도 통합이 가능하다.