[ Article ]

Journal of Digital Contents Society - Vol. 27, No. 1, pp.107-115

ISSN: 1598-2009 (Print) 2287-738X (Online)

Print publication date 31 Jan 2026

Received 25 Nov 2025 Revised 23 Dec 2025 Accepted 02 Jan 2026

DOI: https://doi.org/10.9728/dcs.2026.27.1.107

Look-and-Feel 기반의 모바일 UI에 대한 유사도 검출 기법에 관한 연구

이명재¹ ; 김혜영²^{, *}

1홍익대학교 일반대학원 게임학과
2홍익대학교 게임학부 게임소프트웨어전공 교수

Similarity Detection Methods for Mobile User Interfaces Based on Look-and-Feel

Myeong-Jae Lee¹ ; Hye-Young Kim²^{, *}

1Department of Game, Graduate School, Hongik University, Sejong 30016, Korea
2Professor, School of Game(Major in Game Software), Hongik University, Sejong 30016, Korea

Correspondence to: ^*Hye-Young Kim Tel: +82-44-860-2683 E-mail: hykim@hongik.ac.kr

Copyright ⓒ 2026 The Digital Contents Society
This is an Open Access article distributed under the terms of the Creative Commons Attribution Non-CommercialLicense(http://creativecommons.org/licenses/by-nc/3.0/) which permits unrestricted non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited.

초록

현대 모바일 사용자 인터페이스(UI; User Interface) 디자인은 플랫폼 가이드라인의 영향으로 화면 구조가 상향 평준화되었다. 그 결과 구조 기반 UI 유사도 모델은 다양한 화면에 일률적으로 높은 유사도를 부여하며, 상위 유사도 구간에서 구별력이 떨어지는 현상이 나타난다. 이에 따라 UI 유사성 판단에 있어 단순 구조 유사도만으로는 충분하지 않으며, 심미적 요인을 함께 고려해야 한다. 본 논문의 실험 및 성능 분석 결과에 의하면 대규모 UI 데이터셋을 활용한 실험과 성능 분석을 통하여, 모바일 UI들은 구조 유사도가 높게 몰리는 현상을 확인할 수 있었으며 이는 구조 유사도 만으로의 유사성 분석의 한계를 보여주었다. 따라서 본 연구는 구조 유사도와 6가지 심미 요인인 비율, 간결성, 질서, 리듬, 밀도 그리고 균형을 결합한 LFSS(Look and Feel Similarity score)를 보조 지표로 제안함으로써 모바일 UI의 유사도 검출에 대한 효용성을 보여주었다.

Abstract

Modern mobile user interface (UI) design has become highly standardized in terms of screen layout owing to platform guidelines. Consequently, structure-based UI similarity models tend to assign uniformly high similarity scores to various screens, leading to reduced discriminative power in the high-similarity range. Therefore, structural similarity alone is not sufficient for assessing UI similarity, and aesthetic factors must be considered. Based on experiments and performance analysis using a large-scale UI dataset, this study confirms that mobile UIs exhibit a strong concentration of high structural similarity, which reveals the limitations of relying solely on structural similarity for similarity analysis. Therefore, the Look and Feel Similarity Score is proposed as an auxiliary metric that combines structural similarity with six aesthetic factors, namely proportion, conciseness, order, rhythm, density, and balance, and its usefulness for detecting similarity among mobile UIs is demonstrated.

Keywords:

Mobile UI, Structural Similarity, Aesthetic Factor, Look and Feel, Similar Screen Retrieval

키워드:

모바일 UI, 구조 유사도, 심미적 요인, 유사 화면 검색

Ⅰ. 서 론

디지털 인터페이스에서 겉모습과 사용 감각을 의미하는 look and feel은 전통적으로 저작권 침해의 직접적 기준으로 자동 성립하지 않는다는 점이 미국 저작권 실무의 일반론이다. 미 저작권 청(USCO; United States Copyright OfficeUSCO)의 공식 안내는 웹페이지의 레이아웃·포맷·‘look and feel’ 자체를 통상 비보호 예시로 들며, 보호는 창작성 있는 구체적 표현에 한정된다고 명시한다[1]. 사법부 역시 ‘look and feel’ 일반을 포괄 보호하기보다, 보호 가능한 표현 요소의 실질적 유사성을 분해해 따지는 접근을 취해 왔다. 예컨대 Apple v. Microsoft는 그래픽 사용자 인터페이스(GUI; graphical user interface) 분쟁에서 추상적 인상 대신 표현 단위의 비교를 요구했고, Lotus v. Borland는 메뉴 계층과 같은 작동 방식을 저작권 비보호 영역으로 보았다[1],[2].

그럼에도 웹/전자상거래 맥락에서는 ‘look and feel’이 상표법인 트레이드드레스 트랙에서 다시 다뤄진다[2]. 하급심은 웹사이트의 전체적 인상을 출처 식별 적 전체 이미지로 파악해 심리 대상으로 넘긴 사례로 Blue Nile v. Ice.com이 있다[3]. Ingrid and Isabel v. Baby Be Mine에서는 마케팅 사이트의 ‘look and feel’이 보호 가능한 트레이드 드레스가 될 수 있음을 전제로, 구체 쟁점을 배심 판단에 맡겼다[4]. 최근에는 웹GUI의 ‘look and feel’ 자체를 둘러싼 저작권 주장이 사실심 단계로 진입한 사례도 확인된다. 2024년 델라웨어 연방지법의 Design with Friends v. Target 사건에서 법원은 가상 룸 플래너 웹서비스의 독창적 외관·구성의 복제 여부가 배심이 판단할 실질적 사실 쟁점이라 보아 요약 판결을 부분 기각하고 심리를 진행했다[5]. 이는 ‘스타일 일반’ 보호가 아니라, 구체적 선택과 배열의 조합이 창작성 기준에 이를 때 법적 심리의 대상이 될 수 있음을 보여주는 최신 예다.

한편, 사용자 인터페이스(UI; user interface)는 플랫폼 가이드라인과 디자인 시스템의 보급으로 레이아웃 구조의 상호 수렴이 두드러진다. 그 결과, 서로 무관한 서비스 간에도 구조적 유사도가 높게 관찰되며, ‘look and feel’이 정형화된 관습에 크게 의존한다는 점과 맞물려 저작권으로 포섭하기 어렵다는 현실적 난제가 존재한다. 본 연구가 제안하는 LFSS (Look and Feel Similarity score)는 이러한 법적 판정을 대체하려는 도구가 아니다. 본 연구는 레이아웃 그래프 기반 구조 유사도와 규칙 기반 심미 요인을 결합해, 인터페이스의 look and feel을 재현 가능하고 수치화된 참고 지표로 제시한다. 즉, 저작권/트레이드드레스 판단 기준이 아니라, 설계·검색·비교·사전 리스크 스크리닝에서 정량적 근거를 제공하는 보조 메트릭을 목표로 한다.

본 연구는 구조와 심미 두 축을 결합한 보조 지표를 제안한다. 문제는 레이아웃 검색으로 정식화하며, 임의의 쿼리 화면 A에 대해 정답은 오직 동일 화면의 미세 변형본 A′로 한정한다. 구조 유사도 s는 그래프 정합 기반으로 산출하고, 심미 유사도 y는 6가지 요인으로 Proportion, Conciseness, Order, Rhythm, Density 그리고 Equilibrium을 규칙 기반으로 계산한다[6],[7]. 실험은 RICO(Rico: A Mobile App Dataset for Building Data-Driven Design Applications) 대규모 모바일 UI 코퍼스를 활용한다[8].

본 논문의 구성은 다음과 같다. 제2장에서는 관련 연구를 정리하고, 제3장에서는 본 연구에서 사용하는 연구 방법과 제안 기법을 설명한다. 제4장에서는 시뮬레이션을 포함한 실험 설정과 성능 분석 결과를 제시하며, 제5장에서는 결론과 함께 향후 연구 방향을 논의한다.

Ⅱ. Look and Feel의 규범적 맥락과 UI구조 정형화

2-1 look and feel의 개념과 규범적 맥락

디지털 인터페이스의 look and feel은 전통적으로 추상적 인상 전체가 아니라 창작성 있는 구체 표현 단위로 판단하는 것이 미국 실무의 일반론이며, 이는 서론에서 정리한 USCO 가이드라인/핵심 판례/최근 동향으로 뒷받침된다.

USCO는 look and feel 자체를 비보호 예시로 명시한다[1]. GUI 분쟁에서는 표현 단위 비교를 요구한다. 전자상거래 맥락에서는 트레이드드레스로 다뤄진 사례가 있다[2]. 최근에는 사실심 단계로 진입한 사례도 있다.

본 연구는 이 규범적 전제를 받아들이되, “정형화된 관습 속에서 구조만으로는 구별력이 낮아질 수 있다”는 배경을 실증적·디자인 실무적 근거로 보완한다.

2-2 플랫폼 가이드라인이 만드는 ‘정형화된 관습’

현대 모바일/웹 UI는 운영체제(OS; Operating System)·프레임워크 제공자가 배포하는 디자인 가이드라인을 중심으로 수렴한다. Apple Human Interface Guidelines (HIG)는 레이아웃 그리드, 정렬·간격, 내비게이션 패턴인 탭 바, 내비게이션 바 등을 일관된 재사용 규칙으로 제시한다. 이는 설계자가 동일한 구성요소·배치 원리를 공유하도록 유도하여, 앱 간 레이아웃 골격이 닮아가게 만든다[9].

Material Design 3 역시 하단 내비게이션 바·툴바·레이아웃 파운데이션을 세부 규칙까지 제공하며, 유사한 구조적 틀의 반복 사용을 장려한다. 결과적으로 많은 앱이 동일한 내비게이션/콘텐츠 배치 패턴을 공유하고, 이는 구조 유사도의 상향 평준화로 연결된다[10],[11].

사용성 측면에서도 일관성과 표준은 핵심 휴리스틱으로 반복 확인되어 왔다. 설계가 관습적 표준을 따를수록 학습부담이 줄고 예측 가능성이 높아지므로, 실무는 표준 패턴 재사용을 권한다. 이 역시 구조의 수렴 압력으로 작용한다[12].

2-3 UI 구조 정형화의 데이터적 배경

대규모 모바일 UI 코퍼스 RICO는 실제 생태계에서 유형화된 화면 구조가 광범위하게 반복됨을 보여주며, 디자인 검색/생성/코드화 등 패턴 중심 연구의 토대가 되었다. 또한, 레이아웃 품질을 학습해 평가하는 틀도 제시된 바 있어, 구조가 비슷한 경우 심미 축으로 보완하는 본 연구의 방향과 연결된다[13]. 이러한 반복·규칙성은 서로 무관한 앱 사이에도 레이아웃 골격이 유사해지는 배경을 설명하고, 결과적으로 그래프 기반 구조 유사도가 넓은 구간에서 높게 형성되는 경향의 자료적 근거가 된다[8].

또한 HIG/Material이 권장하는 상·하단 바, 그리드, 간격 체계는 컴포넌트 수준의 반복성을 강화한다. 이처럼 표준화된 구성요소 + 재사용 규칙의 결합은, 개별 브랜드/도메인이 달라도 상위 구조가 비슷해질 가능성을 높인다[11],[14].

2-4 시지각 원리와 look and feel의 ‘심미 축’

반대로, 사람은 게슈탈트 시지각 원리(근접·유사·공통영역·폐쇄 등)에 따라 시각적 그룹화/무게중심/균형을 민감하게 지각한다. 웹 인터페이스의 심미성은 단일 축이 아니라 다차원적 구성으로 평가하는 접근이 일반적입니다[15]. 일부 연구에서는 웹 인터페이스의 심미성을 몇 개의 하위 요인으로 구성해 평가한다[16]. 동일한 골격을 공유하더라도 요소의 비율·간격·리듬·밀도·균형의 차이는 다른 인상을 만들어 낸다[17]. 이는 M_1-M_6과 같은 규칙 기반 심미 요인이 추가적인 분별 신호로 작동할 수 있음을 의미한다[15],[16],[18].

따라서 본 연구는 모바일 UI 구조의 정형화의 배경을 조사 분석 하고, 구조 유사도 s와 심미 유사도 y의 보조 결합 프레임을 제안한다.

Ⅲ. 제안 방법: 구조·심미 결합 기반 LFSS 산출

그림 1은 제안하는 유사도 분석 파이프라인을 단계별로 나타낸 흐름도다. 1단계에서는 라벨링된 RICO UI 화면으로부터 박스 정보를 병합·정규화하여 정규화 박스 입력을 만든다. 2단계에서는 이 입력을 구조 유사도 모듈과 심미 유사도 모듈에 병렬로 투입한다. 3단계에서는 두 유사도 s와 y를 결합하여 최종 LFSS를 계산하고, 이를 이용해 UI 유사도 검색 성능과 점수 분포를 평가한다.

Fig. 1.

Overall LFSS pipeline (Phase 1-3)

Table 1.

Dataset summary (RICO-based)

3-1 데이터 구성

본 연구는 모바일 애플리케이션 UI 화면으로 구성된 공개 데이터셋 RICO를 기반으로 실험용 파생 전처리를 수행하였다[8]. 원천 JavaScript Object Notation (JSON)은 총 66,269개이며, 이 가운데 유효 노드가 존재하는 화면은 65,537개다. 이후 실험의 정확성과 일관성을 위해 빈 화면, 풀스크린 하나의 박스가 화면 전체를 덮는 경우 그리고 동일 박스 제외 규칙을 적용하였다. 이 과정을 거쳐 사용 화면(base)은 54,886개로 확정하였다.

증강은 검색 문제의 정답을 엄밀히 정의하기 위해 화면별 1 대 1로 수행하였다. 각 base 화면에 대해 구조 좌표의 변동 및 소수 박스 드롭과 같은 경미한 변형을 적용하여 증강본 A′을 생성하였고, 그 결과 증강은 54,886개가 추가되어 총 109,772 화면을 확보하였다. 증강은 동일 ID의 변형본만 정답으로 간주되도록 설계하였다.

3-2 구조 유사도 모듈(LayoutGMN)

구조 유사도 s는 UI 화면의 박스 레이아웃을 그래프 구조로 변환한 뒤, 그래프 매칭 네트워크를 통해 계산한다[6]. 화면의 UI 요소를 축 정규화된 박스 좌표로 표현하고, 각 요소를 그래프의 노드로 사용한다. 노드 특성은 좌표와 크기 등 기본 기하 정보로 구성하며, 부모·자식 관계와 인접·정렬 관계를 이용하여 엣지를 정의한다. 이렇게 얻은 두 화면의 그래프 쌍을 입력으로 하여, 네트워크가 두 레이아웃 간 구조적 대응 정도를 스칼라 값 s로 출력한다.

학습 단계에서는 앵커 A, 정답 A′, 네거티브 집합 N으로 이루어진 트리플릿을 사용한다. 유사도 s를 거리 표현으로 변환한 뒤, 마진 기반 트리플릿 손실을 적용하여 A–A′ 쌍은 가깝게, A–B 쌍은 일정 마진 이상 떨어지도록 학습하며, 식 (1), (2)에 정리되어 있다. 추론 시에는 쿼리 A와 갤러리 후보 X들에 대해 s(A, X)를 계산한 후, 유사도 내림차순으로 정렬하여 상위 K개 후보를 반환하고, 정답 A′가 상위 K위에 포함되는지를 기준으로 성능을 평가한다. 여기서 m은 마진 하이퍼파라미터로, 음성 샘플이 양성 샘플보다 최소 m만큼 더 멀어지도록 유도한다.

d A, X = 1 - s A, X

(1)

L t r i p l e t = max 0, d A, A ′ - d A, N + m

(2)

3-3 심미 유사도 모듈

심미 유사도 모듈은 UI 레이아웃 상의 박스 정보를 입력으로 하는 비학습 규칙 기반 여섯 요인인 Proportion, Conciseness, Order, Rhythm, Density 그리고 Equilibrium을 M_1-M_6으로 할당하여 구성된다[7]. 각 요인은 0~1 범위로 정규화되며, 값이 클수록 해당 심미 특성이 양호하다는 것을 의미한다. 입력은 화면 크기에 대해 좌표와 크기를 0–1 범위로 정규화한 박스 표현(x, y, w, h)이고, 박스 수가 0인 화면은 2절과 3-1절에서 기술한 전처리 과정에서 이미 제외된 상태다.

식 (3)은 화면 대비 각 박스의 면적 비율이 얼마나 균형 있게 분포하는지를 나타내는 요인이다. 화면 전체 면적 중 일부 큰 박스 1–2개가 대부분을 차지하면 면적 분포의 분산이 커지며 M_1값이 낮아지고, 여러 박스가 과도한 쏠림 없이 분산될수록 값이 높아진다. 식 (3)은 박스 수 n, i번째 박스 면적 Aᵢ, 화면 전체 면적 A_total을 이용해 M_1의 원시값을 정의하며, 이 값은 분포 기반 min–max 정규화를 통해 0–1 범위로 재정규화한다. 박스가 하나(n=1)인 화면은 면적 분산이 0이므로, 단일 요소가 화면을 대표하는 구조로 해석하여 M_1=1로 처리한다. 여기서 n은 화면 내 박스 개수, A_i는 i번째 박스의 면적, A_total은 화면 전체 면적이며, Var(·)는 분산, Var_max는 분산 정규화를 위한 최대 분산 상수이다.

M 1 = 1 - V a r A i A t o t a l i = 1 n V a r max

(3)

식 (4)는 화면에 배치된 박스 수에 따른 간결성을 나타낸다. 박스 수 n이 적을수록 화면이 간결하다고 보고, 요소 수가 증가할수록 값이 감소하도록 정의한다. 다만 요소 수가 많은 경우 값이 급격히 떨어지는 것을 방지하기 위하여 식 (4)와 같이 자연로그를 사용하여 감소 속도를 완화한다. 여기서 n은 화면 내 박스 개수로서 자연수(n≥1)이며, 자연로그 ln(⋅)는 실수 함수이지만 이산 입력 n에 대해 값을 계산하여 사용한다. 로그를 적용하면 n이 증가할수록 값은 감소하되 감소율이 점차 완만해지는(초기 급감 후 완만) 형태가 되어, 선형 감소 대비 과도한 급락을 완화한다. n_ref는 정규화를 위한 기준 박스 수(본 연구의 설정 상한값)이다.

M 2 = 1 - ln ⁡ n ln ⁡ n r e f n ≥ 1

(4)

식 (5)는 수평·수직 정렬이 어느 정도 지켜지는지를 나타내는 요인이다. 중심 좌표가 대표 정렬선과의 차이가 일정 임계치 이하인 박스의 비율을 Order 값으로 사용한다. 대표 정렬선은 중심 좌표의 군집이나 히스토그램 피크 등을 통해 추정하고, 정렬선과의 차이가 임계치 이하인 박스 개수를 N_aligned라 할 때 식 (5)와 같이 정의한다. 박스가 하나뿐인 경우(n=1)에는 정렬 구조를 논할 수 없으므로 완전 정렬 상태로 간주하여 M_3=1로 처리한다. 여기서 N_aligned는 사전 정의한 정렬 허용오차 이내에서 동일 정렬선(수평 또는 수직)에 정렬된 것으로 판정된 박스의 개수이다.

M 3 = N a l i g n e d n

(5)

식 (6)은 화면을 네 개의 사분면으로 나누었을 때, 각 사분면에 배치된 박스의 위치와 면적 분포가 얼마나 규칙적으로 반복되는지를 측정한다. 특정 영역에만 요소가 몰려 있으면 리듬이 약한 것으로 보아 값이 낮아지며, 네 사분면에 걸쳐 요소가 균형 있게 배치되고 패턴이 유사하게 반복될수록 값이 커진다. 식 (6)은 사분면별 중심 좌표와 면적 분포를 바탕으로 이러한 반복성을 수치화한 표현이다. 여기서 u,v는 사분면 인덱스, S는 서로 다른 사분면 쌍(u, v)의 집합(총 6쌍)이며, X′_u와 Y′_u는 u사분면에서 계산한 박스 중심 위치의 정규화 값, A′_u는 u사분면의 면적 분포(면적 비율)의 정규화 값을 의미한다.

M 4 = 1 - 13 16 ∑ u, v ∈ S X u ′ - X v ′ + 16 ∑ u, v ∈ S Y u ′ - Y v ′ + 16 ∑ u, v ∈ S A u ′ - A v ′

(6)

식 (7)은 화면 대비 총 박스 면적의 비율로 정의되며, 레이아웃의 밀집도를 나타낸다. 화면 면적에 대한 모든 박스 면적의 합을 사용하여 식 (7)과 같이 계산하며, 박스가 중첩되지 않는다는 이상적 가정 아래에서는 0–1 범위에 존재한다. 실제 데이터에서는 경계 효과나 좌표 정규화 오차 등으로 인해 범위를 벗어나는 값이 발생할 수 있어, 필요에 따라 0과 1 사이로 절삭하여 사용한다. 여기서 a_i는 i번째 박스의 면적, A_interface는 화면 전체 면적(정규화 좌표계에서의 기준 면적)이며, 따라서 M5는 화면 대비 총 점유율을 의미한다.

M 5 = ∑ i = 1 n a i A i n t e r f a c e

(7)

식 (8)은 화면 중심을 기준으로 한 배치의 균형 정도를 나타낸다. 화면 중심과 각 박스 중심 사이의 평균 거리를 화면 대각선 길이로 나누어 정규화하고, 중심에 가까울수록 높은 값을 갖도록 정의한다. 여기서 c_i는 i번째 박스의 중심 좌표, c_screen은 화면 중심 좌표, d_max는 정규화를 위한 최대 거리로 본 연구에서는 화면 대각선 길이(정규화 좌표계에서 √2)로 둔다. 정규화 좌표계에서 화면의 대각선 길이는 항상 √2로 일정하므로, 본 연구에서는 d_max를 √2로 고정하여 모든 화면의 거리를 동일한 기준에서 정규화한다.

M 6 = 1 - 1 n ∑ i = 1 n c i - c s c r e e n d max, d max = 2

(8)

이상의 6요인은 3-4절에서 가중합으로 결합되어 심미 유사도 y를 형성하며, 구조 유사도 s와의 결합을 통해 최종 유사도 z로 리랭크에 사용된다[7],[15]-[17],[19].

3-4 결합 점수 LFSS

현대 UI는 플랫폼 가이드라인과 디자인 시스템의 영향으로 구조가 스탠다드화되어 구조적 유사도가 전반적으로 높게 측정된다[9]-[12],[14],[18]. 또한 look and feel이 실제로 법적 판단의 대상이 된 사례가 존재한다는 점을 고려하여 최종 판단에서 심미 지표를 보조적으로 함께 사용하는 방식을 제안한다.

z = a ⋅ s + b ⋅ y, a, b ≥ 0, a + b = 1

(9)

이러한 배경에서 구조 유사도 s와 심미 유사도 y를 가중 합한 결합 점수 LFSS를 보조 지표로 도입한다. LFSS는 식 (9)와 같이 z = a·s + b·y로 정의하며, 계수 a와 b는 적용 맥락과 리스크 허용 수준에 따라 조정 가능한 파라미터로 둔다. 구조 유사도 s는 기본적인 레이아웃 유사성을 나타내는 주축으로 유지하고, 심미 유사도 y는 상향 평준화된 구조 구간에서 추가적인 분별 신호를 제공하는 보조 축으로 위치한다.

Ⅳ. 실험 및 성능 분석

모바일 UI에서 구조가 정형화 되었는지, 그리고 심미 요인이 유사도 지표로 사용될수 있는지를 검증하기 위해 전수 검색과 통계 실험을 수행하였다.

처리와 분할은 3-1절의 규칙을 그대로 사용한다. 쿼리 54,886개, 각 쿼리의 갤러리는 정답 A′ 1 + 네거티브 100 = 101개로 구성하여 검색을 수행한다. 구조 거리 d=1−s는 식 (1), 학습 손실은 식 (2)를 따른다. 상위 후보 분리도는 본 절에서 상위권 동점·근접도를 판단하는 지표로 사용한다. 심미 유사도 y는 3-3절의 6요인 가중합으로 정의하고, 필요 시 정규화 후 결합 점수 식 (9)로 랭크한다.

구조 검색 성능은 그림 2·그림 3과 같다. 정답 순위는 1위에 극도로 밀집하고, 상위 후보 분리도 분포는 짧은 꼬리를 보인다. 즉, 구조 축만으로도 정답 회수율은 사실상 완전하지만, 상위 구간 포화 탓에 미세 분별을 강화할 보조 축이 필요하다.

Fig. 2.

Structural retrieval performance (Recall@K)

Fig. 3.

Distribution of the top-candidate separation (Δ)

그림 4는 화면 내 면적 배분의 균형이 실제 데이터에서 차이를 가진다는 점을 보여준다. 구조 골격이 유사해도 일부 화면은 소수의 큰 요소가 시야를 과점하고, 다른 화면은 미세한 요소들이 과도하게 쪼개져 배치된다.

Fig. 4.

Distribution of M_1 (Proportion)

그림 5는 요소 개수 기반의 간결성이 0~1 전 범위에 걸쳐 고르게 분포함을 보여준다. 동일한 구조라도 불필요한 구성요소가 많은 화면과 군더더기가 적어 읽기 쉬운 화면이 공존하며, 이는 사용자 피로감과 가독성의 체감 차이로 직결된다.

Fig. 5.

Distribution of M_2 (Conciseness)

그림 6은 0·1·2·3의 이산 피크가 뚜렷해 정렬 준수도가 구간별로 층화되어 있음을 보인다. 같은 골격이라도 배치의 가지런함과 정렬의 일관성은 완성도에 대한 인상을 크게 좌우하며, 실제로 화면들 사이에 그 차이가 규칙적으로 발생한다.

Fig. 6.

Distribution of M_3 (Order)

그림 7은 리스트·카드 반복의 간격과 크기 일관성이 화면별로 유의미하게 다르다는 사실을 드러낸다. 구조가 유사하더라도 반복의 질이 흔들리는 화면은 즉각적인 불안정감을 주는 반면, 일정한 리듬을 유지하는 화면은 안정적 인상을 제공한다.

Fig. 7.

Distribution of M_4 (Rhythm)

그림 8은 화면 대비 UI 박스의 점유율을 측정하는 지표다. 본 히스토그램은 상대 분포를 표시한다. 따라서 0은 데이터셋 중앙 수준, 음수는 중앙값보다 성긴(희소) 화면, 양수는 과밀한 화면을 뜻한다. 좌측의 높은 봉우리는 점유율이 0(또는 0에 근접)인 화면들이 정규화 과정에서 동일한 음수값으로 집중된 결과로, 여백이 큰 화면이 상당수 존재함을 보여준다. 반대로 오른쪽 꼬리는 리스트·그리드형 등 정보량이 많은 화면에서 나타나는 과밀 구간을 반영한다. 이 분포는 M_2(간결성)과 음의 상관 경향을 보여, 구조가 유사한 상위 후보들 사이에서 정보량 차이를 분별하는 보조 축으로 유효하다. 이는 시각적 혼잡이 탐색·이해 과정에서 인지적 부담을 높일 수 있다는 시지각 연구와도 일치한다[19].

Fig. 8.

Distribution of M_5 (Density)

그림 9는 시각적 무게중심이 중심 집중형과 분산형으로 뚜렷이 갈리는 패턴을 제시한다. 구조가 유사해도 초점을 자연스럽게 모으는 화면과 시선을 과도하게 산란시키는 화면의 체감 차이는 크며, 이는 실제 데이터에서 일관되게 관찰된다.

Fig. 9.

Distribution of M_6 (Equilibrium)

그림 10은 6요인의 피어슨 상관행렬을 제시한다. 값이 양수일수록 두 요인이 같이 커지고 같이 작아지는 경향, 음수일수록 한쪽이 커질 때 다른 쪽이 작아지는 경향, 0에 근접할수록 선형적 관련이 약함을 의미한다. 히트맵은 가로·세로 축 모두 M_1-M_6순서로 배치되며, 밝은 색조는 양의 상관, 보라색 계열은 음의 상관을 나타내고, 대각선은 자기상관(1.0)다. 상관계수는 단위·스케일에 불변이므로 비교의 공정성은 유지된다.

Fig. 10.

Correlation matrix of the six factors

본 데이터에서는 강한 다중공선성은 관찰되지 않았고, 전반적으로 약∼중간 수준의 상관이 주를 이룬다. 주요 패턴은 다음과 같다. M_2(간결성)–M_5(밀도)는 약한 음의 상관으로, 요소가 줄어 간결해질수록 화면 점유율이 낮아지는 경향을 반영한다. M_3(질서)–M_4(리듬)는 약한 양의 상관으로, 반복의 일관성이 높을수록 정렬·간격 관리가 수월해지는 구조적 연계를 보여준다. M_5(밀도)–M_6(균형)는 약한 양의 상관으로, 전역적으로 화면이 고르게 차면 균형도 좋아지는 경향이 확인된다. 반대로 M_4(리듬)–M_6(균형)는 약한 음의 상관을 보여, 특정 영역에 치우친 반복은 무게중심을 흔들 수 있음을 보인다. 한편 M_1(비율)은 대부분의 요인과 낮은 상관을 보여 비교적 독립 축으로 기능한다. 이러한 상관 구조는 가중 설계 시 중복 가중을 피하고, 부호가 다른 축을 상위권 동점 해소에 우선 활용하는 전략의 타당성을 뒷받침한다.

그림 11은 3-3절에서 정의한 여섯 요인의 가중합으로 산출한 심미 유사도 y의 분포를 제시한다. y가 클수록 데이터셋 내부에서 상대적으로 보기 좋은 화면으로 해석한다. 분포는 가운데에 표본이 많이 모이는 중앙집중형이며, 양쪽 꼬리가 관찰되어 값이 한쪽 끝에만 몰려 있지는 않다. 이 형태는 구조 유사도 s가 비슷하게 묶이는 상위 구간에서, y를 보조 기준으로 순서를 정리할 필요성을 보인다.

Fig. 11.

Distribution of the aesthetic weighted score (y)

Ⅴ. 결 론

본 연구는 현대 모바일 UI의 구조가 플랫폼 가이드라인과 디자인 시스템의 보급으로 정형화되어 있다는 전제에서 출발하여, 구조 유사도만으로는 상위 결과가 동점·근접으로 몰려 미세 분별이 어렵다는 한계를 대규모 실험을 통하여 검증하였다.

구조 스탠다드화에 따른 구별력 저하 문제를 대규모 설정에서 실증하고, 이를 보완할 심미 축의 필요성을 실험과 성능 분석을 통해 검증하였다. 특히 구조 유사도 상위권에서 점수가 동점 또는 근접으로 군집되는 구간에서는, 심미 요인이 후보 간 상대적 차이를 제공하는 보완 신호로 작동할 수 있음을 확인하였다. 심미 요인을 일관된 계산·정규화 절차로 벡터화하고 가중합 점수로 집계하여, 재현 가능한 형태의 look and feel 지표를 제시하고, 구조 유사도 s와 심미 유사도 y를 결합하는 LFSS의 사용 맥락을 적용하여 서비스 적용 시 동점 해소/리랭크라는 구체적 용도를 제시하였다.

데이터는 RICO 계열로 모바일 화면 중심이며, 타 도메인·플랫폼으로의 일반화는 추가 검증이 필요하고, 심미 요인은 규칙 기반으로 설계되어 가중 및 임계 선택에 따른 민감도가 존재하므로, 사용자 설문/실험 기반의 주관 평가가 필요하지만 본 연구에서는 다루지 않았다.

따라서 향후 연구에서는 실제 사용자 연구를 수행하여, 사람들이 선택한 결과와 본 연구의 심미 유사도 y의 일치 여부를 검증하고, 사용자 경험(UX; User Experience) 관점의 유사도를 별도로 정의하고 측정한 성능 분석을 통하여 사용자들의 실사용 적합성을 높이며, UI/UX 침해 예방과 사전 리스크 점검 기법을 연구하고자 한다.

Acknowledgments

이 논문은 2025학년도 홍익대학교 학술연구진흥비에 의하여 지원되었음.

References

U. S. Copyright Office, Circular 66: Copyright Registration of Websites and Website Content, Copyright Office, Washington, DC: U. S. , 2014.
S. D. Locke, “Trade Dress in the Age of E-Commerce: The Challenge of Protecting the ”Lock and Feel“ of Websites and Mobile Apps,” Albany Law Journal of Science and Technology, Vol. 27, No. 3, pp. 213-231, 2017.
Blue Nile, Inc. v. Ice.com, Inc., 478 F. Supp. 2d 1240, No. C06-1002RSL (W.D. Wash. Jan. 18, 2007).
Ingrid & Isabel, LLC v. Baby Be Mine, LLC, 70 F. Supp. 3d 1105, Case No. 13-cv-01806-JCS (N.D. Cal. Oct. 1, 2014).
Design with Friends, Inc. v. Target Corporation, No. 1:21-cv-01376-SB, Memorandum Opinion (D. Del. Sept. 6, 2024).
A. G. Patil, M. Li, M. Fisher, M. Savva, and H. Zhang, “LayoutGMN: Neural Graph Matching For Structural Layout Similarity,” in Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), Nashville: TN, pp. 11043-11052, 2021. [https://doi.org/10.1109/CVPR46437.2021.01090]
L. Deng and G. Wang, “Quantitative Evaluation of Visual Aesthetics of Human–Machine Interface Layout,” Computational Intelligence and Neuroscience, 9815937, March 2020. [https://doi.org/10.1155/2020/9815937]
B. Deka, Z. Huang, C. Franzen, J. Hibschman, D. Afergan, Y. Li, ... and R. Kumar, “Rico: A Mobile App Dataset for Building Data-Driven Design Applications,” in Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology (UIST), Québec City: Canada, pp. 845-854, 2017. [https://doi.org/10.1145/3126594.3126651]
Apple Inc. Human Interface Guidelines [Internet]. Available: https://developer.apple.com/design/human-interface-guidelines, .
Google. Material Design 3 - Navigation Bar [Internet]. Available: https://m3.material.io/components/navigation-bar/overview, .
Google. Material Design 3 - Layout Foundations [Internet]. Available: https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout, .
Nielsen Norman Group. Maintain Consistency and Adhere to Standards [Internet]. Available: https://www.nngroup.com/articles/consistency-and-standards/, .
N. Inoue, K. Kikuchi, E. Simo-Serra, M. Otani, and K. Yamaguchi, “LayoutDM: Discrete Diffusion Model for Controllable Layout Generation,” in Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), Vancouver: Canada, pp. 10167-10176, 2023. [https://doi.org/10.1109/CVPR52729.2023.00980]
Apple Inc. Human Interface Guidelines - Layout [Internet]. Available: https://developer.apple.com/design/human-interface-guidelines/layout
M. Zen, N. Burny, and J. Vanderdonckt, “A Quality Model-Based Approach for Measuring User Interface Aesthetics with Grace,” Proceedings of the ACM on Human–Computer Interaction, Vol. 7, No. EICS, pp. 1-47, June 2023. [https://doi.org/10.1145/3593224]
X. Wang, M. Tong, Y. Song, and C. Xue, “Utilizing Multiple Regression Analysis and Entropy Method for Automated Aesthetic Evaluation of Interface Layouts,” Symmetry, Vol. 16, No. 5, 523, 2024. [https://doi.org/10.3390/sym16050523]
X. Chen, Y. Lu, and G. Hao, “Balanced Aesthetics: How Shape, Contrast, and Visual Force Affect Interface Layout,” International Journal of Human–Computer Interaction, Vol. 40, No. 24, pp. 8750-8763, 2024. [https://doi.org/10.1080/10447318.2023.2289294]
Nielsen Norman Group. 5 Principles of Visual Design in UX [Internet]. Available: https://www.nngroup.com/articles/principles-visual-design, .
Q. Liu, Y. Wang, Y. Bai, M. Yu, Z. Cao, X. Yu, and L. Ding, “Development of a Quantitative Measurement on Visual Clutter in See through Display,” Frontiers in Neuroscience, Vol. 17, 1138225, 2023. [https://doi.org/10.3389/fnins.2023.1138225]

저자소개

이명재(Myeong-Jae Lee)

2025년：홍익대학교 게임학부 게임소프트웨어학과 학사

2025년～현 재: 홍익대학교 일반대학원 게임학과 석사과정

※관심분야：정보보호(Personal Information), 블록체인(Blockchain), 워터마킹(Watermarking) 등

김혜영(Hye-Young Kim)

1989년～1998년: (주) 현대전자 S/W연구소 책임연구원

2001년～2004년: 청강문화산업대학 컴퓨터 게임학과 전임교수

2005년～2006년: Wright State University PostDoctoral Fellow

2007년～현 재: 홍익대학교 게임학부 게임소프트웨어전공 교수

Category	Count (n)	Note
Raw JSON (RICO)	66,269	semantic_annotations full crawl [8]
Valid screens (with nodes)	65,537	after parsing
Used screens (base)	54,886	after removal of empty, full-screen single box, identical box hash
Augmented screens (aug)	54,886	one-to-one A′ per each base screen
Total (base + aug)	109,772	basis for all later stages (04/05/07)