반응형 레이아웃 실패(RLFs)를 위한 CSS 속성 국소화의 휴리스틱 접근 방식

반응형 레이아웃 실패 (Responsive Layout Failures, RLFs)는 일반적으로 다양한 화면 크기에서 적절한 레이아웃 동작을 방해하는 CSS 속성으로 인해 발생합니다. RLFs를 수정하기 위한 정확하고 효과적인 해결책을 찾으려면, 이러한 문제적 속성들을 국소화 (localization)하는 것이 필요합니다. 그러나 기존의 접근 방식들은 RLFs를 탐지하고 그에 대해 광범위한 CSS 패치 (patches)를 적용할 뿐입니다. 이러한 패치들은 실패의 근본 원인을 국소화하지 못한 채 레이아웃 전체를 변경해 버립니다. 이러한 격차를 해소하기 위해, 우리는 개발자들이 일반적으로 수동으로 국소화할 법한 특정 CSS 속성을 식별하는 휴리스틱 (heuristic) 접근 방식을 제안합니다. 이 접근 방식은 먼저 웹페이지에 존재하는 RLFs와 그에 영향을 받는 요소들을 탐지합니다. 다음으로, RLF 방향과 RLF 영역 내에 존재하는 요소들의 상대적 정렬 (relative alignment)을 사용하여 인근의 HTML 요소들을 국소화합니다. 그 후, Quora 및 Stack Overflow 질의를 분석하여 생성된 CSS 속성의 순위 기반 검색 세트 (ranked search set)를 사용하여 해당 요소들의 관련 CSS 속성들을 식별합니다. 마지막으로, 요소들과 그에 대응하는 속성 쌍들은 RLFs에 미치는 영향에 따라 순위가 매겨집니다. 우리는 이 접근 방식을 {
ormalfont extsc{LocaliCSS}}라는 도구로 구현하였으며, Top N Rank, MRR 및 P@K 지표를 사용하여 일련의 웹페이지 세트에서 이를 평가하였습니다. 이 도구는 45.2% (Top-1)에서 92.86% (Top-7) 사이의 국소화 정확도를 달성하였으며, MRR은 76%, P@3는 77.13%를 기록하였습니다. 또한, 숙련된 프론트엔드 엔지니어들이 우리 평가의 일환으로 RLFs를 수동으로 국소화하였습니다. 그들이 선호하는 CSS 속성은 Top-1 순위에서 42.86%, Top-7 순위에서는 최대 90.48%의 사례에서 우리 접근 방식의 제안과 일치하였습니다.